Fixed more flexible css

JamBrain · Jan 23, 2018 · c756f03 · c756f03
1 parent 1aaa0d5
commit c756f03
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/com/content-event/event-idea.js b/src/com/content-event/event-idea.js
@@ -121,9 +121,11 @@ export default class ContentEventIdea extends Component {
 
 		return (
 			<div class="-item">
-				<div class="-x" onclick={this.removeIdea.bind(this, id)}><SVGIcon>cross</SVGIcon></div>
 				<SVGIcon>ticket</SVGIcon>
 				<div class="-text" title={idea}>{idea}</div>
+				<div class="-x" onclick={this.removeIdea.bind(this, id)}>
+					<SVGIcon>cross</SVGIcon>
+				</div>
 			</div>
 		);
 	}

diff --git a/src/com/content-event/event-idea.less b/src/com/content-event/event-idea.less
@@ -9,10 +9,11 @@
 	}
 
 	& > .idea-form {
-		width: 26em;
+		max-width: 30em;
 		margin-top: 0.5em;
 		padding: 0em 0em 0em 0.5em;
 		display: flex;
+		flex-wrap: wrap;
 
 		& > .-suggestion {
 			border: 1px solid @COL_NLLL;
@@ -21,13 +22,16 @@
 			padding: 0.5em;
 			display: inline-block;
 			flex-grow: 1;
+			min-width: 20;
+			margin-right: 0.5em;
+			margin-top: 0.5em;
 		}
 
 		& > .ui-button {
 			color: @COL_NDD;
 			border: 1px solid;
 			padding: 0.5em;
-			margin: 0em 0.5em;
+			margin-top: 0.5em;
 
 			&:hover,
 			&:focus {
@@ -39,19 +43,23 @@
 	}
 
 	& > .idea-mylist {
-		width: 26em;
+		max-width: 30em;
 
 		& > .-item {
 			padding: 0.125em 0em 0em 1.0em;
 			margin-top: 0.5em;
+			display: flex;
+
+			& > svg {
+				margin-top: 0.2em;
+				line-height: 1em;
+			}
 
 			& > div {
 				display: inline-block;
 			}
 
 			& > .-x {
-				position: relative;
-				float: right;
 				z-index: 1;
 
 				line-height: 1.0em;
@@ -60,18 +68,19 @@
 				cursor: pointer;
 
 				&:hover {
-					color:#F00;
+					color:@COL_A;
 				}
 
 				&:active {
-					color:#FFF;
-					text-shadow: 0 0px 6px #F00;
+					color:@COL_A;
+					text-shadow: 0 0px 6px @COL_A;
 				}
 			}
 
 			& > .-text {
 				padding:0 0.25em;
 				font-style: italic;
+				flex-grow: 1;
 			}
 		}
 	}