From aaa4bbb509a59b2e5df5da53401cf2df2680e585 Mon Sep 17 00:00:00 2001
From: pero1203 <peter.hrvatin@gmail.com>
Date: Thu, 12 May 2022 12:12:21 +0200
Subject: [PATCH] Redesign - responsive

---
 public/css/admin_new.css                      | 152 ++++++------------
 resources/sass/admin_new/mobile/basic.scss    |  36 ++++-
 resources/sass/admin_new/mobile/footer.scss   |   2 +-
 .../admin_new/mobile/pages/branching.scss     |  28 ++--
 .../sass/admin_new/mobile/pages/status.scss   |  17 +-
 .../mobile/pages/survey_settings.scss         |  39 +----
 6 files changed, 104 insertions(+), 170 deletions(-)

diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 358e027bd..5cbad590d 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -30339,18 +30339,32 @@ div.wrap1360.subpage_ div#three {
   }
 }
 @media (max-width: 850px) {
-  #main {
-    margin-top: 70px;
-    padding-bottom: 30px;
+  body #main_holder #main {
+    margin: 70px 0 0 0;
+    padding: 0;
     /*overflow-x: scroll;*/
   }
-  #main #anketa_edit {
-    box-sizing: border-box !important;
-    padding: 15px !important;
-  }
-  #main #placeholder {
+  body #main_holder #main #placeholder {
     width: auto;
   }
+  body #main_holder #main .fullwidth,
+body #main_holder #main .narrow,
+body #main_holder #main .wide {
+    box-sizing: border-box !important;
+    width: 100%;
+    padding: 32px 16px;
+  }
+  body #main_holder #main .menu_left {
+    flex-direction: column-reverse;
+  }
+  body #main_holder #main .menu_left .layout_left_item {
+    width: 100%;
+    margin: 20px 0;
+  }
+  body #main_holder #main .menu_left .layout_right_item {
+    width: 100%;
+    margin: 20px 0;
+  }
 
   fieldset {
     width: 100% !important;
@@ -30645,12 +30659,12 @@ header .mobile_menu .submenu:not(.no-transition) {
     width: auto;
   }
 
-  #srv_footer {
+  footer#srv_footer {
     display: flex;
     flex-direction: column;
     margin-top: 0;
   }
-  #srv_footer .footer_left {
+  footer#srv_footer .footer_left {
     margin-bottom: 10px;
   }
 
@@ -30816,18 +30830,11 @@ header .mobile_menu .submenu:not(.no-transition) {
     border-radius: 1px;
   }
 
-  table.dashboard {
-    border-spacing: 0px;
-  }
-  table.dashboard > tbody > tr,
-table.dashboard > tbody > tr > td {
-    display: flex;
+  .dashboard_boxes {
     flex-direction: column;
-    width: 100%;
-    box-sizing: border-box;
   }
-  table.dashboard > tbody > tr > td {
-    margin: 15px 0;
+  .dashboard_boxes .dashboard_box {
+    margin: 0 0 32px 0;
   }
 
   .locked .add-variable-mobile,
@@ -30837,9 +30844,12 @@ table.dashboard > tbody > tr > td {
 
   #branching {
     width: 100%;
+    margin: 0;
   }
   #branching li {
-    margin: 0 10px 0 10px !important;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
   }
   #branching .spr_edit {
     display: none !important;
@@ -30894,14 +30904,8 @@ table.dashboard > tbody > tr > td {
     padding: 0;
   }
 
-  #toolbox_advanced_settings {
-    display: none !important;
-    top: 150px;
-  }
-
-  #toolbox_basic {
-    display: none !important;
-    top: 187px;
+  .toolbox_holder {
+    display: none;
   }
 
   .mobile_add_question {
@@ -30979,36 +30983,37 @@ table.dashboard > tbody > tr > td {
     font-weight: 500;
   }
 
-  #vprasanje_float_editing {
+  #vprasanje_float_editing .vprasanje_edit_holder {
     position: fixed;
     z-index: 99999;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: calc(100% - 70px);
     max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     margin: 0 !important;
-    top: 0;
+    bottom: 0;
     right: 0;
     left: 0;
     box-shadow: 0px 0px 100px 100px #333;
   }
-  #vprasanje_float_editing #vprasanje_edit {
+  #vprasanje_float_editing .vprasanje_edit_holder #vprasanje_edit {
     top: 0;
-    margin-bottom: 55px;
+    margin-bottom: 32px;
+    max-height: none;
   }
-  #vprasanje_float_editing #vprasanje_tabs {
+  #vprasanje_float_editing .vprasanje_edit_holder #vprasanje_tabs {
     position: absolute;
     top: 42px;
   }
-  #vprasanje_float_editing #vprasanje_tabs a.tab_link {
+  #vprasanje_float_editing .vprasanje_edit_holder #vprasanje_tabs a.tab_link {
     height: auto;
     padding: 10px 9px;
   }
-  #vprasanje_float_editing .tab {
-    padding-top: 100px;
+  #vprasanje_float_editing .vprasanje_edit_holder .tab {
+    padding-top: 64px;
   }
-  #vprasanje_float_editing .tab h2 {
+  #vprasanje_float_editing .vprasanje_edit_holder .tab h2 {
     position: absolute;
     top: 0;
     left: 0;
@@ -31018,14 +31023,14 @@ table.dashboard > tbody > tr > td {
     padding: 10px;
     margin: 0;
   }
-  #vprasanje_float_editing #vprasanje_buttons {
+  #vprasanje_float_editing .vprasanje_edit_holder #vprasanje_buttons {
     display: flex;
     justify-content: space-evenly;
     position: relative;
     bottom: 30px;
     padding: 0 15px;
   }
-  #vprasanje_float_editing #vprasanje_buttons span {
+  #vprasanje_float_editing .vprasanje_edit_holder #vprasanje_buttons span {
     width: 40%;
     margin-left: 0 !important;
     text-align: center;
@@ -31038,66 +31043,13 @@ table.dashboard > tbody > tr > td {
   #main #anketa #globalSetingsList fieldset {
     width: 100% !important;
   }
+  #main #anketa #globalSetingsList fieldset span.charalimit#anketa_polnoIme_chars,
+#main #anketa #globalSetingsList fieldset span.charalimit#anketa_akronim_chars,
+#main #anketa #globalSetingsList fieldset span.charalimit#anketa_note_chars {
+    width: 100%;
+  }
 
   /* NASTAVITVE in ARHIVI */
-  #main #anketa #anketa_edit.page_nastavitve,
-#main #anketa #anketa_edit.page_osn_pod,
-#main #anketa #anketa_edit.page_mobile_settings,
-#main #anketa #anketa_edit.page_jezik,
-#main #anketa #anketa_edit.page_dostop,
-#main #anketa #anketa_edit.page_piskot,
-#main #anketa #anketa_edit.page_alert,
-#main #anketa #anketa_edit.page_trajanje,
-#main #anketa #anketa_edit.page_skupine,
-#main #anketa #anketa_edit.page_urejanje,
-#main #anketa #anketa_edit.page_prikaz,
-#main #anketa #anketa_edit.page_metadata,
-#main #anketa #anketa_edit.page_missing,
-#main #anketa #anketa_edit.page_export_settings,
-#main #anketa #anketa_edit.page_gdpr_settings,
-#main #anketa #anketa_edit.page_uporabnost,
-#main #anketa #anketa_edit.page_kviz,
-#main #anketa #anketa_edit.page_voting,
-#main #anketa #anketa_edit.page_social_network,
-#main #anketa #anketa_edit.page_slideshow,
-#main #anketa #anketa_edit.page_telephone,
-#main #anketa #anketa_edit.page_chat,
-#main #anketa #anketa_edit.page_panel,
-#main #anketa #anketa_edit.page_advanced_paradata,
-#main #anketa #anketa_edit.page_json_survey_export,
-#main #anketa #anketa_edit.page_fieldwork {
-    flex-direction: column-reverse;
-  }
-  #main #anketa #anketa_edit.page_nastavitve > div,
-#main #anketa #anketa_edit.page_osn_pod > div,
-#main #anketa #anketa_edit.page_mobile_settings > div,
-#main #anketa #anketa_edit.page_jezik > div,
-#main #anketa #anketa_edit.page_dostop > div,
-#main #anketa #anketa_edit.page_piskot > div,
-#main #anketa #anketa_edit.page_alert > div,
-#main #anketa #anketa_edit.page_trajanje > div,
-#main #anketa #anketa_edit.page_skupine > div,
-#main #anketa #anketa_edit.page_urejanje > div,
-#main #anketa #anketa_edit.page_prikaz > div,
-#main #anketa #anketa_edit.page_metadata > div,
-#main #anketa #anketa_edit.page_missing > div,
-#main #anketa #anketa_edit.page_export_settings > div,
-#main #anketa #anketa_edit.page_gdpr_settings > div,
-#main #anketa #anketa_edit.page_uporabnost > div,
-#main #anketa #anketa_edit.page_kviz > div,
-#main #anketa #anketa_edit.page_voting > div,
-#main #anketa #anketa_edit.page_social_network > div,
-#main #anketa #anketa_edit.page_slideshow > div,
-#main #anketa #anketa_edit.page_telephone > div,
-#main #anketa #anketa_edit.page_chat > div,
-#main #anketa #anketa_edit.page_panel > div,
-#main #anketa #anketa_edit.page_advanced_paradata > div,
-#main #anketa #anketa_edit.page_json_survey_export > div,
-#main #anketa #anketa_edit.page_fieldwork > div {
-    width: 100%;
-    margin: 20px 0;
-  }
-
   /* OBLIKA */
   #main #anketa #anketa_edit.page_tema #div_theme_group_holder {
     width: 100%;
diff --git a/resources/sass/admin_new/mobile/basic.scss b/resources/sass/admin_new/mobile/basic.scss
index 19bca6a05..1c3176a7d 100644
--- a/resources/sass/admin_new/mobile/basic.scss
+++ b/resources/sass/admin_new/mobile/basic.scss
@@ -1,16 +1,36 @@
-#main{
-    margin-top: 70px;
-    padding-bottom: 30px;
+body #main_holder #main{
+    margin: 70px 0 0 0;
+    padding: 0;
     /*overflow-x: scroll;*/
 
-    #anketa_edit{
-        box-sizing: border-box !important;
-        padding: 15px !important;
-    }
-
     #placeholder{
         width: auto;
     }
+
+
+    // Layout
+    .fullwidth,
+    .narrow,
+    .wide{
+        box-sizing: border-box !important;
+        width: 100%;
+        padding: 32px 16px;
+    }
+
+    .menu_left{
+        flex-direction: column-reverse;
+
+        .layout_left_item{
+            width: 100%;
+            margin: 20px 0;
+        }
+
+        .layout_right_item{
+            width: 100%;
+            margin: 20px 0;
+        }
+    }
+
 }
 
 fieldset {
diff --git a/resources/sass/admin_new/mobile/footer.scss b/resources/sass/admin_new/mobile/footer.scss
index f8df9da45..d3f86ce9b 100644
--- a/resources/sass/admin_new/mobile/footer.scss
+++ b/resources/sass/admin_new/mobile/footer.scss
@@ -1,4 +1,4 @@
-#srv_footer{
+footer#srv_footer{
     display: flex;
     flex-direction: column;
 
diff --git a/resources/sass/admin_new/mobile/pages/branching.scss b/resources/sass/admin_new/mobile/pages/branching.scss
index e5d552240..07ad2bbc1 100644
--- a/resources/sass/admin_new/mobile/pages/branching.scss
+++ b/resources/sass/admin_new/mobile/pages/branching.scss
@@ -5,9 +5,12 @@
 
 #branching{
     width: 100%;
+    margin: 0;
 
     li{
-        margin: 0 10px 0 10px !important;        
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0 !important;        
     }
 
     .spr_edit{
@@ -79,15 +82,9 @@
 
 
 // Toolbox na levi
-#toolbox_advanced_settings{
-    display: none !important;
-    top: 150px;
+.toolbox_holder {
+    display: none;
 }
-#toolbox_basic{
-    display: none !important;
-    top: 187px;
-}
-
 
 // Mobile gumb za dodajanje vprašanja na konec
 .mobile_add_question{
@@ -190,18 +187,18 @@
 
 
 // Urejanje vprasanja popup
-#vprasanje_float_editing{
+#vprasanje_float_editing .vprasanje_edit_holder{
     position: fixed;
     z-index: 99999;
 
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: calc(100% - 70px);
     max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
 
     margin: 0 !important;
-    top: 0;
+    bottom: 0;
     right: 0;
     left: 0;
 
@@ -209,7 +206,8 @@
 
     #vprasanje_edit{
         top: 0;
-        margin-bottom: 55px;
+        margin-bottom: 32px;
+        max-height: none;
     }
 
     #vprasanje_tabs{
@@ -223,7 +221,7 @@
     }
 
     .tab{
-        padding-top: 100px;
+        padding-top: 64px;
 
         h2{
             position: absolute;
diff --git a/resources/sass/admin_new/mobile/pages/status.scss b/resources/sass/admin_new/mobile/pages/status.scss
index 814032937..feef8843b 100644
--- a/resources/sass/admin_new/mobile/pages/status.scss
+++ b/resources/sass/admin_new/mobile/pages/status.scss
@@ -1,16 +1,7 @@
-table.dashboard{
-    border-spacing: 0px;
+.dashboard_boxes{
+    flex-direction: column;
 
-    > tbody > tr,
-    > tbody > tr > td{
-        display: flex;
-        flex-direction: column;
-
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-    > tbody > tr > td{
-        margin: 15px 0;
+    .dashboard_box{
+        margin: 0 0 32px 0;
     }
 }
diff --git a/resources/sass/admin_new/mobile/pages/survey_settings.scss b/resources/sass/admin_new/mobile/pages/survey_settings.scss
index d739bbcb5..52e318622 100644
--- a/resources/sass/admin_new/mobile/pages/survey_settings.scss
+++ b/resources/sass/admin_new/mobile/pages/survey_settings.scss
@@ -5,44 +5,17 @@
 
     fieldset{
         width: 100% !important;
+
+        span.charalimit#anketa_polnoIme_chars,
+        span.charalimit#anketa_akronim_chars, 
+        span.charalimit#anketa_note_chars{
+            width: 100%;
+        }
     }
 }
 
 
 /* NASTAVITVE in ARHIVI */
-#main #anketa #anketa_edit.page_nastavitve,
-#main #anketa #anketa_edit.page_osn_pod,
-#main #anketa #anketa_edit.page_mobile_settings,
-#main #anketa #anketa_edit.page_jezik,
-#main #anketa #anketa_edit.page_dostop,
-#main #anketa #anketa_edit.page_piskot,
-#main #anketa #anketa_edit.page_alert,
-#main #anketa #anketa_edit.page_trajanje,
-#main #anketa #anketa_edit.page_skupine,
-#main #anketa #anketa_edit.page_urejanje,
-#main #anketa #anketa_edit.page_prikaz,
-#main #anketa #anketa_edit.page_metadata,
-#main #anketa #anketa_edit.page_missing,
-#main #anketa #anketa_edit.page_export_settings,
-#main #anketa #anketa_edit.page_gdpr_settings,
-#main #anketa #anketa_edit.page_uporabnost,
-#main #anketa #anketa_edit.page_kviz,
-#main #anketa #anketa_edit.page_voting,
-#main #anketa #anketa_edit.page_social_network,
-#main #anketa #anketa_edit.page_slideshow,
-#main #anketa #anketa_edit.page_telephone,
-#main #anketa #anketa_edit.page_chat,
-#main #anketa #anketa_edit.page_panel,
-#main #anketa #anketa_edit.page_advanced_paradata,
-#main #anketa #anketa_edit.page_json_survey_export,
-#main #anketa #anketa_edit.page_fieldwork{
-    flex-direction: column-reverse;
-
-    > div{
-        width: 100%;
-        margin: 20px 0;
-    }
-}
 
 
 /* OBLIKA */