Laclic
/
Souke
Watch 5
Star 0
Fork 1
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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

refactoring
Guillaume Bourgeois 5 years ago
parent
9e7dc0f8cd
commit
659b3e9f47
8 changed files with 476 additions and 427 deletions
Unified 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

<?php $this->beginPage() ?> <?php $this->beginPage() ?>
<!DOCTYPE html> <!DOCTYPE html>
<head> <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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?> <?= Html::csrfMetaTags() ?>
'active' => $this->getControllerAction() == 'site/producers', 'active' => $this->getControllerAction() == 'site/producers',
'options' => ['id' => 'li-producteurs'] '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) : ''), 'label' => '<span class="glyphicon glyphicon-flag"></span> '.($producer ? Html::encode($producer->name) : ''),
'url' => '#', 'url' => '#',
->all() ; ->all() ;
?> ?>
<?php if(count($producersArray)): ?> <?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: ?> <?php else: ?>
<div id="discover"> <div id="discover">
<p>Vous n'avez aucun producteur dans vos favoris : </p> <p>Vous n'avez aucun producteur dans vos favoris : </p>
<?php endif; ?> <?php endif; ?>
<div id="main"> <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> </div>
<footer id="footer"> <footer id="footer">
<div class="container"> <div class="container">

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

use common\helpers\Url ; use common\helpers\Url ;


/* @var $this yii\web\View */ /* @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">
<div id="presentation-distrib"> <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>
<div class="row" id="row-users-producers">
<div id="row-users-producers">
<div class="col-md-6 producer"> <div class="col-md-6 producer">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
</h2> </h2>
</div> </div>
<div class="panel-body"> <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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="clr"></div>
</div> </div>
<?php if(Yii::$app->user->isGuest && YII_ENV == 'demo'): ?> <?php if(Yii::$app->user->isGuest && YII_ENV == 'demo'): ?>
<div class="row" id="row-signup"> <div class="row" id="row-signup">
</div> </div>
<?php endif; ?> <?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"> <div class="panel-heading">
<h2 class="panel-title"> <h2 class="panel-title">
<span class="glyphicon glyphicon-cog"></span> <span class="the-title">Fonctionnalités</span> <span class="glyphicon glyphicon-cog"></span> <span class="the-title">Fonctionnalités</span>
</div> </div>
</div> </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"> <div class="panel-heading">
<h2 class="panel-title"> <h2 class="panel-title">
<span class="glyphicon glyphicon-euro"></span> <span class="the-title">Tarifs</span> <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

*/ */


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

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

#header { #header {
nav { nav {
.navbar-nav { .navbar-nav {
padding-top: 30px ;
padding-top: 10px ;
} }
ul { ul {
li { li {
a { a {
padding: 3px 7px ; padding: 3px 7px ;
font-size: 13px ;
font-size: 15px ;
} }
} }
} }
.connected #content { .connected #content {
padding-top: 0px ; 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

min-height: 100%; min-height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f7f7f7 ;
//background-color: #FFF8DC ;
background-color: #FFF8DC ;
} }


strong { strong {
font-weight: bold ; font-weight: bold ;
} }


.table {
background-color: white ;
}

#main { #main {
padding-bottom: 50px ; padding-bottom: 50px ;
a { a {
text-decoration: none ; text-decoration: none ;
} }
} }
}

#bookmarked-producers, #main {
.btn-primary { .btn-primary {
background-color: $color1 ; background-color: $color1 ;
border: solid 1px $color1 ; border: solid 1px $color1 ;
color: white ; 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 { p {
padding: 10px 15px ; padding: 10px 15px ;
margin: 0px ; margin: 0px ;
font-family: 'capsuularegular' ; font-family: 'capsuularegular' ;
font-weight: bold ;
color: black ; color: black ;
font-size: 18px ;
font-size: 16px ;
@include border-radius(5px) ; @include border-radius(5px) ;
@include box-shadow(none) ; @include box-shadow(none) ;
position: relative; position: relative;
top: -4px; top: -4px;
} }
}
}
}

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



#content { #content {
position: relative ; position: relative ;
padding: 20px 0px ; padding: 20px 0px ;
h2 { h2 {
color: $courant ; color: $courant ;
padding-bottom: 15px ; padding-bottom: 15px ;
font-size: 25px ;
font-size: 35px ;
line-height: 35px ; line-height: 35px ;
font-family: 'highvoltageregular' ; font-family: 'highvoltageregular' ;
text-transform: uppercase ; text-transform: uppercase ;
color: $courant ; 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 { .panel {
background-color: white ;
border: solid 1px #e0e0e0 ;
.panel-heading { .panel-heading {
background-color: #FFF8DC ;
border-bottom: 0px ;
padding-top: 10px ;
padding-bottom: 8px ;
border-bottom: solid 1px #e0e0e0 ;
h2.panel-title { h2.panel-title {
margin: 0px ; margin: 0px ;
padding: 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 ; 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-users-producers,
#row-functionalities,
#row-rates {
#row-functionalities-rates {
div.producer, div.users { div.producer, div.users {
} }
} }
} }
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 { p.presentation {
font-family: 'capsuularegular' ; font-family: 'capsuularegular' ;
color: black ; color: black ;
} }
} }
#row-functionalities {
#row-functionalities-rates {
.block { .block {
margin-bottom: 10px ; margin-bottom: 10px ;
p { p {
} }
} }
#row-rates {
#block-rates {
table { table {
th { th {
font-family: 'capsuularegular' ; font-family: 'capsuularegular' ;


#bookmarked-producers { #bookmarked-producers {
padding: 0px ; padding: 0px ;
padding-top: 20px ;
padding-top: 15px ;
padding-bottom: 7px ;
margin: 0px ; margin: 0px ;
border-bottom: solid 1px #e0e0e0 ; border-bottom: solid 1px #e0e0e0 ;
background-color: white ;
h2 { h2 {
float: left ;
font-family: 'highvoltageregular' ; font-family: 'highvoltageregular' ;
color: $courant ; color: $courant ;
text-align: left ; text-align: left ;
font-size: 16px ; font-size: 16px ;
margin: 0px ; margin: 0px ;
padding: 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 ; 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 { #discover {


$max-width-form: 500px ; $max-width-form: 500px ;


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

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


margin: 0px auto ; margin: 0px auto ;
float: none ; float: none ;
max-width: $max-width-form ; max-width: $max-width-form ;
@extend .back-white ;
} }
} }



Write Preview
Loading…
Cancel
Save