Layout

Mise en place du layout global de la nouvelle interface utilisateur.

producer/views/layouts/main.php

@@ -34,39 +34,51 @@ $producer = $this->getProducer() ;
     <?php $this->beginBody() ?>    
     
     <header id="header">
-            <h1>Le Chat des Noisettes</h1>
-            <nav class="">
-                <ul class="nav nav-pills">
-                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-list"></span> Elem 1</a></li>
-                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-list"></span> Elem 2</a></li>
-                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-list"></span> Elem 3</a></li>
-                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-list"></span> Elem 4</a></li>
-                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-list"></span> Elem 5</a></li>
-                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-list"></span> Elem 6</a></li>
-                </ul>
-            </nav>
+            <div class="container">
+                <h1><?= Html::encode($producer->nom); ?></h1>
+                <h2>Boulangerie à <?= Html::encode($producer->ville); ?> (<?= Html::encode($producer->code_postal); ?>)</h2>
+                <div id="credit"><span>Crédit :</span> 31,90 €</div>
+            </div>
     </header>
     
     <div id="main">
-        <section class="container" id="content">
-            <?php if (Yii::$app->session->hasFlash('error')): ?>
-                <div class="alert alert-danger" role="alert">
-                    <?= Yii::$app->session->getFlash('error') ?>
-                </div>
-            <?php endif; ?>
-            <?php if (Yii::$app->session->hasFlash('success')): ?>
-                <div class="alert alert-success" role="alert">
-                    <?= Yii::$app->session->getFlash('success') ?>
-                </div>
-            <?php endif; ?>
+        <div class="container">
+            <nav id="main-nav">
+                <a id="user" href="#"><span class="glyphicon glyphicon-user"></span> <span class="caret"></span></a>
+                <ul class="nav nav-pills">
+                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-th-large"></span> Accueil</a></li>
+                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('commande/index'); ?>"><span class="glyphicon glyphicon-plus"></span> Commander</a></li>
+                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-folder-open"></span> Historique</a></li>
+                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-euro"></span> Crédit</a></li>
+                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-cog"></span> Paramètres</a></li>
+                    <li><a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
+                </ul>
+            </nav>
 
-            <?= $content ?>
-        </section>
+            <section id="content">
+                <?php if (Yii::$app->session->hasFlash('error')): ?>
+                    <div class="alert alert-danger" role="alert">
+                        <?= Yii::$app->session->getFlash('error') ?>
+                    </div>
+                <?php endif; ?>
+                <?php if (Yii::$app->session->hasFlash('success')): ?>
+                    <div class="alert alert-success" role="alert">
+                        <?= Yii::$app->session->getFlash('success') ?>
+                    </div>
+                <?php endif; ?>
+
+                <?= $content ?>
+            </section>
+        </div>
     </div>
 
     <footer id="footer">
         <div class="container">
-            <a href="<?php echo Yii::$app->urlManager->createUrl('producer/index'); ?>">Elem 1</a>
+            <div class="overflow"></div>
+            <div class="content">
+                <p>Propulsé par <a href="#">La boîte à pain</a></p>
+            </div>
+            
         </div>
     </footer>
 

producer/views/producer/index.php

@@ -4,5 +4,4 @@ $this->setTitle('Accueil') ;
 
 ?>
 
-
-<p>Coucou !</p>
+<h2>Accueil</h2>

producer/web/css/screen.css

@@ -1,7 +1,3 @@
-/* Welcome to Compass.
- * In this file you should write your main styles. (or centralize your imports)
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
 /* line 5, ../../../../../../../usr/share/compass/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -67,15 +63,117 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   display: block;
 }
 
-/* line 9, ../sass/screen.scss */
+/* line 5, ../sass/_layout.scss */
+body {
+  font-family: "Arial";
+}
+
+/* line 9, ../sass/_layout.scss */
 #header {
+  background-color: #BB8757;
   text-align: center;
   padding: 40px;
+  padding-bottom: 70px;
   border-bottom: solid 1px #e0e0e0;
 }
-/* line 14, ../sass/screen.scss */
+/* line 16, ../sass/_layout.scss */
+#header .container {
+  position: relative;
+}
+/* line 20, ../sass/_layout.scss */
+#header h1, #header h2 {
+  color: white;
+}
+/* line 24, ../sass/_layout.scss */
 #header h1 {
   text-transform: uppercase;
   font-family: "myriadpro-regular";
-  font-size: 40px;
+  font-size: 35px;
+  padding-bottom: 10px;
+  font-weight: bold;
+}
+/* line 32, ../sass/_layout.scss */
+#header h2 {
+  font-family: "myriadpro-it";
+  font-size: 18px;
+}
+/* line 37, ../sass/_layout.scss */
+#header #credit {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  color: white;
+  font-family: "myriadpro-semibold";
+  border-bottom: solid 1px white;
+  padding: 7px 10px;
+}
+/* line 46, ../sass/_layout.scss */
+#header #credit span {
+  font-family: "myriadpro-light";
+}
+
+/* line 52, ../sass/_layout.scss */
+#main {
+  background-color: #FAFAFA;
+}
+/* line 55, ../sass/_layout.scss */
+#main #main-nav {
+  width: 100%;
+  position: relative;
+  top: -40px;
+  background-color: white;
+  border-bottom: solid 1px #e0e0e0;
+}
+/* line 64, ../sass/_layout.scss */
+#main #main-nav ul li a {
+  color: #BB8757;
+  text-transform: uppercase;
+  font-family: "myriadpro-regular";
+  border-right: solid 1px #e0e0e0;
+}
+/* line 73, ../sass/_layout.scss */
+#main #main-nav #user {
+  color: #BB8757;
+  float: right;
+  padding: 10px;
+}
+/* line 80, ../sass/_layout.scss */
+#main .container {
+  padding: 0px;
+  background-color: white;
+  min-height: 500px;
+  border-left: solid 1px #e0e0e0;
+  border-right: solid 1px #e0e0e0;
+}
+/* line 88, ../sass/_layout.scss */
+#main #content {
+  padding: 0px 20px 20px 20px;
+}
+
+/* line 93, ../sass/_layout.scss */
+#footer {
+  background-color: #BB8757;
+  height: 100px;
+}
+/* line 97, ../sass/_layout.scss */
+#footer .container {
+  padding: 0px;
+}
+/* line 99, ../sass/_layout.scss */
+#footer .container .overflow {
+  height: 30px;
+  background-color: white;
+  border-left: solid 1px #e0e0e0;
+  border-right: solid 1px #e0e0e0;
+  border-bottom: solid 1px #e0e0e0;
+}
+/* line 107, ../sass/_layout.scss */
+#footer .container .content {
+  padding-top: 20px;
+  color: white;
+}
+/* line 111, ../sass/_layout.scss */
+#footer .container .content a {
+  color: white;
+  text-decoration: underline;
 }

producer/web/sass/_fonts.scss

@@ -1,10 +0,0 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/* 
-    Created on : 4 mars 2018, 21:06:10
-    Author     : keun
-*/
-

producer/web/sass/_layout.scss

@@ -0,0 +1,117 @@
+
+$color1: #BB8757 ;
+$color2: #F8F1DD ;
+
+body {
+    font-family: 'Arial' ;
+}
+
+#header {
+    background-color: $color1 ;
+    text-align: center ;
+    padding: 40px ;
+    padding-bottom: 70px ;
+    border-bottom: solid 1px #e0e0e0 ;
+    
+    .container {
+        position: relative ;
+    }
+    
+    h1, h2 {
+        color: white ;
+    }
+    
+    h1 {
+        text-transform: uppercase ;
+        font-family: 'myriadpro-regular' ;
+        font-size: 35px ;
+        padding-bottom: 10px ;
+        font-weight: bold ;
+    }
+    
+    h2 {
+        font-family: 'myriadpro-it' ;
+        font-size: 18px ;
+    }
+    
+    #credit {
+        position: absolute ;
+        top: 0px ;
+        right: 0px ;
+        color: white ;
+        font-family: 'myriadpro-semibold' ;
+        border-bottom: solid 1px white ;
+        padding: 7px 10px ;
+        
+        span {
+            font-family: 'myriadpro-light' ;
+        }
+    }
+}
+
+#main {
+    background-color: #FAFAFA ;
+    
+    #main-nav {
+        width: 100% ;
+        position: relative ;
+        top: -40px ;
+        background-color: white ;    
+        border-bottom: solid 1px #e0e0e0 ;
+        
+        ul {
+            li {
+                a {
+                    color: $color1 ;
+                    text-transform: uppercase ;
+                    font-family: 'myriadpro-regular' ;
+                    border-right: solid 1px #e0e0e0 ;
+                }
+            }
+        }
+        
+        #user {
+            color: $color1 ;
+            float: right ;
+            padding: 10px ;
+        }
+    }
+    
+    .container {
+        padding: 0px ;
+        background-color: white ;    
+        min-height: 500px ;
+        border-left: solid 1px #e0e0e0 ;
+        border-right: solid 1px #e0e0e0 ;
+    }
+    
+    #content {
+        padding: 0px 20px 20px 20px ;
+    }
+}
+
+#footer {
+    background-color: $color1 ;
+    height: 100px ;
+    
+    .container {
+        padding: 0px ;
+        .overflow {
+            height: 30px ;
+            background-color: white ;
+            border-left: solid 1px #e0e0e0 ;
+            border-right: solid 1px #e0e0e0 ;
+            border-bottom: solid 1px #e0e0e0 ;
+        }
+        
+        .content {
+            padding-top: 20px ;
+            color: white ;
+            
+            a {
+                color: white ;
+                text-decoration: underline ;
+            }
+        }
+    }
+}

producer/web/sass/screen.scss

@@ -1,19 +1,4 @@
-/* Welcome to Compass.
- * In this file you should write your main styles. (or centralize your imports)
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
-
-@import "compass/reset";
 
 
-#header {
-    text-align: center ;
-    padding: 40px ;
-    border-bottom: solid 1px #e0e0e0 ;
-    
-    h1 {
-        text-transform: uppercase ;
-        font-family: 'myriadpro-regular' ;
-        font-size: 40px ;
-    }
-}
+@import "compass/reset";
+@import "_layout.scss";