CHE-6405 fix styles for small displays

Signed-off-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · Dec 27, 2017 · aee0663 · aee0663
1 parent e94c343
commit aee0663
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 14 deletions.
diff --git a/dashboard/src/app/workspaces/create-workspace/create-workspace.styl b/dashboard/src/app/workspaces/create-workspace/create-workspace.styl
@@ -1,17 +1,21 @@
 .create-workspace-progress
-  position: absolute;
-  top: 56px;
-  z-index: 2;
+  position absolute
+  top 56px
+  z-index 2
 
-.create-workspace-content
+md-content.create-workspace-content
   background-color $very-light-grey-background-color !important
-  padding 15px;
+  overflow auto
+  padding 15px
 
   .che-label-container-label-name
     text-transform uppercase
     color $grey-input-label-color !important
     font-weight bold !important
 
+  .che-label-container-content
+    min-width 850px
+
   .create-workspace-content-hidden
     visibility hidden
 

diff --git a/dashboard/src/app/workspaces/create-workspace/stack-selector/stack-selector.styl b/dashboard/src/app/workspaces/create-workspace/stack-selector/stack-selector.styl
@@ -10,7 +10,7 @@
       margin 0
 
     & > *:not(:first-child)
-      margin-left 32px
+      margin-left 40px
 
     che-button-default
 

diff --git a/dashboard/src/components/widget/input/che-input-box.styl b/dashboard/src/components/widget/input/che-input-box.styl
@@ -1,5 +1,4 @@
 .che-input-box > div
-  max-width 800px
   min-height 70px
   .che-input-box-desktop
     display flex

diff --git a/dashboard/src/components/widget/label-container/che-label-container.styl b/dashboard/src/components/widget/label-container/che-label-container.styl
@@ -3,27 +3,29 @@
   padding 25px 0
   border-bottom 1px solid $list-separator-color
 
+  .che-input-box
+    height 50px
+
   &:not(.che-label-container-not-last):last-child, &.che-label-container-last
     border-bottom none
 
   .che-label-container-label
+    white-space normal
     line-height 36px
-    min-width 250px
-    width 250px
+    width 200px
 
   .che-label-container-label-name
     color $label-secondary-color
     font-weight 700 !important
     letter-spacing 1.3px
-    margin-right 10px
+    margin-right 5px
 
   .che-label-container-description
     display inline-block
     cursor pointer
     width 20px
     height 20px
     line-height 20px
-    margin-left 15px
     text-align center
     color $white-color
     border-radius 3px

diff --git a/dashboard/src/components/widget/search/search-input.styl b/dashboard/src/components/widget/search/search-input.styl
@@ -1,7 +1,7 @@
 .search-input-component
   background-color $white-color
   overflow hidden
-  width 150px
+  max-width 150px
   min-width 34px
   min-height 36px
   max-height 36px
@@ -18,7 +18,7 @@
     font-size 16px
 
   .search-icon
-    padding-left 10px
+    padding-left 5px
 
     i
       color darken($stroke-color, 17%) !important
@@ -35,9 +35,10 @@
     height inherit
     font-size 12px
     text-align left
-    padding 0 5px 0 5px
+    padding 0 6px 0 6px
     text-overflow ellipsis
     color $default-dark-color
+    background-color inherit
 
   .search-input input::-webkit-input-placeholder
     position relative