Mobile admin - dokoncan meni, popravki statusa, nastavitev...

admin/survey/classes/mobile/class.MobileSurveyAdmin.php

@@ -113,8 +113,10 @@ class MobileSurveyAdmin{
         $sql = $this->surveyAdminClass->db_select_user($global_user_id);
         $row = mysqli_fetch_array($sql);
 
-        $text = $row['name'] . ' ' . $row['surname'];
+        $user_name = $row['name'] . ' ' . $row['surname'];
-        $text = (strlen($text) > 25) ? substr($text, 0, 25) . '...' : $text;
+        $user_name = (strlen($user_name) > 25) ? substr($user_name, 0, 25) . '...' : $user_name;
+
+        $user_email = '<br><span class="email">'.$row['email'].'</span>';
 
 
         echo '<div class="mobile_menu_user">';
@@ -122,26 +124,32 @@ class MobileSurveyAdmin{
         echo '<ul>';
 
         echo '  <li class="has-submenu">';
-        echo '      <a href="#" data-submenu="submenu_user" title="'.$text.'">'.$text.'</a>';
+        echo '      <a href="#" data-submenu="submenu_user" title="'.$user_name.'"><span class="faicon arrow_back"></span>'.$user_name.$user_email.'</a>';
         echo '  </li>';
 
         // Podmeni
         echo '  <div id="submenu_user" class="submenu">';
 
-        // Nazaj
+
+        // Podmeni header
         echo '      <div class="submenu-header" data-submenu-close="submenu_user">';
-        echo '          <a href="#">'.$lang['back'].'</a>';
+        echo '          <a href="#"><span class="faicon arrow_back"></span></a>';
-        echo '      </div>';
+        echo '          <label>'.$user_name.'</label>';
+        echo '  </div>';
 
-        // Label
-	    echo '      <label>'.$text.'</label>';
 
-        echo '      <a href="'.$site_url.'admin/survey/index.php?a=nastavitve&m=global_user_myProfile"><span class="faicon user"></span>' . $lang['edit_data'] . '</a>';
+        // Podmeni vsebina
+        echo '      <div class="submenu_user_content">';
+        
+        echo '          <div><a href="'.$site_url.'admin/survey/index.php?a=nastavitve&m=global_user_myProfile"><span class="faicon user"></span>' . $lang['edit_data'] . '</a></div>';
 
         // Odjava na nov nacin preko frontend/api
-        echo '      <form name="odjava" id="form_odjava" method="post" action="'.$site_url.'frontend/api/api.php?action=logout">';
+        echo '          <div><form name="odjava" id="form_odjava" method="post" action="'.$site_url.'frontend/api/api.php?action=logout">';
-        echo '          <span class="as_link" onClick="$(\'#form_odjava\').submit();"><span class="faicon logout"></span>' . $lang['logout'] . '</span>';
+        echo '              <span class="as_link" onClick="$(\'#form_odjava\').submit();"><span class="faicon logout"></span>' . $lang['logout'] . '</span>';
-        echo '      </form>';
+        echo '          </form></div>';
+
+        echo '      </div>';
+
 
         echo '  </div>';
 
@@ -601,20 +609,25 @@ class MobileSurveyAdmin{
         global $lang;
 
         echo '<li class="has-submenu">';
-        echo '<a href="#" data-submenu="submenu_'.$name.'" title="'.$title.'">'.$title.'</a>';
+        echo '  <a href="#" data-submenu="submenu_'.$name.'" title="'.$title.'">'.$title.'<span class="faicon arrow_back"></span></a>';
         echo '</li>';
 
         // Podmeni
         echo '<div id="submenu_'.$name.'" class="submenu">';
 
-        // Nazaj
+        
+        // Podmeni header
         echo '<div class="submenu-header" data-submenu-close="submenu_'.$name.'">';
-        echo '  <a href="#">'.$lang['back'].'</a>';
+
-        echo '</div>';
+        // Nazaj
+        echo '  <a href="#"><span class="faicon arrow_back"></span></a>';
 
         // Label
 	    echo '<label>'.$title.'</label>';
 
+        echo '</div>';
+
+        
         // Vsebina podmenija
         echo '<ul>';
         foreach($submenu as $submenu_item){

public/css/admin.css

@@ -28473,6 +28473,27 @@ a.addIfIcon {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
+  fieldset .nastavitveSpan1,
+fieldset .nastavitveSpan2,
+fieldset .nastavitveSpan3,
+fieldset .nastavitveSpan4,
+fieldset .nastavitveSpan5,
+fieldset .nastavitveSpan6 {
+    width: auto !important;
+    display: block !important;
+    float: none !important;
+    text-align: left !important;
+    padding: 15px 0 5px 0 !important;
+  }
+  fieldset select,
+fieldset .select2-container,
+fieldset input[type=text] {
+    width: 100% !important;
+    box-sizing: border-box;
+  }
+  fieldset .setting {
+    height: auto !important;
+  }
 
   .desktop_header {
     display: none;
@@ -28480,11 +28501,12 @@ a.addIfIcon {
 
   .mobile_header {
     position: fixed;
-    z-index: 9998;
+    z-index: 9990;
     display: flex;
     align-items: center;
     width: 100vw;
     height: 70px;
+    border-bottom: 1px solid #efefef;
   }
   .mobile_header.survey_edit {
     color: white;
@@ -28495,7 +28517,7 @@ a.addIfIcon {
     background-color: white;
   }
   .mobile_header .mobile_menu_icon {
-    width: 50px;
+    width: 60px;
     text-align: center;
   }
   .mobile_header .mobile_menu_icon.mobile_menu_close {
@@ -28510,13 +28532,13 @@ a.addIfIcon {
     cursor: pointer;
   }
   .mobile_header .mobile_survey_title {
-    width: calc(100% - 100px);
+    width: calc(100% - 120px);
     text-align: center;
     font-size: 14px;
     font-weight: 500;
   }
   .mobile_header .mobile_logo {
-    width: calc(100% - 100px);
+    width: calc(100% - 120px);
   }
   .mobile_header .mobile_logo #enka_logo {
     margin: 0 auto;
@@ -28525,12 +28547,12 @@ a.addIfIcon {
   /* Mobile meni */
   .mobile_menu {
     position: fixed;
-    z-index: 9999;
+    z-index: 9995;
     display: flex;
     flex-direction: column;
-    top: 70px;
+    top: 71px;
     bottom: 0;
-    width: 80vw;
+    width: 85vw;
     color: #333;
     background-color: #ffffff;
     overflow: hidden;
@@ -28539,133 +28561,129 @@ a.addIfIcon {
     pointer-events: none;
     transform: translateX(-100%);
   }
-
   .mobile_menu:not(.no-transition),
 .mobile_menu .submenu:not(.no-transition) {
     transition: all 250ms;
   }
-
   .mobile_menu.opened {
     pointer-events: auto;
     transform: translateX(0px);
   }
-
   .mobile_menu.submenu-opened {
     overflow: hidden;
   }
-
-  .mobile_menu .submenu {
-    bottom: 0;
-    min-height: 100%;
-    overflow: hidden;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: auto;
-    pointer-events: none;
-    position: fixed;
-    top: 0;
-    width: 100%;
-  }
-
-  .mobile_menu .submenu.opened {
-    left: 0;
-    pointer-events: auto;
-  }
-
-  .mobile_menu .submenu.opened:not(.current) {
-    overflow: hidden;
-  }
-
   .mobile_menu ul {
     list-style-type: none;
     padding: 0;
     padding-left: 0px;
+    margin: 0;
     -webkit-overflow-scrolling: touch;
   }
-
   .mobile_menu ul > li {
     display: block;
   }
-
   .mobile_menu ul > li > a {
-    color: inherit;
+    position: relative;
     display: block;
-    font-size: 14px;
-    font-weight: bold;
     padding: 18px 20px;
+    font-size: 14px;
+    font-weight: 500;
     text-decoration: none;
     transition: all 150ms;
   }
-
   .mobile_menu ul > li > a:hover {
-    background-color: #efefef;
+    background-color: #c8e3f8;
     border-radius: 3px;
   }
-
+  .mobile_menu ul > li > a .arrow_back {
+    display: block;
+    position: absolute;
+    right: 20px;
+    top: 18px;
+    transform: rotate(180deg);
+  }
   .mobile_menu ul > li:not(:last-child) > a {
     border-bottom: 1px solid #efefef;
   }
-
-  .mobile_menu ul > li.has-submenu > a {
-    background-image: url("../images/submenu-arrow.svg");
-    background-position: right 20px center;
-    background-repeat: no-repeat;
-    background-size: 8px 14px;
-  }
-
-  .mobile_menu ul > li.has-submenu > a:hover {
-    background-image: url("../images/submenu-arrow-active.svg");
-  }
-
-  /* mobile_menujs submenu styles */
   .mobile_menu .submenu {
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+    pointer-events: none;
+    z-index: 9998;
+    position: fixed;
+    bottom: 0;
+    top: 0;
+    left: 100%;
+    width: 100%;
+    min-height: 100%;
     background-color: #ffffff;
-    left: 295px;
   }
-
+  .mobile_menu .submenu.opened {
+    left: 0;
+    pointer-events: auto;
+  }
+  .mobile_menu .submenu.opened:not(.current) {
+    overflow: hidden;
+  }
   .mobile_menu .submenu-header {
-    background-image: url("../images/menu-back.svg");
-    background-position: left 20px center;
-    background-repeat: no-repeat;
-    background-size: 8px 14px;
-    border-bottom: solid 1px #efefef;
     cursor: pointer;
     position: relative;
+    display: flex;
+    border-bottom: solid 1px #efefef;
   }
-
   .mobile_menu .submenu-header > a {
-    color: inherit;
     display: block;
     font-size: 14px;
-    font-weight: bold;
+    font-weight: 500;
     padding: 18px 20px;
-    padding-left: 40px;
+    padding-left: 20px;
     text-decoration: none;
   }
-
+  .mobile_menu .submenu-header > label {
-  .mobile_menu .submenu-header > a:before {
-    background-image: url("../images/submenu-arrow.svg");
-    background-position: right 20px center;
-    background-repeat: no-repeat;
-    background-size: 8px 14px;
-    content: "";
-    height: 100%;
-    left: 26px;
-    position: absolute;
-    top: 0;
-    transform: rotate(-180deg);
-    width: 20px;
-  }
-
-  .mobile_menu .submenu > label {
-    color: #e77691;
     display: block;
-    font-size: 13px;
+    width: calc(100% - 110px);
-    font-weight: bold;
     margin-bottom: 8px;
-    margin-top: 19px;
+    margin-top: 20px;
+    padding-left: 0px;
+    font-size: 15px;
+    font-weight: 500;
+    text-align: center;
     opacity: 0.5;
-    padding-left: 40px;
+  }
-    width: 100%;
+  .mobile_menu .mobile_menu_user li.has-submenu .arrow_back {
+    line-height: 30px;
+  }
+  .mobile_menu .mobile_menu_user li.has-submenu a {
+    font-size: 13px;
+    color: #333;
+  }
+  .mobile_menu .mobile_menu_user li.has-submenu a .email {
+    font-size: 12px;
+  }
+  .mobile_menu .mobile_menu_user .submenu_user_content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+  }
+  .mobile_menu .mobile_menu_user .submenu_user_content > div {
+    padding: 5px 0;
+  }
+  .mobile_menu .mobile_menu_user .submenu_user_content > div .faicon {
+    padding-right: 10px;
+  }
+  .mobile_menu .mobile_menu_actions {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+  }
+  .mobile_menu .mobile_menu_actions a {
+    padding: 0 0 15px 0;
+    font-size: 13px;
+  }
+  .mobile_menu .mobile_menu_actions a .faicon::before {
+    padding-right: 10px;
+    font-size: 20px;
   }
 
   #srv_footer {
@@ -28728,6 +28746,20 @@ a.addIfIcon {
     display: table-cell;
   }
 
+  table.dashboard {
+    border-spacing: 0px;
+  }
+  table.dashboard > tbody > tr,
+table.dashboard > tbody > tr > td {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  table.dashboard > tbody > tr > td {
+    margin: 15px 0;
+  }
+
   #branching {
     width: 100%;
   }

resources/sass/admin/mobile/basic.scss

@@ -17,5 +17,30 @@ fieldset {
     box-sizing: border-box !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
+
+    .nastavitveSpan1,
+    .nastavitveSpan2,
+    .nastavitveSpan3,
+    .nastavitveSpan4,
+    .nastavitveSpan5,
+    .nastavitveSpan6{
+        width: auto !important;
+        display: block !important;
+        float: none !important;
+
+        text-align: left !important;
+        padding: 15px 0 5px 0 !important;
+    }
+
+    select,
+    .select2-container,
+    input[type="text"]{
+        width: 100% !important;
+        box-sizing: border-box;
+    }
+
+    .setting{
+        height: auto !important;
+    }
 }
 

resources/sass/admin/mobile/header.scss

@@ -4,7 +4,7 @@
 
 .mobile_header{
     position: fixed;
-    z-index: 9998;
+    z-index: 9990;
 
     display: flex;
     align-items: center;
@@ -12,6 +12,7 @@
     width: 100vw;
     height: 70px;
 
+    border-bottom: 1px solid $grey_super_light;
 
     // Znotraj ankete
     &.survey_edit{
@@ -27,7 +28,7 @@
 
 
     .mobile_menu_icon{
-        width: 50px;
+        width: 60px;
         text-align: center;
 
         &.mobile_menu_close{
@@ -46,14 +47,14 @@
     }
 
     .mobile_survey_title{
-        width: calc(100% - 100px);
+        width: calc(100% - 120px);
 
         text-align: center;
         font-size: 14px;
         font-weight: 500;
     }
     .mobile_logo{
-        width: calc(100% - 100px);
+        width: calc(100% - 120px);
 
         #enka_logo{
             margin: 0 auto;
@@ -65,15 +66,15 @@
 
 /* Mobile meni */
 .mobile_menu{
-    position:fixed;
+    position: fixed;
-    z-index: 9999;
+    z-index: 9995;
 
     display: flex;
     flex-direction: column;
 
-    top: 70px;
+    top: 71px;
     bottom: 0;
-    width: 80vw;
+    width: 85vw;
 
     color: $main_text;
 
@@ -84,131 +85,172 @@
     overflow-y: auto;
     pointer-events: none; 
     transform: translateX(-100%);
-}
 
-.mobile_menu:not(.no-transition),
+    &:not(.no-transition),
-.mobile_menu .submenu:not(.no-transition){
+    .submenu:not(.no-transition){
-    transition:all 250ms;
+        transition: all 250ms;
-}
+    }
 
-.mobile_menu.opened{
+    &.opened{
-    pointer-events:auto;
+        pointer-events: auto;
-    transform:translateX(0px);
+        transform: translateX(0px);
-}
+    }
 
-.mobile_menu.submenu-opened{
+    &.submenu-opened{
-    overflow:hidden;
+        overflow: hidden;
-}
+    }
 
-.mobile_menu .submenu{
+    ul {
-    bottom:0;
+        list-style-type: none;
-    min-height:100%;
+        padding: 0;
-    overflow:hidden;
+        padding-left: 0px;
-    -webkit-overflow-scrolling:touch;
+        margin: 0;
-    overflow-y:auto;
-    pointer-events:none;
-    position:fixed;
-    top:0;
-    width:100%;
-}
 
-.mobile_menu .submenu.opened{
+        -webkit-overflow-scrolling: touch;
-    left:0;
-    pointer-events:auto;
-}
 
-.mobile_menu .submenu.opened:not(.current){
+        > li {
-    overflow:hidden;
+            display: block;
-}
 
-.mobile_menu ul {
+            > a {
-    list-style-type: none;
+                position: relative;
-    padding: 0;
+                display: block;
-    padding-left: 0px;
-    -webkit-overflow-scrolling: touch;
-}
-.mobile_menu ul > li {
-    display: block;
-}
 
-.mobile_menu ul > li > a {
+                padding: 18px 20px;
-    color: inherit;
-    display: block;
-    font-size: 14px;
-    font-weight: bold;
-    padding: 18px 20px;
-    text-decoration: none;
-    transition: all 150ms;
-}
-.mobile_menu ul > li > a:hover {
-    background-color: #efefef;
-    border-radius: 3px;
-}
 
-.mobile_menu ul > li:not(:last-child) > a {
+                font-size: 14px;
-    border-bottom: 1px solid #efefef;
+                font-weight: 500;
-}
+                text-decoration: none;
                 
-.mobile_menu ul > li.has-submenu > a {
+                transition: all 150ms;
-    background-image: url("../images/submenu-arrow.svg");
-    background-position: right 20px center;
-    background-repeat: no-repeat;
-    background-size: 8px 14px;
-}
 
-.mobile_menu ul > li.has-submenu > a:hover {
+                &:hover {
-    background-image: url("../images/submenu-arrow-active.svg");
+                    background-color: $soft_blue;
-}
+                    border-radius: 3px;
+                }
 
-/* mobile_menujs submenu styles */
+                .arrow_back{
-.mobile_menu .submenu {
+                    display: block;
-    background-color: #ffffff;
+                    position: absolute;
-    left: 295px;
+                    right: 20px;
-}
+                    top: 18px;
 
-.mobile_menu .submenu-header {
+                    transform: rotate(180deg);
-    background-image: url("../images/menu-back.svg");
+                }
-    background-position: left 20px center;
+            }
-    background-repeat: no-repeat;
-    background-size: 8px 14px;
-    border-bottom: solid 1px #efefef;
-    cursor: pointer;
-    position: relative;
-}
 
-.mobile_menu .submenu-header > a {
+            &:not(:last-child) > a {
-    color: inherit;
+                border-bottom: 1px solid $grey_super_light;
-    display: block;
+            }
-    font-size: 14px;
+        }
-    font-weight: bold;
+    }
-    padding: 18px 20px;
-    padding-left: 40px;
-    text-decoration: none;
-}
 
-.mobile_menu .submenu-header > a:before {
+    .submenu{
-    background-image: url("../images/submenu-arrow.svg");
+        overflow: hidden;
-    background-position: right 20px center;
+        -webkit-overflow-scrolling: touch;
-    background-repeat: no-repeat;
+        overflow-y: auto;
-    background-size: 8px 14px;
+        pointer-events: none;
-    content: "";
+        z-index: 9998;
-    height: 100%;
-    left: 26px;
-    position: absolute;
-    top: 0;
-    transform: rotate(-180deg);
-    width: 20px;
-}
         
-.mobile_menu .submenu > label {
+        position: fixed;
-    color: #e77691;
+        bottom: 0;
-    display: block;
+        top: 0;
-    font-size: 13px;
+        left: 100%;
-    font-weight: bold;
-    margin-bottom: 8px;
-    margin-top: 19px;
-    opacity: .5;
-    padding-left: 40px;
-    width: 100%;
-}
         
+        width:100%;
+        min-height: 100%;
+
+        background-color: #ffffff;
+
+        &.opened{
+            left:0;
+            pointer-events:auto;
+        }
+        &.opened:not(.current){
+            overflow:hidden;
+        }
+    }
+
+    .submenu-header {
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        
+        border-bottom: solid 1px $grey_super_light;
+
+        > a {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            padding: 18px 20px;
+            padding-left: 20px;
+            text-decoration: none;
+        }
+
+        > label {
+            display: block;
+            width: calc(100% - 110px);
+            
+            margin-bottom: 8px;
+            margin-top: 20px;
+            padding-left: 0px;
+
+            font-size: 15px;
+            font-weight: 500;
+            text-align: center;
+            
+            opacity: .5;
+        }
+    }
+
+    .mobile_menu_user{
+ 
+        li.has-submenu{
+
+            .arrow_back{
+                line-height: 30px;
+            }
+    
+            a{
+                font-size: 13px;
+                color: $main_text;
+                    
+                .email{
+                    font-size: 12px;
+                }
+            }           
+        } 
+
+        .submenu_user_content{
+            display: flex;
+            flex-direction: column;
+
+            padding: 20px;
+
+            > div{
+                padding: 5px 0;
+
+                .faicon{
+                    padding-right: 10px;
+                }
+            }
+        }
+    }
+
+    .mobile_menu_actions{
+        display: flex;
+        flex-direction: column;
+
+        padding: 20px;
+
+        a{
+            padding: 0 0 15px 0;
+
+            font-size: 13px;
+
+            .faicon::before{
+                padding-right: 10px;
+                font-size: 20px;
+            }
+        }        
+    }
+}

resources/sass/admin/mobile/mobile.scss

@@ -18,6 +18,7 @@ $breakpoint-mobile: 600px;
 
     // Posamezne strani
     @import "pages/my_surveys";
+    @import "pages/status";
     @import "pages/branching";
     @import "pages/survey_settings";
     @import "pages/data";

resources/sass/admin/mobile/pages/status.scss

@@ -0,0 +1,16 @@
+table.dashboard{
+    border-spacing: 0px;
+
+    > tbody > tr,
+    > tbody > tr > td{
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    > tbody > tr > td{
+        margin: 15px 0;
+    }
+}