[Frontend] Responsive + validation W3C

backend/views/development/index.php

                         <ul class="contacts">
                             <li>
                                 <span class="glyphicon glyphicon-earphone"></span>
-                                <p><a href="mailto:contact@opendistrib.net?subject=Demande de rappel">Demander à être rappelé</a> en indiquant vos disponibilités.</p>
+                                <p><?= Html::a('Prendre rendez-vous', Yii::$app->params['appointmentUrl'], ['class' => '', 'target' => '_blank']); ?></p>
                             </li>
                             <li>
                                 <span class="glyphicon glyphicon-envelope"></span>

backend/views/layouts/header.php

                     <li class="dropdown producer-menu">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                             <span class="glyphicon glyphicon-grain"></span>
-                            <span>Producteurs</span>
+                            <span class="hidden-xs hidden-sm">Producteurs</span>
                             <i class="fa fa-caret-down"></i>
                         </a>
                         <ul class="dropdown-menu">
                     <li>
                         <a href="<?= Yii::$app->urlManagerProducer->createAbsoluteUrl(['site/index', 'slug_producer' => GlobalParam::getCurrentProducer()->slug]); ?>">
                             <span class="glyphicon glyphicon-eye-open"></span>
-                            <span class="hidden-xs">Mon espace producteur</span>
+                            <span class="hidden-xs hidden-sm">Mon espace producteur</span>
                         </a>
                     </li>
                 <?php endif; ?>
                 <li class="dropdown user user-menu">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                         <i class="fa fa-user"></i>
-                        <span class="hidden-xs"><?= Html::encode(GlobalParam::getCurrentUser()->name . ' ' . substr(GlobalParam::getCurrentUser()->lastname, 0, 1) .'.'); ?></span>
+                        <span class="hidden-xs hidden-sm"><?= Html::encode(GlobalParam::getCurrentUser()->name . ' ' . substr(GlobalParam::getCurrentUser()->lastname, 0, 1) .'.'); ?></span>
                         <i class="fa fa-caret-down"></i>
                     </a>
                     <ul class="dropdown-menu">

common/views/nav_user_top.php

 
 ?>
 
-<section class="nav-user-top">
+<div class="nav-user-top">
     <nav class="navbar navbar-default">
         <div class="container">
 
             ?>
         </div>
     </nav>
-</section>
+</div>

frontend/controllers/SiteController.php

 
     public function actionAbout()
     {
-        $aboutFewNumbers = Yii::$app->cache->getOrSet('about_few_numbers', function () {
+        $aboutFewNumbers = Yii::$app->cache->getOrSet('about_few_numbers4', function () {
             $producerManager = $this->getProducerManager();
             $pointSaleManager = $this->getPointSaleManager();
             $userManager = $this->getUserManager();

frontend/views/layouts/main.php

     <meta name="baseurl-absolute"
           content="<?= Yii::$app->urlManagerFrontend->getHostInfo() . Yii::$app->urlManagerBackend->baseUrl; ?>">
     <?= Html::csrfMetaTags() ?>
-    <link rel="icon" type="image/png" href="<?= $this->getUrlManager()->getBaseUrl(); ?>/img/favicon-distrib.png"/>
-    <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="<?= \Yii::$app->urlManager->getBaseUrl(); ?>/img/favicon.ico" /><![endif]-->
+    <link rel="icon" type="image/png" href="<?= $this->getUrlManager()->getBaseUrl(); ?>/img/favicon-distrib.png">
+    <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="<?= \Yii::$app->urlManager->getBaseUrl(); ?>/img/favicon.ico"><![endif]-->
     <?php $this->head() ?>
     <!--[if lt IE 9]>
     <script src="<?= $this->getUrlManager()->getBaseUrl(); ?>/js/html5shiv.min.js"></script>

frontend/views/site/_about_few_numbers.php

-<div class="col-md-4 panel panel-primary" id="few-numbers">
+<div class="panel panel-primary">
     <div class="panel-heading">
         <h2 class="panel-title">
             <span class="glyphicon glyphicon-stats"></span>
         <?= few_numbers_item(few_numbers_format_number($countUsersActive), 'Clients', 'actifs sur les 3 derniers mois'); ?>
         <?= few_numbers_item(few_numbers_format_number($countPointSalesActive), 'Points de vente', 'actifs sur les 3 derniers mois'); ?>
         <?= few_numbers_item(few_numbers_format_number($averageOrdersPerDay), 'Commandes clients / jour', 'en moyenne sur les 7 derniers jours'); ?>
-        <?= few_numbers_item(few_numbers_format_number($averageTurnover).' €', 'CA / mois', 'moyenne sur les 3 derniers mois'); ?>
+        <?= few_numbers_item(few_numbers_format_number($averageTurnover).' €', 'CA producteurs / mois', 'moyenne sur les 3 derniers mois'); ?>
         <?= few_numbers_item(few_numbers_format_number($numberVisitsMonth), 'Visiteurs', 'le mois dernier'); ?>
-        <?php //few_numbers_item('4', 'Heures gagnées / semaine'); ?>
     </div>
 </div>
 

frontend/views/site/_cgv_content.php

 <p>Le Site permet, si le Producteur active cette option, de réaliser des transactions 
     monétaires entre les utilisateurs et les Producteurs. Cette transaction vient 
     alimenter un crédit disponible sur le Site qui sera ensuite débité à chaque
-    commande.<br />
+    commande.<br>
     Pour toutes les commandes non payées via le système de crédit, elles seront à 
     régler directement auprès du Producteur lors de la réception des produits commandés 
     par l’Utilisateur. 

frontend/views/site/_prices_producer.php

 <div class="alert alert-warning" role="alert">
     Découvrez ci-dessous notre <strong>grille tarifaire</strong> pour l'hébergement de votre circuit court sur Opendistrib.
     Le montant qui vous est facturé mensuellement dépend de votre chiffre d’affaire hors taxe réalisé sur le logiciel.
-    Il est donc adapté chaque mois en fonction de l’évolution de votre activité.<br />
+    Il est donc adapté chaque mois en fonction de l’évolution de votre activité.<br>
     Le service est <strong>sans engagement</strong>, vous arrêtez quand vous voulez sur simple désactivation de votre compte.
 </div>
 
     <tbody>
         <tr>
             <td>
-                <strong>Paiement en ligne</strong><br />
-                <p>Le paiement en ligne permet à vos clients d'alimenter leur crédit (compte prépayé en ligne) par carte bancaire.<br />
-                    Le logiciel fonctionne avec la plateforme <a href="https://stripe.com/fr">Stripe</a> pour accepter les paiements.<br />
+                <strong>Paiement en ligne</strong><br>
+                <p>Le paiement en ligne permet à vos clients d'alimenter leur crédit (compte prépayé en ligne) par carte bancaire.<br>
+                    Le logiciel fonctionne avec la plateforme <a href="https://stripe.com/fr">Stripe</a> pour accepter les paiements.<br>
                     <a href="https://stripe.com/fr/pricing">Voir les tarifs Stripe</a>
                 </p>
             </td>

frontend/views/site/about.php

 ?>
 <div class="site-about">
     <div class="row">
-        <div class="col-md-8 panel panel-primary">
-            <div class="panel-body">
-                <h2>Présentation</h2>
-                <p>L'objectif d'Opendistrib est de fournir aux producteurs locaux une solution technique
-                    sur laquelle s'appuyer pour organiser leurs ventes en circuits courts.</p>
-                <p>Le logiciel répond aux besoins quotidiens des producteurs en leur permettant
-                    de présenter leur activité, communiquer avec leurs clients, gérer les prises de commandes,
-                    comptabiliser les
-                    paiements, générer des bons de livraisons/factures et obtenir des statistiques de vente.</p>
-                <p>Cet outil est particulièrement adapté à tous les producteurs souhaitant fonctionner
-                    essentiellement sur commande. C'est le choix de cette méthode de travail qui les amène à utiliser
-                    cet
-                    outil. Majoritairement utilisé par des boulangeries produisant du pain au levain naturel,
-                    Opendistrib fonctionne également très bien pour tous types de production locale.</p>
-                <p>La première version du logiciel est née en 2016 à l'occasion de la création de la boulangerie
-                    Le Chat des Noisettes à Déservillers, en Franche-Comté. Le site a ensuite été progressivement
-                    ouvert à d'autres producteurs un peu partout en France pour arriver à un total de
-                    <?= $countProducers ?> producteurs actifs à l'heure actuelle.</p>
+        <div class="col-md-8">
+            <div class="panel panel-primary">
+                <div class="panel-body">
+                    <h2>Présentation</h2>
+                    <p>L'objectif d'Opendistrib est de fournir aux producteurs locaux une solution technique
+                        sur laquelle s'appuyer pour organiser leurs ventes en circuits courts.</p>
+                    <p>Le logiciel répond aux besoins quotidiens des producteurs en leur permettant
+                        de présenter leur activité, communiquer avec leurs clients, gérer les prises de commandes,
+                        comptabiliser les
+                        paiements, générer des bons de livraisons/factures et obtenir des statistiques de vente.</p>
+                    <p>Cet outil est particulièrement adapté à tous les producteurs souhaitant fonctionner
+                        essentiellement sur commande. C'est le choix de cette méthode de travail qui les amène à utiliser
+                        cet
+                        outil. Majoritairement utilisé par des boulangeries produisant du pain au levain naturel,
+                        Opendistrib fonctionne également très bien pour tous types de production locale.</p>
+                    <p>La première version du logiciel est née en 2016 à l'occasion de la création de la boulangerie
+                        Le Chat des Noisettes à Déservillers, en Franche-Comté. Le site a ensuite été progressivement
+                        ouvert à d'autres producteurs un peu partout en France pour arriver à un total de
+                        <?= $countProducers ?> producteurs actifs à l'heure actuelle.</p>
 
-                <h2>Qui suis-je ?</h2>
-                <p>Je m'appelle Guillaume Bourgeois et je vis à Besançon en Franche-Comté. J'exerce en
-                    tant que développeur web depuis 2009 et suis actuellement en micro-entreprise. </p>
-                <p>Progressivement confronté aux réalités de terrain de différents producteurs et distributeurs,
-                    également conscient des enjeux sociétaux et environnementaux actuels, je me suis au fil des années
-                    intéressé et spécialisé dans le développement de logiciels dédiés à la distribution de produits
-                    locaux en circuits courts dont Opendistrib fait partie.</p>
-                <p>Depuis 2016, je suis donc responsable du développement, de la maintenance et du support
-                    d'Opendistrib.
-                    Unique interlocuteur, j'offre aux producteurs une relation directe avec une personne impliquée
-                    ayant une vue globale sur tous les aspects du logiciel. Technicien et pédagogue, j'aime être à
-                    l'écoute des besoins des producteurs et leur apporter des solutions simples et adaptées.</p>
+                    <h2>Qui suis-je ?</h2>
+                    <p>Je m'appelle Guillaume Bourgeois et je vis à Besançon en Franche-Comté. J'exerce en
+                        tant que développeur web depuis 2009 et suis actuellement en micro-entreprise. </p>
+                    <p>Progressivement confronté aux réalités de différents producteurs et distributeurs,
+                        également conscient des enjeux sociétaux et environnementaux actuels, je me suis au fil des années
+                        intéressé et spécialisé dans le développement de logiciels dédiés à la distribution de produits
+                        locaux en circuits courts dont Opendistrib fait partie.</p>
+                    <p>Depuis 2016, j'assure donc le développement, la maintenance et le support d'Opendistrib.
+                        Unique interlocuteur, j'offre aux producteurs une relation directe avec une personne impliquée
+                        ayant une vue globale sur tous les aspects du logiciel. Technicien et pédagogue, j'aime être à
+                        l'écoute des besoins des producteurs et leur apporter des solutions simples et adaptées.</p>
+                </div>
             </div>
         </div>
+        <div class="col-md-4" id="few-numbers">
+            <?= $aboutFewNumbers; ?>
+        </div>
     </div>
-
-    <?= $aboutFewNumbers; ?>
 </div>
 </div>

frontend/views/site/index.php

             </div>
             <div class="panel-body">
                 <div class="hook">
-                    Simplifiez la distribution de vos produits<br/>
+                    Simplifiez la distribution de vos produits<br>
                     en circuit court avec des outils adaptés.
                 </div>
                 <div class="links">
             </div>
             <div class="panel-body">
                 <div class="hook">
-                    Réservez facilement vos produits en ligne<br/>
+                    Réservez facilement vos produits en ligne<br>
                     auprès de producteurs locaux.
                 </div>
                 <div class="links">

frontend/views/site/mentions.php

         <div class="panel panel-default">
             <div class="panel-body">
                 <h2>Éditeur</h2>
-                <p><strong>Opendistrib</strong><br />
-                    6 rue de la Prévoyance<br />
-                    25000 Besançon<br />
+                <p><strong>Opendistrib</strong><br>
+                    6 rue de la Prévoyance<br>
+                    25000 Besançon<br>
                     Responsable de publication : Guillaume BOURGEOIS</p>
 
-                <p>Micro-entreprise : Guillaume Bourgeois - Développeur web<br />
+                <p>Micro-entreprise : Guillaume Bourgeois - Développeur web<br>
                     Siret : 51442998400024</p>
 
                 <h2>Développement</h2>
-                <p>Guillaume Bourgeois<br />
+                <p>Guillaume Bourgeois<br>
                     6 rue de la Prévoyance, 25000 Besançon
                 </p>
 
 
                 <h2>Propriété intellectuelle et Copyright</h2>
                 <p>Le site est protégé par les lois en vigueur sur la propriété intellectuelle et le droit d’auteur au niveau
-                    national et international.<br />
+                    national et international.<br>
                     Toutes les informations disponibles sur le Site sont protégées par un copyright et sont propriété de
                     <strong>Opendistrib</strong>, sous réserve de droits appartenant à des tiers. Les présentes informations
                     ne devront pas être interprétées comme constituant une licence ou un droit d’utilisation portant sur toute
                     garantir l’exactitude, la précision ou l’exhaustivité des informations mises à disposition sur le Site et
                     ne saurait en aucun cas être tenu responsable en cas d’erreur ou d’inexactitudes contenues sur son Site et
                     ne saurait garantir que l’utilisation de son Site en porte pas atteinte aux droits de tiers. Toute utilisation
-                    du Site est faite aux risques et périls de l’utilisateur.<br />
+                    du Site est faite aux risques et périls de l’utilisateur.<br>
                     Dans les limites autorisées par la loi, notamment en cas de négligence, <strong>Opendistrib</strong> ne
                     pourra être tenu responsable de pertes ou de dommages de quelque nature que ce soit, qu’il s’agisse,
                     notamment mais non exclusivement, de dommages directs, indirects ou consécutifs, liés à l’accès au Site ou à tout
 
                 <h2>Informatique et libertés – Données personnelles</h2>
                 <p>La collecte et le traitement des données personnelles de l'Internaute par <strong>Opendistrib</strong> ont
-                    fait l'objet d'une déclaration auprès de la CNIL (numéro 2018856).<br />
+                    fait l'objet d'une déclaration auprès de la CNIL (numéro 2018856).<br>
                     La finalité du traitement des données personnelles fournies volontairement par l'Internaute sur le Site au
                     travers du module « Contact », est de permettre à l'Internaute d'être contacté rapidement par
-                    <strong>Opendistrib</strong>.<br />
+                    <strong>Opendistrib</strong>.<br>
                     L'Internaute est informé que les données de connexion ou relatives à la navigation de l'Internaute depuis le
                     Site sont collectées (informations de navigation) de manière automatique par un logiciel de statistiques
                     et de mesure d'audience. Ces informations ne sont collectées qu'à des fins d'analyse statistique et
-                    d'optimisation interne du Site.<br />
+                    d'optimisation interne du Site.<br>
                     L'Internaute est également informé qu'en application des articles 39 et 40 de la loi dite « Informatique et
                     Libertés » du 6 janvier 1978, modifiée par la loi 2004-801 du 6 août 2004, l'Internaute dispose d'un droit
                     d'accès, de rectification, de modification et de suppression concernant ses données personnelles.</p>

frontend/views/site/producer.php

                 <?php if(isset($producer) && $producerManager->isDemo($producer)) : ?>
                     <div class="alert alert-warning">
                         <p>Merci d'utiliser les identifiants suivants pour vous connecter à l'espace de démonstration :</p>
-                        Identifiant : <strong>demo@opendistrib.net</strong><br />
+                        Identifiant : <strong>demo@opendistrib.net</strong><br>
                         Mot de passe : <strong>opendistrib</strong>
                     </div>
                 <?php endif; ?>

frontend/views/site/producers.php

             <div id="producers-list">
                 <div id="producer-search">
                     <div class="form-group has-feedback">
-                        <input type="text" class="form-control input-lg" placeholder="Recherche par nom, commune ou code postal" />
+                        <input type="text" class="form-control input-lg" placeholder="Recherche par nom, commune ou code postal">
                         <span class="glyphicon glyphicon-search form-control-feedback"></span>
                     </div>
                 </div>
                                 <div class="logo"<?php if (!is_null($producer->background_color_logo) && strlen($producer->background_color_logo)): ?> style="background-color:<?= Html::encode($producer->background_color_logo); ?>"<?php endif; ?>>
                                     <img class="img-logo"
                                          src="<?= \Yii::$app->urlManagerProducer->baseUrl; ?>/uploads/<?= $producer->logo; ?>"
-                                         alt="Logo <?= Html::encode($producer->name) ?>"/>
+                                         alt="Logo <?= Html::encode($producer->name) ?>">
                                 </div>
                             </div>
                         <?php endif; ?>

frontend/views/site/service.php

                                 <h3>Évolutions régulières</h3>
                                 <p>Les évolutions sont développées en fonction des retours de tous les producteurs
                                     et le
-                                    logiciel est régulièrement mis à jour.<br/>
+                                    logiciel est régulièrement mis à jour.<br>
                                     Si vous avez un besoin spécifique à votre activité, nous pouvons réaliser des
                                     développements sur-mesure <a
                                             href="<?= \Yii::$app->urlManager->createUrl(['site/contact']) ?>">sur

frontend/web/sass/_responsive.scss

 }
 
 @media screen and (min-width: 768px) and (max-width: 1000px) {
+
+  #main {
+    min-height: 500px;
+  }
+
   #header {
     nav {
       .navbar-nav {
     }
   }
 
+  .home {
+    #row-users-producers {
+      .producer, .users {
+        padding: 0px;
+      }
+    }
+  }
+
+  .site-producers {
+    #wrapper-producers-map {
+      display: none;
+    }
+  }
+
 }
 
 @media screen and (max-width: 768px) {
     }
   }
 
-    .home {
-      #content #presentation-distrib h3 {
-        color: $courant;
-      }
+  .home {
+    #content #presentation-distrib h3 {
+      color: $courant;
+    }
 
-      #main {
-        background-image: none;
-        background-color: #FFF8DC;
+    #main {
+      background-image: none;
+      background-color: #FFF8DC;
 
-        #row-users-producers {
-          display: block;
-          margin: 0px;
-          padding: 0px;
+      #row-users-producers {
+        display: block;
+        margin: 0px;
+        padding: 0px;
 
-          .panel {
-            .hook {
-              margin-bottom: 10px;
+        .panel {
+          .hook {
+            margin-bottom: 10px;
 
-              br {
-                display: none;
-              }
+            br {
+              display: none;
             }
+          }
 
-            .links {
-              a {
-                display: block;
-                margin-bottom: 5px;
-              }
+          .links {
+            a {
+              display: block;
+              margin-bottom: 5px;
             }
           }
+        }
 
-          .producer, .users {
-            padding-right: 0px;
-          }
+        .producer, .users {
+          padding-right: 0px;
+        }
 
-          .users {
-            padding-left: 0px;
+        .users {
+          padding-left: 0px;
 
-            .panel {
-              margin-bottom: 0px;
-            }
+          .panel {
+            margin-bottom: 0px;
           }
         }
       }
     }
+  }
 
-    .site-producers {
-      #wrapper-producers-list {
-        padding: 0px;
+  .site-producers {
+    #wrapper-producers-list {
+      padding: 0px;
 
-        #producers-list {
-          .panel {
-            .panel-body {
-              text-align: center;
+      #producers-list {
+        .panel {
+          .panel-body {
+            text-align: center;
 
-              .logo {
-                display: none;
-              }
+            .logo {
+              display: none;
             }
           }
         }
       }
-
-      #producers-map {
-        display: none;
-      }
     }
 
-    #content .site-service {
-      #panel-go-further {
-        margin-bottom: 0px;
+    #producers-map {
+      display: none;
+    }
+  }
 
-        a {
-          display: block;
-          margin-bottom: 5px;
-        }
-      }
+  .site-about {
+    .col-md-8, .col-md-4 {
+      padding: 0px;
     }
+  }
 
   .site-contact {
     .col-lg-5 {
       padding: 0px;
     }
   }
+
+  #content .site-service {
+    #panel-go-further {
+      margin-bottom: 0px;
+
+      a {
+        display: block;
+        margin-bottom: 5px;
+      }
+    }
+  }
 }

frontend/web/sass/screen.scss

   color: #505050;
   font-family: 'Arial';
   background-attachment: fixed;
-  min-height: 100%;
+  //min-height: 100%;
   margin: 0;
   padding: 0;
-  background-color: #FFF8DC;
+  background-color: #333;
   //background-color: #F5DE83;
 }
 
 }
 
 #main {
+  background-color: #FFF8DC;
   padding-bottom: 50px;
   min-height: 800px;