better mobile buttons and content

TODO

@@ -2,12 +2,12 @@
     rivedere funzione crea torneo che faccia tutto nella cartella, e che il dizionario abbia tutti i campi
     i file tipo logo e qr devono stare nel json mi sa cosi da evitare problemi con i formati tipo gif/png
 
+//TODO:
+    supporto spazi input form
+
 //TODO: 
     variabili _GET per alert sull'azione o errore del submit
 
-//TODO:
-    ranking/match toolbar in basso su mobile, normale su desktop
-
 //TODO:
     tabelle "section" con max-width (cosi non sono full screen) e cambio classe (se possibile usando quelle di bootst) animazione rimpicciolimento con quelle accanto
 

css/main.css

@@ -61,8 +61,7 @@ body.dark > #titolo {
     text-shadow: 1px 2px 4px rgba(0,0,0,.1);
 }
 #content {
-    margin-top: 80px;
-    /* margin: 0; */
+    margin: 80px 0;
     width: 100%;
     overflow-x: hidden;
     min-height: 100%;
@@ -249,6 +248,11 @@ body.dark .input-group-prepend > span {
 /* RESPONSIVE ########################## */
 
 @media only screen and (max-width: 670px) {
+    #content {
+        margin: 80px 0;
+        padding: 40px 0;
+        transition: all .5s;
+    }
     .input-padding {
        width: 100%;
     }
@@ -271,4 +275,22 @@ body.dark .input-group-prepend > span {
         border-radius: 0;
         margin: inherit -1px
     }
+
+    #button-select {
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        z-index: 10;
+        box-shadow: 0 6px 20px 1px rgba(0, 0, 0, 0.45);
+        background: rgba(20, 20, 30, 0.7);
+        transition: all .5s;
+    }
+    #button-select > button.btn {
+        border-radius: 0;
+        border: none;
+        /* outline: none; */
+    }
+
 }
\ No newline at end of file

js/script.js

@@ -71,13 +71,16 @@ window.onload = function () {
     
     $('#buttonRanking').bind('click', function() {
         $(this).toggleClass('active');
-        $('#ranking').fadeToggle();
+        $('#ranking').slideToggle();
+        // $('#ranking').fadeToggle();
+        // $('#ranking').toggleClass('');
         console.log('Toggle ranking table...');
     });
     
     $('#buttonMatches').bind('click', function() {
         $(this).toggleClass('active');
-        $('#partite').fadeToggle();
+        $('#partite').slideToggle();
+        // $('#partite').fadeToggle();
         console.log('Toggle matches table...');
     });
 }
\ No newline at end of file

templates/index.html

@@ -66,8 +66,8 @@
             <br>
             <br>
             
-            <div class='mr-2' role='group' aria-label='1g'>
-                <div class='btn-group mr-2' role='group' aria-label='2g'>
+            <div class='' role='group' aria-label='1g'>
+                <div class='input-padding' role='group' aria-label='2g'>
                     
                     <form action="/pomelo/submit.php" method="post">
                         <input type="hidden" name="action" value="create">
@@ -88,7 +88,7 @@
                     </form>
                 </div>
                 
-                <div class='btn-group mr-2' role='group' aria-label='2g'>
+                <div class='input-padding' role='group' aria-label='2g'>
                     <form action="/pomelo/submit.php" method="post">
                         <input type="hidden" name="action" value="goto">
                         <div class="input-group input-padding">

templates/tournament_index.html

@@ -139,7 +139,7 @@
 
             <br>
             <div class='mr-2' role='group' aria-label='1g'>
-                <div class='btn-group mr-2' role='group' aria-label='2g'>
+                <div class='btn-group mr-2' id="button-select" role='group' aria-label='2g'>
                     <button id="buttonRanking" class='btn btn-outline-primary active'>
                         <ion-icon name='ios-trending-up' size='large'></ion-icon>
                     </button>