From 5af2219bac5ff9e44a2d0d348e62d28cb57ee7f7 Mon Sep 17 00:00:00 2001
From: Krehan Tim <mail@timkrehan.de>
Date: Fri, 9 Nov 2018 15:17:00 +0100
Subject: [PATCH] simplyfied popup texts as function

---
 bin/index.js     |  5 +++++
 bin/list.js      | 10 ++--------
 cont/list.php    |  2 --
 style/list.css   | 30 ------------------------------
 style/master.css | 40 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 47 insertions(+), 40 deletions(-)
 create mode 100644 bin/index.js

diff --git a/bin/index.js b/bin/index.js
new file mode 100644
index 0000000..b45b4f3
--- /dev/null
+++ b/bin/index.js
@@ -0,0 +1,5 @@
+function infoPopUp(infotext){
+  $("#info-popup-text").text(infotext);
+  $("#info-popup-text").css("animation", "none");
+  setTimeout(function(){$("#info-popup-text").css("animation", "fade 4s linear");}, 100);
+}
diff --git a/bin/list.js b/bin/list.js
index 0dfe365..05bced1 100644
--- a/bin/list.js
+++ b/bin/list.js
@@ -9,14 +9,8 @@ $(document).ready(function(){
         id: dataId,
         status: $(this).prop("checked")
       },
-      success: function(){
-          $("#saved font").css("animation", "none");
-          setTimeout(function(){$("#saved font").css("animation", "fade 4s linear");}, 100);
-      },
-      error: function(){
-          $("#error font").css("animation", "none");
-          setTimeout(function(){$("#error font").css("animation", "fade 6s linear");}, 100);
-      }
+      success: function(){infoPopUp("SAVED!");},
+      error: function(){infoPopUp("Netzwerkfehler! Bitte aktualisieren.");}
     });
     if($(this).prop("checked")){$("[data-id='"+dataId+"']").addClass("checked");}
     else{$("[data-id='"+dataId+"']").removeClass("checked");}
diff --git a/cont/list.php b/cont/list.php
index e512a47..7810c60 100644
--- a/cont/list.php
+++ b/cont/list.php
@@ -35,5 +35,3 @@
   ?>
 </div>
 </form>
-<div id="saved"><font>SAVED!</font></div>
-<div id="error"><font>Netzwerkfehler!<br /> Bitte aktualisieren.</font></div>
diff --git a/style/list.css b/style/list.css
index e522262..23aa14b 100644
--- a/style/list.css
+++ b/style/list.css
@@ -92,33 +92,3 @@ border-left: none;
 .list_row.odd.checked {
   border-left: 3px solid #888;
 }
-
-#saved, #error {
-  pointer-events: none;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  bottom: 2%;
-  margin: 0;
-  left: 0;
-  width: 100%;
-}
-#saved font, #error font {
-  color: #ffffff;
-  background-color: #000000;
-  padding: .1em .5em .2em;
-  border-radius: 50px;
-  opacity: 0;
-}
-
-#error font {
-  padding: .1em 1em .2em;
-}
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-}
diff --git a/style/master.css b/style/master.css
index 2bce375..2553976 100644
--- a/style/master.css
+++ b/style/master.css
@@ -65,7 +65,47 @@ h3 {
   cursor: pointer;
 }
 
+.button:hover {
+  background-color: #4CAFFF;
+}
+
+.button-disabled {
+  background-color: grey;
+  cursor: not-allowed;
+}
+
+.button-disabled:hover {
+  background-color: grey;
+}
+
 .hover:hover {
   background-color: #4CAF50;
   cursor: pointer;
 }
+
+#info-popup {
+  pointer-events: none;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  bottom: 2%;
+  margin: 0;
+  left: 0;
+  width: 100%;
+}
+#info-popup-text {
+  color: #ffffff;
+  background-color: #000000;
+  padding: .1em .5em .2em;
+  border-radius: 50px;
+  opacity: 0;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+}