ModelList. Flexbox enhancements.

beachio · Feb 1, 2019 · 0b70445 · 0b70445
1 parent 8e63db4
commit 0b70445
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/src/components/mainArea/models/ModelsList/ModelsList.js b/src/components/mainArea/models/ModelsList/ModelsList.js
@@ -151,14 +151,13 @@ export default class ModelsList extends Component {
                     </div>
                     <div styleName="fields">{model.fields.length}</div>
                     <div styleName="updated">{updatedStr}</div>
-                    {
-                      isEditable &&
-                        <div styleName="controls">
-                          <div styleName="remove control-icon" onClick={event => this.onRemoveClick(event, model)}>
-                            <InlineSVG styleName="cross"
-                                      src={require("assets/images/icon-delete.svg")}/>
-                          </div>
+                    {isEditable &&
+                      <div styleName="controls">
+                        <div styleName="remove control-icon" onClick={event => this.onRemoveClick(event, model)}>
+                          <InlineSVG styleName="cross"
+                                    src={require("assets/images/icon-delete.svg")}/>
                         </div>
+                      </div>
                     }
                   </div>
                 );

diff --git a/src/components/mainArea/models/ModelsList/ModelsList.sss b/src/components/mainArea/models/ModelsList/ModelsList.sss
@@ -25,7 +25,7 @@
 
     &:hover
       .remove
-        opacity: 1
+        opacity: 1 !important
 
     &:nth-child(2n)
       background: #FCFCFC
@@ -40,7 +40,6 @@
       left: -25px
       top: 50%
       transform: translateY(-50%)
-
 
     .type
       flex: 1 1 auto
@@ -60,13 +59,33 @@
       margin-top: 3px
 
     .fields
-      flex-shrink: 0
-      max-width: 110px
-      width: 100%
+      flex-shrink: 0.7
+      width: 110px
 
     .updated
-      width: 180px
-      flex-shrink: 0
+      min-width: 180px
+      max-width: 220px
+      width: 25%
+
+    .controls
+      display: flex
+      flex-flow: row nowrap
+      align-items: center
+      margin-left: auto
+
+      .remove
+        opacity: 0
+        margin-left: 20px
+        transition: opacity .2s ease
+
+        .cross
+          height: 18px
+          width: 18px
+
+      .control-icon
+        width: 18px
+        height: 18px
+        cursor: pointer
 
   &-header
     border-bottom: 1px solid #e8e8e8
@@ -87,7 +106,7 @@
       flex: 1 1 auto
 
     .updated
-      width: 218px
+      margin-right: 38px
 
 .input-wrapper
   margin-top: 20px
@@ -111,24 +130,4 @@
   font-size: 14px
   color: #2C2C30
   line-height: 30px
-  text-align: left
-
-.controls
-  display: flex
-  flex-flow: row nowrap
-  align-items: center
-  margin-left: auto
-
-.remove
-  opacity: 0
-  margin-left: 20px
-  transition: opacity .2s ease
-
-  .cross
-    height: 18px
-    width: 18px
-
-.control-icon
-  width: 18px
-  height: 18px
-  cursor: pointer
+  text-align: left