Merge branch 'master' of https://git.1ka.si:/git/1ka

frontend/drupal9/web/themes/custom/pro1ka/css/style.css

@@ -509,6 +509,7 @@ body {
     margin-top: 9px; }
 
 .section.uvodni-slider {
+  padding-top: 0;
   z-index: 121;
   display: -webkit-box;
   display: -webkit-flex;
@@ -727,7 +728,10 @@ body {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
-      display: flex; }
+      display: flex;
+      max-width: 320px;
+      margin-left: auto;
+      margin-right: auto; }
       .koraki-spletnega-anketiranja .row .stolpec .slika .postavitev {
         display: -webkit-box;
         display: -webkit-flex;
@@ -1810,7 +1814,8 @@ input.error-field {
     display: block;
     padding: 9px 15px;
     margin-top: 1rem; } }
-.nav-menu {
+.nav-menu,
+.mobile-nav-menu {
   position: fixed;
   left: 0%;
   top: 0%;
@@ -1818,25 +1823,28 @@ input.error-field {
   bottom: auto;
   z-index: 140;
   background-color: #fff;
+  min-height: 65px;
   /*   .container {
-      -webkit-transition: all 1200ms linear;
+    -webkit-transition: all 1200ms linear;
-      -moz-transition: all 1200ms linear;
+    -moz-transition: all 1200ms linear;
-      -o-transition: all 1200ms linear;
+    -o-transition: all 1200ms linear;
-      -ms-transition: all 1200ms linear;
+    -ms-transition: all 1200ms linear;
-      transition: all 1200ms linear;
+    transition: all 1200ms linear;
-  
+
-      &.hide{
+    &.hide{
-        height: 0;
+      height: 0;
-      }
+    }
-    } */ }
+  } */ }
-  .nav-menu .logo {
+  .nav-menu .logo,
+  .mobile-nav-menu .logo {
     display: block;
     height: 71px;
     margin-top: 0px;
     padding-top: 14px;
     padding-bottom: 10px;
     float: left; }
-  .nav-menu .block-menu {
+  .nav-menu .block-menu,
+  .mobile-nav-menu .block-menu {
     z-index: 200;
     display: -webkit-box;
     display: -webkit-flex;
@@ -1850,7 +1858,8 @@ input.error-field {
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1; }
-    .nav-menu .block-menu .list-elementi {
+    .nav-menu .block-menu .list-elementi,
+    .mobile-nav-menu .block-menu .list-elementi {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -1868,7 +1877,8 @@ input.error-field {
       list-style: none;
       flex-flow: row wrap;
       margin-right: 24px; }
-      .nav-menu .block-menu .list-elementi .nav-li {
+      .nav-menu .block-menu .list-elementi .nav-li,
+      .mobile-nav-menu .block-menu .list-elementi .nav-li {
         padding-right: 15px;
         padding-left: 15px;
         -webkit-box-flex: 0;
@@ -1876,7 +1886,8 @@ input.error-field {
         -ms-flex: 0 0 auto;
         flex: 0 0 auto;
         list-style: none; }
-        .nav-menu .block-menu .list-elementi .nav-li a {
+        .nav-menu .block-menu .list-elementi .nav-li a,
+        .mobile-nav-menu .block-menu .list-elementi .nav-li a {
           display: block;
           padding-top: 20px;
           padding-bottom: 3px;
@@ -1886,12 +1897,15 @@ input.error-field {
           line-height: 30px;
           font-weight: 400;
           text-decoration: none; }
-          .nav-menu .block-menu .list-elementi .nav-li a:hover {
+          .nav-menu .block-menu .list-elementi .nav-li a:hover,
+          .mobile-nav-menu .block-menu .list-elementi .nav-li a:hover {
             border-bottom-color: #1e88e5;
             color: #1e88e5; }
-        .nav-menu .block-menu .list-elementi .nav-li.menue-2-drop {
+        .nav-menu .block-menu .list-elementi .nav-li.menue-2-drop,
+        .mobile-nav-menu .block-menu .list-elementi .nav-li.menue-2-drop {
           display: block; }
-          .nav-menu .block-menu .list-elementi .nav-li.menue-2-drop .nav-ul-2 {
+          .nav-menu .block-menu .list-elementi .nav-li.menue-2-drop .nav-ul-2,
+          .mobile-nav-menu .block-menu .list-elementi .nav-li.menue-2-drop .nav-ul-2 {
             position: fixed;
             left: 0px;
             top: 70px;
@@ -1908,7 +1922,8 @@ input.error-field {
             border-color: #b3d8eb;
             background-color: #fff;
             box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.22); }
-    .nav-menu .block-menu .desni-elementi {
+    .nav-menu .block-menu .desni-elementi,
+    .mobile-nav-menu .block-menu .desni-elementi {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -1923,21 +1938,31 @@ input.error-field {
       align-items: start;
       padding-top: 20px;
       margin-left: auto; }
-      .nav-menu .block-menu .desni-elementi .searchbutton {
+      .nav-menu .block-menu .desni-elementi .searchbutton,
+      .mobile-nav-menu .block-menu .desni-elementi .searchbutton {
         margin-top: 4px;
         z-index: 999; }
-  .nav-menu .region-header-menu {
+    .nav-menu .block-menu .menu-icon,
+    .mobile-nav-menu .block-menu .menu-icon {
+      display: none;
+      margin-left: auto; }
+  .nav-menu .region-header-menu,
+  .mobile-nav-menu .region-header-menu {
     display: flex; }
-    .nav-menu .region-header-menu .language-switcher-language-url ul {
+    .nav-menu .region-header-menu .language-switcher-language-url ul,
+    .mobile-nav-menu .region-header-menu .language-switcher-language-url ul {
       list-style: none;
       padding: 0; }
-      .nav-menu .region-header-menu .language-switcher-language-url ul li {
+      .nav-menu .region-header-menu .language-switcher-language-url ul li,
+      .mobile-nav-menu .region-header-menu .language-switcher-language-url ul li {
         text-transform: uppercase;
         font-weight: bold;
         display: none; }
-        .nav-menu .region-header-menu .language-switcher-language-url ul li:not(.is-active) {
+        .nav-menu .region-header-menu .language-switcher-language-url ul li:not(.is-active),
+        .mobile-nav-menu .region-header-menu .language-switcher-language-url ul li:not(.is-active) {
           display: block; }
-        .nav-menu .region-header-menu .language-switcher-language-url ul li a {
+        .nav-menu .region-header-menu .language-switcher-language-url ul li a,
+        .mobile-nav-menu .region-header-menu .language-switcher-language-url ul li a {
           display: block;
           padding-top: 20px;
           padding-bottom: 3px;
@@ -1946,7 +1971,8 @@ input.error-field {
           font-size: 16px;
           line-height: 30px;
           font-weight: 400; }
-          .nav-menu .region-header-menu .language-switcher-language-url ul li a:hover {
+          .nav-menu .region-header-menu .language-switcher-language-url ul li a:hover,
+          .mobile-nav-menu .region-header-menu .language-switcher-language-url ul li a:hover {
             border-bottom-color: #1e88e5;
             color: #1e88e5; }
 
@@ -2050,6 +2076,49 @@ nav.tabs {
   padding: 10px 15px;
   margin-top: 5px; }
 
+.mobile-nav-menu {
+  position: fixed;
+  left: 0%;
+  top: 0%;
+  right: auto;
+  bottom: 0%;
+  z-index: 140;
+  background-color: #fff;
+  padding: 30px 20px;
+  min-width: 350px;
+  flex-direction: column;
+  overflow: auto;
+  box-shadow: 4px 4px 11px 0 rgba(0, 0, 0, 0.09); }
+  .mobile-nav-menu .region-header-menu {
+    flex-direction: column; }
+    .mobile-nav-menu .region-header-menu .language-switcher-language-url {
+      padding-left: 10px; }
+    .mobile-nav-menu .region-header-menu a {
+      padding-top: 5px !important;
+      font-size: 19px !important; }
+      .mobile-nav-menu .region-header-menu a:hover {
+        border-bottom-color: white !important; }
+    .mobile-nav-menu .region-header-menu .block-menu {
+      flex-direction: column; }
+      .mobile-nav-menu .region-header-menu .block-menu .list-elementi {
+        flex-direction: column !important;
+        padding-left: 10px !important; }
+        .mobile-nav-menu .region-header-menu .block-menu .list-elementi .nav-li {
+          padding: 0; }
+  .mobile-nav-menu .desni-elementi {
+    margin-top: 10px;
+    margin-left: 10px; }
+
+@media screen and (max-width: 991px) {
+  .nav-menu .region-header-menu,
+  .nav-menu .desni-elementi {
+    display: none !important; }
+  .nav-menu .menu-icon {
+    display: block !important;
+    margin-top: 15px; }
+    .nav-menu .menu-icon img {
+      height: 35px;
+      cursor: pointer; } }
 #block-languageswitcher {
   margin-right: 40px; }
   #block-languageswitcher ul {
@@ -5432,7 +5501,7 @@ p {
 .sidelink-l3:focus {
   color: #1e88e5; }
 
-.manual-toggle {
+.sidenav-toggle {
   display: none; }
 
 .dashcol {
@@ -6040,6 +6109,14 @@ p {
     text-align: center;
     cursor: pointer; }
 
+  .section-main.functionalities {
+    display: block !important; }
+    .section-main.functionalities .flexcol {
+      margin-bottom: 18px !important; }
+
+  .mnenja-up {
+    display: block !important; }
+
   .content {
     padding-top: 0px;
     padding-left: 0px; }
@@ -6066,12 +6143,20 @@ p {
     display: flex;
     padding-right: 0px; }
 
+  .koraki-spletnega-anketiranja .row {
+    display: block !important; }
+  .koraki-spletnega-anketiranja .gumb {
+    flex: none !important;
+    width: auto !important;
+    margin-left: auto;
+    margin-right: auto; }
+
   .col._4-12-12-12 {
-    width: 100%;
+    width: 100% !important;
-    -webkit-box-flex: 0;
+    -webkit-box-flex: 0 !important;
-    -webkit-flex: 0 100%;
+    -webkit-flex: 0 100% !important;
-    -ms-flex: 0 100%;
+    -ms-flex: 0 100% !important;
-    flex: 0 100%; }
+    flex: 0 100% !important; }
 
   .col._6-12-12-12 {
     -webkit-flex-basis: 100%;
@@ -6144,7 +6229,7 @@ p {
     max-width: none; }
 
   .kvcol.leftcol {
-    max-width: none;
+    max-width: none !important;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -6179,8 +6264,8 @@ p {
     height: auto;
     margin-bottom: 57px; }
 
-  .div-block-10 {
+  .uvodni-slider {
-    display: block; }
+    display: block !important; }
 
   .image {
     display: none; }
@@ -6251,7 +6336,7 @@ p {
     top: 0%;
     right: 0%;
     bottom: 0%;
-    z-index: 100;
+    z-index: 200;
     display: none;
     overflow: auto;
     margin-right: 0px;
@@ -6259,9 +6344,10 @@ p {
     border: 1px solid #e5e5e5;
     border-radius: 0px;
     background-color: #fff;
-    box-shadow: none; }
+    box-shadow: none;
+    overflow: auto; }
 
-  .manual-toggle {
+  .sidenav-toggle {
     position: fixed;
     left: auto;
     top: auto;
@@ -6274,10 +6360,10 @@ p {
     padding: 9px;
     border-radius: 39px;
     background-color: #1e88e5;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.37); }
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.37);
-
+    cursor: pointer; }
-  .image-3 {
+    .sidenav-toggle img {
-    width: 100%; }
+      width: 100%; }
 
   .medium-icon-wrapper {
     margin-top: 20px; }
@@ -6316,7 +6402,9 @@ p {
     width: 33.3333%; }
 
   .searchform {
-    padding-top: 25px; } }
+    padding-top: 0; }
+    .searchform .container {
+      padding-top: 25px; } }
 @media screen and (max-width: 767px) {
   h1 {
     font-size: 34px;

frontend/drupal9/web/themes/custom/pro1ka/js/script.js

@@ -34,6 +34,28 @@
           jQuery('.searchform').css('transform', 'translate3d(0px, 0px, 0px)');
         });
 
+        // toggle glavni menu na mobile
+        jQuery('.toggleMenu').on('click', function(){
+          let menu = jQuery('.mobile-nav-menu')[0];
+          let toggle_menu = jQuery('.toggleMenu')[0];
+          if(menu.style.display == 'none'){
+            toggle_menu.src="/tema1ka/svg/icons8-close-menu.svg";
+            menu.style.display = 'flex';
+          }
+          else{
+            toggle_menu.src="/tema1ka/svg/icons8-menu.svg";
+            menu.style.display = 'none';
+          }
+        });
+        // togle side menu na mobile
+        jQuery('.sidenav-toggle').on('click', function(){
+          let menu = jQuery('.sidenav')[0];
+          if(menu.style.display !== 'block')
+            menu.style.display = 'block';
+          else
+            menu.style.display = 'none';
+        });
+
         jQuery('.hide-search').on('click', function(){
           jQuery('.searchform').css('transform', 'translate3d(0px, -100%, 0px)');
         });

frontend/drupal9/web/themes/custom/pro1ka/sass/bacis/frontpage.scss

@@ -1,4 +1,5 @@
 .section.uvodni-slider{
+  padding-top: 0;
   z-index: 121;
   display: -webkit-box;
   display: -webkit-flex;
@@ -267,6 +268,9 @@
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
+        max-width: 320px;
+        margin-left: auto;
+        margin-right: auto;
 
         .postavitev {
           display: -webkit-box;

frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss

@@ -1603,7 +1603,7 @@ p {
   color: #1e88e5;
 }
 
-.manual-toggle {
+.sidenav-toggle {
   display: none;
 }
 
@@ -2296,6 +2296,20 @@ p {
     cursor: pointer;
   }
 
+  .section-main{
+    &.functionalities{
+      display: block !important;
+  
+      .flexcol{
+        margin-bottom: 18px !important;
+      }
+    }
+  }
+
+  .mnenja-up{
+    display: block !important;
+  }
+
   .content {
     padding-top: 0px;
     padding-left: 0px;
@@ -2328,12 +2342,24 @@ p {
     padding-right: 0px;
   }
 
+  .koraki-spletnega-anketiranja{
+    .row{
+      display:block !important;
+    }
+    .gumb{
+      flex: none !important;
+      width: auto !important;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  } 
+
   .col._4-12-12-12 {
-    width: 100%;
+    width: 100% !important;
-    -webkit-box-flex: 0;
+    -webkit-box-flex: 0 !important;
-    -webkit-flex: 0 100%;
+    -webkit-flex: 0 100% !important;
-    -ms-flex: 0 100%;
+    -ms-flex: 0 100% !important;
-    flex: 0 100%;
+    flex: 0 100% !important;
   }
 
   .col._6-12-12-12 {
@@ -2418,7 +2444,7 @@ p {
   }
 
   .kvcol.leftcol {
-    max-width: none;
+    max-width: none !important;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -2463,8 +2489,8 @@ p {
     //background-color: #99f2e1;
   }
 
-  .div-block-10 {
+  .uvodni-slider {
-    display: block;
+    display: block !important;
   }
 
   .image {
@@ -2550,7 +2576,7 @@ p {
     top: 0%;
     right: 0%;
     bottom: 0%;
-    z-index: 100;
+    z-index: 200;
     display: none;
     overflow: auto;
     margin-right: 0px;
@@ -2559,9 +2585,10 @@ p {
     border-radius: 0px;
     background-color: #fff;
     box-shadow: none;
+    overflow: auto;
   }
 
-  .manual-toggle {
+  .sidenav-toggle {
     position: fixed;
     left: auto;
     top: auto;
@@ -2575,10 +2602,11 @@ p {
     border-radius: 39px;
     background-color: #1e88e5;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.37);
-  }
+    cursor: pointer;
 
-  .image-3 {
+    img{
-    width: 100%;
+      width: 100%;
+    }
   }
 
   .medium-icon-wrapper {
@@ -2627,7 +2655,10 @@ p {
   }
 
   .searchform {
-    padding-top: 25px;
+    padding-top: 0;
+    .container{
+      padding-top: 25px;
+    }
   }
 }
 
@@ -2747,6 +2778,7 @@ p {
 }
 
 @media screen and (max-width: 479px) {
+
   .section.kvs {
     padding-top: 17px;
   }

frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss

@@ -1,14 +1,15 @@
-.nav-menu {
+.nav-menu,
+.mobile-nav-menu {
   position: fixed;
   left: 0%;
   top: 0%;
   right: 0%;
   bottom: auto;
   z-index: 140;
-  //height: 70px;
   background-color: #fff;
+  min-height: 65px;
 
-/*   .container {
+  /*   .container {
     -webkit-transition: all 1200ms linear;
     -moz-transition: all 1200ms linear;
     -o-transition: all 1200ms linear;
@@ -20,7 +21,7 @@
     }
   } */
 
-  .logo{
+  .logo {
     display: block;
     height: 71px;
     margin-top: 0px;
@@ -29,7 +30,7 @@
     float: left;
   }
 
-  .block-menu{
+  .block-menu {
     z-index: 200;
     display: -webkit-box;
     display: -webkit-flex;
@@ -44,7 +45,7 @@
     -ms-flex: 1;
     flex: 1;
 
-    .list-elementi{
+    .list-elementi {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -64,7 +65,7 @@
       flex-flow: row wrap;
       margin-right: 24px;
 
-      .nav-li{
+      .nav-li {
         padding-right: 15px;
         padding-left: 15px;
         -webkit-box-flex: 0;
@@ -90,10 +91,10 @@
           }
         }
 
-        &.menue-2-drop{
+        &.menue-2-drop {
           display: block;
 
-          .nav-ul-2{
+          .nav-ul-2 {
             position: fixed;
             left: 0px;
             top: 70px;
@@ -117,7 +118,7 @@
     }
 
 
-    .desni-elementi{
+    .desni-elementi {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -138,6 +139,11 @@
         z-index: 999;
       }
     }
+
+    .menu-icon {
+      display: none;
+      margin-left: auto;
+    }
   }
 
   .region-header-menu {
@@ -146,18 +152,18 @@
     .language-switcher-language-url {
       ul {
         list-style: none;
-        padding:  0;
+        padding: 0;
 
         li {
           text-transform: uppercase;
           font-weight: bold;
           display: none;
 
-          &:not(.is-active){
+          &:not(.is-active) {
             display: block;
           }
 
-          a{
+          a {
             display: block;
             padding-top: 20px;
             padding-bottom: 3px;
@@ -167,7 +173,7 @@
             line-height: 30px;
             font-weight: 400;
 
-            &:hover{
+            &:hover {
               border-bottom-color: #1e88e5;
               color: #1e88e5;
             }
@@ -179,26 +185,28 @@
 }
 
 
-.sidebar_menu{
+
+
+.sidebar_menu {
   display: block;
 
-  h4 a{
+  h4 a {
     color: #333;
     text-decoration: none;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 15px;
 
-    &:hover{
+    &:hover {
       color: #1e88e5;
     }
   }
 
-  #forma-iskanje-second{
+  #forma-iskanje-second {
     display: flex;
   }
 
-  ul:not(.contextual-links){
+  ul:not(.contextual-links) {
     display: block;
     margin: 0px;
     padding: 0px;
@@ -225,7 +233,7 @@
         color: #1e88e5;
       }
 
-      a{
+      a {
         -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
@@ -242,7 +250,7 @@
         text-decoration: none;
         text-transform: none;
 
-        &.is-active{
+        &.is-active {
           color: #1e88e5;
         }
 
@@ -253,18 +261,18 @@
     }
   }
 
-  ul.menu-1ka{
+  ul.menu-1ka {
-    li{
+    li {
-      a{
+      a {
         margin-top: 10px;
         text-transform: uppercase;
         font-weight: 600;
       }
     }
 
-    ul.menu{
+    ul.menu {
-      li{
+      li {
-        a{
+        a {
           margin-top: 0px;
           text-transform: none;
           font-weight: 400;
@@ -283,13 +291,13 @@ nav.tabs {
   display: flex;
   margin-top: 40px;
   margin-bottom: 40px;
-  -webkit-box-pack:start;
+  -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: center;
   justify-content: flex-start;
   border-bottom: 1px none #b3d8eb;
 
-  li{
+  li {
     margin-right: 12px;
     border-bottom: 2px solid #d3d3d3;
     font-size: 20px;
@@ -304,13 +312,15 @@ nav.tabs {
       background: none;
       color: #999;
 
-      &:hover, &.is-active{
+      &:hover,
+      &.is-active {
         background-color: #fff;
         color: #1e88e5;
       }
     }
 
-    &:hover, &.is-active{
+    &:hover,
+    &.is-active {
       border-bottom-color: #1e88e5;
       background-color: #fff;
       color: #1e88e5;
@@ -318,7 +328,7 @@ nav.tabs {
   }
 }
 
-#user-menu{
+#user-menu {
   ul.user-menu-link {
     list-style: none;
     padding-inline-start: 0;
@@ -327,3 +337,72 @@ nav.tabs {
     margin-top: 5px;
   }
 }
+
+.mobile-nav-menu {
+  position: fixed;
+  left: 0%;
+  top: 0%;
+  right: auto;
+  bottom: 0%;
+  z-index: 140;
+  background-color: #fff;
+  padding: 30px 20px;
+  min-width: 350px;
+  flex-direction: column;
+  overflow: auto;
+  box-shadow: 4px 4px 11px 0 rgba(0, 0, 0, 0.09);
+
+  .region-header-menu {
+    flex-direction: column;
+
+    .language-switcher-language-url{
+      padding-left: 10px;
+    }
+
+    a {
+      padding-top: 5px !important;
+      font-size: 19px !important;
+
+      &:hover{
+        border-bottom-color: white !important;
+      }
+    }
+
+    .block-menu {
+      flex-direction: column;
+
+      .list-elementi {
+        flex-direction: column !important;
+        padding-left: 10px !important;
+
+        .nav-li {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .desni-elementi {
+    margin-top: 10px;
+    margin-left: 10px;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .nav-menu {
+    .region-header-menu,
+    .desni-elementi {
+      display: none !important;
+    }
+
+    .menu-icon {
+      display: block !important;
+      margin-top: 15px;
+
+      img {
+        height: 35px;
+        cursor: pointer;
+      }
+    }
+  }
+}

frontend/drupal9/web/themes/custom/pro1ka/svg/icons8-close-menu.svg

@@ -0,0 +1 @@
+<svg fill="#333333" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="150px" height="150px"><path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"/></svg>

frontend/drupal9/web/themes/custom/pro1ka/svg/icons8-menu.svg

@@ -0,0 +1 @@
+<svg fill="#333333" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="150px" height="150px"><path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z"/></svg>

frontend/drupal9/web/themes/custom/pro1ka/svg/icons8-user-manual-1.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4C2.44922 4 2 4.44922 2 5V18C2 19.1055 2.89453 20 4 20H10.5859C10.8008 20.5977 11.3633 21 12 21C12.6367 21 13.1992 20.5977 13.4102 20H20C21.1055 20 22 19.1055 22 18V5C22 4.44922 21.5508 4 21 4H16C14.3594 4 12.9102 4.80469 12 6.02734C11.0898 4.80469 9.64063 4 7.99609 4H3ZM16.5 7H17.5C17.7773 7 18 7.22266 18 7.5V8.5C18 8.77734 17.7773 9 17.5 9H16.5C16.2227 9 16 8.77734 16 8.5V7.5C16 7.22266 16.2227 7 16.5 7ZM17 11C17.5508 11 18 11.4492 18 12V15C18 15.5508 17.5508 16 17 16C16.4492 16 16 15.5508 16 15V12C16 11.4492 16.4492 11 17 11Z" fill="white"/>
+</svg>

frontend/drupal9/web/themes/custom/pro1ka/templates/page--front.html.twig

@@ -16,22 +16,22 @@
 
 {# Uvodna slika #}
 <div class="content">
-<div class="section uvodni-slider">
+<div class="section div-block-10 uvodni-slider">
-      <div class="slider-right">
+      <div class="slider-right kv-right-col">
         <img src="/tema1ka/svg/slider-1.svg" loading="lazy" alt="" class="slider-slika s1">
         <img src="/tema1ka/svg/slider-2.svg" loading="lazy" alt="" class="slider-slika s2">
         <img src="/tema1ka/svg/slider-3.svg" loading="lazy" alt="" class="slider-slika s3">
       </div>
-      <div class="slider-left">
+      <div class="slider-left kvcol leftcol">
-        <div class="container">
+        <div class="container maxw">
-              <h1 class="slider-title">
+              <h1 class="slider-title kv-heading">
                 {% if language.id == 'sl' %}
                   Minimalno število klikov
                 {% else %}
                   Minimal number of clicks
                 {% endif %}
               </h1>
-              <p class="slider-subtitle">
+              <p class="slider-subtitle kv-subtext">
                 {% if language.id == 'sl' %}
                   ZMOGLJIVO, HITRO IN ENOSTAVNO ORODJE ZA ANKETIRANJE
                 {% else %}
@@ -68,8 +68,8 @@
           {% endif %}
         </h2>
     </div>
-    <div class="section-main">
+    <div class="section-main functionalities">
-        <div class="col">
+        <div class="col _4-12-12-12">
           <img src="/tema1ka/svg/posameznik.svg" loading="lazy" alt="" class="ikona package">
 
           {% if language.id == 'sl' %}
@@ -105,7 +105,7 @@
 
         </div>
 
-        <div class="col">
+        <div class="col _4-12-12-12">
 
           <img src="/tema1ka/svg/skupine.svg" loading="lazy" alt="" class="ikona package">
 
@@ -156,7 +156,7 @@
         </h2>
     </div>
 
-    <div class="section-main">
+    <div class="section-main functionalities">
       <div class="flexcol">
         <div class="content">
           <div class="icon">
@@ -510,7 +510,7 @@
         </h2>
       </div>
     </div>
-    <div class="row flex">
+    <div class="row flex mnenja-up">
       <div class="col _4-12-12-12">
         <div class="testimonial-tile">
           <div class="test-padding">
@@ -608,7 +608,7 @@
 
           {%  if language.id == 'sl' %}
             <h3 class="heading-2">NOVICE</h3>
-            <p>Razvijalci 1KA se zavzemamo za čim boljšo uporabniško izkušnjo, zato redno delimo novosti o orodju 1KA.</p>
+            <p class="mh2">Razvijalci 1KA se zavzemamo za čim boljšo uporabniško izkušnjo, zato redno delimo novosti o orodju 1KA.</p>
             <div class="buttons-row buttons-center">
               <a href="/d/sl/novice" class="button shrink secondary-button w-inline-block">
                 <div class="button-label">Preberi več</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow">
@@ -617,7 +617,7 @@
             </div>
           {%  else %}
             <h3 class="heading-2">NEWS</h3>
-            <p>Comitted to providing the best possible experience, news about our product are shared frequently.</p>
+            <p class="mh2">Comitted to providing the best possible experience, news about our product are shared frequently.</p>
             <div class="buttons-row buttons-center">
               <a href="/d/sl/novice" class="button shrink secondary-button w-inline-block">
                 <div class="button-label">Read more</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow">
@@ -638,7 +638,7 @@
 
           {%  if language.id == 'sl' %}
             <h3 class="heading-2">O 1KA</h3>
-            <p>1KA je aplikacija, ki omogoča enostavno in dostopno spletno anketiranje.</p>
+            <p class="mh2">1KA je aplikacija, ki omogoča enostavno in dostopno spletno anketiranje.</p>
             <div class="buttons-row buttons-center">
               <a href="https://www.1ka.si/d/sl/o-1ka/nacini-uporabe-storitve-1ka/1ka-mobilna-aplikacija" class="button shrink secondary-button w-inline-block">
                 <div class="button-label">Preberi več</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow">
@@ -647,7 +647,7 @@
             </div>
           {%  else %}
             <h3 class="heading-2">ABOUT 1KA</h3>
-            <p>1KA is a web survey software that makes survey creation easy and accessible.</p>
+            <p class="mh2">1KA is a web survey software that makes survey creation easy and accessible.</p>
             <div class="buttons-row buttons-center">
               <a href="https://www.1ka.si/d/sl/o-1ka/nacini-uporabe-storitve-1ka/1ka-mobilna-aplikacija" class="button shrink secondary-button w-inline-block">
                 <div class="button-label">Read more</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow">
@@ -667,7 +667,7 @@
 
           {%  if language.id == 'sl' %}
             <h3 class="heading-2">1KA PODPORA</h3>
-            <p>Ste ob izdelavi ankete naleteli na težavo? Kontaktirajte našo podporo uporabnikov.</p>
+            <p class="mh2">Ste ob izdelavi ankete naleteli na težavo? Kontaktirajte našo podporo uporabnikov.</p>
             <div class="buttons-row buttons-center">
               <a href="https://www.1ka.si/d/sl/pomoc/video-vodici" class="button shrink secondary-button w-inline-block">
                 <div class="button-label">Preberi več</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
@@ -676,7 +676,7 @@
             </div>
           {% else %}
             <h3 class="heading-2">1KA SUPPORT</h3>
-            <p>Encountered a problem while creating your survey? Contact our customer support.</p>
+            <p class="mh2">Encountered a problem while creating your survey? Contact our customer support.</p>
             <div class="buttons-row buttons-center">
               <a href=" https://www.1ka.si/d/en/help/video-guides" class="button shrink secondary-button w-inline-block">
                 <div class="button-label">Read more</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
@@ -697,7 +697,7 @@
 
           {%  if language.id == 'sl' %}
           <h3 class="heading-2">KAKO DELUJE?</h3>
-          <p>Vsem uporabnikom so na voljo priročniki, video vodiči in odgovori na pogosta vprašanja.</p>
+          <p class="mh2">Vsem uporabnikom so na voljo priročniki, video vodiči in odgovori na pogosta vprašanja.</p>
           <div class="buttons-row buttons-center">
             <a href="#" class="button shrink secondary-button w-inline-block">
               <div class="button-label">Preberi več</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
@@ -706,7 +706,7 @@
           </div>
           {% else %}
           <h3 class="heading-2">HOW DOES IT WORK?</h3>
-          <p>Manuals, video guides and answers to frequently asked questions are available to all users.</p>
+          <p class="mh2">Manuals, video guides and answers to frequently asked questions are available to all users.</p>
           <div class="buttons-row buttons-center">
             <a href="#" class="button shrink secondary-button w-inline-block">
               <div class="button-label">Read more</div><img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">

frontend/drupal9/web/themes/custom/pro1ka/templates/page.html.twig

@@ -43,6 +43,11 @@
 
             {{ page.sidebar_menu }}
           </div>
+
+          {# floating button for toggling side menu #}
+          <div class="sidenav-toggle">
+            <img src="/tema1ka/svg/icons8-user-manual-1.svg" >
+          </div>
 {#        {% endif %}#}
         {# END desni meni #}
 

frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig

@@ -87,6 +87,10 @@
             {% endif %}
           </div>
 
+          <div class="menu-icon">
+            <img class="toggleMenu" src="/tema1ka/svg/icons8-menu.svg">
+          </div>
+
         </div>
       </div>
 
@@ -95,5 +99,57 @@
   </div>
 </div>
 
+
+
+<div class="mobile-nav-menu" style="display: none;">
+  {% if page.header_menu %}
+    {{  page.header_menu }}
+  {% endif %}
+
+  <div class="desni-elementi">
+    <img src="/tema1ka/svg/icons-search-modra.svg" loading="lazy" alt="" class="searchbutton">
+
+    {% if uporabnik is not empty %}
+      <div class="usem-menu">
+        <a href="#" class="login" id="user-login-menu">
+          {{ uporabnik }}
+          <img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow"
+                style="transform: rotateZ(90deg);">
+        <div id="user-menu" style="display: none;">
+          <div name="odjava" method="post" action="/api/drupal/logout">
+            <ul class="user-menu-link">
+              <li>
+                <a class="user-submenu-link" href="/admin/survey/index.php?a=nastavitve&m=global_user_myProfile">
+                  <span class="sprites user_orange"
+                        deluminate_imagetype="png"></span>{{ lang['edit2'] }}
+                </a>
+              </li>
+              <li>
+                <a class="user-submenu-link" href="#" id='poslji-odjavo'>
+                  <span class="sprites logout" deluminate_imagetype="png"></span>{{ lang['logout'] }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    {% elseif language.id == 'sl' %}
+      <a href="#" id="modal-open-login" class="login">
+        Prijava
+        </a>
+      <a href="#" id="modal-open-registration"class="register w-button">
+        Registracija
+      </a>
+    {% else %}
+      <a href="#" id="modal-open-login" class="login">
+        Login
+        </a>
+      <a href="#" id="modal-open-registration"class="register w-button">
+        Registration
+      </a>
+    {% endif %}
+  </div>
+</div>
+
 {# END Navigacija#}