From 7544e83854c2ee40f176efd4b9074e598338c0bc Mon Sep 17 00:00:00 2001
From: pero1203 <peter.hrvatin@gmail.com>
Date: Mon, 3 Jan 2022 11:34:02 +0100
Subject: [PATCH] Dodan divPopUp_info (npr. warning okno pri piskotkih)

---
 admin/survey/SurveyAdminSettings.php          |  10 +-
 lang/1.php                                    |   2 +-
 lang/2.php                                    |   2 +-
 public/css/admin_new.css                      | 186 +++++++++---------
 .../admin_new/components/popup/basic.scss     |  63 +++++-
 .../admin_new/components/popup/other.scss     |  11 --
 .../sass/admin_new/components/popup/qtip.scss |  11 +-
 7 files changed, 164 insertions(+), 121 deletions(-)

diff --git a/admin/survey/SurveyAdminSettings.php b/admin/survey/SurveyAdminSettings.php
index 64ac92504..7b1e9a900 100644
--- a/admin/survey/SurveyAdminSettings.php
+++ b/admin/survey/SurveyAdminSettings.php
@@ -707,11 +707,11 @@ class SurveyAdminSettings {
             
             echo '<fieldset>';
 
-            echo '<div class="setting_holder" id="cookie_alert">';
-            echo '<span class="">'.$lang['srv_cookie_alert_title'].'</span>';
-            echo '<span class="">'.$lang['srv_cookie_alert_1'].'</span>';
-            echo '<span class="">'.$lang['srv_cookie_alert_2'].'</span>';
-            echo '<span class="">'.$lang['srv_cookie_alert'].'</span>';
+            echo '<div class="divPopUp_info warning_popup" id="cookie_alert">';
+            echo '<h2>'.$lang['srv_cookie_alert_title'].'</h2>';
+            echo '<p>'.$lang['srv_cookie_alert_1'].'</p>';
+            echo '<p>'.$lang['srv_cookie_alert_2'].'</p>';
+            echo '<p>'.$lang['srv_cookie_alert'].'</p>';
             echo '</div>';
             
             echo '<legend>' . $lang['srv_cookie'] . '</legend>';
diff --git a/lang/1.php b/lang/1.php
index 3d8b0d2d6..13421d39a 100644
--- a/lang/1.php
+++ b/lang/1.php
@@ -6438,7 +6438,7 @@ $lang = array (
 	'srv_edits_analysis_num_sessions'			=>	'Število seans',
 	'srv_edits_analysis_editing_details'		=>	'Podrobnosti urejanja',
 	'srv_edits_analysis_graph'					=>	'Graf urejanja',
-	'srv_cookie_alert_title'					=>	'<b>Pozor!</b>',
+	'srv_cookie_alert_title'					=>	'Uporaba piškotkov',
 	'srv_cookie_alert_1'						=>	'Vklopili ste piškotke oziroma kukije (cookies).',
 	'srv_cookie_alert_2'						=>	'Preverite, če jih res potrebujete, posebej pa preverite potencialen konflikt z drugimi identifikatorji! <a href="https://www.1ka.si/d/sl/pomoc/prirocniki/nastavitve-za-dostop-respondentov-piskotki-ip-naslovi-gesla-sistemsko-prepoznavanja?from1ka=1" target="_blank">Več >></a>',
 	'srv_cookie_alert'							=>	'Respondent bo ob prihodu na stran dobil obvestilo, da stran uporablja piškotke! <a href="https://www.1ka.si/d/sl/o-1ka/pogoji-uporabe-storitve-1ka/politika-zasebnosti?from1ka=1" target="_blank">Več >></a>',
diff --git a/lang/2.php b/lang/2.php
index e09ccc548..ce5c5fa1e 100644
--- a/lang/2.php
+++ b/lang/2.php
@@ -6323,7 +6323,7 @@ $lang = array (
 	'srv_edits_analysis_num_sessions'			=>	'Number of sessions',
 	'srv_edits_analysis_editing_details'		=>	'Editing details',
 	'srv_edits_analysis_graph'					=>	'Graph of edits',
-	'srv_cookie_alert_title'					=>	'<b>Alert!</b>',
+	'srv_cookie_alert_title'					=>	'Cookies usage',
 	'srv_cookie_alert_1'						=>	'You have enabled cookies.',
 	'srv_cookie_alert_2'						=>	'Check to see if you really need them, especially to check a potential conflict with other identifiers!',
 	'srv_cookie_alert'							=>	'Respondent will be alerted that the survey uses cookies!',
diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 72e5225b8..50f0fd9bc 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -7716,6 +7716,92 @@ div#gdrp_requests_unresolved {
 /* 
     Popupi - splosno
 */
+/* Popup info box (ki se pojavi npr. ob nastavitvi in ne na fade podlagi) */
+/* Standarden popup, ki se pojavi na fade podlagi */
+.divPopUp {
+  /*max-height: 90vh;
+  overflow-y: scroll;*/
+  max-width: 90vw;
+  padding: 16px;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: white;
+}
+.divPopUp .popup_close {
+  position: absolute !important;
+  top: 10px;
+  right: 10px;
+  z-index: 9999;
+  font-size: 12px !important;
+  color: #777777;
+}
+.divPopUp .popup_close:hover {
+  color: #333333;
+}
+.divPopUp .popup_close a {
+  color: #777777;
+  text-decoration: none;
+}
+.divPopUp .popup_close a:hover {
+  color: #333333;
+}
+.divPopUp h2,
+.divPopUp .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;
+}
+.divPopUp p {
+  line-height: 20px;
+}
+.divPopUp .button_holder {
+  justify-content: end;
+  margin: 16px 0 0 0;
+}
+.divPopUp .button_holder button:last-child {
+  margin-right: 0;
+}
+
+.divPopUp_info {
+  padding: 16px;
+  background-color: #FFFFFF;
+  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.25);
+}
+.divPopUp_info h2 {
+  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;
+}
+.divPopUp_info span,
+.divPopUp_info p {
+  display: block;
+  padding-bottom: 16px;
+}
+.divPopUp_info span:last-child,
+.divPopUp_info p:last-child {
+  padding-bottom: 0;
+}
+.divPopUp_info a {
+  font-weight: 500;
+}
+.divPopUp_info.warning_popup h2::before {
+  padding-right: 8px;
+  font-family: "Font Awesome 5 Free";
+  content: "";
+  font-size: 14px;
+  color: #FFC700;
+}
+
 #fade {
   display: none;
   position: fixed;
@@ -7740,55 +7826,9 @@ div#gdrp_requests_unresolved {
   z-index: 81;
 }
 #fade .popup_holder .divPopUp {
-  /*max-height: 90vh;
-  overflow-y: scroll;*/
-  max-width: 90vw;
-  padding: 16px;
-  font-size: 16px;
-  line-height: 20px;
-  background-color: white;
   display: none;
   position: relative;
 }
-#fade .popup_holder .divPopUp .popup_close {
-  position: absolute !important;
-  top: 10px;
-  right: 10px;
-  z-index: 9999;
-  font-size: 12px !important;
-  color: #777777;
-}
-#fade .popup_holder .divPopUp .popup_close:hover {
-  color: #333333;
-}
-#fade .popup_holder .divPopUp .popup_close a {
-  color: #777777;
-  text-decoration: none;
-}
-#fade .popup_holder .divPopUp .popup_close a:hover {
-  color: #333333;
-}
-#fade .popup_holder .divPopUp h2,
-#fade .popup_holder .divPopUp .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;
-}
-#fade .popup_holder .divPopUp p {
-  line-height: 20px;
-}
-#fade .popup_holder .divPopUp .button_holder {
-  justify-content: end;
-  margin: 16px 0 0 0;
-}
-#fade .popup_holder .divPopUp .button_holder button:last-child {
-  margin-right: 0;
-}
 #fade .popup_holder .divPopUp .buttons_holder {
   position: absolute;
   bottom: 20px;
@@ -7947,16 +7987,7 @@ span.active-editors {
   position: absolute;
   right: 20%;
   top: 300px;
-  padding: 16px;
   width: 300px;
-  border: 1px solid #E5E5E5;
-}
-#cookie_alert span {
-  display: block;
-  padding-bottom: 7px;
-}
-#cookie_alert a {
-  font-weight: 500;
 }
 
 #ie_alert {
@@ -8038,56 +8069,15 @@ body.waitlong #loading {
     Qtip vprasajcek popup in tooltip
 */
 .qtip {
-  /*max-height: 90vh;
-  overflow-y: scroll;*/
+  box-sizing: border-box;
+  width: 400px !important;
   max-width: 90vw;
   padding: 16px;
   font-size: 16px;
   line-height: 20px;
   background-color: white;
-  box-sizing: border-box;
-  width: 400px !important;
   box-shadow: 0px 2px 7px -1px rgba(0, 0, 0, 0.25);
 }
-.qtip .popup_close {
-  position: absolute !important;
-  top: 10px;
-  right: 10px;
-  z-index: 9999;
-  font-size: 12px !important;
-  color: #777777;
-}
-.qtip .popup_close:hover {
-  color: #333333;
-}
-.qtip .popup_close a {
-  color: #777777;
-  text-decoration: none;
-}
-.qtip .popup_close a:hover {
-  color: #333333;
-}
-.qtip h2,
-.qtip .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;
-}
-.qtip p {
-  line-height: 20px;
-}
-.qtip .button_holder {
-  justify-content: end;
-  margin: 16px 0 0 0;
-}
-.qtip .button_holder button:last-child {
-  margin-right: 0;
-}
 .qtip .qtip-tip {
   display: none !important;
 }
diff --git a/resources/sass/admin_new/components/popup/basic.scss b/resources/sass/admin_new/components/popup/basic.scss
index 1f3ba4606..ee41a65ad 100644
--- a/resources/sass/admin_new/components/popup/basic.scss
+++ b/resources/sass/admin_new/components/popup/basic.scss
@@ -3,6 +3,58 @@
 */
 
 
+/* Popup info box (ki se pojavi npr. ob nastavitvi in ne na fade podlagi) */
+@mixin popup_info() {
+    padding: 16px;
+	
+    background-color: $white;
+    box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.25);
+	
+    h2{
+        width: 100%;
+        margin-top: 3px;
+        margin-bottom: 16px;
+        padding-bottom: 8px;
+
+        font-weight: 600;
+        font-size: 16px;
+        text-transform: uppercase;
+
+        border-bottom: 1px $gray solid;
+    }
+
+	span, 
+    p{
+		display: block;
+		padding-bottom: 16px;
+
+        &:last-child{
+            padding-bottom: 0;
+        }
+	}
+
+	a{
+		font-weight: 500;
+	}
+
+    &.warning_popup{
+
+        h2::before{
+            padding-right: 8px;
+
+            font-family: $fontawesome;
+            content: "\f071";
+
+            font-size: 14px;
+            color: $yellow;
+            //vertical-align: -1px;
+        }   
+    }
+
+}
+
+
+/* Standarden popup, ki se pojavi na fade podlagi */
 @mixin popup_general() {
     /*max-height: 90vh;
     overflow-y: scroll;*/
@@ -68,6 +120,15 @@
 }
 
 
+.divPopUp {
+    @include popup_general();
+}
+
+.divPopUp_info{
+    @include popup_info();
+}
+
+
 #fade {
 	display: none;
 	position: fixed;
@@ -96,8 +157,6 @@
     
         /* basic popup */
         .divPopUp {
-            @include popup_general();
-
             display: none;
 
             position: relative;
diff --git a/resources/sass/admin_new/components/popup/other.scss b/resources/sass/admin_new/components/popup/other.scss
index 81fb721d4..b318ea5b4 100644
--- a/resources/sass/admin_new/components/popup/other.scss
+++ b/resources/sass/admin_new/components/popup/other.scss
@@ -132,18 +132,7 @@ span.active-editors {
 	right: 20%;
 	top: 300px;
 
-    padding: 16px;
 	width: 300px;
-	
-	border: 1px solid $gray;
-	
-	span {
-		display: block;
-		padding-bottom: 7px;
-	}
-	a{
-		font-weight: 500;
-	}
 }
 #ie_alert {
 	position: absolute;
diff --git a/resources/sass/admin_new/components/popup/qtip.scss b/resources/sass/admin_new/components/popup/qtip.scss
index e4993779e..a7208c467 100644
--- a/resources/sass/admin_new/components/popup/qtip.scss
+++ b/resources/sass/admin_new/components/popup/qtip.scss
@@ -3,11 +3,16 @@
 */
 
 .qtip{
-    @include popup_general();
-
     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-tip{
@@ -72,7 +77,7 @@
 
                         font-family: $fontawesome;
                         content: "\f059";
-                        
+
                         font-size: 20px;
                         color: $blue;
                         vertical-align: -1px;