better division js/html and fix menu icon click bug

78cfb51e · diesys · 5ac3b2fa · 78cfb51e · 78cfb51e · 78cfb51e
Commit 78cfb51e authored May 29, 2019 by diesys 🎈
Hide whitespace changes
Inline Side-by-side

Showing with 34 additions and 8 deletions

_index.html _index.html +3 -3

main.css css/main.css +3 -3

script.js js/script.js +28 -2

No files found.
--- a/_index.html
+++ b/_index.html
@@ -26,13 +26,13 @@

 <body>
    
-    <img id='logo' onclick="toggleTheme()" src='img/antipong_idle2.gif' height='90px' width='90px' alt='Smash the ball, smash fascism!' />
+    <img id='logo' src='img/antipong_idle2.gif' height='90px' width='90px' alt='Smash the ball, smash fascism!' />
    
    <span id='titolo'>
        <h1 id='itolo'>PingPong '19</h1>
        <!-- <a href='admin.php' class='adminButton'> -->
        <!-- <a href='#' onclick="$('#menu').collapse('toggle')" class='adminButton'> -->
-        <a href='#' onclick="$('#menu').slideToggle();$('#admin_icon').toggleClass('active')" class='adminButton'>
+        <a href='#' id="admin_button" class='adminButton'>
            <ion-icon id="admin_icon" size='large' name='add'></ion-icon>
        </a>
    </span>
@@ -174,7 +174,7 @@
    </center>
    

-    <div id='content' onclick="$('#menu').slideUp(); $('#admin_icon').toggleClass('active')" class='container-fluid'>
+    <div id='content' class='container-fluid'>

        <center>
            <img id='qr' src='img/torneloQR.gif' height='140px' width='140px' alt='http://flowin.space/tornelo/' /><br>

--- a/css/main.css
+++ b/css/main.css
@@ -87,7 +87,7 @@ body.dark > #titolo {
    transition: background .3s;
 }
 body.dark #menu {
-    background: hsl(180, 11%, 5%);
+    background: hsl(180, 10%, 7.5%);
 }
 #menu span.torneo-icon {
    padding: 2px 5px;
@@ -220,11 +220,11 @@ body.dark .form-control,
 body.dark .custom-select {
    border: none;
    color: #dedede;
-    background-color: hsla(180, 12%, 2%, 1);
+    background-color: hsla(180, 12%, 3.4%, 1);
 }
 body.dark .input-group-append > span,
 body.dark .input-group-prepend > span {
-    background-color: hsla(180, 12%, 8%, 1);
+    background-color: hsla(180, 12%, 12%, 1);
 }



--- a/js/script.js
+++ b/js/script.js
@@ -5,7 +5,9 @@ function toggleTheme() {
    // tabelle
    $('table').toggleClass('table-dark');
    $('tr.success').toggleClass('bg-success');
-    $('tr.success').toggleClass('table-success');    
+    $('tr.success').toggleClass('table-success');
+
+    console.log('changing theme...');
 }

 function getUrlVars() {
@@ -16,9 +18,33 @@ function getUrlVars() {
    return vars;
 }

-/////////// Auto NIGHT MODE ///////////////////
+
+
 window.onload = function () {
+    
+    /////////// BINDING ///////////////////////////
+    // theme / logo
+    $('#logo').bind('click', function(){
+        toggleTheme();
+        console.log('Logo clicked, changing theme...')
+    });
+    
+    // open menu
+    $('#admin_button').bind('click', function(){
+        $('#menu').slideToggle();
+        $('#admin_icon').toggleClass('active')
+        console.log('Menu button clicked, toggling menu...')
+    });

+    // close menu (when active) on outside click
+    $('#content').bind('click', function() {
+        if ($('#menu').css('display') != 'none') {
+            $('#menu').slideUp();
+            $('#admin_icon').toggleClass('active');
+        }
+    });
+    
+    /////////// Auto NIGHT MODE ///////////////////
    var urlVars = getUrlVars();
    var d = new Date();
    var hour = d.getHours();