Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix into dev
This commit is contained in:
commit
04280c5b5a
|
@ -1,4 +1,2 @@
|
|||
<vn-horizontal class="text-container">
|
||||
<span class="text" ng-transclude="text" vn-one></span>
|
||||
</vn-horizontal>
|
||||
<div class="field"></div>
|
||||
<span class="text" ng-transclude="text"></span>
|
|
@ -1,38 +1,58 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from '../../lib/component';
|
||||
import {focus} from '../../directives/focus';
|
||||
import './style.scss';
|
||||
|
||||
export default class Controller extends Component {
|
||||
constructor($element, $scope, $transclude) {
|
||||
constructor($element, $scope, $transclude, $timeout) {
|
||||
super($element, $scope);
|
||||
this.$timeout = $timeout;
|
||||
let element = $element[0];
|
||||
element.tabIndex = 0;
|
||||
|
||||
element.addEventListener('focus', () => {
|
||||
if (this.field) return;
|
||||
$transclude((tClone, tScope) => {
|
||||
this.field = tClone;
|
||||
this.tScope = tScope;
|
||||
this.element.querySelector('.field').appendChild(this.field[0]);
|
||||
element.tabIndex = -1;
|
||||
this.timer = $timeout(() => {
|
||||
this.timer = null;
|
||||
focus(this.field[0]);
|
||||
});
|
||||
}, null, 'field');
|
||||
element.classList.add('selected');
|
||||
});
|
||||
|
||||
element.addEventListener('focusout', event => {
|
||||
this.destroyTimer();
|
||||
this.lastEvent = event;
|
||||
let target = event.relatedTarget;
|
||||
while (target && target.parentNode != element)
|
||||
while (target && target != element)
|
||||
target = target.parentNode;
|
||||
|
||||
if (!target) {
|
||||
this.tScope.$destroy();
|
||||
this.field.remove();
|
||||
this.field = null;
|
||||
element.classList.remove('selected');
|
||||
element.tabIndex = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
destroyTimer() {
|
||||
if (this.timer) {
|
||||
this.$timeout.cancel(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
Controller.$inject = ['$element', '$scope', '$transclude'];
|
||||
$onDestroy() {
|
||||
this.destroyTimer();
|
||||
}
|
||||
}
|
||||
Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];
|
||||
|
||||
ngModule.component('vnTdEditable', {
|
||||
template: require('./index.html'),
|
||||
|
|
|
@ -1,16 +1,40 @@
|
|||
@import "variables";
|
||||
|
||||
vn-td-editable {
|
||||
cursor: pointer;
|
||||
& > div.text-container{
|
||||
width: 100%;
|
||||
}
|
||||
outline: none;
|
||||
position: relative;
|
||||
|
||||
&.selected {
|
||||
& > .text-container{
|
||||
display: none;
|
||||
&.selected > .text {
|
||||
visibility: hidden;
|
||||
}
|
||||
& > .field {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: .6em;
|
||||
overflow: visible;
|
||||
|
||||
& > field {
|
||||
flex: 1;
|
||||
background-color: $color-bg-panel;
|
||||
padding: .5em;
|
||||
box-shadow: 0 0 .4em rgba(0, 0, 0, .2);
|
||||
border-radius: .1em;
|
||||
min-width: 6em;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
vn-icon {
|
||||
font-size: 1em;
|
||||
&.selected > .field {
|
||||
display: flex;
|
||||
}
|
||||
}
|
|
@ -1,5 +1,22 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
export function focus(input) {
|
||||
let selector = 'input, textarea, button, submit';
|
||||
|
||||
if (!input.matches(selector))
|
||||
input = input.querySelector(selector);
|
||||
|
||||
if (!input) {
|
||||
console.warn(`vnFocus: Can't find a focusable element`);
|
||||
return;
|
||||
}
|
||||
|
||||
input.focus();
|
||||
|
||||
if (input.select)
|
||||
input.select();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the focus and selects the text on the input.
|
||||
*
|
||||
|
@ -8,24 +25,8 @@ import ngModule from '../module';
|
|||
export function directive() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function($scope, $element, $attrs) {
|
||||
$scope.$watch('', function() {
|
||||
let input = $element[0];
|
||||
let selector = 'input, textarea, button, submit';
|
||||
|
||||
if (!input.matches(selector))
|
||||
input = input.querySelector(selector);
|
||||
|
||||
if (!input) {
|
||||
console.warn(`vnFocus: Can't find a focusable element`);
|
||||
return;
|
||||
}
|
||||
|
||||
input.focus();
|
||||
|
||||
if (input.select)
|
||||
input.select();
|
||||
});
|
||||
link: function($scope, $element) {
|
||||
$scope.$watch('', () => focus($element[0]));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -1,43 +1,19 @@
|
|||
@import "./variables";
|
||||
|
||||
html [border-none], .border-none {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Solid border */
|
||||
|
||||
html [border-solid], .border-solid {
|
||||
border: $border-thin solid $border-color;
|
||||
border: $border-thin-light;
|
||||
}
|
||||
html [border-solid-top], .border-solid-top {
|
||||
border-top: $border-thin solid $border-color;
|
||||
border-top: $border-thin-light;
|
||||
}
|
||||
html [border-solid-left], .border-solid-left {
|
||||
border-left: $border-thin solid $border-color;
|
||||
border-left: $border-thin-light;
|
||||
}
|
||||
html [border-solid-right], .border-solid-right {
|
||||
border-right: $border-thin solid $border-color;
|
||||
border-right: $border-thin-light;
|
||||
}
|
||||
html [border-solid-bottom], .border-solid-bottom {
|
||||
border-bottom: $border-thin solid $border-color;
|
||||
}
|
||||
|
||||
/* Dashed border */
|
||||
|
||||
html [border-dashed], .border-dashed {
|
||||
border: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-top], .border-dashed-top {
|
||||
border-top: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-left], .border-dashed-left {
|
||||
border-left: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-right], .border-dashed-right {
|
||||
border-right: $border-thin dashed $border-color;
|
||||
}
|
||||
html [border-dashed-bottom], .border-dashed-bottom {
|
||||
border-bottom: $border-thin dashed $border-color;
|
||||
border-bottom: $border-thin-light;
|
||||
}
|
||||
|
||||
/* Border Radius */
|
||||
|
|
|
@ -12,4 +12,5 @@ import './effects.scss';
|
|||
import './order-product.scss';
|
||||
import './summary.scss';
|
||||
import './descriptor.scss';
|
||||
import './list.scss';
|
||||
import './modal-form.scss';
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
@import "./effects";
|
||||
|
||||
.vn-list {
|
||||
max-width: 36em;
|
||||
margin: 0 auto;
|
||||
|
||||
a.vn-list-item {
|
||||
@extend %clickable;
|
||||
}
|
||||
.vn-list-item {
|
||||
border-bottom: $border-thin-light;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
& > vn-horizontal {
|
||||
padding: $pad-medium;
|
||||
|
||||
& > vn-one {
|
||||
overflow: hidden;
|
||||
}
|
||||
& > .buttons {
|
||||
align-items: center;
|
||||
|
||||
vn-icon-button {
|
||||
opacity: .4;
|
||||
color: $color-main;
|
||||
margin-left: .5em;
|
||||
transition: opacity 250ms ease-out;
|
||||
padding: 0;
|
||||
font-size: 2em;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
vn-empty-rows {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
|
@ -5,7 +5,6 @@ html, body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
input:focus,
|
||||
button:focus {
|
||||
|
@ -23,8 +22,7 @@ input[type=reset]::-moz-focus-inner {
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a, .link{
|
||||
a, .link {
|
||||
color: $color-font-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -35,23 +33,20 @@ a, .link{
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.totalBox {
|
||||
border: 1px solid #CCC;
|
||||
text-align: right!important;
|
||||
text-align: right !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: $pad-large;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
html [fixed-bottom-right] {
|
||||
position: fixed;
|
||||
bottom: 2em;
|
||||
|
@ -60,87 +55,53 @@ html [fixed-bottom-right] {
|
|||
html [text-center], .text-center {
|
||||
text-align: center;
|
||||
}
|
||||
html [text-right], .text-right{
|
||||
html [text-right], .text-right {
|
||||
text-align: right;
|
||||
}
|
||||
html [text-left], .text-left{
|
||||
html [text-left], .text-left {
|
||||
text-align: left;
|
||||
}
|
||||
html [vn-right], .vn-right{
|
||||
html [vn-right], .vn-right {
|
||||
float: right;
|
||||
}
|
||||
html [vn-left], .vn-left{
|
||||
html [vn-left], .vn-left {
|
||||
float: left;
|
||||
}
|
||||
html [vn-center], .vn-center{
|
||||
html [vn-center], .vn-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list > vn-none{
|
||||
.list > vn-none {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.list-element{
|
||||
.list-element {
|
||||
padding: 8px 0 0 0;
|
||||
border-bottom: 1px solid $color-spacer;
|
||||
|
||||
i {
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
.list-header{
|
||||
border-bottom: 3px solid $color-spacer;
|
||||
font-family: vn-font-bold;
|
||||
text-align: center
|
||||
}
|
||||
.list-element{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.list-footer{
|
||||
font-family: vn-font-bold;
|
||||
border-top: 3px solid $color-spacer;
|
||||
}
|
||||
.list-element.warning{
|
||||
background-color: $color-main-medium;
|
||||
}
|
||||
.list-element.success{
|
||||
background-color: $color-success-medium;
|
||||
|
||||
}
|
||||
.list-element.success:hover{
|
||||
background-color: $color-success-light;
|
||||
}
|
||||
.list-element.warning:hover{
|
||||
background-color: $color-main-light;
|
||||
}
|
||||
.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
|
||||
background-color: $color-main;
|
||||
}
|
||||
|
||||
html [pointer], .pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html [noDrop], .noDrop{
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
html [compact], .compact{
|
||||
max-width: 950px;
|
||||
max-width: $width-compact;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %clickable;
|
||||
}
|
||||
|
||||
vn-button-bar {
|
||||
display: block;
|
||||
margin-top: $margin-small;
|
||||
}
|
||||
|
||||
vn-tool-bar {
|
||||
display: flex;
|
||||
|
||||
|
@ -149,51 +110,6 @@ vn-tool-bar {
|
|||
}
|
||||
}
|
||||
|
||||
.vn-list {
|
||||
max-width: 36em;
|
||||
margin: 0 auto;
|
||||
|
||||
a.vn-list-item {
|
||||
@extend %clickable;
|
||||
}
|
||||
.vn-list-item {
|
||||
border-bottom: $border-thin solid $color-spacer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
& > vn-horizontal {
|
||||
padding: $pad-medium;
|
||||
|
||||
& > vn-one {
|
||||
overflow: hidden;
|
||||
}
|
||||
& > .buttons {
|
||||
align-items: center;
|
||||
|
||||
vn-icon-button {
|
||||
opacity: .4;
|
||||
color: $color-main;
|
||||
margin-left: .5em;
|
||||
transition: opacity 250ms ease-out;
|
||||
padding: 0;
|
||||
font-size: 2em;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
vn-empty-rows {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/** START - FORM ELEMENTS DISABLED **/
|
||||
|
||||
fieldset[disabled] .mdl-textfield .mdl-textfield__input,
|
||||
|
@ -215,7 +131,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.counter {
|
||||
@extend %active;
|
||||
|
||||
|
@ -223,7 +138,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
|
|||
font-size: 0.7em
|
||||
}
|
||||
}
|
||||
|
||||
.vn-grid {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
|
|
@ -1,100 +1,90 @@
|
|||
@import "./variables";
|
||||
|
||||
@media screen and (max-width: 1920px){
|
||||
.catalog-list .product {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px){
|
||||
.catalog-list .product {
|
||||
width: 33.33%
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px){
|
||||
.catalog-list .product {
|
||||
width: 50%
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px){
|
||||
.catalog-list .product {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.catalog-list {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.product {
|
||||
& > .product {
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
padding: $pad-small;
|
||||
width: 26em;
|
||||
overflow: hidden;
|
||||
|
||||
& > vn-one {
|
||||
border: 1px solid rgba($color-spacer, 0.5);
|
||||
display: block
|
||||
}
|
||||
& > vn-card > div {
|
||||
display: flex;
|
||||
height: 11em;
|
||||
|
||||
.image {
|
||||
min-width: 10em;
|
||||
max-width: 10em;
|
||||
min-height: 10em;
|
||||
max-height: 10em;
|
||||
.image {
|
||||
width: 11em;
|
||||
height: 11em;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
box-sizing: border-box;
|
||||
|
||||
& > vn-vertical {
|
||||
height: 100%;
|
||||
|
||||
& > h2 {
|
||||
text-transform: uppercase;
|
||||
font-family: vn-font;
|
||||
margin: 0 0 0.5em 0;
|
||||
font-weight: 100;
|
||||
line-height: 1em;
|
||||
font-size: 0.9em;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
.description {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: .8em;
|
||||
|
||||
& > span {
|
||||
& > h3 {
|
||||
font-family: vn-font;
|
||||
margin: 0;
|
||||
margin-bottom: .3em;
|
||||
font-weight: normal;
|
||||
line-height: initial;
|
||||
font-size: 1.2em;
|
||||
max-height:2.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
& > h4 {
|
||||
color: $color-font-secondary;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: bold;
|
||||
font-size: 0.8em
|
||||
margin-bottom: .3em;
|
||||
line-height: initial;
|
||||
font-size: 1em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
& > vn-label-value {
|
||||
font-size: 0.8em
|
||||
& > .tags {
|
||||
padding-bottom: .2em;
|
||||
height: 3em;
|
||||
|
||||
& > vn-label-value {
|
||||
font-size: .8em
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: .8em;
|
||||
|
||||
& > .price {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
& > span {
|
||||
flex: 1;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
font-size: 1.4em
|
||||
}
|
||||
}
|
||||
}
|
||||
& > vn-icon-button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
font-size: 0.8em;
|
||||
|
||||
& > vn-one span:first-child {
|
||||
color: $color-font-secondary
|
||||
}
|
||||
|
||||
& > vn-one span:first-child, & > vn-one span:last-child {
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
vn-icon[icon="add_circle"] {
|
||||
color: $color-main
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,6 +3,12 @@ $menu-width: 16em;
|
|||
$topbar-height: 4em;
|
||||
$mobile-width: 800px;
|
||||
|
||||
// Width
|
||||
|
||||
$width-small: 36em;
|
||||
$width-compact: 60em;
|
||||
$width-large: 80em;
|
||||
|
||||
// Padding
|
||||
|
||||
$pad-none: 0;
|
||||
|
@ -17,12 +23,6 @@ $margin-small: 8px;
|
|||
$margin-medium: 16px;
|
||||
$margin-large: 32px;
|
||||
|
||||
// Border
|
||||
|
||||
$border-color: #AAA;
|
||||
$border-thin: .1em;
|
||||
$border-thick: .15em;
|
||||
|
||||
// Light theme
|
||||
|
||||
$color-header: #3d3d3d;
|
||||
|
@ -96,4 +96,9 @@ $color-notice-medium: darken($color-notice, 20%);
|
|||
$color-notice-light: darken($color-notice, 35%);
|
||||
$color-alert-medium: darken($color-alert, 20%);
|
||||
$color-alert-light: darken($color-alert, 35%);
|
||||
/**/
|
||||
/**/
|
||||
|
||||
// Border
|
||||
|
||||
$border-thin: .1em solid $color-spacer;
|
||||
$border-thin-light: .1em solid $color-spacer-light;
|
||||
|
|
|
@ -95,7 +95,7 @@
|
|||
<span translate>Regularize stock</span>
|
||||
</h5>
|
||||
<vn-textfield
|
||||
label="Quantity"
|
||||
label="Type the visible quantity"
|
||||
model="$ctrl.quantity"
|
||||
name="user"
|
||||
vn-id="userField"
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
Regularize stock: Regularizar stock
|
||||
Regularize stock: Regularizar stock
|
||||
Type the visible quantity: Introduce la cantidad visible
|
|
@ -4,98 +4,95 @@
|
|||
filter="$ctrl.filter"
|
||||
limit="50"
|
||||
data="items"
|
||||
on-data-change="$ctrl.onDataChange()" >
|
||||
on-data-change="$ctrl.onDataChange()">
|
||||
</vn-crud-model>
|
||||
<div class="main-with-right-menu">
|
||||
<vn-card>
|
||||
<vn-horizontal class="catalog-header" pad-medium-h>
|
||||
<vn-one ng-if="model.moreRows">
|
||||
<span translate>More than</span> {{model.limit}} <span translate>results</span>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-horizontal>
|
||||
<vn-autocomplete vn-id="field" vn-one
|
||||
data="$ctrl.fieldList"
|
||||
initial-data="$ctrl.field"
|
||||
field="$ctrl.field"
|
||||
translate-fields="['name']"
|
||||
order="name"
|
||||
show-field="name"
|
||||
value-field="field"
|
||||
label="Order by">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete vn-one
|
||||
data="$ctrl.wayList"
|
||||
initial-data="$ctrl.way"
|
||||
field="$ctrl.way"
|
||||
translate-fields="['name']"
|
||||
show-field="name"
|
||||
value-field="way"
|
||||
label="Order">
|
||||
</vn-autocomplete>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="catalog-list" pad-small>
|
||||
<section class="product" ng-repeat="item in items">
|
||||
<vn-one>
|
||||
<vn-horizontal>
|
||||
<vn-one class="image">
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
|
||||
on-error-src/>
|
||||
</vn-one>
|
||||
<vn-one pad-small class="description ellipsize">
|
||||
<vn-vertical>
|
||||
<h2 class="ellipsize" vn-tooltip="{{::item.name}}">
|
||||
{{::item.name}}
|
||||
</h2>
|
||||
<span class="ellipsize" vn-tooltip="{{::item.subName}}">
|
||||
{{::item.subName}}
|
||||
</span>
|
||||
|
||||
<vn-label-value
|
||||
label="{{::item.tag5}}"
|
||||
value="{{::item.value5}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::item.tag6}}"
|
||||
value="{{::item.value6}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::item.tag7}}"
|
||||
value="{{::item.value7}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::item.tag8}}"
|
||||
value="{{::item.value8}}">
|
||||
</vn-label-value>
|
||||
|
||||
<vn-horizontal class="price">
|
||||
<vn-one>
|
||||
<span>{{::item.available}}</span>
|
||||
<span translate>from</span>
|
||||
<span>{{::item.price | currency: 'EUR': 2}}</span>
|
||||
</vn-one>
|
||||
<vn-auto>
|
||||
<a href="" vn-tooltip="Add">
|
||||
<vn-icon-button icon="add_circle" ng-click="$ctrl.preview($event, item)"></vn-icon-button>
|
||||
</a>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal ng-if="!model.data || model.data.length == 0">
|
||||
<vn-one pad-small translate style="text-align: center">
|
||||
No results
|
||||
<div> <!-- ng-if="model.moreRows" -->
|
||||
<span translate>More than</span> {{model.limit}} <span translate>results</span>
|
||||
</div>
|
||||
</vn-one>
|
||||
<vn-auto>
|
||||
<vn-autocomplete vn-id="field" vn-one
|
||||
data="$ctrl.fieldList"
|
||||
initial-data="$ctrl.field"
|
||||
field="$ctrl.field"
|
||||
translate-fields="['name']"
|
||||
order="name"
|
||||
show-field="name"
|
||||
value-field="field"
|
||||
label="Order by">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete vn-one
|
||||
data="$ctrl.wayList"
|
||||
initial-data="$ctrl.way"
|
||||
field="$ctrl.way"
|
||||
translate-fields="['name']"
|
||||
show-field="name"
|
||||
value-field="way"
|
||||
label="Order">
|
||||
</vn-autocomplete>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
</vn-card>
|
||||
<vn-card
|
||||
ng-if="!model.data || model.data.length == 0"
|
||||
style="text-align: center"
|
||||
margin-medium-top
|
||||
pad-medium>
|
||||
<span translate>No results</span>
|
||||
</vn-card>
|
||||
<vn-horizontal class="catalog-list">
|
||||
<section class="product" ng-repeat="item in items">
|
||||
<vn-card>
|
||||
<div class="image">
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
|
||||
on-error-src/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>
|
||||
{{::item.name}}
|
||||
</h3>
|
||||
<h4 class="ellipsize">
|
||||
<span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
|
||||
</h4>
|
||||
<div class="tags">
|
||||
<vn-label-value
|
||||
ng-if="::item.value5"
|
||||
label="{{::item.tag5}}"
|
||||
value="{{::item.value5}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-if="::item.value6"
|
||||
label="{{::item.tag6}}"
|
||||
value="{{::item.value6}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-if="::item.value7"
|
||||
label="{{::item.tag7}}"
|
||||
value="{{::item.value7}}">
|
||||
</vn-label-value>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="price">
|
||||
<span>{{::item.available}}</span>
|
||||
<span translate>from</span>
|
||||
<span>{{::item.price | currency:'EUR':2}}</span>
|
||||
</div>
|
||||
<vn-icon-button
|
||||
icon="add_circle"
|
||||
ng-click="$ctrl.preview($event, item)"
|
||||
vn-tooltip="Add">
|
||||
</vn-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</vn-card>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-pagination margin-small-v model="model"></vn-pagination>
|
||||
</div>
|
||||
<vn-side-menu side="right">
|
||||
|
|
|
@ -1,16 +1,31 @@
|
|||
@import "variables";
|
||||
|
||||
vn-order-catalog .catalog-header {
|
||||
border-color: $color-spacer;
|
||||
border-bottom: 1px solid rgba($color-spacer, 0.5);
|
||||
vn-order-catalog {
|
||||
.catalog-header {
|
||||
border-bottom: $border-thin;
|
||||
padding: $pad-medium;
|
||||
align-items: center;
|
||||
|
||||
vn-one:first-child {
|
||||
padding-top: 2em;
|
||||
& > vn-one {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
span {
|
||||
color: $color-font-secondary
|
||||
}
|
||||
}
|
||||
& > vn-auto {
|
||||
width: 28em;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
padding-left: $pad-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
vn-one:nth-child(2) {
|
||||
padding-top: 0.5em;
|
||||
.catalog-list {
|
||||
padding-top: $pad-small;
|
||||
}
|
||||
span {
|
||||
color: $color-font-secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ vn-catalog-filter > div {
|
|||
padding-left: $pad-medium;
|
||||
padding-right: $pad-medium;
|
||||
border-color: $color-spacer;
|
||||
border-bottom: 1px solid rgba($color-spacer, 0.5);
|
||||
border-bottom: $border-thin;
|
||||
}
|
||||
.item-category {
|
||||
padding: $pad-small;
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
vn-order-line{
|
||||
@import "./variables";
|
||||
|
||||
vn-order-line {
|
||||
vn-table {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
|
@ -8,7 +10,7 @@ vn-order-line{
|
|||
}
|
||||
.taxes {
|
||||
max-width: 10em;
|
||||
border: .1em solid #CCC;
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em !important;
|
||||
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
@import "./variables";
|
||||
|
||||
vn-order-summary .summary > div > vn-horizontal > vn-one {
|
||||
min-width: 10em !important;
|
||||
|
||||
&.taxes {
|
||||
border: .1em solid #CCC;
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em !important;
|
||||
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
|
||||
@import "./variables";
|
||||
|
||||
.totalBox {
|
||||
border: 1px solid #CCC;
|
||||
border: $border-thin-light;
|
||||
text-align: left;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
|
@ -8,65 +8,55 @@
|
|||
auto-load="true">
|
||||
</vn-crud-model>
|
||||
<vn-vertical>
|
||||
<vn-card pad-large>
|
||||
<vn-vertical>
|
||||
<vn-horizontal class="catalog-list" pad-small>
|
||||
<section class="product" ng-repeat="sale in sales">
|
||||
<vn-one>
|
||||
<vn-horizontal>
|
||||
<vn-one class="image">
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
|
||||
on-error-src/>
|
||||
</vn-one>
|
||||
<vn-one pad-small class="description ellipsize">
|
||||
<vn-vertical>
|
||||
<h2 class="ellipsize link" vn-tooltip="{{::sale.item.name}}"
|
||||
ng-click="$ctrl.showDescriptor($event, sale.item.id)">
|
||||
{{::sale.item.name}}
|
||||
</h2>
|
||||
<span class="ellipsize" vn-tooltip="{{::sale.item.subName}}">
|
||||
{{::sale.item.subName}}
|
||||
</span>
|
||||
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag5}}"
|
||||
value="{{::sale.item.value5}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag6}}"
|
||||
value="{{::sale.item.value6}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag7}}"
|
||||
value="{{::sale.item.value7}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag8}}"
|
||||
value="{{::sale.item.value8}}">
|
||||
</vn-label-value>
|
||||
|
||||
<vn-horizontal class="price">
|
||||
<vn-one>
|
||||
<span>{{::sale.quantity}}</span>
|
||||
<span translate>by</span>
|
||||
<span>{{::sale.price | currency: 'EUR': 2}}</span>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal ng-if="model.data.length == 0">
|
||||
<vn-one pad-small-v translate>
|
||||
No results
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
<vn-pagination model="model"></vn-pagination>
|
||||
<vn-card
|
||||
ng-if="!model.data || model.data.length == 0"
|
||||
style="text-align: center"
|
||||
pad-medium>
|
||||
<span translate>No results</span>
|
||||
</vn-card>
|
||||
<vn-horizontal class="catalog-list">
|
||||
<section class="product" ng-repeat="sale in sales">
|
||||
<vn-card>
|
||||
<div class="image">
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
|
||||
on-error-src/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>
|
||||
<span class="link" ng-click="$ctrl.showDescriptor($event, sale.item.id)">
|
||||
{{::sale.item.name}}
|
||||
</span>
|
||||
</h3>
|
||||
<h4 class="ellipsize">
|
||||
<span translate-attr="::{title: item.subName}">{{::sale.item.subName}}</span>
|
||||
</h4>
|
||||
<div class="tags">
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag5}}"
|
||||
value="{{::sale.item.value5}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag6}}"
|
||||
value="{{::sale.item.value6}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
label="{{::sale.item.tag7}}"
|
||||
value="{{::sale.item.value7}}">
|
||||
</vn-label-value>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="price">
|
||||
<span>{{::sale.quantity}}</span>
|
||||
<span translate>by</span>
|
||||
<span>{{::sale.price | currency: 'EUR': 2}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vn-card>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-pagination model="model"></vn-pagination>
|
||||
</vn-vertical>
|
||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</vn-thead>
|
||||
<vn-tbody>
|
||||
<vn-tr ng-repeat="sale in sales">
|
||||
<vn-td center>
|
||||
<vn-td center shrink>
|
||||
<vn-check
|
||||
vn-one field="sale.isChecked.isChecked"
|
||||
disabled="true">
|
||||
|
|
|
@ -75,7 +75,7 @@ vn-ticket-sale {
|
|||
vn-button[label=Cancel]{
|
||||
display: none;
|
||||
}
|
||||
vn-card.vn-ticket-create{
|
||||
vn-card.vn-ticket-create {
|
||||
padding: 0!important;
|
||||
}
|
||||
}
|
||||
|
@ -89,7 +89,7 @@ vn-ticket-sale {
|
|||
}
|
||||
.taxes {
|
||||
max-width: 10em;
|
||||
border: .1em solid #CCC;
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em !important;
|
||||
|
||||
|
|
|
@ -1,14 +1,20 @@
|
|||
vn-ticket-summary .summary > div > vn-horizontal > vn-one {
|
||||
min-width: 10em !important;
|
||||
@import "./variables";
|
||||
|
||||
&.taxes {
|
||||
border: .1em solid #CCC;
|
||||
text-align: right;
|
||||
padding: .5em !important;
|
||||
vn-ticket-summary .summary {
|
||||
max-width: $width-large;
|
||||
|
||||
& > p {
|
||||
font-size: 1.2em;
|
||||
margin: .2em;
|
||||
& > div > vn-horizontal > vn-one {
|
||||
min-width: 10em;
|
||||
|
||||
&.taxes {
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em;
|
||||
|
||||
& > p {
|
||||
font-size: 1.2em;
|
||||
margin: .2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue