Materialize search results pane

pydio · Jul 11, 2016 · 3ba426f · 3ba426f
1 parent 42be6f6
commit 3ba426f
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 101 deletions.
diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/components/searchengine.less b/core/src/plugins/gui.ajax/res/themes/orbit/css/components/searchengine.less
@@ -136,8 +136,9 @@
     .search_label.close{
       display: block;
       font-size: 20px;
-      padding: 15px 10px 10px;
-      color: white;
+      padding: 15px 10px 14px;
+      border-bottom:1px solid #eee;
+      border-right:1px solid #eee;
     }
 
     .close_results.icon-remove-sign,
@@ -160,11 +161,14 @@
       }
 
       span.toggle_button.open,span.toggle_button.close{
-        background-color: white;
-        border-radius: 20px;
-        padding: 3px 11px;
-        font-size: 0.8em;
+        display: inline-block;
+        padding: 5px 16px;
+        font-weight: 500;
         cursor: pointer;
+        border-radius: 1px;
+        span.icon-chevron-left{
+          display: none;
+        }
       }
 
       span.toggle_button.close{
@@ -174,15 +178,14 @@
       &.toggle_open span.toggle_button.close,
       span.toggle_button.open
       {
-        background: #666;
-        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-        color: white;
+        background: transparent;
+        color: @primary-1-color;
+        text-transform: uppercase;
       }
 
       &.toggle_open span.toggle_button.open
       {
-        box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
-        padding: 4px 10px 2px 12px;
+        background-color: white;
       }
 
     }
@@ -210,13 +213,13 @@
         margin-bottom: 10px;
         margin-left: 12px;
         margin-right: 7px;
-        &:first-child{
-          margin-top: 10px;
-        }
         h3 {
-          font-size: 20px;
-          margin: 10px 1% 0 0;
-          color: rgb(81, 81, 81);
+          font-size: 13px;
+          width:60%;
+          min-width: 80%;
+          margin: 10px auto;
+          color:rgba(0,0,0,0.73);
+          font-weight: 500;
           padding: 5px 0;
         }
       }
@@ -232,14 +235,17 @@
 
       div.thumbnail_selectable_cell.detailed{
         cursor: pointer;
-        border-radius: 3px;
-        width:49%;
-        margin: 0.5% 1% 0.5% 0 !important;
+        border-radius: 1px;
+        width:60%;
+        min-width: 80%;
+        float: none;
+        margin: 10px auto !important;
         box-sizing: border-box;
-        padding: 8px 16px 16px 5px;
+        padding: 0;
         overflow: hidden;
         border-bottom: none;
         background-color: white;
+        height:102px;
         box-shadow: @reactBoxShadowDepthMini;
         div.thumbnail_cell_metadata {
           /*opacity: 1;*/
@@ -248,22 +254,34 @@
           padding-top: 0;
         }
         div.thumbLabel{
-          font-size: 16px !important;
-          padding-top: 11px;
+          font-size: 14px !important;
+          font-weight: 500;
+          color: rgba(0,0,0,0.73);
+          padding: 16px 0 5px;
+          /*color: darken(@primary-1-color, 0.9);*/
+        }
+        div.thumbnail_cell_metadata {
+          opacity: 1;
+          span.metadata_chunk{
+            padding: 0;
+            font-size: 12px;
+            font-weight: 500;
+            color: rgba(0,0,0,0.43);
+            &.metadata_chunk_ajxp_dirname{
+              padding: 16px 0;
+              color: @primary-1-color;
+              text-transform: uppercase;
+            }
+          }
         }
-
         div.thumbnail_selectable_cell {
-          margin-right: 10px;
-          padding-top: 12px;
-          padding-bottom: 5px;
+          margin: 0 20px 0 0;
+          padding: 16px 20px;
+          border-right: 1px solid #e8e8e8;
+          height: 100% !important;
           div.overlay_icon_div{
             display: none !important;
           }
-          div.thumbLabel{
-            font-size: 16px !important;
-            padding-top: 11px;
-            color: #333;
-          }
         }
 
         &.selected-focus div.thumbnail_cell_metadata,
@@ -335,11 +353,15 @@
       input.c3, span.c3 {
         margin-left: 0;
         margin-right: 0;
-        border: 1px solid rgba(63, 63, 63, 1);
+        border-radius: 0;
+        border-width: 0;
+        border-bottom: 1px solid rgb(238, 238, 238);
         background-color: #ffffff;
-        padding: 4px 3px;
+        padding: 4px 0px;
         width: 90% !important;
-        border-radius: 3px;
+        &:focus{
+          border-bottom: 2px solid @primary-1-color;
+        }
       }
 
       select.select_meta_selector {
@@ -357,27 +379,35 @@
       }
 
       span#ajxp_folder.c3 {
-        color: #333;
-        padding: 4px 21px;
+        color: @primary-1-color;
+        font-weight: 500;
+        text-transform: uppercase;
+        padding: 6px 16px;
+        border-bottom: 0;
+        background-color: rgba(238, 238, 238, 0.63);
+        border-radius: 1px;
       }
       input.c3:focus{
         background-color: white;
       }
 
       #modiftime_fixed_radio span.c3{
-        border-right-width: 0 !important;
-        padding: 4px 3px;
-        font-size: 0.8em;
+        color: @primary-1-color;
+        font-weight: 500;
+        text-transform: uppercase;
+        padding: 6px 12px;
+        border-bottom: 0;
+        background-color: rgba(238, 238, 238, 0.63);
+        border-radius: 1px;
+        margin-right: 5px;
+        font-size: 0.9em;
       }
 
       div#modiftime_fixed_radio {
         margin-top: 16px;
         color: #333;
       }
 
-      #modiftime_fixed_radio span.c3:last-of-type{
-        border-right-width: 1px !important;
-      }
       span.c3.selected{
         background-color: rgb(138, 149, 160) !important;
         color: white;
@@ -407,8 +437,9 @@
         text-align: left;
         line-height: 17px;
         padding-top: 2px;
-        color: rgba(255,255,255,0.53);
-        font-weight: 300;
+        color: @primary-1-color;
+        font-weight: 500;
+        font-size: 10px;
       }
 
       div.advanced_search_section span[class^="icon-"],