Popups confirmation changes

+ Reset button confirmation, Bulma update and a few other minor changes

Author: Martin Hlaváč

README.md

@@ -1,5 +1,6 @@
 # Events Timer
 
-This is a very simple application for visual display and highlighting the events (time) countdown for speakers.
+This is a simple countdown application with two time dependent notifications. 
+The main use is for speakers at events and conferences ...
 
-https://hlavacm.github.io/events-timer/
+See at: https://hlavacm.github.io/events-timer/

docs/404.html

@@ -7,12 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Event Timer - 404</title>
     <meta name="keywords" content="event,timer,countdown">
-    <meta name="description" content="This is a very simple application for visual display and highlighting the events (time) countdown for speakers.">
+    <meta name="description" content="This is a simple countdown application with two time dependent notifications. The main use is for speakers at events and conferences ...">
     <meta name="author" content="Martin Hlaváč">
     <meta name="robots" content="noindex,nofollow" />
     <meta property="og:title" content="Event Timer - Countdown">
     <meta property="og:image" content="images/icon.png">
-    <meta property="og:description" content="This is a very simple application for visual display and highlighting the events (time) countdown for speakers.">
+    <meta property="og:description" content="This is a simple countdown application with two time dependent notifications. The main use is for speakers at events and conferences ...">
     <link rel="icon" href="images/favicon.ico">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
     <link rel="stylesheet" type="text/css" href="styles.css">

docs/index.html

@@ -7,11 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Event Timer - Countdown</title>
   <meta name="keywords" content="event,timer,countdown">
-  <meta name="description" content="This is a very simple application for visual display and highlighting the events (time) countdown for speakers.">
+  <meta name="description" content="This is a simple countdown application with two time dependent notifications. The main use is for speakers at events and conferences ...">
   <meta name="author" content="Martin Hlaváč">
   <meta property="og:title" content="Event Timer - Countdown">
   <meta property="og:image" content="images/icon.png">
-  <meta property="og:description" content="This is a very simple application for visual display and highlighting the events (time) countdown for speakers.">
+  <meta property="og:description" content="This is a simple countdown application with two time dependent notifications. The main use is for speakers at events and conferences ...">
   <link rel="icon" href="images/favicon.ico">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
   <link rel="stylesheet" type="text/css" href="styles.css">
@@ -51,7 +51,7 @@
                   <button id="settings-button" class="button is-info modal-button" data-target="#settings-modal"><span>Settings</span></button>
                 </p>
                 <p class="control">
-                  <button id="credits-button" class="button is-info modal-button" data-target="#credits-modal"><span>Credits</span></button>
+                  <button id="credits-button" class="button is-primary modal-button" data-target="#credits-modal"><span>Credits</span></button>
                 </p>
               </div>
             </div>
@@ -150,6 +150,10 @@
         </div>
 
       </section>
+      <footer class="modal-card-foot">
+        <a id="save-settings-button" class="button is-success">Apply</a>
+        <a class="button close-modal-button">Close</a>
+      </footer>
     </div>
   </div>
 
@@ -162,7 +166,8 @@
       </header>
       <section class="modal-card-body">
         <div class="content">
-          <p>This is a very simple application for visual display and highlighting the events (time) countdown for speakers.</p>
+          <p>This is a simple countdown application with two time dependent notifications. The main use is for speakers at events
+            and conferences ...</p>
           <p>Copyright &copy; <a href="http://hlavacm.net" target="_blank">Martin Hlaváč</a> 2017</p>
         </div>
         <div class="content is-small">
@@ -184,6 +189,9 @@
           </ul>
         </div>
       </section>
+      <footer class="modal-card-foot">
+        <a class="button close-modal-button">OK</a>
+      </footer>
     </div>
   </div>
 

docs/scripts.js

@@ -1,10 +1,10 @@
 {
   "name": "events-timer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Martin Hlaváč",
-  "description": "This is a very simple application for visual display and highlighting the events (time) countdown for speakers.",
+  "description": "This is a simple countdown application with two time dependent notifications. The main use is for speakers at events and conferences ...",
   "dependencies": {
-    "bulma": "^0.4.3",
+    "bulma": "^0.4.4",
     "jquery": "^3.2.1",
     "jquery.runner": "^2.3.0",
     "js-cookie": "^2.1.4"
@@ -22,4 +22,4 @@
     "countdown"
   ],
   "license": "BSD-3-Clause"
-}
+}

docs/styles.css

@@ -38,18 +38,23 @@ stopButton.click(function () {
 });
 
 resetButton.click(function () {
+  if (!confirm("Reset cancels countdown and restores default state. Do you really want to confirm it?")) {
+    return;
+  }
   resetState();
 });
 
 $(".modal-button").click(function () {
   $($(this).data("target")).addClass("is-active");
 });
 
-$(".close-modal,.modal-background").click(function () {
-  if ($("#settings-modal").hasClass("is-active")) {
-    updateSettings();
-  }
-  $(this).parents("div.modal").removeClass("is-active");
+$(".close-modal,.modal-background,.close-modal-button").click(function () {
+  closeModal($(this));
+});
+
+$("#save-settings-button").click(function () {
+  updateSettings();
+  closeModal($(this));
 });
 
 function resetState() {
@@ -66,9 +71,13 @@ function resetState() {
   setDefaults();
 }
 
+function closeModal(element) {
+  element.parents("div.modal").removeClass("is-active");
+}
+
 function updateSettings() {
-  if (countdown.runner("info").running) {
-    if (!confirm("Settings update will reset. Do you want to continue?")) {
+  if (resetButton.prop("disabled") == false) {
+    if (!confirm("Apply will do reset. Do you really want to confirm it?")) {
       return;
     }
   }

package-lock.json

@@ -8,4 +8,8 @@ body {
 
 #countdownExpired {
   font-size: 10vw;
+}
+
+.modal-card-foot {
+  justify-content: space-between;
 }