Переглянути джерело

[producer] Amélioration mise en page app 'producer'

dev
Guillaume Bourgeois 5 роки тому
джерело
коміт
6aff75e2d1
3 змінених файлів з 127 додано та 113 видалено
  1. +18
    -9
      producer/views/layouts/main.php
  2. +87
    -86
      producer/web/css/screen.css
  3. +22
    -18
      producer/web/sass/_layout.scss

+ 18
- 9
producer/views/layouts/main.php Переглянути файл

@@ -69,9 +69,6 @@ if(!Yii::$app->user->isGuest) {
<?php $this->beginBody() ?>
<div id="header-bap">
<a id="logo" href="<?= Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/index']); ?>">
<img src="<?php echo Yii::$app->urlManager->getBaseUrl(); ?>/img/logo-distrib.png" alt="" />
</a>
<?php
echo Nav::widget([
'encodeLabels' => false,
@@ -81,6 +78,11 @@ if(!Yii::$app->user->isGuest) {
'options' => ['id' => 'label1'],
'url' => '#',
'items' => [
[
'label' => '<span class="glyphicon glyphicon-chevron-left"></span> Retour à l\'accueil',
'url' => Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/index']),
'visible' => Yii::$app->user->isGuest
],
[
'label' => '<span class="glyphicon glyphicon-user"></span> Inscription',
'url' => Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/signup']),
@@ -100,6 +102,10 @@ if(!Yii::$app->user->isGuest) {
'options' => ['id' => 'label1'],
'url' => '#',
'items' => [
[
'label' => '<span class="glyphicon glyphicon-chevron-left"></span> Retour à l\'accueil',
'url' => Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/index']),
],
[
'label' => '<span class="glyphicon glyphicon-user"></span> Profil',
'url' => Yii::$app->urlManagerFrontend->createAbsoluteUrl(['user/update']),
@@ -120,12 +126,8 @@ if(!Yii::$app->user->isGuest) {
<header id="header">
<div class="container">
<h1><?= Html::encode($producer->name); ?></h1>
<h2><?= Html::encode($producer->type) ?> à <?= Html::encode($producer->city); ?> (<?= Html::encode($producer->postcode); ?>)</h2>
<div id="infos">
<span data-toggle="tooltip" data-placement="bottom" title="Heure limite de commande">
<span class="glyphicon glyphicon-time"></span> Commande avant
<strong><?php echo Html::encode($producer->order_deadline) ?> h</strong></span>,
<span data-toggle="tooltip" data-placement="bottom" title="Exemple : commande le lundi pour le <?php if($producer->order_delay == 1): ?>mardi<?php elseif($producer->order_delay == 2): ?>mercredi<?php elseif($producer->order_delay == 3): ?>jeudi<?php elseif($producer->order_delay == 4): ?>vendredi<?php elseif($producer->order_delay == 5): ?>samedi<?php elseif($producer->order_delay == 6): ?>dimanche<?php elseif($producer->order_delay == 7): ?>lundi d'après<?php endif; ?>"><strong><?= Html::encode($producer->order_delay) ?> jour<?php if($producer->order_delay > 1): ?>s<?php endif; ?></strong> à l'avance</span>
<h2>
<?= Html::encode($producer->type) ?> à <?= Html::encode($producer->city); ?> (<?= Html::encode($producer->postcode); ?>) /
<?php if(!Yii::$app->user->isGuest): ?>
<span class="favorite">
<?php if($userProducer && $userProducer->bookmark): ?>
@@ -135,6 +137,13 @@ if(!Yii::$app->user->isGuest) {
<?php endif; ?>
</span>
<?php endif; ?>
</h2>
<div id="infos">
<span data-toggle="tooltip" data-placement="bottom" title="Heure limite de commande">
<span class="glyphicon glyphicon-time"></span> Commande avant
<strong><?php echo Html::encode($producer->order_deadline) ?> h</strong></span>,
<span data-toggle="tooltip" data-placement="bottom" title="Exemple : commande le lundi pour le <?php if($producer->order_delay == 1): ?>mardi<?php elseif($producer->order_delay == 2): ?>mercredi<?php elseif($producer->order_delay == 3): ?>jeudi<?php elseif($producer->order_delay == 4): ?>vendredi<?php elseif($producer->order_delay == 5): ?>samedi<?php elseif($producer->order_delay == 6): ?>dimanche<?php elseif($producer->order_delay == 7): ?>lundi d'après<?php endif; ?>"><strong><?= Html::encode($producer->order_delay) ?> jour<?php if($producer->order_delay > 1): ?>s<?php endif; ?></strong> à l'avance</span>
<div class="clr"></div>
</div>
</div>

+ 87
- 86
producer/web/css/screen.css Переглянути файл

@@ -134,7 +134,7 @@ Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/
/* line 43, ../sass/_layout.scss */
/* line 45, ../sass/_layout.scss */
body {
font-family: "Arial";
background-color: white;
@@ -143,117 +143,117 @@ body {
font-size: 14px;
}

/* line 51, ../sass/_layout.scss */
/* line 53, ../sass/_layout.scss */
.clr {
clear: both;
}

/* line 55, ../sass/_layout.scss */
/* line 57, ../sass/_layout.scss */
.modal-backdrop.in {
z-index: 10;
}

/* line 59, ../sass/_layout.scss */
/* line 61, ../sass/_layout.scss */
#main {
position: relative;
}
/* line 61, ../sass/_layout.scss */
/* line 63, ../sass/_layout.scss */
#main .btn-primary {
background-color: #FF7F00;
border: solid 1px #FF7F00;
color: white;
}
/* line 66, ../sass/_layout.scss */
/* line 68, ../sass/_layout.scss */
#main .btn-primary:hover, #main .btn-primary:active, #main .btn-primary:focus {
background-color: #e67200;
border: solid 1px #FF7F00;
color: white;
}

/* line 75, ../sass/_layout.scss */
/* line 77, ../sass/_layout.scss */
.btn {
background-image: none;
}

/* line 79, ../sass/_layout.scss */
/* line 81, ../sass/_layout.scss */
#main .alert {
background-image: none;
background-color: white;
border-bottom-width: 3px;
}

/* line 87, ../sass/_layout.scss */
/* line 89, ../sass/_layout.scss */
.alert.alert-warning a {
color: #8a6d3b;
}

/* line 96, ../sass/_layout.scss */
/* line 98, ../sass/_layout.scss */
ul.pagination li.active a {
background-color: #FF7F00;
border: solid 1px #FF7F00;
}
/* line 100, ../sass/_layout.scss */
/* line 102, ../sass/_layout.scss */
ul.pagination li.active a:hover {
background-color: white;
border: solid 1px white;
color: #FF7F00;
}
/* line 107, ../sass/_layout.scss */
/* line 109, ../sass/_layout.scss */
ul.pagination li a {
color: #FF7F00;
}
/* line 110, ../sass/_layout.scss */
/* line 112, ../sass/_layout.scss */
ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
background-color: white;
border: solid 1px white;
color: #FF7F00;
}

/* line 119, ../sass/_layout.scss */
/* line 121, ../sass/_layout.scss */
#header-bap {
position: absolute;
right: 0px;
top: 0px;
width: 200px;
width: 70px;
background-color: white;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
z-index: 1000;
}
/* line 130, ../sass/_layout.scss */
/* line 132, ../sass/_layout.scss */
#header-bap .container {
padding-left: 0px;
padding-right: 0px;
}
/* line 135, ../sass/_layout.scss */
/* line 137, ../sass/_layout.scss */
#header-bap a#logo {
color: black;
text-decoration: none;
position: relative;
top: 3px;
}
/* line 141, ../sass/_layout.scss */
/* line 143, ../sass/_layout.scss */
#header-bap a#logo img {
width: 45px;
}
/* line 146, ../sass/_layout.scss */
/* line 148, ../sass/_layout.scss */
#header-bap ul#nav-bap {
float: right;
}
/* line 150, ../sass/_layout.scss */
/* line 152, ../sass/_layout.scss */
#header-bap ul#nav-bap li a {
color: black;
font-size: 15px;
color: #FF7F00;
}
/* line 155, ../sass/_layout.scss */
/* line 157, ../sass/_layout.scss */
#header-bap ul#nav-bap li a:hover, #header-bap ul#nav-bap li a:focus {
color: #333;
color: #FF7F00;
background: none;
}
/* line 162, ../sass/_layout.scss */
/* line 164, ../sass/_layout.scss */
#header-bap ul#nav-bap li ul {
background-color: white;
border-top: solid 2px #FF7F00;
@@ -261,39 +261,39 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
top: 50px;
width: 200px;
}
/* line 170, ../sass/_layout.scss */
/* line 172, ../sass/_layout.scss */
#header-bap ul#nav-bap li ul li a {
text-transform: uppercase;
font-size: 13px;
}
/* line 174, ../sass/_layout.scss */
/* line 176, ../sass/_layout.scss */
#header-bap ul#nav-bap li ul li a:hover {
color: #ff9933;
}
/* line 178, ../sass/_layout.scss */
/* line 180, ../sass/_layout.scss */
#header-bap ul#nav-bap li ul li a small {
font-size: 10px;
line-height: 13px;
margin-left: 18px;
}

/* line 190, ../sass/_layout.scss */
/* line 192, ../sass/_layout.scss */
#header {
background-color: #F7F7F7;
background-color: #FFF8DC;
text-align: center;
padding-top: 25px;
padding-bottom: 10px;
}
/* line 196, ../sass/_layout.scss */
/* line 198, ../sass/_layout.scss */
#header .container {
position: relative;
padding: 0px;
}
/* line 202, ../sass/_layout.scss */
#header h1, #header h2 {
/* line 204, ../sass/_layout.scss */
#header h1, #header h2, #header #infos, #header #infos a {
color: #323232;
}
/* line 206, ../sass/_layout.scss */
/* line 208, ../sass/_layout.scss */
#header h1 {
text-transform: uppercase;
font-family: "highvoltageregular";
@@ -304,43 +304,44 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
text-align: center;
font-weight: normal;
}
/* line 217, ../sass/_layout.scss */
/* line 219, ../sass/_layout.scss */
#header h2 {
font-family: "capsuularegular";
font-size: 27px;
font-size: 20px;
font-weight: normal;
text-align: center;
}
/* line 224, ../sass/_layout.scss */
#header #infos {
text-align: center;
padding-bottom: 10px;
padding-top: 8px;
margin-bottom: 0px;
color: #323232;
/* line 225, ../sass/_layout.scss */
#header h2 .favorite {
padding-left: 0px;
}
/* line 228, ../sass/_layout.scss */
#header h2 .favorite .glyphicon {
font-size: 14px;
color: gray;
}
/* line 233, ../sass/_layout.scss */
#header #infos .favorite {
border-left: solid 1px white;
padding-left: 10px;
#header h2 a {
color: #323232;
}
/* line 238, ../sass/_layout.scss */
#header #infos a {
color: gray;
text-decoration: underline;
/* line 239, ../sass/_layout.scss */
#header #infos {
text-align: center;
padding-bottom: 10px;
padding-top: 20px;
margin-bottom: 0px;
font-size: 16px;
font-family: "capsuularegular";
}
/* line 243, ../sass/_layout.scss */
/* line 247, ../sass/_layout.scss */
#header #infos strong {
font-weight: bold;
}

/* line 249, ../sass/_layout.scss */
/* line 253, ../sass/_layout.scss */
#main {
background-color: #F7F7F7;
background-color: #FFF8DC;
}
/* line 252, ../sass/_layout.scss */
/* line 256, ../sass/_layout.scss */
#main nav#main-nav {
width: 100%;
background-color: white;
@@ -348,7 +349,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
border-bottom: solid 1px #e0e0e0;
margin-bottom: 30px;
}
/* line 261, ../sass/_layout.scss */
/* line 265, ../sass/_layout.scss */
#main nav#main-nav ul li a {
color: #323232;
color: black;
@@ -356,22 +357,22 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
font-family: "capsuularegular";
font-size: 18px;
}
/* line 268, ../sass/_layout.scss */
/* line 272, ../sass/_layout.scss */
#main nav#main-nav ul li a .glyphicon {
font-size: 15px;
margin-right: 3px;
}
/* line 273, ../sass/_layout.scss */
/* line 277, ../sass/_layout.scss */
#main nav#main-nav ul li a span.label {
padding-bottom: 3px;
font-family: "Arial";
}
/* line 280, ../sass/_layout.scss */
/* line 284, ../sass/_layout.scss */
#main nav#main-nav ul li.active span.label, #main nav#main-nav ul li a:hover span.label {
background-color: #e67200;
color: white;
}
/* line 286, ../sass/_layout.scss */
/* line 290, ../sass/_layout.scss */
#main nav#main-nav ul li a:hover, #main nav#main-nav ul li.active a {
background: #FF7F00;
color: white;
@@ -379,26 +380,26 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
-webkit-border-radius: 0px;
border-radius: 0px;
}
/* line 293, ../sass/_layout.scss */
/* line 297, ../sass/_layout.scss */
#main nav#main-nav ul li#btn-administration {
float: right;
border-left: solid 1px #e0e0e0;
}
/* line 297, ../sass/_layout.scss */
/* line 301, ../sass/_layout.scss */
#main nav#main-nav ul li#btn-administration a {
color: #FF7F00;
}
/* line 300, ../sass/_layout.scss */
/* line 304, ../sass/_layout.scss */
#main nav#main-nav ul li#btn-administration a:hover {
color: white;
}
/* line 308, ../sass/_layout.scss */
/* line 312, ../sass/_layout.scss */
#main nav#main-nav #user {
color: #FF7F00;
float: right;
padding: 10px;
}
/* line 315, ../sass/_layout.scss */
/* line 319, ../sass/_layout.scss */
#main h2#page-title {
padding-left: 15px;
padding-right: 15px;
@@ -412,12 +413,12 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
top: -10px;
text-align: left;
}
/* line 328, ../sass/_layout.scss */
/* line 332, ../sass/_layout.scss */
#main h2#page-title #buttons {
margin-bottom: 15px;
font-family: "Arial";
}
/* line 335, ../sass/_layout.scss */
/* line 339, ../sass/_layout.scss */
#main .container {
padding: 0px;
background-color: white;
@@ -425,30 +426,30 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
border-left: solid 1px #e0e0e0;
border-right: solid 1px #e0e0e0;
}
/* line 343, ../sass/_layout.scss */
/* line 347, ../sass/_layout.scss */
#main #content {
padding: 0px 20px 20px 20px;
padding-bottom: 40px;
}
/* line 347, ../sass/_layout.scss */
/* line 351, ../sass/_layout.scss */
#main #content h1, #main #content h2, #main #content h3, #main #content h4, #main #content h5, #main #content h6 {
font-family: "highvoltageregular";
margin-top: 30px;
margin-bottom: 20px;
}
/* line 352, ../sass/_layout.scss */
/* line 356, ../sass/_layout.scss */
#main #content h1.first, #main #content h2.first, #main #content h3.first, #main #content h4.first, #main #content h5.first, #main #content h6.first {
margin-top: 0px;
}
/* line 357, ../sass/_layout.scss */
/* line 361, ../sass/_layout.scss */
#main #content h1 {
font-size: 30px;
}
/* line 361, ../sass/_layout.scss */
/* line 365, ../sass/_layout.scss */
#main #content h2 {
font-size: 25px;
}
/* line 366, ../sass/_layout.scss */
/* line 370, ../sass/_layout.scss */
#main #content h3 {
font-family: "highvoltageregular";
text-transform: uppercase;
@@ -457,29 +458,29 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
margin-bottom: 30px;
margin-top: 45px;
}
/* line 374, ../sass/_layout.scss */
/* line 378, ../sass/_layout.scss */
#main #content h3 span {
padding-top: 14px;
color: #323232;
}
/* line 380, ../sass/_layout.scss */
/* line 384, ../sass/_layout.scss */
#main #content h4 {
font-size: 20px;
}
/* line 384, ../sass/_layout.scss */
/* line 388, ../sass/_layout.scss */
#main #content h5 {
font-size: 18px;
}
/* line 388, ../sass/_layout.scss */
/* line 392, ../sass/_layout.scss */
#main #content h6 {
font-size: 16px;
}
/* line 394, ../sass/_layout.scss */
/* line 398, ../sass/_layout.scss */
#main #content form .form-group .hint-block {
color: gray;
}

/* line 402, ../sass/_layout.scss */
/* line 406, ../sass/_layout.scss */
#footer-producer {
text-align: center;
position: absolute;
@@ -487,25 +488,25 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
left: 0px;
width: 100%;
}
/* line 409, ../sass/_layout.scss */
/* line 413, ../sass/_layout.scss */
#footer-producer a {
color: #FF7F00;
}
/* line 411, ../sass/_layout.scss */
/* line 415, ../sass/_layout.scss */
#footer-producer a:active {
text-decoration: underline;
}

/* line 417, ../sass/_layout.scss */
/* line 421, ../sass/_layout.scss */
#footer {
background-color: #F7F7F7;
background-color: #FFF8DC;
height: 100px;
}
/* line 421, ../sass/_layout.scss */
/* line 425, ../sass/_layout.scss */
#footer .container {
padding: 0px;
}
/* line 423, ../sass/_layout.scss */
/* line 427, ../sass/_layout.scss */
#footer .container .overflow {
height: 30px;
background-color: white;
@@ -513,12 +514,12 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
border-right: solid 1px #e0e0e0;
border-bottom: solid 1px #e0e0e0;
}
/* line 431, ../sass/_layout.scss */
/* line 435, ../sass/_layout.scss */
#footer .container .content {
padding-top: 20px;
color: black;
}
/* line 435, ../sass/_layout.scss */
/* line 439, ../sass/_layout.scss */
#footer .container .content a {
color: black;
font-family: "capsuularegular";
@@ -526,11 +527,11 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
padding-left: 10px;
padding-right: 10px;
}
/* line 442, ../sass/_layout.scss */
/* line 446, ../sass/_layout.scss */
#footer .container .content a:hover {
text-decoration: underline;
}
/* line 449, ../sass/_layout.scss */
/* line 453, ../sass/_layout.scss */
#footer .container #code-source img {
height: 20px;
}

+ 22
- 18
producer/web/sass/_layout.scss Переглянути файл

@@ -39,6 +39,8 @@ $color1: #FF7F00 ;
$color2: white ;
$courant: #323232 ;
$color-back: #F7F7F7 ;
$color-back: #FFEBCD ;
$color-back: #FFF8DC ;

body {
font-family: 'Arial' ;
@@ -120,7 +122,7 @@ ul.pagination {
position: absolute ;
right: 0px ;
top: 0px ;
width: 200px ;
width: 70px ;
background-color: white ;
padding-top: 7px ;
padding-bottom: 7px ;
@@ -199,7 +201,7 @@ ul.pagination {
}
h1, h2 {
h1, h2, #infos, #infos a {
color: $courant ;
}
@@ -216,30 +218,32 @@ ul.pagination {
h2 {
font-family: 'capsuularegular' ;
font-size: 27px ;
font-size: 20px ;
font-weight: normal ;
text-align: center ;
}
#infos {
text-align: center ;
padding-bottom: 10px ;
padding-top: 8px;
margin-bottom: 0px ;
color: $courant ;
font-size: 14px ;
color: gray ;
.favorite {
border-left: solid 1px $color2 ;
padding-left: 10px ;
padding-left: 0px ;
.glyphicon {
font-size: 14px ;
}
}
a {
color: gray ;
text-decoration: underline ;
color: $courant ;
}
}
#infos {
text-align: center ;
padding-bottom: 10px ;
padding-top: 20px;
margin-bottom: 0px ;
font-size: 16px ;
font-family: 'capsuularegular' ;

strong {
font-weight: bold ;
}

Завантаження…
Відмінити
Зберегти