Drupal: Paketi sprememba

frontend/drupal/sites/all/themes/pro1ka/sass/parts/nakup-paketa.scss

@@ -11,7 +11,9 @@
 }
 
 .paketi {
-  padding: 0px;
+  padding: 2rem;
+  margin-top: -11px;
+  background: #FFF;
 
   .podnaslov {
     line-height: 24px;

frontend/drupal/sites/all/themes/pro1ka/sass/parts/nakupovanje-meni.scss

@@ -0,0 +1,52 @@
+.nakupovanje-meni{
+  background-color: #f7f7f7;
+
+  .container {
+    display: flex;
+    justify-content: center;
+
+
+    ul.nakupovanje-tabs {
+      list-style-type: none;
+      padding-left: 0px;
+      width: 60%;
+      align-self: center;
+
+      li {
+        width: 33.333%;
+        display: block;
+        float: left;
+        text-align: center;
+        bottom: -1px;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        border-style: solid;
+        border-width: 1px;
+        border-color: #FFFFFF;
+        background-color: #EEEEEE;
+        -webkit-transition: border 200ms ease;
+        transition: border 200ms ease;
+        color: #333333;
+        font-weight: 400;
+        text-align: center;
+        padding: 1rem;
+        border: 4px solid #FFF;
+        font-weight: bold;
+
+        &.active {
+          background: #FFFFFF;
+
+          a{
+            color: $oranzna;
+          }
+        }
+      }
+    }
+  }
+}

frontend/drupal/sites/all/themes/pro1ka/sass/pro1ka.scss

@@ -15,6 +15,7 @@
 @import "parts/slider";
 @import "parts/iskalnik";
 @import "parts/navigacija";
+@import "parts/nakupovanje-meni";
 @import "parts/naslovnica";
 @import "parts/stripe";
 @import "parts/nakup-paketa";

frontend/drupal/sites/all/themes/pro1ka/templates/nakupovanje-1ka-cenik-poslovni-uporabniki.tpl.php

@@ -12,17 +12,69 @@ global $language;
 
 ?>
 
-<?php if ($sidebar): ?>
+<?php //if ($sidebar): ?>
-  <aside class="nav-ul-2 w-list-unstyled">
+<!--  <aside class="nav-ul-2 w-list-unstyled">-->
-    <?php print $sidebar; ?>
+<!--    --><?php //print $sidebar; ?>
-  </aside>
+<!--  </aside>-->
-<?php endif; ?>
+<?php //endif; ?>
+<!---->
+<?php //if ($sidebar): ?>
+<!--  <div class="sidecol">-->
+<!--    --><?php //print $sidebar; ?>
+<!--  </div>-->
+<?php //endif; ?>
 
-<?php if ($sidebar): ?>
+
-  <div class="sidecol">
+<style>
-    <?php print $sidebar; ?>
+  .sidecol {
+    display: none !important;
+  }
+
+  .maincontent h1 {
+    display: none;
+  }
+</style>
+<div class='nakupovanje-meni'>
+  <div class='container'>
+    <ul class='nakupovanje-tabs'>
+      <li>
+        <a href='/d/sl/cenik/zasebni-paketi'
+           class='nakupovanje-tabs-link'>
+          <div class='ikona-tab'>
+            <i class='fas fa-user'
+               style='font-size: 2rem;'
+               aria-hidden='true'>
+            </i>
+          </div>
+          Posamezniki
+        </a>
+      </li>
+      <li class='active'>
+        <a href='/d/sl/cenik/poslovni-paketi' class='nakupovanje-tabs-link'>
+          <div class='ikona-tab'>
+            <i class='fas fa-users'
+               style='font-size: 2rem;'
+               aria-hidden='true'>
+            </i>
+          </div>
+          Skupine
+        </a>
+      </li>
+      <li>
+        <a href='#'
+           class='nakupovanje-tabs-link'>
+          <div class='ikona-tab'>
+            <i class='far fa-window-restore'
+               style='font-size: 2rem;'
+               aria-hidden='true'>
+            </i>
+          </div>
+          Ostalo storitve
+        </a>
+      </li>
+    </ul>
   </div>
-<?php endif; ?>
+</div>
 
 <div class="section poslovni-uporabniki paketi">
   <div class="container">

frontend/drupal/sites/all/themes/pro1ka/templates/nakupovanje-1ka-cenik-zasebni-uporabniki.tpl.php

@@ -1,6 +1,6 @@
 <?php
 
-// Render the sidebars to see if there's anything in them.
+//// Render the sidebars to see if there's anything in them.
 $sidebar = render($page['sidebar']);
 // Decide on layout classes by checking if sidebars have content.
 $content_class = '';
@@ -11,18 +11,69 @@ endif;
 global $language;
 
 ?>
+<!---->
+<?php //if ($sidebar): ?>
+<!--  <aside class="nav-ul-2 w-list-unstyled">-->
+<!--    --><?php //print $sidebar; ?>
+<!--  </aside>-->
+<?php //endif; ?>
+<!---->
+<?php //if ($sidebar): ?>
+<!--  <div class="sidecol">-->
+<!--    --><?php //print $sidebar; ?>
+<!--  </div>-->
+<?php //endif; ?>
+<style>
+  .sidecol{
+    display: none !important;
+  }
 
-<?php if ($sidebar): ?>
+  .maincontent h1{
-  <aside class="nav-ul-2 w-list-unstyled">
+    display: none;
-    <?php print $sidebar; ?>
+  }
-  </aside>
+</style>
-<?php endif; ?>
+<div class="nakupovanje-meni">
-
+  <div class="container">
-<?php if ($sidebar): ?>
+    <ul class='nakupovanje-tabs'>
-  <div class="sidecol">
+    <li
-    <?php print $sidebar; ?>
+      class='active'>
+      <a href='/d/sl/cenik/zasebni-paketi'
+         class='nakupovanje-tabs-link'>
+        <div class='ikona-tab'>
+          <i class='fas fa-user'
+             style='font-size: 2rem;'
+             aria-hidden='true'>
+          </i>
+        </div>
+        Posamezniki
+      </a>
+    </li>
+    <li>
+      <a href='/d/sl/cenik/poslovni-paketi' class='nakupovanje-tabs-link'>
+        <div class='ikona-tab'>
+          <i class='fas fa-users'
+             style='font-size: 2rem;'
+             aria-hidden='true'>
+          </i>
+        </div>
+        Skupine
+      </a>
+    </li>
+    <li>
+      <a href='#'
+         class='nakupovanje-tabs-link'>
+        <div class='ikona-tab'>
+          <i class='far fa-window-restore'
+             style='font-size: 2rem;'
+             aria-hidden='true'>
+          </i>
+        </div>
+        Ostalo storitve
+      </a>
+    </li>
+  </ul>
   </div>
-<?php endif; ?>
+</div>
 
 <div class="section paketi">
   <div class="container">