Browse Source

Refactoring/traduction css frontend

dev
Guillaume Bourgeois 6 years ago
parent
commit
f8c8ee2ce1
4 changed files with 432 additions and 506 deletions
  1. +350
    -384
      frontend/web/css/screen.css
  2. +65
    -79
      frontend/web/sass/_order_system.scss
  3. +1
    -1
      frontend/web/sass/_responsive.scss
  4. +16
    -42
      frontend/web/sass/screen.scss

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


frontend/web/sass/_systeme_commandes.scss → frontend/web/sass/_order_system.scss View File

termes. termes.
*/ */


h1.title-systeme-commande {
h1.title-system-order {
color: black ; color: black ;
padding-bottom: 35px ; padding-bottom: 35px ;
font-size: 30px ; font-size: 30px ;
text-transform: uppercase ; text-transform: uppercase ;
} }


#addetablissementform-id_etablissement,
#signupform-id_etablissement {
#addproducerform-id_producer,
#signupform-id_producer {
option:disabled { option:disabled {
font-weight: bold ; font-weight: bold ;
color: black ; color: black ;
} }
} }


#bloc-code-acces {
#block-code-acces {
display: none ; display: none ;
} }




#main .liste-etablissements {
#main .list-producers {
#bloc-liste-boulangeries {

}

.boulangerie {
.producer {
padding-left: 0px ; padding-left: 0px ;
padding-right: 30px ; padding-right: 30px ;
} }
.panel-heading { .panel-heading {

height: 150px ; height: 150px ;
overflow: hidden ; overflow: hidden ;
padding: 0px ; padding: 0px ;
background: none ; background: none ;
background-color: #F8F1DD ; background-color: #F8F1DD ;
.img-back { .img-back {
//display: none ;
width: 100% ; width: 100% ;
height: auto ; height: auto ;
position: relative; position: relative;
margin-bottom: 4px ; margin-bottom: 4px ;
} }


.localite {
.locality {
color: gray ; color: gray ;
margin-bottom: 10px ; margin-bottom: 10px ;
} }
padding: 10px 20px ; padding: 10px 20px ;
} }
.heure-limite-commande,
.credit-pain {
.order-deadline,
.credit {
margin-top: 15px ; margin-top: 15px ;
font-size: 13px ; font-size: 13px ;
} }
.heure-limite-commande {
.order-deadline {
float: left ; float: left ;
} }
.credit-pain {
.credit {
float: right ; float: right ;
.montant {
.amount {
font-size: 16px ; font-size: 16px ;
color: $color1 ; color: $color1 ;
background-color: $color2 ; background-color: $color2 ;
} }
} }
.info-credit-pain {
.info-credit {
font-size: 17px ; font-size: 17px ;
position: relative ; position: relative ;
top: 2px ; top: 2px ;
} }
} }


#index-commande {
#index-order {
position: relative ; position: relative ;
#logout { #logout {
z-index: 10 ; z-index: 10 ;
} }
.accueil {
.home {
text-align: center ; text-align: center ;
padding-bottom: 20px; padding-bottom: 20px;
} }
#bloc-add-etablissement {
#block-add-producer {
padding-left: 0px ; padding-left: 0px ;
padding-right: 30px ; padding-right: 30px ;
padding-bottom: 0px ; padding-bottom: 0px ;
} }
.field-addetablissementform-id_etablissement {
.field-addproducerform-id_producer {
width: 70% ; width: 70% ;
float: left ; float: left ;
} }
.field-addetablissementform-code {
.field-addproducerform-code {
width: 70% ; width: 70% ;
float: left ; float: left ;
} }
} }
} }


#historique-commandes {
.statut, .montant {
#history-orders {
.status, .amount{
width: 175px ; width: 175px ;
} }
.montant {
.amount {
//text-align: center ; //text-align: center ;
width: 100px ; width: 100px ;
} }
.nom-point-vente {
.name-point-sale {
} }
.localite {
.locality {
font-size: 11px ; font-size: 11px ;
lin-height: 11px ; lin-height: 11px ;
} }
text-decoration: none ; text-decoration: none ;
} }
.commentaire {
.comment {
margin-top: 5px ; margin-top: 5px ;
span { span {
font-size: 12px ; font-size: 12px ;
} }
} }
.commande-form {
.order-form {
min-height: 600px ; min-height: 600px ;
padding-bottom: 60px ; padding-bottom: 60px ;
float: right ; float: right ;
} }
#datepicker-production {
#datepicker-distribution {
.ui-datepicker { .ui-datepicker {
float: left ; float: left ;
} }
} }
.date-commande {
.date-order {
margin-bottom: 53px ; margin-bottom: 53px ;
span { span {
background-color: $color1 ; background-color: $color1 ;
} }
} }
#has-commande-en-cours {
#has-order-in-progress {
margin-top: 15px ; margin-top: 15px ;
a { a {
} }
} }
.field-commande-id_production {
.field-order-id_distribution {
display: none ; display: none ;
} }
.field-commande-id_point_vente {
.field-order-id_point_sale {
margin-top: 30px ; margin-top: 30px ;
} }
.field-commande-id_production {
.field-order-id_distribution {
margin-bottom: 0px ; margin-bottom: 0px ;
label { label {
margin-bottom: 0px ; margin-bottom: 0px ;
} }
} }
.field-commande-id_point_vente {
.field-order-id_point_sale {
display: none ; display: none ;
} }
.blocs {
.blocks {
list-style-type: none ; list-style-type: none ;
margin: 0px ; margin: 0px ;
padding: 0px ; padding: 0px ;
.bloc {
.block {
text-decoration: none ; text-decoration: none ;
width: 268px ; width: 268px ;
height: 130px ; height: 130px ;
border: 1px solid #d8d8d8 ; border: 1px solid #d8d8d8 ;
.nom {
.name {
//text-align: center ; //text-align: center ;
font-family: "comfortaalight" ; font-family: "comfortaalight" ;
font-size: 20px ; font-size: 20px ;
} }
.adresse {
.address {
color: gray ; color: gray ;
font-size: 13px ; font-size: 13px ;
line-height: 16px ; line-height: 16px ;
} }
.horaires {
.infos {
margin-top: 7px ; margin-top: 7px ;
.jour {
.day {
font-weight: bold ; font-weight: bold ;
display: none ; display: none ;
} }
//color: gray ; //color: gray ;
} }
.commentaire {
.comment {
margin-top: 5px ; margin-top: 5px ;
span { span {
background-color: $color1 ; background-color: $color1 ;
} }
} }
#produits {
#products {
margin-top: 15px ; margin-top: 15px ;
#label-produits {
#label-products {
display: block ; display: block ;
margin-bottom: 5px ; margin-bottom: 5px ;
} }
.table { .table {
margin-top: 7px ; margin-top: 7px ;
.illu {
float: left ;
height: auto ;
width: 70px ;
margin-right: 15px ;
}
.photo { .photo {
padding: 0px ; padding: 0px ;
width: 120px ; width: 120px ;
width: 120px ; width: 120px ;
} }
.nom {
.name {
font-family: "comfortaalight" ; font-family: "comfortaalight" ;
font-weight: bold ; font-weight: bold ;
text-transform: uppercase ; text-transform: uppercase ;
font-style: italic; font-style: italic;
} }
.recette {
.recipe {
font-size: 12px ; font-size: 12px ;
} }
} }
} }
.colonne-quantite, .prix-unit, .total {
.column-quantity, .price-unit, .total {
width: 150px ; width: 150px ;
text-align: center ; text-align: center ;
} }
td#total-commande, td#total-commande-vrac, td.total {
td#total-order, td#total-order-vrac, td.total {
text-align: center ; text-align: center ;
} }
text-align: center ; text-align: center ;
} }
.quantite-restante {
.quantity-remaining{
font-size: 12px ; font-size: 12px ;
margin-top: 8px ; margin-top: 8px ;
} }
} }
td.produit, th.produit {
td.product, th.product {
width: 70% ; width: 70% ;
} }
td.prix-unit, th.prix-unit {
td.price-unit, th.price-unit {
width: 10% ; width: 10% ;
} }
td.colonne-quantite, th.colonne-quantite {
td.column-quantity, th.column-quantity {
width: 10% ; width: 10% ;
} }
padding-right: 20px ; padding-right: 20px ;
} }
&.no-credit-pain {
&.no-credit {
#bloc-valider-commande { #bloc-valider-commande {
margin-top: 0px ; margin-top: 0px ;
float: right ; float: right ;
} }
} }
#total-commande-bottom {
#total-order-bottom {
background-color: white ; background-color: white ;
@include border-radius(20px) ; @include border-radius(20px) ;
padding: 5px 25px ; padding: 5px 25px ;
border: solid 1px #e0e0e0 ; border: solid 1px #e0e0e0 ;
} }
.btn-commentaire {
.btn-comment {
float: left ; float: left ;
} }
.valider-commande {
.confirm-order {
//float: left; //float: left;
} }
.btn-commentaire {
.btn-comment {
margin-right: 10px ; margin-right: 10px ;
} }
#bloc-valider-commande {
#block-confirm-order {
text-align: right ; text-align: right ;
margin-top: 20px ; margin-top: 20px ;
} }
} }
#checkbox-credit-pain {
#checkbox-credit {
float: right ; float: right ;
width: 340px ; width: 340px ;
padding: 3px 11px ; padding: 3px 11px ;
@include text-shadow(0 1px 0 #fff) ; @include text-shadow(0 1px 0 #fff) ;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075)) ; @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075)) ;
&.paiement-impossible {
&.payment-impossible {
background-color: #e0e0e0 ; background-color: #e0e0e0 ;
} }
@include border-radius(5px) ; @include border-radius(5px) ;
} }
.montant-paye {
.amount-paid {
color: $color1 ; color: $color1 ;
} }
#info-credit-vide {
#info-credit-empty {
font-size: 12px ; font-size: 12px ;
} }
#credit-pain-disabled {
#credit-disabled {
display: none ; display: none ;
font-size: 12px ; font-size: 12px ;
} }
} }
.btn-retour, .annuler-commande {
.btn-retour, .cancel-order {
float: left ; float: left ;
margin-right: 5px ; margin-right: 5px ;
} }
.annuler-commande {
.cancel-order {
color: #b92c28 ; color: #b92c28 ;
background-color: white ; background-color: white ;
} }
#total-commande-bottom {
#total-order-bottom {
display: none ; display: none ;
font-weight: bold ; font-weight: bold ;
font-family: "comfortaalight" ; font-family: "comfortaalight" ;
font-size: 24px ; font-size: 24px ;
} }
.field-commande-commentaire {
.field-order-comment {
display: none ; display: none ;
} }
} }
} }


#page-etablissement,
#page-producer,
#page-producer-code { #page-producer-code {
h1 { h1 {
font-size: 40px ; font-size: 40px ;
.form-group.buttons { .form-group.buttons {
text-align: center ; text-align: center ;
} }
} }
} }

+ 1
- 1
frontend/web/sass/_responsive.scss View File

} }
} }


#content #points-vente .content {
#content #points-sale .content {
padding-left: 10px ; padding-left: 10px ;
margin-top: 30px ; margin-top: 30px ;
} }

+ 16
- 42
frontend/web/sass/screen.scss View File

} }
} }
#link-espace-boulanger {
#link-space-producer {
border-left: solid 1px #e0e0e0 ; border-left: solid 1px #e0e0e0 ;
color: $color1 ; color: $color1 ;
} }
} }
} }


#row-clients-boulanger {
#row-user-producer {
margin-bottom: 50px ; margin-bottom: 50px ;
h2 { h2 {
padding-bottom: 4px ; padding-bottom: 4px ;
} }
.boulanger {
.prix {
.producer {
.price {
a { a {
background-color: $color2 ; background-color: $color2 ;
color: $color1 ; color: $color1 ;
} }
} }
.prix {
.price {
padding-top: 15px ; padding-top: 15px ;
font-size: 18px ; font-size: 18px ;
} }
} }
#periode-essai {
margin-top: 8px ;
text-align: center ;
font-size: 13px ;
color: gray ;
font-family: 'comfortaaregular' ;
}
} }
#btn-demo { #btn-demo {
} }
} }
#modal-tarifs {
.commission {
text-align: center ;
font-size: 20px ;
text-transform: uppercase ;
margin-bottom: 20px ;
span {
padding: 10px 20px ;
border: solid 1px black ;
@include border-radius(10px) ;
}
}
.exemple {
color: gray ;
}
#modal-prices {
} }
} }


margin-left: -70px ; margin-left: -70px ;
} }
#par-telephone {
}

.form-control:focus { .form-control:focus {
/*@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $jaune) ; /*@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $jaune) ;
border-color: $jaune ;*/ border-color: $jaune ;*/
} }


#favorite-producers {
#bookmarked-producers {
background-color: $color1 ; background-color: $color1 ;
border-top: solid 1px #e0e0e0 ; border-top: solid 1px #e0e0e0 ;
padding: 0px ; padding: 0px ;
cursor: pointer ; cursor: pointer ;
} }


#mails-jours-prod {
#mails-days-distribution {
.form-group { .form-group {
float: left ; float: left ;
margin-right: 15px ; margin-right: 15px ;
} }


#form-signup { #form-signup {
#client-boulanger {
#user-producer {
margin-bottom: 30px ; margin-bottom: 30px ;
} }
#signupform-id_etablissement {
#signupform-id_producer {
option:disabled { option:disabled {
font-weight: bold ; font-weight: bold ;
color: black ; color: black ;
} }
} }
#champs-boulanger {
#champs-producer {
display: none ; display: none ;
} }
#boutons-inscrire {
#buttons-signup {
margin-top: 30px; margin-top: 30px;
} }
} }
} }
} }
#producteurs nav.nav-producteurs {
#producers nav.nav-producers {
ul { ul {
li { li {
a { a {
} }




.header-etablissement {
.header-producer {
z-index: 1 ; z-index: 1 ;
#block-main-img { #block-main-img {
height: 144px ; height: 144px ;
} }
} }


nav#menu-etablissement {
nav#menu-producer {
border-bottom: solid 1px #e0e0e0 ; border-bottom: solid 1px #e0e0e0 ;
//background-color: #FAFAFA ; //background-color: #FAFAFA ;
ul { ul {
} }
} }


@import "_systeme_commandes.scss" ;
@import "_order_system.scss" ;
@import "_responsive.scss" ; @import "_responsive.scss" ;



Loading…
Cancel
Save