BenoitCier
/
Opendistrib
forked from Laclic/Souke
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

[frontend] Amélioration page d'accueil (photo + mise en page)

dev
Guillaume Bourgeois 5 years ago
parent
9e7dc0f8cd
commit
659b3e9f47
8 changed files with 476 additions and 427 deletions
Split View Show Diff Stats
  1. +28
    -24
      frontend/views/layouts/main.php
  2. +12
    -14
      frontend/views/site/index.php
  3. +287
    -263
      frontend/web/css/screen.css
  4. BIN
      frontend/web/img/arrows-distrib.png
  5. BIN
      frontend/web/img/carottes.jpg
  6. +2
    -2
      frontend/web/sass/_order_system.scss
  7. +28
    -2
      frontend/web/sass/_responsive.scss
  8. +119
    -122
      frontend/web/sass/screen.scss

+ 28
- 24
frontend/views/layouts/main.php View File

@@ -60,7 +60,7 @@ if(!Yii::$app->user->isGuest && Yii::$app->user->identity->id_producer > 0) {
<?php $this->beginPage() ?>
<!DOCTYPE html>
<head>
<title><?php if($isHome): ?>distrib | <?= Html::encode($this->title) ?> <?php else: ?><?= Html::encode($this->title) ?> | distrib<?php endif; ?></title>
<title><?php if($isHome): ?>Opendistrib | <?= Html::encode($this->title) ?> <?php else: ?><?= Html::encode($this->title) ?> | Opendistrib<?php endif; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
@@ -117,6 +117,12 @@ if(!Yii::$app->user->isGuest && Yii::$app->user->identity->id_producer > 0) {
'active' => $this->getControllerAction() == 'site/producers',
'options' => ['id' => 'li-producteurs']
],
[
'label' => '<span class="glyphicon glyphicon-envelope"></span> Contact',
'url' => Yii::$app->urlManager->createUrl(['site/contact']),
'active' => $this->getControllerAction() == 'site/contact',
'options' => ['id' => 'li-contact']
],
[
'label' => '<span class="glyphicon glyphicon-flag"></span> '.($producer ? Html::encode($producer->name) : ''),
'url' => '#',
@@ -181,14 +187,12 @@ if(!Yii::$app->user->isGuest && Yii::$app->user->identity->id_producer > 0) {
->all() ;
?>
<?php if(count($producersArray)): ?>
<h2>Mes producteurs</h2>
<?php foreach($producersArray as $producer): ?>
<div class="col-xs-6 col-md-<?php if(count($producersArray) == 1): ?>6<?php elseif(count($producersArray) == 2): ?>6<?php else: ?>3<?php endif; ?>">
<div class="producer<?= !strlen($producer->photo) ? ' logo-distrib-default' : '' ?>" style="background-image:url('<?= strlen($producer->photo) ? Yii::$app->urlManagerProducer->getHostInfo().'/'.Yii::$app->urlManagerProducer->baseUrl.'/uploads/'.$producer->photo : Yii::$app->urlManagerFrontend->getHostInfo().'/'.Yii::$app->urlManagerFrontend->baseUrl.'/img/logo-distrib-gray.png' ?>">
<a class="btn btn-primary" href="<?= Yii::$app->urlManagerProducer->createAbsoluteUrl(['site/index','slug_producer' => $producer->slug]); ?>"><?= Html::encode($producer->name); ?></a>
</div>
</div>
<?php endforeach;?>
<h2>Mes producteurs &gt;</h2>
<div id="producers">
<?php foreach($producersArray as $producer): ?>
<a class="btn btn-xs btn-default" href="<?= Yii::$app->urlManagerProducer->createAbsoluteUrl(['site/index','slug_producer' => $producer->slug]); ?>"><?= Html::encode($producer->name); ?></a>
<?php endforeach; ?>
</div>
<?php else: ?>
<div id="discover">
<p>Vous n'avez aucun producteur dans vos favoris : </p>
@@ -201,21 +205,21 @@ if(!Yii::$app->user->isGuest && Yii::$app->user->identity->id_producer > 0) {
<?php endif; ?>
<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; ?>
<?= $content ?>
</section>
<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; ?>
<?= $content ?>
</section>
</div>
<footer id="footer">
<div class="container">

+ 12
- 14
frontend/views/site/index.php View File

@@ -49,16 +49,17 @@ use dosamigos\leaflet\widgets\Map;
use common\helpers\Url ;

/* @var $this yii\web\View */
$this->setTitle('Logiciel libre de gestion de commandes') ;
$this->setTitle('Logiciel libre de distribution alimentaire') ;

?>

<div id="presentation">
<div id="presentation-distrib">
<h2><span>Un logiciel libre de gestion de commandes<br />
pour les producteurs en vente directe.</span></h2>
<h2><span>Logiciel libre<br />
de distribution alimentaire</span></h2>
<h3>simple, ouvert et participatif</h3>
</div>
<div class="row" id="row-users-producers">
<div id="row-users-producers">
<div class="col-md-6 producer">
<div class="panel panel-default">
<div class="panel-heading">
@@ -68,11 +69,9 @@ $this->setTitle('Logiciel libre de gestion de commandes') ;
</h2>
</div>
<div class="panel-body">
<p class="presentation">Simplifiez la gestion de vos commandes avec des outils adaptés.</p>
<?php if(Yii::$app->user->isGuest): ?>
<a class="btn btn-primary" href="<?= Yii::$app->urlManagerFrontend->createUrl(['site/signup']) ; ?>"><span class="glyphicon glyphicon-user"></span> Je crée mon compte</a>
<a class="btn btn-default" href="<?= Yii::$app->urlManagerFrontend->createUrl(['site/contact']) ; ?>"><span class="glyphicon glyphicon-info-sign"></span> J'ai besoin d'informations complémentaires</a>
<?php endif; ?>
<p class="presentation">Simplifiez la distribution de vos produits<br /> avec des outils adaptés.</p>
<a class="btn btn-primary" href="<?= Yii::$app->urlManagerFrontend->createUrl(['site/signup']) ; ?>"><span class="glyphicon glyphicon-user"></span> Je crée mon espace</a>
<a class="btn btn-default" href="<?= Yii::$app->urlManagerFrontend->createUrl(['site/contact']) ; ?>"><span class="glyphicon glyphicon-info-sign"></span> Demande d'informations</a>
</div>
</div>
</div>
@@ -91,6 +90,7 @@ $this->setTitle('Logiciel libre de gestion de commandes') ;
</div>
</div>
</div>
<div class="clr"></div>
</div>
<?php if(Yii::$app->user->isGuest && YII_ENV == 'demo'): ?>
<div class="row" id="row-signup">
@@ -98,8 +98,8 @@ $this->setTitle('Logiciel libre de gestion de commandes') ;
</div>
<?php endif; ?>
<div class="col-md-6" id="row-functionalities">
<div class="panel panel-default">
<div id="row-functionalities-rates">
<div class="panel panel-default" id="block-functionnalities">
<div class="panel-heading">
<h2 class="panel-title">
<span class="glyphicon glyphicon-cog"></span> <span class="the-title">Fonctionnalités</span>
@@ -140,9 +140,7 @@ $this->setTitle('Logiciel libre de gestion de commandes') ;
</div>
</div>
</div>
</div>
<div class="col-md-6" id="row-rates">
<div class="panel panel-default">
<div class="panel panel-default" id="block-rates">
<div class="panel-heading">
<h2 class="panel-title">
<span class="glyphicon glyphicon-euro"></span> <span class="the-title">Tarifs</span>

+ 287
- 263
frontend/web/css/screen.css
File diff suppressed because it is too large
View File


BIN
frontend/web/img/arrows-distrib.png View File

Before After
Width: 218  |  Height: 126  |  Size: 5.2KB

BIN
frontend/web/img/carottes.jpg View File

Before After
Width: 1600  |  Height: 1067  |  Size: 255KB

+ 2
- 2
frontend/web/sass/_order_system.scss View File

@@ -36,7 +36,7 @@ termes.
*/

h1.title-system-order {
color: black ;
color: #323232 ;
padding-bottom: 35px ;
font-size: 30px ;
line-height: 35px ;
@@ -44,7 +44,7 @@ h1.title-system-order {
text-align: center ;
position: relative ;
margin-top: 30px ;
margin-top: 0px ;
img {
width: 35px ;

+ 28
- 2
frontend/web/sass/_responsive.scss View File

@@ -39,14 +39,14 @@ termes.
#header {
nav {
.navbar-nav {
padding-top: 30px ;
padding-top: 10px ;
}
ul {
li {
a {
padding: 3px 7px ;
font-size: 13px ;
font-size: 15px ;
}
}
}
@@ -125,4 +125,30 @@ termes.
.connected #content {
padding-top: 0px ;
}
.home {
#content #presentation-distrib h3 {
color: $courant ;
}
#main {
background-image: none ;
background-color: #FFF8DC ;
#row-users-producers {
display: block ;
margin-bottom: 20px ;
.col-md-6 {
float: left ;
display: block;
width: 100% ;
}
}
}
}
}

+ 119
- 122
frontend/web/sass/screen.scss View File

@@ -68,14 +68,17 @@ body {
min-height: 100%;
margin: 0;
padding: 0;
background-color: #f7f7f7 ;
//background-color: #FFF8DC ;
background-color: #FFF8DC ;
}

strong {
font-weight: bold ;
}

.table {
background-color: white ;
}

#main {
padding-bottom: 50px ;
a {
@@ -95,7 +98,9 @@ strong {
text-decoration: none ;
}
}
}

#bookmarked-producers, #main {
.btn-primary {
background-color: $color1 ;
border: solid 1px $color1 ;
@@ -107,11 +112,12 @@ strong {
color: white ;
}
}
.form-control:focus {
@include box-shadow(none) ;
border: solid 1px $color1 ;
}
}


.form-control:focus {
@include box-shadow(none) ;
border: solid 1px $color1 ;
}

p {
@@ -307,8 +313,9 @@ ul {
padding: 10px 15px ;
margin: 0px ;
font-family: 'capsuularegular' ;
font-weight: bold ;
color: black ;
font-size: 18px ;
font-size: 16px ;
@include border-radius(5px) ;
@include box-shadow(none) ;
@@ -356,10 +363,17 @@ ul {
position: relative;
top: -4px;
}
}
}
}

.home {
#main {
background: black top center no-repeat url(../img/carottes.jpg) ;
background-size: 100% auto ;
}
}


#content {
position: relative ;
padding: 20px 0px ;
@@ -374,7 +388,7 @@ ul {
h2 {
color: $courant ;
padding-bottom: 15px ;
font-size: 25px ;
font-size: 35px ;
line-height: 35px ;
font-family: 'highvoltageregular' ;
text-transform: uppercase ;
@@ -388,61 +402,97 @@ ul {
color: $courant ;
}
#presentation-distrib {
margin-top: 20px ;
margin-bottom: 50px ;
text-align: center ;
h2 {
font-family: 'capsuularegular' ;
text-align: center ;
margin-top: 15px ;
text-transform: none ;
color: $color1 ;
font-weight: bold ;
font-size: 30px ;
margin-bottom: 0px ;
padding-bottom: 0px ;
}
h3 {
color: white ;
font-family: 'capsuularegular' ;
font-size: 20px ;
}
}
.panel {
background-color: white ;
border: solid 1px #e0e0e0 ;
.panel-heading {
background-color: #FFF8DC ;
border-bottom: 0px ;
padding-top: 10px ;
padding-bottom: 8px ;
border-bottom: solid 1px #e0e0e0 ;
h2.panel-title {
margin: 0px ;
padding: 0px ;
padding-top: 0px ;
text-align: center ;
.img {
height: 20px ;
display: none ;
}
.glyphicon {
font-size: 20px ;
display: none ;
}
span.the-title {
margin-left: 10px ;
font-size: 26px ;
position: relative ;
top: 0px ;
text-transform: uppercase ;
}
}
}
.panel-body {
background-color: white ;
@include border-radius(0px 0px 5px 5px) ;
}
}
#description {
img {
width: 100% ;
}
}
#main-img {
max-width: 100% ;
border: solid 1px #e0e0e0 ;
padding: 5px ;
@include border-radius(5px) ;
}
#row-signup {

#row-users-producers {
text-align: center ;
margin-top: 40px ;
padding-top: 40px ;
a.btn {
padding: 10px 20px ;
font-size: 20px ;
text-transform: uppercase ;
}
display: table ;
margin-bottom: 20px ;
@include border-radius(5px) ;
a.btn-primary {
margin-right: 15px ;
}
}
#presentation-distrib {
h2 {
font-family: 'capsuularegular' ;
text-align: left ;
margin-top: 0px ;
text-transform: none ;
color: $color1 ;
font-weight: bold ;
.col-md-6 {
display: table-cell ;
width: 50% ;
.panel {
height: 100% ;
margin-bottom: 20px ;
background-color: transparent ;
@include box-shadow(none) ;
}
span {
&.producer {
padding-left: 0px ;
}
&.users {
padding-right: 0px ;
}
}
}
#row-users-producers,
#row-functionalities,
#row-rates {
#row-functionalities-rates {
div.producer, div.users {
}
@@ -453,27 +503,6 @@ ul {
}
}
h2 {
text-align: left ;
margin-top: 0px ;
padding-bottom: 0px ;
margin-bottom: 0px ;
.img {
height: 20px ;
}
.glyphicon {
font-size: 20px ;
}
span.the-title {
margin-left: 10px ;
font-size: 20px ;
position: relative ;
top: 0px ;
text-transform: uppercase ;
}
}
p.presentation {
font-family: 'capsuularegular' ;
color: black ;
@@ -486,7 +515,7 @@ ul {
}
}
#row-functionalities {
#row-functionalities-rates {
.block {
margin-bottom: 10px ;
p {
@@ -515,7 +544,7 @@ ul {
}
}
#row-rates {
#block-rates {
table {
th {
font-family: 'capsuularegular' ;
@@ -569,67 +598,27 @@ ul {

#bookmarked-producers {
padding: 0px ;
padding-top: 20px ;
padding-top: 15px ;
padding-bottom: 7px ;
margin: 0px ;
border-bottom: solid 1px #e0e0e0 ;
background-color: white ;
h2 {
float: left ;
font-family: 'highvoltageregular' ;
color: $courant ;
text-align: left ;
font-size: 16px ;
margin: 0px ;
padding: 0px ;
margin-left: 15px ;
margin-bottom: 15px ;
}
.col-md-12, .col-md-6, .col-md-3 {
float: left ;
}
.col-md-12 .producer {
background-size: 920px auto ;
}
.col-md-6 .producer {
background-size: 460px auto ;
color: $courant ;
}
.col-md-3 .producer {
background-size: 230px auto ;
}

.producer {
#producers {
position: relative ;
height: 100px ;
list-style-type: none ;
text-align: center ;
margin-bottom: 20px ;
background-size: 300px auto ;
background-position: center center ;
background-repeat: no-repeat ;
border: solid 1px #e0e0e0 ;
background-color: white ;

&.logo-distrib-default {
background-size: auto 70px;
background-position: center 0px ;
}
a {
position: absolute ;
bottom: 0px ;
left: 0px ;
width: 100% ;
background-color: $color1 ;
border-color: $color1 ;
color: white ;
@include border-radius(0px) ;
&:hover {
background-color: darken($color1, 2);
}
}
top: -5px ;
left: 5px ;
}
#discover {
@@ -755,11 +744,18 @@ ul {

$max-width-form: 500px ;

.back-white {
background-color: white ;
padding: 30px ;
@include border-radius(5px) ;
}

.site-login {
.col-lg-5 {
margin: 0px auto ;
float: none ;
max-width: $max-width-form ;
@extend .back-white ;
}
}

@@ -774,6 +770,7 @@ $max-width-form: 500px ;
margin: 0px auto ;
float: none ;
max-width: $max-width-form ;
@extend .back-white ;
}
}


Write Preview
Loading…
Cancel
Save