GDPR nastavitve --> seznam anket: barve, tabela

admin/survey/classes/class.GDPR.php

@@ -64,44 +64,57 @@ class GDPR{
 
 		echo '<div class="box-container">';
 
-			echo '<div class= "num_box num_box1">';
+			echo '<div class= "num_box num_box1 checked">';
 
 				echo '<div class="box_flex" id="box_flex">';
 					echo '<input type="checkbox" name="GDPR ankete checkbox" id="gdpr_ankete_check" checked="checked" onclick="test_function()">';
 					echo '<h2> GDPR ANKETE</h2>';
 				echo '</div>';
 
-				echo '<div class="box_text" id="box_text1">';
+				// echo '<div class="box_text" id="box_text1">';
-					echo '<div class="num_of_surveys" id="num_of_surveys1"> 0 </div>';
+				// 	echo '<div class="num_of_surveys" id="num_of_surveys1"> 0 </div>';
-					echo ' <p> anket vsebuje GDPR občutljive podatke </p>';
+				// 	echo ' <p> anket vsebuje GDPR občutljive podatke </p>';
+				// echo '</div>';
+
+				echo '<div class="box_text">';
+				echo '<p> <span class="num_of_surveys" id="num_of_surveys1"> 0 </span> anket ne vsebuje GDPR občutljivih podatkov </p>';
 				echo '</div>';
 			echo '</div>';
 
 
-			echo '<div class= "num_box num_box2">';
+			echo '<div class= "num_box num_box2 checked">';
 
 				echo '<div class="box_flex" id="box_flex potenc_gdpr">';
 					echo '<input type="checkbox" name="Potencialno GDPR ankete" id="potenc_gdpr_ankete_check" checked="checked" onclick="test_function()">';
 					echo '<h2> POTENCIALNO GDPR ANKETE</h2>';
 				echo '</div>';
 
+				// echo '<div class="box_text">';
+				// 	echo '<div class="num_of_surveys"  id="num_of_surveys2"> 0 </div>';
+				// 	echo '<p> anket lahko vsebuje GDPR občutljive podatke. </p>';
+				// echo '</div>';
+
 				echo '<div class="box_text">';
-					echo '<div class="num_of_surveys"  id="num_of_surveys2"> 0 </div>';
+					echo '<p> <span class="num_of_surveys"  id="num_of_surveys2"> 0 </span> anket lahko vsebuje GDPR občutljive podatke. </p>';
-					echo '<p> anket lahko vsebuje GDPR občutljive podatke. </p>';
 				echo '</div>';
+
 			echo '</div>';
 			
 			
-			echo '<div class= "num_box num_box3">';
+			echo '<div class= "num_box num_box3 checked">';
 
 				echo '<div class="box_flex" id="box_flex">';
 				echo '<input type="checkbox" name="ne-gdpr ankete" id="ne_gdpr_ankete" checked="checked" onclick="test_function()" >';
 					echo '<h2> NE-GDPR ANKETE</h2>';
 				echo '</div>';
 
+				// echo '<div class="box_text">';
+				// 	echo ' <div class="num_of_surveys"  id="num_of_surveys3"> 0 </div>';
+				// 	echo '<p> anket ne vsebuje GDPR občutljivih podatkov </p>';
+				// echo '</div>';
+
 				echo '<div class="box_text">';
-					echo ' <div class="num_of_surveys"  id="num_of_surveys3"> 0 </div>';
+					echo '<p> <span class="num_of_surveys" id="num_of_surveys3"> 0 </span> anket ne vsebuje GDPR občutljivih podatkov </p>';
-					echo '<p> anket ne vsebuje GDPR občutljivih podatkov </p>';
 				echo '</div>';
 
 			echo '</div>';

admin/survey/script/GDPR_seznam_anket.js

@@ -7,9 +7,9 @@ var text_box2 = document.getElementById("num_of_surveys2");
 var text_box3 = document.getElementById("num_of_surveys3");
 
 // izpis ŠTEVILA posameznih anket (gdpr / potencialno gdpr / ne-gdpr)
-text_box1.innerHTML = "<div>" + green_row_count+ "</div>";
+text_box1.innerHTML =  green_row_count;
-text_box2.innerHTML = "<div>" + red_row_count+ "</div>";
+text_box2.innerHTML =  red_row_count;
-text_box3.innerHTML = "<div>" + grey_row_count+ "</div>";
+text_box3.innerHTML = grey_row_count;
 
 
 
@@ -30,37 +30,62 @@ function test_function() {
 
 
     // GDPR ANKETE togle
+    var box1 = document.getElementsByClassName("num_box1")[0];
     if (!inputs.checked){
+
+        
+        box1.classList.remove("checked");
+
         // skrije vsak element z green_row classom
         for(var i=0; i < green_row.length; i++){
             green_row[i].style.display="none";
         };
     }
     else{
+        // box1.classList.toggle("checked");
+        box1.classList.add("checked");
+
         // prikaže vsak element z green_row classom
         for(var i=0; i < green_row.length; i++){
             green_row[i].style.display="table-row";
         };
     }
+
+
     // potencialno GDPR ankete togle
+    var box2 = document.getElementsByClassName("num_box2")[0];
+
+
     if (!potenc_gdpr.checked){
+        box2.classList.remove("checked");
+
         for(var i=0; i < red_row.length; i++){
             red_row[i].style.display="none";
         };
     }
     else{
+        box2.classList.add("checked");
+
         for(var i=0; i < red_row.length; i++){
             red_row[i].style.display="table-row";
         };
     }
+
+
+
     // ne-GDPR ankete
+    var box3 = document.getElementsByClassName("num_box3")[0];
     if (!ne_gdpr_ankete.checked){
 
+        box3.classList.remove("checked");
+
         for(var i=0; i < grey_row.length; i++){
             grey_row[i].style.display="none";
         };
     }
     else{
+        box3.classList.add("checked");
+
         for(var i=0; i < grey_row.length; i++){
             grey_row[i].style.display="table-row";
         };

resources/sass/admin_new/components/form/seznam_anket.scss

@@ -7,8 +7,11 @@
 
     margin-top: 16px;
 
+
+
     .num_box{
-        border: #1E88E5 solid 1px;
+        border: unset;
+        background-color: #FFFF;
 
         margin: 0px;
         padding: 0px;
@@ -39,7 +42,7 @@
         }
 
         .box_text{
-            padding: 0px 16px 16px 16px;
+            padding: 5px 16px 16px 16px;
             font-size: 16px;
             line-height: 20px;
             color: #808080;
@@ -48,7 +51,7 @@
             align-items: center;
 
             .num_of_surveys{
-                font-size: 40px;
+                font-size: 32px;
                 color: #333;
                 font-weight: 400;
 
@@ -58,6 +61,11 @@
         }
     }
 
+    .checked {
+        border: #1E88E5 solid 1px;
+        background-color: #FFEFEF;
+    }
+
     .num_box2{
         margin: 0px 32px ;
     }

resources/sass/admin_new/pages/gdpr_pages/gdpr_tables.scss

@@ -7,9 +7,22 @@
 
 table {
     &.gdpr_surveys {
-        table-layout: fixed;
+        table-layout: auto;
         width: 100%;
 
+        th {
+            background-color: #F8F8F8;
+        }
+
+        tr{
+            background-color: #FFEFEF;
+        }
+
+        th,
+        td, {
+            border: 1px solid #E5E5E5;
+        }
+
         tr.red_row {
             td {
                 background-color: $light-red !important;