horizontal scroll for categories
This commit is contained in:
parent
b99550edc3
commit
b59e1f4333
@ -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,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' %}
|
||||||
|
@ -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 %}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user