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

# Conflicts:
#	public/css/admin_new.css

admin/survey/SurveyAdmin.php

@@ -702,16 +702,20 @@ class SurveyAdmin
         $text = (strlen($text) > 25) ? substr($text, 0, 25) . '...' : $text;
 
         echo '<div id="xtradiv"><strong class="xtraname">'.$text.' <span class="faicon arrow2_d small" /></strong>';
-        echo '<div id="xtradivSettings">';
 
-        echo '<span class="xtraSetting"><a class="xtra" href="' . $site_url . 'admin/survey/index.php?a=nastavitve&m=global_user_myProfile"><span class="faicon user"></span>' . $lang['edit_data'] . '</a></span>';
+        echo '<div id="xtradivSettings"><ul>';
+
+        echo '<li><a class="xtra" href="' . $site_url . 'admin/survey/index.php?a=nastavitve&m=global_user_myProfile"><span class="faicon user"></span>' . $lang['edit_data'] . '</a></li>';
 
         // Odjava na nov nacin preko frontend/api
-        echo '<form name="odjava" id="form_odjava_desktop" method="post" action="'.$site_url.'frontend/api/api.php?action=logout">';
+        echo '<li>';
-        echo '<span class="xtraSetting"><a class="xtra" href="#" onClick="$(\'#form_odjava_desktop\').submit();"><span class="faicon logout"></span>' . $lang['logout'] . '</a></span>';
+        echo '  <form name="odjava" id="form_odjava_desktop" method="post" action="'.$site_url.'frontend/api/api.php?action=logout">';
-        echo '</form>';
+        echo '      <a class="xtra" href="#" onClick="$(\'#form_odjava_desktop\').submit();"><span class="faicon logout"></span>' . $lang['logout'] . '</a>';
+        echo '  </form>';
+        echo '</li>';
+
+        echo '</ul></div>';
         
-        echo '</div>';
         echo '</div>';
 
         
@@ -918,12 +922,16 @@ class SurveyAdmin
         // Moje ankete
         echo '<li>';
         echo '  <div id="mojeAnketeLink">';
-        echo '      <a href="index.php?a=pregledovanje" title="' . $lang['srv_pregledovanje'] . ' (' . strtolower($lang['srv_create_survey']) . ', ' . strtolower($lang['srv_library']) . ')"><span class="library_link">' . $lang['srv_pregledovanje'] . '</span></a>';
+        echo '      <a href="index.php?a=pregledovanje" title="' . $lang['srv_pregledovanje'] . ' (' . strtolower($lang['srv_create_survey']) . ', ' . strtolower($lang['srv_library']) . ')"><span class="faicon clipboard_notes"></span>'.$lang['srv_pregledovanje'].'</a>';
         echo '  </div>';
         echo '</li>';
 
         if ($this->skin == 0 && $this->isAnketar == false) {
 
+            // Separator
+            if($css_status == 'off')
+                echo '<li class="separator"></li>';
+
             echo '<li class="active_'.$css_status.'">';
 
             if ($d->checkDostopSub('dashboard'))
@@ -938,6 +946,11 @@ class SurveyAdmin
 
             echo '</li>';
         }
+        else{
+            // Separator
+            if($css_urejanje == 'off')
+                echo '<li class="separator"></li>';
+        }
 
         echo '<li class="active_'.$css_urejanje.'">';
         if ($d->checkDostopSub('edit') && $hierarhija_type < 5) {
@@ -3785,19 +3798,26 @@ class SurveyAdmin
 
 
             if(is_null($hierarhija_type) || $hierarhija_type == 1){
-              echo '<span class="expanded-tooltip bottom" id="request_help_content">';
+                echo '<div class="expanded-tooltip bottom" id="request_help_content">';
 
-              echo '<b>' . $lang['srv_users_viewing2'] . '</b><p>';
+                echo '<div class="block">';
-              while ($row = mysqli_fetch_array($sql)) {
+
-                $sql1 = sisplet_query("SELECT name, surname, email FROM users WHERE id = '$row[user]'");
+                echo '  <span class="line semi-bold">';
-                if ($row1 = mysqli_fetch_array($sql1)) {
+                echo        $lang['srv_users_viewing2'];
-                  echo '<a href="mailto:' . $row1['email'] . '" target="_blank">' . $row1['email'] . '</a> (' . $row1['name'] . ' ' . $row1['surname'] . ')<br>';
+                echo '  </span>';
+                
+                while ($row = mysqli_fetch_array($sql)) {
+                    $sql1 = sisplet_query("SELECT name, surname, email FROM users WHERE id = '$row[user]'");
+                    if ($row1 = mysqli_fetch_array($sql1)) {
+
+                        echo '  <span class="line semi-bold">';
+                        echo '      <a href="mailto:' . $row1['email'] . '" target="_blank">' . $row1['email'] . '</a> (' . $row1['name'] . ' ' . $row1['surname'] . ')';
+                        echo '  </span>';
+                    }
                 }
-              }
+                echo '</div>';
-              echo '</p>';
 
-              echo '<span class="arrow"></span>';
+                echo '</div>';    // expanded-tooltip bottom
-              echo '</span>';    // expanded-tooltip bottom
             }
             echo '</span>'; // request-help
 
@@ -3818,10 +3838,10 @@ class SurveyAdmin
         echo '<span class="tooltip request-help">';
 
         echo '<a href="#" onclick="return false;" title="' . $lang['srv_request_help'] . '">';
-        echo '<span class="faicon users icon-as_link"></span>';
+        echo '  <span class="faicon users icon-as_link"></span>';
         echo '</a>';
 
-        echo '<span class="expanded-tooltip bottom light" id="request_help_content">';
+        echo '<span class="expanded-tooltip bottom" id="request_help_content">';
 
         $this->request_help_content();
 
@@ -3835,43 +3855,73 @@ class SurveyAdmin
 
         $row = SurveyInfo::getInstance()->getSurveyRow();
 
-        echo '<b>' . $lang['srv_dostopmail_1'] . '</b>';
+        echo '<div class="block">';
+        echo '  <span class="line semi-bold">';
+        echo        $lang['srv_dostopmail_1'];
+        echo '  </span>';
+        echo '</div>';
 
         $d = new Dostop();
 
         $users = $d->getDostop();
 
+
         if (is_countable($users[2]) && count($users[2]) > 0) {
-            echo '<p><b>' . $lang['srv_users'] . ':</b> ';
+
-            if ($d->checkDostopAktiven()) echo ' (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>)';
+            echo '<div class="block">';
-            echo '<br>';
+
+            echo '  <span class="line semi-bold">';
+            echo        $lang['srv_users'].':';
+            if ($d->checkDostopAktiven()) 
+                echo '  (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>)';
+            echo '  </span>';
 
             foreach ($users[2] AS $user) {
-                echo ' - ' . $user['email'] . '<br>';
+                echo '  <span class="line">';
+                echo        $user['email'];
+                echo '  </span>';
             }
-            echo '</p>';
+
+            echo '</div>';
         }
 
+
         if (is_countable($users[1]) && count($users[1]) > 0) {
-            echo '<p><b>' . $lang['managers'] . ':</b>';
+
-            if ($d->checkDostopAktiven()) echo ' (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>)';
+            echo '<div class="block">';
-            echo '<br>';
+
+            echo '  <span class="line semi-bold">';
+            echo        $lang['managers'].':';
+            if ($d->checkDostopAktiven()) 
+                echo '      (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>)';
+            echo '  </span>';
 
             foreach ($users[1] AS $user) {
-                echo ' - ' . $user['email'] . '<br>';
+                echo '  <span class="line">';
+                echo        $user['email'];
+                echo '  </span>';
             }
-            echo '</p>';
+
+            echo '</div>';
         }
 
-        echo '<p><b>' . $lang['srv_request_help_txt3'] . '</b> ' . Help::display('help-centre') . '<br>';
+
+        echo '<div class="block">';
+
+        echo '  <span class="line semi-bold">';
+        echo        $lang['srv_request_help_txt3'].' '.Help::display('help-centre');
+        echo '  </span>';
+
+        echo '  <span class="line">';
         if ($users[0] !== false) {
             echo $lang['srv_request_help_txt4'] . ' ' . date('j.n.Y', strtotime($users[0])) . ' (<a href="#" onclick="dostop_admin(1); return false;">' . $lang['hour_remove'] . '</a>)';
-        } else {
+        } 
+        else {
             echo '<a href="#" onclick="dostop_admin(); return false;">' . $lang['srv_dostop_admin'] . '</a>';
         }
-        echo '</p>';
+        echo '  </span>';
 
-        echo '<span class="arrow"></span>';
+        echo '</div>';
     }
 
     function displaySecondNavigationLinks($navigation = 0)
@@ -5808,43 +5858,61 @@ class SurveyAdmin
         // Predogled in testiranje (ikona monitor)
         echo '<div class="anketa_header_preview">';
 
-        echo '<span class="tooltip monitor">';
+        echo '<div class="tooltip monitor">';
-        echo ' <a href="' . $link . '&preview=on' . $preview_options . '" target="_blank"><span class="faicon monitor"></span></a> ';
+        echo '<a href="' . $link . '&preview=on' . $preview_options . '" target="_blank"><span class="faicon monitor"></span></a> ';
-        echo '<span id="tooltip_preview_content" class="expanded-tooltip bottom light">';
         
-        echo '<b>' . $lang['srv_monitor_toolbox_title'] . '</b>';
+        echo '<div id="tooltip_preview_content" class="expanded-tooltip bottom">';
         
-        echo '<p>';
+        echo '<div class="block">';
+        echo '  <span class="line semi-bold">';
+        echo        $lang['srv_monitor_toolbox_title'];
+        echo '  </span>';
+        echo '</div>';
+
+        echo '<div class="block">';
 
         // Ce imamo izklopljene mobilne prilagoditve ne pustimo preview-ja na mobile, ker itak ne prikaze scalano
         $mobile_friendly = SurveySetting::getInstance()->getSurveyMiscSetting('mobile_friendly');
         if($mobile_friendly != '0'){ 
-            echo '<b><a href="' . $link . '&preview=on' . $preview_options . '" target="_blank">' . $lang['srv_preview'] . ' PC</a>';
+            echo '  <span class="line semi-bold">';
-            echo ' &nbsp;(<a href="' . $link . '&preview=on&mobile=1' . $preview_options . '" target="_blank">' . $lang['srv_preview_mobile'] . '</a>, ';
+            echo '      <a href="' . $link . '&preview=on' . $preview_options . '" target="_blank">' . $lang['srv_preview'] . ' PC</a>';
-            echo '<a href="' . $link . '&preview=on&mobile=2' . $preview_options . '" target="_blank">' . $lang['srv_preview_tablet'] . '</a>)</b>';
+            echo '      &nbsp;(<a href="' . $link . '&preview=on&mobile=1' . $preview_options . '" target="_blank">' . $lang['srv_preview_mobile'] . '</a>, ';
+            echo '      <a href="' . $link . '&preview=on&mobile=2' . $preview_options . '" target="_blank">' . $lang['srv_preview_tablet'] . '</a>)';
+            echo '  </span>';
         }
         else{
-            echo '<b><a href="' . $link . '&preview=on' . $preview_options . '" target="_blank">' . $lang['srv_preview'] . ' PC</a></b>';
+            echo '  <span class="line semi-bold">';
+            echo '      <a href="' . $link . '&preview=on' . $preview_options . '" target="_blank">' . $lang['srv_preview'] . ' PC</a>';
+            echo '  </span>';
         }
 
-        echo '<br />(' . $lang['srv_monitor_toolbox_preview'] . ')';
+        echo '  <span class="line">';
+        echo '      (' . $lang['srv_monitor_toolbox_preview'] . ')';
+        echo '  </span>';
 
-        echo '</p>';
+        echo '</div>';
 
         // V formi in glasovanju nimamo testnih vnosov
         if ($this->survey_type != 0 && $this->survey_type != 1) {
-            echo '<a href="' . $link . '&preview=on&testdata=on' . $preview_options . '" title="" target="_blank">';
-            echo '<b>' . $lang['srv_survey_testdata'] . '</b>';
-            echo '</a>';
 
-            echo '<br />(' . $lang['srv_monitor_toolbox_test'] . ')';
+            echo '<div class="block">';
+
+            echo '  <span class="line semi-bold">';
+            echo '      <a href="' . $link . '&preview=on&testdata=on' . $preview_options . '" title="" target="_blank">';
+            echo            $lang['srv_survey_testdata'];
+            echo '      </a>';
+            echo '  </span>';
+
+            echo '  <span class="line">';
+            echo '      (' . $lang['srv_monitor_toolbox_test'] . ')';
+            echo '  </span>';
+
+            echo '</div>';
         }
-        echo '<br /><br />';
 
-        echo '<span class="arrow"></span>';
+        echo '</div>';    // expanded-tooltip bottom
         
-        echo '</span>';    // expanded-tooltip bottom
+        echo '</div>'; // request-help
-        echo '</span>'; // request-help
 
         echo '</div>';
 

public/css/admin_new.css

@@ -5121,10 +5121,12 @@ body #main_holder #main .fullwidth {
 }
 body #main_holder #main .narrow {
   margin: 0 auto;
+  padding: 0 32px;
   max-width: 1060px;
 }
 body #main_holder #main .wide {
   margin: 0 auto;
+  padding: 0 32px;
   max-width: 1360px;
 }
 body #main_holder #main .menu_left {
@@ -6627,6 +6629,166 @@ a.help {
 /* 
     Components scss
 */
+/* 
+    Qtip vprasajcek popup in tooltip
+*/
+.qtip {
+  box-sizing: border-box;
+  width: 400px !important;
+  max-width: 90vw;
+  padding: 16px;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: white;
+  box-shadow: 0px 2px 7px -1px rgba(0, 0, 0, 0.25);
+}
+.qtip .qtip-tip {
+  display: none !important;
+}
+.qtip .qtip-wrapper {
+  overflow: visible !important;
+  border: 0 !important;
+  /* Krizec za zaprtje vprasajcka */
+}
+.qtip .qtip-wrapper .qtip-contentWrapper {
+  border: 0 !important;
+  /* Vsebina vprasajcka */
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-title {
+  padding: 0 !important;
+  /*margin-top: 10px;*/
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-title .qtip-button {
+  position: absolute !important;
+  top: -16px;
+  right: -10px;
+  font-size: 12px !important;
+  color: #777777;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-title .qtip-button:hover {
+  color: #333333;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content {
+  overflow: visible !important;
+  padding: 0 !important;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: white !important;
+  border: 0;
+  /* Naslov - opcijsko */
+  /* Link "Več >" */
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content textarea {
+  box-sizing: border-box;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content h1 {
+  margin: 0 0 16px 0;
+  color: #333333 !important;
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: uppercase;
+  background-color: white !important;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content h1::before {
+  padding-right: 8px;
+  font-family: "Font Awesome 5 Free";
+  content: "\f059";
+  font-size: 20px;
+  color: #1E88E5;
+  vertical-align: -1px;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more {
+  display: block;
+  margin-top: 16px;
+  font-weight: 600;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more a {
+  text-decoration: none;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more a:hover {
+  text-decoration: none;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more::after {
+  cursor: pointer;
+  padding-left: 8px;
+  vertical-align: middle;
+  font-family: "Font Awesome 5 Free";
+  content: "\f054";
+  font-size: 8px;
+  color: #1E88E5;
+  transition: 0.2s;
+}
+.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more:hover::after {
+  color: #0059ab;
+}
+.qtip .qtip-borderTop, .qtip .qtip-borderBottom {
+  display: none !important;
+}
+
+/* toostip popups */
+.expanded-tooltip {
+  padding: 16px;
+  color: #333333;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+  text-align: left;
+  background: #FFFFFF;
+  border: 1px solid #C4C4C4;
+  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.07);
+  z-index: 99999;
+  position: absolute;
+  top: -45px;
+  left: -25px;
+  display: block;
+  width: 200px;
+  height: 29px;
+  margin: 0;
+}
+.expanded-tooltip a {
+  text-decoration: none;
+}
+.expanded-tooltip ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.expanded-tooltip ul li {
+  margin-bottom: 16px;
+}
+.expanded-tooltip ul li:last-of-type {
+  margin-bottom: 0;
+}
+.expanded-tooltip ul li span {
+  cursor: pointer;
+  color: #333333;
+}
+.expanded-tooltip ul li span:hover {
+  color: #1E88E5;
+}
+
+.expanded-tooltip.bottom {
+  top: 35px;
+  left: -100px;
+  height: auto;
+}
+
+#request_help_content.expanded-tooltip {
+  /*left: -85px;*/
+}
+
+#tooltip_preview_content.expanded-tooltip {
+  /*left: -90px;*/
+}
+
+#baseSurveyInfoImg .expanded-tooltip {
+  width: 400px;
+  left: -38px;
+}
+#baseSurveyInfoImg .expanded-tooltip span.arrow {
+  left: 12%;
+}
+
 /* 
     Created on : 21-12-2021
     Author     : Peter Hrvatin
@@ -6987,258 +7149,6 @@ body.waitlong #loading {
   font-size: 14px;
 }
 
-/* 
-    Qtip vprasajcek popup in tooltip
-*/
-.qtip {
-  box-sizing: border-box;
-  width: 400px !important;
-  max-width: 90vw;
-  padding: 16px;
-  font-size: 16px;
-  line-height: 20px;
-  background-color: white;
-  box-shadow: 0px 2px 7px -1px rgba(0, 0, 0, 0.25);
-}
-.qtip .qtip-tip {
-  display: none !important;
-}
-.qtip .qtip-wrapper {
-  overflow: visible !important;
-  border: 0 !important;
-  /* Krizec za zaprtje vprasajcka */
-}
-.qtip .qtip-wrapper .qtip-contentWrapper {
-  border: 0 !important;
-  /* Vsebina vprasajcka */
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-title {
-  padding: 0 !important;
-  /*margin-top: 10px;*/
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-title .qtip-button {
-  position: absolute !important;
-  top: -16px;
-  right: -10px;
-  font-size: 12px !important;
-  color: #777777;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-title .qtip-button:hover {
-  color: #333333;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content {
-  overflow: visible !important;
-  padding: 0 !important;
-  font-size: 16px;
-  line-height: 20px;
-  background-color: white !important;
-  border: 0;
-  /* Naslov - opcijsko */
-  /* Link "Več >" */
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content textarea {
-  box-sizing: border-box;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content h1 {
-  margin: 0 0 16px 0;
-  color: #333333 !important;
-  font-size: 16px;
-  font-weight: 600;
-  text-transform: uppercase;
-  background-color: white !important;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content h1::before {
-  padding-right: 8px;
-  font-family: "Font Awesome 5 Free";
-  content: "\f059";
-  font-size: 20px;
-  color: #1E88E5;
-  vertical-align: -1px;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more {
-  display: block;
-  margin-top: 16px;
-  font-weight: 600;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more a {
-  text-decoration: none;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more a:hover {
-  text-decoration: none;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more::after {
-  cursor: pointer;
-  padding-left: 8px;
-  vertical-align: middle;
-  font-family: "Font Awesome 5 Free";
-  content: "\f054";
-  font-size: 8px;
-  color: #1E88E5;
-  transition: 0.2s;
-}
-.qtip .qtip-wrapper .qtip-contentWrapper .qtip-content .qtip-more:hover::after {
-  color: #0059ab;
-}
-.qtip .qtip-borderTop, .qtip .qtip-borderBottom {
-  display: none !important;
-}
-
-/* toostip popups */
-.expanded-tooltip {
-  /*max-height: 90vh;
-  overflow-y: scroll;*/
-  max-width: 90vw;
-  padding: 16px;
-  font-size: 16px;
-  line-height: 20px;
-  background-color: white;
-  top: -45px;
-  left: -25px;
-  z-index: 99999;
-  position: absolute;
-  display: block;
-  margin: 0;
-  width: 200px;
-  height: 29px;
-  padding-bottom: 10px;
-  /*color: $grey_super_dark !important;
-  background-color: $soft_blue_very_lighten;
-  border: 1px solid $soft_blue;
-     padding: 10px 10px 0 10px;*/
-  background-color: white;
-  text-align: center;
-  font-weight: normal;
-  font-size: 11px;
-  line-height: 14px;
-}
-.expanded-tooltip .popup_close {
-  position: absolute !important;
-  top: 10px;
-  right: 10px;
-  z-index: 9999;
-  font-size: 12px !important;
-  color: #777777;
-}
-.expanded-tooltip .popup_close:hover {
-  color: #333333;
-}
-.expanded-tooltip .popup_close a {
-  color: #777777;
-  text-decoration: none;
-}
-.expanded-tooltip .popup_close a:hover {
-  color: #333333;
-}
-.expanded-tooltip h2,
-.expanded-tooltip .divPopUp_top {
-  width: 100%;
-  margin-top: 3px;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  font-weight: 600;
-  font-size: 16px;
-  text-transform: uppercase;
-  border-bottom: 1px #E5E5E5 solid;
-}
-.expanded-tooltip p {
-  line-height: 20px;
-}
-.expanded-tooltip .button_holder {
-  justify-content: end !important;
-  margin: 16px 0 0 0;
-}
-.expanded-tooltip .button_holder button:last-child {
-  margin-right: 0;
-}
-.expanded-tooltip.warning_popup h2::before {
-  padding-right: 8px;
-  font-family: "Font Awesome 5 Free";
-  content: "\f071";
-  font-size: 14px;
-  color: #FFC700;
-}
-.expanded-tooltip a {
-  font-weight: 600 !important;
-}
-.expanded-tooltip a.close {
-  color: #E5E5E5;
-  float: right;
-}
-.expanded-tooltip span.arrow {
-  display: none;
-  display: block;
-  height: 18px;
-  left: 50%;
-  top: 35px;
-  overflow: hidden;
-  position: absolute;
-  width: 60px;
-  margin-left: -30px;
-}
-.expanded-tooltip span.arrow:after {
-  background-color: white;
-  border: 2px solid white;
-  content: "";
-  height: 25px;
-  left: 15px;
-  position: absolute;
-  top: -20px;
-  width: 25px;
-  -webkit-box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
-  -moz-box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
-  box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-}
-
-.expanded-tooltip.bottom {
-  text-align: left;
-  left: -100px;
-  top: 35px;
-  background-color: white;
-  height: auto;
-  z-index: 99999;
-}
-.expanded-tooltip.bottom span.arrow {
-  top: -18px;
-}
-.expanded-tooltip.bottom span.arrow:after {
-  background-color: white;
-  top: 10px;
-  -webkit-box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
-  -moz-box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
-  box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
-}
-
-.expanded-tooltip.light {
-  /*background-color: $soft_blue_very_lighten;
-
-     span.arrow {
-  	&:after {
-  		background-color: $soft_blue_very_lighten;
-  	}
-  }*/
-}
-
-#request_help_content.expanded-tooltip {
-  /*left: -85px;*/
-}
-
-#tooltip_preview_content.expanded-tooltip {
-  /*left: -90px;*/
-  top: 33px;
-}
-
-#baseSurveyInfoImg .expanded-tooltip {
-  width: 400px;
-  left: -38px;
-}
-#baseSurveyInfoImg .expanded-tooltip span.arrow {
-  left: 12%;
-}
-
 /* 
     Popupi z nastavitvami 
 */
@@ -9727,6 +9637,7 @@ header #top_line #logo_holder.namestitev a {
 }
 header #top_line #anketa_header_settings {
   display: flex;
+  align-items: center;
   margin-left: 30px;
 }
 header #top_line #anketa_header_settings .anketa_header_naslov a {
@@ -9737,16 +9648,57 @@ header #top_line #anketa_header_settings .anketa_header_naslov a {
 }
 header #top_line #anketa_header_settings .anketa_header_help {
   display: flex;
+  flex-direction: column;
   align-items: center;
   margin-left: 37px;
 }
+header #top_line #anketa_header_settings .anketa_header_help .faicon {
+  padding-bottom: 20px;
+  margin-bottom: -20px;
+}
+header #top_line #anketa_header_settings .anketa_header_help .block {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+}
+header #top_line #anketa_header_settings .anketa_header_help .block .line {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+header #top_line #anketa_header_settings .anketa_header_help .block .line:last-child {
+  margin-bottom: 0;
+}
+header #top_line #anketa_header_settings .anketa_header_help .block:last-child {
+  margin-bottom: 0;
+}
 header #top_line #anketa_header_settings .anketa_header_activation {
   display: flex;
   align-items: center;
 }
 header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_preview {
+  display: flex;
+  flex-direction: column;
   margin-left: 32px;
 }
+header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_preview .faicon {
+  padding-bottom: 20px;
+  margin-bottom: -20px;
+}
+header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_preview .block {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+}
+header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_preview .block .line {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_preview .block .line:last-child {
+  margin-bottom: 0;
+}
+header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_preview .block:last-child {
+  margin-bottom: 0;
+}
 header #top_line #anketa_header_settings .anketa_header_activation .anketa_header_url {
   margin-left: 32px;
   color: #777777;
@@ -9866,41 +9818,55 @@ header #top_line #xtradiv .xtraname span {
   line-height: 20px;
 }
 header #top_line #xtradiv #xtradivSettings {
+  padding: 16px;
+  color: #333333;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+  text-align: left;
+  background: #FFFFFF;
+  border: 1px solid #C4C4C4;
+  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.07);
   display: none;
   position: absolute;
   z-index: 99999;
-  right: 8px;
+  right: 0;
-  top: 35px;
+  top: 40px;
-  padding: 5px 10px;
   width: 120px;
-  text-align: left;
-  background-color: #FFFFFF;
-  border: 1px #1E88E5 solid;
-  -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
-  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
-  -moz-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
 }
-header #top_line #xtradiv #xtradivSettings span.xtraSetting {
+header #top_line #xtradiv #xtradivSettings a {
-  clear: both;
+  text-decoration: none;
-  float: left;
-  padding: 6px 0;
 }
-header #top_line #xtradiv #xtradivSettings span.xtraSetting a.xtra {
+header #top_line #xtradiv #xtradivSettings ul {
-  display: inline;
+  margin: 0;
-  vertical-align: middle;
+  padding: 0;
-  font-size: 13px;
+  list-style-type: none;
+}
+header #top_line #xtradiv #xtradivSettings ul li {
+  margin-bottom: 16px;
+}
+header #top_line #xtradiv #xtradivSettings ul li:last-of-type {
+  margin-bottom: 0;
+}
+header #top_line #xtradiv #xtradivSettings ul li span {
+  cursor: pointer;
   color: #333333;
 }
-header #top_line #xtradiv #xtradivSettings span.xtraSetting a.xtra:hover {
+header #top_line #xtradiv #xtradivSettings ul li span:hover {
-  color: #FFC700;
+  color: #1E88E5;
 }
-header #top_line #xtradiv #xtradivSettings span.xtraSetting a.xtra:hover .faicon {
+header #top_line #xtradiv #xtradivSettings a {
-  color: #FFC700;
+  color: #1E88E5;
 }
-header #top_line #xtradiv #xtradivSettings span.xtraSetting a.xtra span.faicon {
+header #top_line #xtradiv #xtradivSettings a:hover {
-  display: inline;
+  color: #0059ab;
-  vertical-align: middle;
+}
-  margin-right: 10px;
+header #top_line #xtradiv #xtradivSettings a:hover .faicon:before {
+  color: #0059ab;
+}
+header #top_line #xtradiv #xtradivSettings a .faicon:before {
+  margin-right: 8px;
+  color: #1E88E5;
 }
 header #top_line .tooltip {
   position: relative;
@@ -9959,6 +9925,17 @@ header #surveyNavigation #firstNavigation ol.navigation_buttons_list li.active_o
 header #surveyNavigation #firstNavigation ol.navigation_buttons_list li.active_on a {
   color: #1E88E5;
 }
+header #surveyNavigation #firstNavigation ol.navigation_buttons_list li #mojeAnketeLink .faicon {
+  margin-right: 8px;
+}
+header #surveyNavigation #firstNavigation ol.navigation_buttons_list li #mojeAnketeLink .faicon:before {
+  font-size: 16px;
+}
+header #surveyNavigation #firstNavigation ol.navigation_buttons_list li.separator {
+  height: 38px;
+  padding: 0;
+  border-left: 1px #FFFFFF solid;
+}
 header #surveyNavigation #firstNavigation ol.quick_settings li {
   margin-left: 16px;
 }
@@ -10130,6 +10107,7 @@ header #topSettingsHolder .left_options_holder #dataOnlyValid label {
 header #topSettingsHolder .left_options_holder #analizaSubNav {
   position: relative;
   display: flex;
+  align-items: center;
   margin-right: 32px;
 }
 header #topSettingsHolder .left_options_holder #analizaSubNav span {
@@ -10139,11 +10117,10 @@ header #topSettingsHolder .left_options_holder #analizaSubNav span {
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza {
   cursor: pointer;
   z-index: 78;
+  height: 26px;
   width: 190px;
+  margin-left: 8px;
   background-color: #FFFFFF;
-  border: 1px solid #C4C4C4;
-  box-sizing: border-box;
-  border-radius: 2px;
 }
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza:hover ul li.highlightLineTab {
   background: none;
@@ -10153,29 +10130,40 @@ header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLink
   transition: 0.2s;
 }
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul {
+  position: absolute;
   z-index: 78;
+  top: -2px;
   margin: 0;
   padding: 0;
+  width: 190px;
   list-style-type: none;
+  background-color: #FFFFFF;
+  border: 1px solid #C4C4C4;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul:after {
+  position: absolute;
+  right: 8px;
+  top: 5px;
+  font-family: "Font Awesome 5 Free";
+  content: "\f078";
+  font-size: 10px;
+  font-weight: 600;
 }
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul li {
-  padding: 2px 1px;
+  padding: 5px 8px;
   border: 0;
 }
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul li a {
   display: block;
   margin-right: 12px;
   text-decoration: none;
-  color: #333333 !important;
+  color: #C4C4C4 !important;
 }
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul li:hover > a {
   color: #333333 !important;
 }
-header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul li.highlightLineTab {
-  background-image: url(../../../admin/survey/icons/icons/bullet_arrow_down.png);
-  background-repeat: no-repeat;
-  background-position: right 1px;
-}
 header #topSettingsHolder .left_options_holder #analizaSubNav #globalSetingsLinks.analiza ul li.highlightLineTab a span {
   font-weight: 500;
   color: #333333 !important;

resources/sass/admin_new/basic/layout.scss

@@ -30,11 +30,13 @@ body{
 
             .narrow{
                 margin: 0 auto;
+                padding: 0 32px;
                 max-width: 1060px;
             }
 
             .wide{
                 margin: 0 auto;
+                padding: 0 32px;
                 max-width: 1360px;
             }
 

resources/sass/admin_new/components/header/navigation.scss

@@ -61,6 +61,20 @@ header{
                         
                         #mojeAnketeLink {
                             
+                            .faicon{
+                                margin-right: 8px;
+
+                                &:before{
+                                    font-size: 16px;
+                                }
+                                    
+                            }
+                        }
+
+                        &.separator{
+                            height: 38px;
+                            padding: 0;
+                            border-left: 1px $white solid;
                         }
                     }
                 }
@@ -292,6 +306,7 @@ header{
             #analizaSubNav {
                 position: relative;
                 display: flex;
+                align-items: center;
 
                 margin-right: 32px;
 
@@ -303,14 +318,13 @@ header{
                 #globalSetingsLinks.analiza {
                     cursor: pointer;
                     z-index: 78;
+                    
+                    height: 26px;
                     width: 190px;
+                    margin-left: 8px;
     
                     background-color: $white;
     
-                    border: 1px solid $dark-gray;
-                    box-sizing: border-box;
-                    border-radius: 2px;
-    
                     &:hover {
     
                         ul {
@@ -327,14 +341,36 @@ header{
                     }
 
                     ul {
+                        position: absolute;
                         z-index: 78;
+                        top: -2px;
+
                         margin: 0;
                         padding: 0;
+                        width: 190px;
 
                         list-style-type: none;
 
+                        background-color: $white;
+
+                        border: 1px solid $dark-gray;
+                        box-sizing: border-box;
+                        border-radius: 2px;
+
+                        
+                        &:after {
+                            position: absolute;
+                            right: 8px;
+                            top: 5px;
+
+                            font-family: $fontawesome;
+                            content: "\f078";
+                            font-size: 10px;
+                            font-weight: 600;
+                        }   
+
                         li {
-                            padding: 2px 1px;
+                            padding: 5px 8px;
                             border: 0;
 
                             a {
@@ -342,7 +378,7 @@ header{
                                 margin-right: 12px;
 
                                 text-decoration: none;
-                                color: $black !important;
+                                color: $dark-gray !important;
                             }
 
                             &:hover {
@@ -352,9 +388,6 @@ header{
                             }
                         }
                         li.highlightLineTab {
-                            background-image: url(../../../admin/survey/icons/icons/bullet_arrow_down.png);
-                            background-repeat: no-repeat;
-                            background-position: right 1px;
     
                             a {
                                 span {

resources/sass/admin_new/components/header/top_line.scss

@@ -39,6 +39,7 @@ header #top_line{
     // Podatki o anketi v zgornji vrstici (naslov, aktivacija, preview...)
     #anketa_header_settings{
         display: flex;
+        align-items: center;
         
         margin-left: 30px;
 
@@ -54,8 +55,36 @@ header #top_line{
         // Help, preview ikone
         .anketa_header_help{
             display: flex;
+            flex-direction: column;
             align-items: center;
+
             margin-left: 37px;     
+            
+            .faicon{
+                padding-bottom: 20px;
+                margin-bottom: -20px;
+            }
+
+            .block{
+                display: flex;
+                flex-direction: column;
+
+                margin-bottom: 8px;
+
+                .line{
+                    margin-bottom: 8px;
+
+                    font-size: 14px;
+
+                    &:last-child{
+                        margin-bottom: 0;
+                    }
+                }
+
+                &:last-child{
+                    margin-bottom: 0;
+                }
+            }
         }
 
         .anketa_header_activation{
@@ -63,7 +92,36 @@ header #top_line{
             align-items: center;
 
             .anketa_header_preview{
+                display: flex;
+                flex-direction: column;
+
                 margin-left: 32px;
+
+                .faicon{
+                    padding-bottom: 20px;
+                    margin-bottom: -20px;
+                }
+
+                .block{
+                    display: flex;
+                    flex-direction: column;
+
+                    margin-bottom: 8px;
+
+                    .line{
+                        margin-bottom: 8px;
+
+                        font-size: 14px;
+
+                        &:last-child{
+                            margin-bottom: 0;
+                        }
+                    }
+
+                    &:last-child{
+                        margin-bottom: 0;
+                    }
+                }
             }
 
             .anketa_header_url{
@@ -233,50 +291,33 @@ header #top_line{
         }
 
         #xtradivSettings {
+            @include hover_basic();
+
             display: none;
             position: absolute;
             z-index: 99999;
-            right: 8px;
+            right: 0;
-            top: 35px;
+            top: 40px;
 
-            padding: 5px 10px;
             width: 120px; 
             
-            text-align: left;
+            a{
+                color: $blue;
 
-            background-color: $white;
+                &:hover{
-            border: 1px $blue solid;
+                    color: $dark-blue;
-            -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.4);
-            box-shadow: 0 5px 15px 0 rgba(0,0,0,0.4);
-            -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.4);
                     
-            span.xtraSetting {
+                    .faicon:before{
-                clear: both;
+                        color: $dark-blue;
-                float: left;
-                padding: 6px 0;
-
-                a.xtra {
-                    display: inline;
-                    vertical-align: middle;
-                    
-                    font-size: 13px;
-                    color: $black;
-                    
-                    &:hover {
-                        color: $yellow;
-                        .faicon {
-                            color: $yellow;
-                        }
-                    }
-                    
-                    span.faicon {
-                        display: inline;
-                        vertical-align: middle;
-                        margin-right: 10px;
                     }
                 }
-            }
 
+                .faicon:before{
+                    margin-right: 8px;
+
+                    color: $blue;
+                }
+            }
         }
         
     }

resources/sass/admin_new/components/hover/hover.scss

@@ -39,3 +39,5 @@
         }
     }
 }
+
+@import "qtip";

resources/sass/admin_new/components/hover/qtip.scss

@@ -133,106 +133,33 @@
 
 /* toostip popups */
 .expanded-tooltip {
-    @include popup_general();
+    @include hover_basic();
 
-	top: -45px;
-	left: -25px;
 	z-index: 99999;
     position: absolute;
+	top: -45px;
+	left: -25px;
     
 	display: block;
-	margin: 0;
 	width: 200px;
     height: 29px;
-    padding-bottom: 10px;
+	margin: 0;
-	
-	/*color: $grey_super_dark !important;
-	background-color: $soft_blue_very_lighten;
-	border: 1px solid $soft_blue;
-    padding: 10px 10px 0 10px;*/
-    background-color: white;
-    
-    text-align: center;
-    font-weight: normal;
-    font-size: 11px;
-    line-height: 14px;
-    
-	a {
-		font-weight: 600 !important;
-    }
-    
-	a.close {
-		color: $gray;
-		float: right;
-    }
-    
-    span.arrow {
-        display: none;
-        
-		display: block;
-		height: 18px;
-		left: 50%;
-		top: 35px;
-		overflow: hidden;
-		position: absolute;
-		width: 60px;
-        margin-left: -30px;
-        
-		&:after {
-			background-color: white;
-			border: 2px solid white;
-			content: "";
-			height: 25px;
-			left: 15px;
-			position: absolute;
-			top: -20px;
-			width: 25px;
-			-webkit-box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
-			-moz-box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
-			box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
-			-webkit-transform: rotate(45deg);
-			-moz-transform: rotate(45deg);
-			-ms-transform: rotate(45deg);
-			-o-transform: rotate(45deg);
-		}
-	}
 }
 
 .expanded-tooltip.bottom {
-	text-align: left;
-	left: -100px;
 	top: 35px;
-	background-color: white;
+	left: -100px;
 	height: auto;
-	z-index: 99999;
-    
-    span.arrow {
-		top: -18px;
-		&:after {
-			background-color: white;
-			top: 10px;
-			-webkit-box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
-			-moz-box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
-			box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
-		}
-	}
 }
-.expanded-tooltip.light {
-	/*background-color: $soft_blue_very_lighten;
 
-    span.arrow {
-		&:after {
-			background-color: $soft_blue_very_lighten;
-		}
-	}*/
-}
 #request_help_content.expanded-tooltip{
 	/*left: -85px;*/
 }
+
 #tooltip_preview_content.expanded-tooltip{
 	/*left: -90px;*/
-	top: 33px;
 }
+
 #baseSurveyInfoImg {
 	.expanded-tooltip {
 		width: 400px;

resources/sass/admin_new/components/popup/popup.scss

@@ -9,7 +9,6 @@
 
 @import "other";
 @import "loader";
-@import "qtip";
 @import "settings";
 @import "alert";
 @import "error";