tykayn/caisse-bliss
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

horizontal scroll for categories

Browse Source
This commit is contained in:
Baptiste Lemoine 2018-07-19 18:26:54 +02:00
parent b99550edc3
commit b59e1f4333
4 changed files with 73 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/Resources/views/logged/angular/listing-products.html.twig
View File

@ -1,35 +1,39 @@
{% verbatim %} {% verbatim %}
<div class="row"> <div class="horizontal-land">
<div class="category-listing" ng-repeat="c in categories"> <div class="super-large" style="min-width: {{(1+categories.length) * 300}}px">
<div class="category-listing one-category col-xs-4 col-sm-3 " ng-repeat="c in categories">
<h2 ng-class="{'hidden':c.hidden}"> <h2 ng-class="{'hidden':c.hidden}">
{{ c.name }} {{ c.name }}
</h2> </h2>
<span ng-repeat="p in c.products track by p.id" <div class="product-listing" ng-if="! c.hidden">
class="product-box" <span ng-repeat="p in c.products track by p.id"
ng-class="{ 'btn-primary' : activeItemsSold.indexOf(p.id) !==-1}" class="product-box"
> ng-class="{ 'btn-primary' : activeItemsSold.indexOf(p.id) !==-1}"
<button class="product-button" ng-click="addProduct( p )"> >
<img class="product-image" src="{{p.image}}" alt="image" ng-if="p.image.length"> <button class="product-button" ng-click="addProduct( p )">
<span class="product-name"> <img class="product-image" src="{{p.image}}" alt="image" ng-if="p.image.length">
{{ p.name }} <span class="product-name">
</span> {{ p.name }}
<span class="badge"> </span>
{{ p.price }} € <span class="badge">
</span> {{ p.price }} €
<span class="badge badge-default" ng-if="show_config.stock_count"> </span>
{{ p.stockCount }} <span class="badge badge-default" ng-if="show_config.stock_count">
</span> {{ p.stockCount }}
<span class="badge badge-success" ng-if="show_config.sold"> </span>
<i class="fa fa-tick"></i> <span class="badge badge-success" ng-if="show_config.sold">
{{ countProductsSoldForActiveFestival[p.id] }} <i class="fa fa-tick"></i>
</span> {{ countProductsSoldForActiveFestival[p.id] }}
</button> </span>
<button class="express-button" ng-if="expressSelling" ng-click="expressSell(p)" title="achat express sans compléter les infos du client"> </button>
<i class="fa fa-shopping-cart"></i> <button class="express-button" ng-if="expressSelling" ng-click="expressSell(p)" title="achat express sans compléter les infos du client">
</button> <i class="fa fa-shopping-cart"></i>
</span> </button>
</span>
</div>
</div>
</div> </div>
</div> </div>
{% endverbatim %} {% endverbatim %}

5
app/Resources/views/logged/angular/loaded-caisse.html.twig
View File

@ -5,13 +5,12 @@
<!--caisse IHM--> <!--caisse IHM-->
<div id="load_ok"> <div id="load_ok">
<div class="listing-products col-xs-12 col-sm-7"> <div class="listing-products col-xs-12 col-sm-12">
{% include 'logged/angular/messages.html.twig' %} {% include 'logged/angular/messages.html.twig' %}
{% include 'logged/angular/listing-products.html.twig' %} {% include 'logged/angular/listing-products.html.twig' %}
</div> </div>
<div class="sellings col-xs-12 col-sm-5"> <div class="sellings col-xs-12 col-sm-12">
<div class="well" ng-class="{'bg-success text-success': sellingOk }"> <div class="well" ng-class="{'bg-success text-success': sellingOk }">
{% include 'logged/angular/validate-button.html.twig' %} {% include 'logged/angular/validate-button.html.twig' %}

18
app/Resources/views/logged/dashboard.html.twig
View File

@ -9,7 +9,7 @@
ng-controller="CaisseCtrl as MainCtrl" ng-controller="CaisseCtrl as MainCtrl"
> >
<div class="row marged-v"> <div class="row marged-v">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-12">
<button <button
title="la vente express vous permet d'enregistrer une vente pour un seul article sans remplir le formulaire de détail" title="la vente express vous permet d'enregistrer une vente pour un seul article sans remplir le formulaire de détail"
class="btn" class="btn"
@ -43,7 +43,7 @@
</button> </button>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="client-now text-right"> <div class="client-now text-right padded">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
Client actuel: Client actuel:
{% verbatim %} {% verbatim %}
@ -69,23 +69,28 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row">
{% include 'logged/caisse-main.html.twig' %} {% include 'logged/caisse-main.html.twig' %}
</div>
{% verbatim %} {% verbatim %}
<div class="choice-categories" ng-if="categories.length"> <div class="choice-categories well" ng-if="categories.length">
<h2> <h2>
<i class="fa-eye fa"></i>
Visibilité des catégories Visibilité des catégories
</h2> </h2>
<div <div
ng-repeat="c in categories" ng-repeat="c in categories"
> >
<div class="btn" <div class="btn btn-block"
ng-class="{'btn-success': !c.hidden}" ng-class="{'btn-success': !c.hidden}"
ng-click="c.hidden = !c.hidden"> ng-click="c.hidden = !c.hidden">
{{ c.name }} {{ c.name }}
<span ng-if="c.hidden">(caché)</span>
</div> </div>
</div> </div>
@ -102,9 +107,10 @@
<div id="history" class="tab-pane fade"> <div id="history" class="tab-pane fade">
<h2>Historique</h2> <h2>Historique</h2>
</div> </div>
{% endverbatim %}
{% endverbatim %}
</div> </div>
</div> </div>
</div>
</div>
{% endblock %} {% endblock %}

28
assets/css/pages/_dashboard.scss
View File

@ -4,14 +4,16 @@
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
width: 100%; width: 100%;
float: left;
} }
.product-button { .product-button {
width: 80%; width: 80%;
text-overflow-ellipsis: "..."; text-overflow-ellipsis: "...";
} }
.listing-products { .listing-products {
.btn, button { .btn, button {
font-size: 2rem; font-size: 1.6rem;
background: white; background: white;
padding: 1.5rem; padding: 1.5rem;
-webkit-border-radius: 1rem; -webkit-border-radius: 1rem;
@ -37,13 +39,33 @@
} }
// container of categories
.horizontal-land {
overflow-x: auto;
overflow-y: hidden;
//width: 100%;
height: 80vh;
background: #ccc;
padding: 0.5rem;
}
// list of one category
.one-category {
background: #dedede;
width: 300px;
margin: 0 4px;
height: calc(80vh - 1rem);
box-sizing: border-box;
display: inline-block;
//vertical-align: top;
white-space: nowrap;
//float: left;
}
.category-listing{ .category-listing{
border: solid 1px $grey; border: solid 1px $grey;
padding: 1rem; padding: 1rem;
margin: 0.5rem; margin: 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
width: calc(50% - 2rem);
float: left;
} }
.validate_selling { .validate_selling {
margin: 0.25rem; margin: 0.25rem;