Score changes position on mobile

assets/css/score.css

@@ -1,69 +1,73 @@
-#score-counter {
+
-    display: block;
+#mobile-score {
-    height: 200px;
+    display: none;
 }
 
-#score-counter #title-image {
+#mobile-score .title-image {
     height: 100px;
     margin: 0;
 }
 
-
+#mobile-score .score-display {
-#score-container {
+    background: #1c1c1c;
-    display: block;
+    box-shadow: 0 0 5px #000;
 }
 
+#top-bar-score {
+    display: inline-flex;
+    position: fixed;
+    right: 0;
+}
 
-#score-display {
+#top-bar-score .title-image {
-    background-color: #1C1C1C;
+    height: 40px;
-    box-shadow: 0 0 20px #1C1C1C;
+    margin: 0;
+}
+
+.score-display {
+    background: none;
     border-radius: 10px;
     display: inline-flex;
     vertical-align: center;
     font-family: 'Russo One', sans-serif;
-    height: 80px;
+    height: 40px;
+    margin: 0;
 }
 
-
+.score-display a {
-#score-display a {
     display: inline-flex;
     vertical-align: middle;
     align-items: center;
-    height: 80px;
+    height: 40px;
 }
 
-#score-usa, #score-urss {
+.score-usa, .score-urss {
-    font-size: 50px;
+    font-size: 20px;
+    line-height: 40px;
 }
 
-#score-usa{
+.score-usa{
     color: #1a5dad;
 }
 
-#score-urss{
+.score-urss{
     color: #d72229;
 }
 
-#score-separator{
+.score-separator{
-    font-size: 70px;
+    font-size: 20px;
 }
 
 .score-logo {
-    height: 70px;
+    height: 30px;
-    margin: 5px;
+    margin: 0;
 }
 
 @media screen and (max-width: 480px) {
-    #score-counter #title-image {
+    #top-bar-score {
-        height: 75px;
+         display: none;
-    }
+     }
-    #score-separator{
+    #mobile-score {
-        font-size: 50px;
+        display: block;
-    }
-    .score-logo{
-        height: 50px;
-    }
-    #score-usa, #score-urss {
-        font-size: 40px;
     }
 }

assets/css/style.css

@@ -190,11 +190,15 @@ Full-Width Styles
     pointer-events: auto;
     vertical-align: middle;
     height: 40px;
-    margin: 5px;
+    margin: 5px 0 5px 0;
 }
 
 #header-wrap .inner {
-    padding: 100px 10px 100px 10px;
+    padding: 100px 10px 30px 10px;
+}
+
+.title-logo {
+    width: 200px;
 }
 
 #menu-title {

classes/dao.php

@@ -4,6 +4,8 @@ class Dao {
 
     private $conn;
 
+    private $debug = false;
+
     public function __construct($path_to_password)
     {
         $username = 'accueil_insa';
@@ -13,7 +15,7 @@ class Dao {
             $this->conn = new PDO($dsn, $username, $password, [PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8']);
         }
         catch (PDOException $e){
-            die($e->getMessage());
+            $this->debug = true;
         }
     }
 
@@ -25,26 +27,31 @@ class Dao {
     }
 
     public function get_score_team($team){
-        $sql = 'SELECT text, points FROM scores WHERE team = ?';
+        if (!$this->debug)
-        $cursor = $this->conn->prepare($sql);
+        {
-        $cursor->execute([$team]);
+            $sql = 'SELECT text, points FROM scores WHERE team = ?';
-        return $cursor->fetchAll(PDO::FETCH_ASSOC);
+            $cursor = $this->conn->prepare($sql);
+            $cursor->execute([$team]);
+            return $cursor->fetchAll(PDO::FETCH_ASSOC);
+        }
+        else
+            return 0;
     }
 
     public function save_scores($scores_json, $team){
-//        var_dump($scores_json);
+        if (!$this->debug)
-//        var_dump($team);
+        {
-        $sql = 'DELETE FROM scores WHERE team = ?';
+            $sql = 'DELETE FROM scores WHERE team = ?';
-        $cursor = $this->conn->prepare($sql);
-        $cursor->execute([$team]);
-
-        $array = json_decode($scores_json)->array;
-        foreach ($array as $value){
-            $sql = 'INSERT INTO scores (text, points, team) VALUES (?, ?, ?)';
             $cursor = $this->conn->prepare($sql);
-            $cursor->execute([$value->text, $value->points, $team]);
+            $cursor->execute([$team]);
-        }
 
+            $array = json_decode($scores_json)->array;
+            foreach ($array as $value){
+                $sql = 'INSERT INTO scores (text, points, team) VALUES (?, ?, ?)';
+                $cursor = $this->conn->prepare($sql);
+                $cursor->execute([$value->text, $value->points, $team]);
+            }
+        }
     }
 
 }

includes/score_counter.php

@@ -1,31 +1,18 @@
-<?php
+<div class="score-counter" id="<?= $platformID ?>">
-require_once 'classes/dao.php';
+    <img class="title-image" src="assets/images/titre-site-accueil.svg">
-function get_total_points($team)
+    <div class="score-container">
-{
+        <div class="score-display">
-    $dao = new Dao('');
-    $points = 0;
-    foreach ($dao->get_score_team($team) as $row) {
-        $points += $row['points'];
-    }
-    return $points;
-}
-
-?>
-<div id="score-counter">
-    <img id="title-image" src="assets/images/titre-site-accueil.svg">
-    <div id="score-container">
-        <div id="score-display">
             <a href="usa.php">
                 <img class="score-logo" src="assets/images/usa_logo.png">
             </a>
             <a href="stats.php">
-                <div id="score-usa"><?= get_total_points('usa') ?></div>
+                <div class="score-usa"><?= $scoreUSA ?></div>
-                <div id="score-separator">/</div>
+                <div class="score-separator">/</div>
-                <div id="score-urss"><?= get_total_points('urss') ?></div>
+                <div class="score-urss"><?= $scoreURSS ?></div>
             </a>
             <a href="urss.php">
                 <img class="score-logo" src="assets/images/urss_logo.png">
             </a>
         </div>
     </div>
-</div>
+</div>

includes/top_bar.php

@@ -9,4 +9,8 @@
         <img src="assets/images/logo-site-accueil.svg" id="menu-icon">
         <h4 id="menu-title">INSA Toulouse 2018</h4>
     </a>
+    <?php
+    $platformID = 'top-bar-score';
+    include 'score_counter.php';
+    ?>
 </div>

index.php

@@ -6,8 +6,6 @@
     <meta name="viewport" content="width=device-width,maximum-scale=2">
     <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
     <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
-    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/sidenav.css">
-    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
@@ -32,11 +30,6 @@
 </head>
 <body id="main">
 <div class="background"></div>
-<div id="back-button" onclick="closeNav()"></div>
-<?php
-include("includes/top_bar.html");
-include("includes/sidenav.html");
-?>
 <div id="home-content-wrap" class="outer">
     <section id="home-content" class="inner">
         <img id="home-title" src="assets/images/titre-site-accueil.svg">
@@ -104,5 +97,4 @@ include("includes/sidenav.html");
     </footer>
 </div>
 </body>
-<script src="assets/scripts/sidenavScript.js"></script>
 </html>

template.php

@@ -1,3 +1,19 @@
+<?php
+require_once 'classes/dao.php';
+function get_total_points($team)
+{
+    $dao = new Dao('');
+    $points = 0;
+    foreach ($dao->get_score_team($team) as $row) {
+        $points += $row['points'];
+    }
+    return $points;
+}
+
+$scoreUSA = get_total_points('usa');
+$scoreURSS = get_total_points('urss');
+?>
+
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -36,7 +52,7 @@
 <div class="background" id="<?= $customBackgroundId?>"></div>
 <div id="back-button" onclick="closeNav()"></div>
 <?php
-include("includes/top_bar.html");
+include("includes/top_bar.php");
 include("includes/sidenav.html");
 ?>
 <div id="header-wrap" class="outer">
@@ -47,6 +63,7 @@ include("includes/sidenav.html");
 </div>
 
 <?php
+$platformID = 'mobile-score';
 include("includes/score_counter.php");
 ?>