Responsive readapt home / user dashboard

pydio · Sep 12, 2016 · 43906be · 43906be
1 parent 9ee4300
commit 43906be
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 24 deletions.
diff --git a/core/src/plugins/access.ajxp_home/res/home.css b/core/src/plugins/access.ajxp_home/res/home.css
@@ -758,7 +758,10 @@ div.home_search span.suggest-search {
     width: 100px;
   }
 }
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 800px) and (min-width: 420px) {
+  #logo_div {
+    margin-top: 25% !important;
+  }
   #logo_div img {
     width: 210px;
   }
@@ -772,14 +775,26 @@ div.home_search span.suggest-search {
     margin-right: 3%;
     margin-left: 3%;
   }
-  #dl_pydio_cont {
-    width: 400px !important;
+  div#dl_pydio_cont {
+    width: 650px !important;
+  }
+  div.home_search {
+    width: 650px !important;
+  }
+  div.home_search span.suggest-search {
+    right: 320px;
   }
   #dl_pydio_for {
     display: none;
   }
-  #home_left_bar {
-    width: 380px;
+  #home_account_pane #home_left_bar {
+    width: 300px;
+  }
+  #home_account_pane #home_left_bar .workspace-entry {
+    padding: 8px 10px 8px 23px !important;
+  }
+  #home_account_pane #home_left_bar .workspace-entry span.workspace-badge {
+    display: none !important;
   }
   #welcome {
     font-size: 1em;
@@ -793,9 +808,9 @@ div.home_search span.suggest-search {
     padding: 0 30px;
   }
 }
-@media only screen and (max-width: 400px) {
+@media only screen and (max-width: 420px) {
   #home_left_bar {
-    width: 100%;
+    width: 100% !important;
     position: absolute;
     top: 0;
     height: 100%;

diff --git a/core/src/plugins/access.ajxp_home/res/home.less b/core/src/plugins/access.ajxp_home/res/home.less
@@ -615,7 +615,8 @@ div#tutorial_dl_apps_pane{
   }
 
   div#dl_pydio_cont{
-    width: 750px; margin: 0 auto;
+    width: 750px;
+    margin: 0 auto;
     background-color: transparent;
   }
   div#dl_pydio_for{
@@ -798,10 +799,13 @@ and (max-width : 980px){
 }
 
 @media only screen
-and (max-width : 800px){
+and (max-width : 800px) and (min-width: 420px){
 
-    #logo_div img{
-        width: 210px;
+    #logo_div{
+      margin-top: 25% !important;
+      img{
+          width: 210px;
+      }
     }
 
     .tutorial_legend{
@@ -815,15 +819,30 @@ and (max-width : 800px){
         margin-right: 3%;
         margin-left: 3%;
     }
-    #dl_pydio_cont{
-        width: 400px !important;
+    div#dl_pydio_cont {
+      width: 650px !important;
     }
+    div.home_search{
+      width: 650px !important;
+      span.suggest-search{
+        right:320px;
+      }
+    }
+
     #dl_pydio_for{
         display: none;
     }
 
-    #home_left_bar{
-        width: 380px;
+    #home_account_pane{
+      #home_left_bar{
+        width: 300px;
+        .workspace-entry{
+          padding: 8px 10px 8px 23px !important;
+          span.workspace-badge{
+            display: none !important;
+          }
+        }
+      }
     }
 
     #welcome{
@@ -843,9 +862,9 @@ and (max-width : 800px){
 }
 
 @media only screen
-and (max-width : 400px){
+and (max-width : 420px){
   #home_left_bar{
-    width: 100%;
+    width: 100% !important;
     position: absolute;
     top:0;
     height: 100%;

diff --git a/core/src/plugins/access.ajxp_user/dashboard.css b/core/src/plugins/access.ajxp_user/dashboard.css
@@ -218,6 +218,16 @@
   #userdashboard_main_tab.horizontal_tabulator div.tabulatorPanelsContainer {
     left: 40px;
   }
+  #userdashboard_main_tab.horizontal_tabulator div.tabulatorPanelsContainer .title-flex {
+    display: block !important;
+  }
+  #userdashboard_main_tab.horizontal_tabulator div.tabulatorPanelsContainer .title-flex h3 {
+    padding-right: 20px;
+  }
+  #userdashboard_main_tab.horizontal_tabulator div.tabulatorPanelsContainer .title-flex .actionBar,
+  #userdashboard_main_tab.horizontal_tabulator div.tabulatorPanelsContainer .title-flex .action_bar {
+    text-align: right !important;
+  }
 }
 div#userdashboard_myparams_title {
   position: absolute;

diff --git a/core/src/plugins/access.ajxp_user/dashboard.less b/core/src/plugins/access.ajxp_user/dashboard.less
@@ -217,6 +217,15 @@
       }
       div.tabulatorPanelsContainer{
         left: @break1;
+        .title-flex{
+          display: block !important;
+          h3{
+            padding-right: 20px;
+          }
+          .actionBar, .action_bar{
+            text-align: right !important;
+          }
+        }
       }
     }
   }

diff --git a/core/src/plugins/gui.mobile/ajxp-mobile.css b/core/src/plugins/gui.mobile/ajxp-mobile.css
@@ -75,9 +75,6 @@ a.m-2 {
   font-size: 12px;
   height: 40px;
 }
-div#userdashboard_main_tab h3.dashboard_panel_title {
-  display: none;
-}
 /* UPDATE MINISITE TEMPlATES */
 #ajxp_shared_folder div#breadcrumb,
 #ajxp_embed_template div#breadcrumb {

diff --git a/core/src/plugins/gui.mobile/ajxp-mobile.less b/core/src/plugins/gui.mobile/ajxp-mobile.less
@@ -89,10 +89,6 @@ a.m-2{
     height: 40px;
 }
 
-div#userdashboard_main_tab h3.dashboard_panel_title{
-    display: none;
-}
-
 /* UPDATE MINISITE TEMPlATES */
 #ajxp_shared_folder div#breadcrumb,
 #ajxp_embed_template div#breadcrumb