From 5bd3ced95a39269aad9f4af1dd46e44e1c034986 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 27 Sep 2022 18:15:09 +0200
Subject: [PATCH] wip #5485 @3

---
 index.php                |   2 +
 js/script.js             |  19 +++++
 refacturations.php       | 146 ++++++++++++++++++++++++++++++++++++++-
 style/inc/forms.sass     |  10 ++-
 style/inc/menu.sass      |   1 +
 style/inc/reset.sass     |   2 +-
 style/inc/switch.sass    |  23 ++++++
 style/inc/variables.sass |   4 ++
 style/style.sass         |  62 ++++++++++++++++-
 tableau-de-bord.php      |   4 +-
 10 files changed, 266 insertions(+), 7 deletions(-)
 create mode 100644 index.php
 create mode 100644 style/inc/switch.sass

diff --git a/index.php b/index.php
new file mode 100644
index 0000000..1e4554c
--- /dev/null
+++ b/index.php
@@ -0,0 +1,2 @@
+<?php
+header('Location: tableau-de-bord.php');
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index b009a09..52dd3a3 100644
--- a/js/script.js
+++ b/js/script.js
@@ -34,6 +34,24 @@ $(function () {
         return false;
     });
 
+    // Interrupteurs "Afficher tout / ma sélection
+    var updateSwitchSelection=function(){
+        $('.switch label').each(function () {
+            if ($(this).find('input').prop('checked')) {
+                $(this).addClass('checked');
+            } else {
+                $(this).removeClass('checked');
+            }
+        });
+    };
+    $(document).on('change', 'input', function () {
+        updateSwitchSelection();
+    });
+    updateSwitchSelection();
+
+    // Tables
+
+
     // Menu : passer le menu en mode compact
     $(document).on('click', '.toggle-menu', function () {
         $('body').toggleClass('menu-compact');
@@ -41,6 +59,7 @@ $(function () {
         return false;
     });
 
+
     $(window).on('resize', function () {
         resize();
     });
diff --git a/refacturations.php b/refacturations.php
index b3d9bbc..5bdd81f 100644
--- a/refacturations.php
+++ b/refacturations.php
@@ -1 +1,145 @@
-<?php
+<?php include "inc/head.php" ?>
+    <form action="#" method="get" class="fields-medium">
+        <label><span>Mot clé</span>
+            <input type="search" name="q"/>
+        </label>
+        <label><span>Propriétaire</span>
+            <input type="text" name="owner"/>
+        </label>
+        <label><span>Identification</span>
+            <input type="text" name="identification"/>
+        </label>
+        <a href="#" class="submit" data-icon="bouton-loupe">Rechercher</a>
+        <div class="reset" data-icon=""></div>
+    </form>
+    <section class="table">
+        <div class="switch">
+            <label><input type="radio" name="selection_switch" value="0" checked="">Afficher tout (6)</label>
+            <label><input type="radio" name="selection_switch" value="1" checked="">Afficher ma sélection (1)</label>
+        </div>
+        <h3>6 Refacturations TFPB</h3>
+        <div class="actions"><a class="button" href="#" data-icon="bouton-export-xls">Exporter</a></div>
+        <table>
+            <thead>
+            <tr>
+                <th><input type="checkbox" value="1" name="col"></th>
+                <th>Propriétaire</th>
+                <th>Identification</th>
+                <th>Numéro et rue</th>
+                <th>Code postal</th>
+                <th>Ville</th>
+                <th>Année</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            <tr>
+                <td><input type="checkbox" value="1" name="col"></td>
+                <td>COPROPRIETAIRES DU CENTRE COMMERCIAL VELIZY II</td>
+                <td>C. Co. Vélizy 2</td>
+                <td>9001 Avenue de l'Europe</td>
+                <td>78640</td>
+                <td>VELIZY-VILLACOUBLAY</td>
+                <td>2022</td>
+            </tr>
+            </tbody>
+        </table>
+    </section>
+<?php include "inc/foot.php" ?>
\ No newline at end of file
diff --git a/style/inc/forms.sass b/style/inc/forms.sass
index e90cea2..d4f8ddc 100644
--- a/style/inc/forms.sass
+++ b/style/inc/forms.sass
@@ -24,8 +24,14 @@ form
     position: relative
     font-size: 16px
 
-  input[type="search"]
-    width: 450px
+  &.fields-large
+    input[type="text"], input[type="search"], select, textarea
+      width: 450px
+
+  &.fields-medium
+    input[type="text"], input[type="search"], select, textarea
+      width: 300px
+
 
   input[type="text"], input[type="search"], select, textarea
     background-color: #fff
diff --git a/style/inc/menu.sass b/style/inc/menu.sass
index 743cd99..6749c45 100644
--- a/style/inc/menu.sass
+++ b/style/inc/menu.sass
@@ -151,6 +151,7 @@ header
   $tooltip-menu-background: #292929
   background-color: $tooltip-menu-background
   color: #fff
+  text-transform: uppercase
 
   &[data-placement^='top'], &[data-placement^='bottom'], &[data-placement^='left'], &[data-placement^='right']
     > .tippy-arrow::before
diff --git a/style/inc/reset.sass b/style/inc/reset.sass
index b8bde8b..3a8aa7c 100644
--- a/style/inc/reset.sass
+++ b/style/inc/reset.sass
@@ -32,7 +32,7 @@ table
   border-collapse: collapse
   border-spacing: 0
 
-input
+input[type="text"],input[type="input"]
   -webkit-appearance: none
   border-radius: 0
 
diff --git a/style/inc/switch.sass b/style/inc/switch.sass
new file mode 100644
index 0000000..d5aeb72
--- /dev/null
+++ b/style/inc/switch.sass
@@ -0,0 +1,23 @@
+.switch
+  display: inline-block
+  background-color: #F0EDEB
+  border-radius: 4px
+  padding: 3px
+  position: absolute
+
+  label
+    border-radius: 3px
+    padding: 10px
+    font-size: 16px
+    line-height: 0.9em
+    text-align: center
+    display: inline-block
+    cursor: pointer
+
+    input
+      visibility: hidden
+      position: absolute
+
+    &.checked
+      background-color: #fff
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.15)
\ No newline at end of file
diff --git a/style/inc/variables.sass b/style/inc/variables.sass
index 2c3d304..22c00e8 100644
--- a/style/inc/variables.sass
+++ b/style/inc/variables.sass
@@ -1,6 +1,10 @@
 $font: Lato, sans-serif
 $background-color: #F0EDEB
 $menu-background: #363636
+
+$thead-background: #363636
+$table-odd-background:#F0EDEB
+
 $button-color: #c1ce3a
 $input-text-color: #454565
 $headings-color: #454565
diff --git a/style/style.sass b/style/style.sass
index bf0a633..b39fb79 100644
--- a/style/style.sass
+++ b/style/style.sass
@@ -8,6 +8,19 @@ body
   background-color: $background-color
   font-family: $font
 
+.button
+  border-radius: 6px
+  display: inline-block
+  padding: 10px 15px
+  color: #fff
+  background-color: $button-color
+
+  svg
+    height: 20px
+    position: relative
+    top: -3px
+
+
 main
   padding: $space $space $space $space*3+150px
 
@@ -15,9 +28,53 @@ main
     margin-top: 15px
     padding: 15px 0
 
+    &.table
+      border-radius: 6px
+      background-color: #fff
+      padding: $space
+
+      h3
+        color: $headings-color
+        text-align: center
+        font-size: 24px
+        font-weight: 900
+        line-height: 30px
+
+      table
+        width: 100%
+        font-size: 16px
+
+        td, th
+          padding: 10px
+          vertical-align: middle
+          text-align: left
+          height: 70px
+
+
+        thead
+          th
+            background-color: $thead-background
+            color: #fff
+
+            &:first-child
+              border-radius: 4px 0 0 0
+
+            &:last-child
+              border-radius: 0 4px 0 0
+
+        tbody
+          tr
+            border-style: solid
+            border-width: 1px 0
+            border-color: $light-color
+
+            &:nth-child(even)
+              td
+                background-color: $table-odd-background
+
+
     h2
       color: $headings-color
-      font-family: $font
       font-size: 24px
       font-weight: 900
       margin-bottom: 9px
@@ -88,10 +145,12 @@ main
 
           .buttons
             display: none
+
             a
               display: inline-block
               margin: 0 1px
               color: $light-color
+
               svg
                 height: 30px
                 width: auto
@@ -107,3 +166,4 @@ main
 
 @import "inc/forms"
 @import "inc/menu"
+@import "inc/switch"
diff --git a/tableau-de-bord.php b/tableau-de-bord.php
index 7bf5d2c..b3d6e48 100644
--- a/tableau-de-bord.php
+++ b/tableau-de-bord.php
@@ -1,7 +1,7 @@
 <?php include "inc/head.php" ?>
-    <form action="#" method="get" class="search">
+    <form action="#" method="get" class="fields-large">
         <label><span>Mot clé</span>
-            <input type="search" name="q" placeholder=""/>
+            <input type="search" name="q"/>
         </label>
         <a href="#" class="submit" data-icon="bouton-loupe">Rechercher</a>
     </form>
-- 
2.39.5