From 6364239d8a2efd41d2db44c0214e76d6e9960b6e Mon Sep 17 00:00:00 2001 From: Gerard Date: Fri, 22 Feb 2019 12:27:56 +0100 Subject: [PATCH 1/5] #1152 updated td-editable --- front/core/components/td-editable/index.html | 4 +- front/core/components/td-editable/index.js | 28 +++++++++++-- front/core/components/td-editable/style.scss | 42 +++++++++++++++----- front/core/directives/focus.js | 37 ++++++++--------- 4 files changed, 77 insertions(+), 34 deletions(-) diff --git a/front/core/components/td-editable/index.html b/front/core/components/td-editable/index.html index 14336126d..8a1e33fe8 100644 --- a/front/core/components/td-editable/index.html +++ b/front/core/components/td-editable/index.html @@ -1,4 +1,2 @@ - - -
+ \ No newline at end of file diff --git a/front/core/components/td-editable/index.js b/front/core/components/td-editable/index.js index 49a4c3dcd..a6be8b9b8 100644 --- a/front/core/components/td-editable/index.js +++ b/front/core/components/td-editable/index.js @@ -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'), diff --git a/front/core/components/td-editable/style.scss b/front/core/components/td-editable/style.scss index 563590b3d..5101fecf6 100644 --- a/front/core/components/td-editable/style.scss +++ b/front/core/components/td-editable/style.scss @@ -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; } } \ No newline at end of file diff --git a/front/core/directives/focus.js b/front/core/directives/focus.js index 26376a260..91fcffbb2 100644 --- a/front/core/directives/focus.js +++ b/front/core/directives/focus.js @@ -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])); } }; } From 93701427316407503d2a46fb24b9b09c93b675ae Mon Sep 17 00:00:00 2001 From: Gerard Date: Fri, 22 Feb 2019 12:43:08 +0100 Subject: [PATCH 2/5] styles fixed --- modules/ticket/front/sale-checked/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ticket/front/sale-checked/index.html b/modules/ticket/front/sale-checked/index.html index 3c8a925c2..968d69af2 100644 --- a/modules/ticket/front/sale-checked/index.html +++ b/modules/ticket/front/sale-checked/index.html @@ -20,7 +20,7 @@ - + From ea9d194368ba974021794bb1bf6343f711e2acb3 Mon Sep 17 00:00:00 2001 From: Gerard Date: Fri, 22 Feb 2019 13:18:53 +0100 Subject: [PATCH 3/5] traduction added --- modules/item/front/descriptor/index.html | 2 +- modules/item/front/descriptor/locale/es.yml | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/item/front/descriptor/index.html b/modules/item/front/descriptor/index.html index a0d6404f5..d0c89e9e1 100644 --- a/modules/item/front/descriptor/index.html +++ b/modules/item/front/descriptor/index.html @@ -95,7 +95,7 @@ Regularize stock Date: Fri, 22 Feb 2019 14:34:11 +0100 Subject: [PATCH 4/5] Style fixes --- front/salix/styles/border.scss | 34 +----- front/salix/styles/index.js | 1 + front/salix/styles/list.scss | 46 +++++++ front/salix/styles/misc.scss | 108 ++--------------- front/salix/styles/order-product.scss | 152 ++++++++++++------------ front/salix/styles/variables.scss | 19 +-- modules/order/front/catalog/index.html | 97 +++++++-------- modules/order/front/catalog/style.scss | 3 +- modules/order/front/filter/style.scss | 2 +- modules/order/front/line/style.scss | 6 +- modules/order/front/summary/style.scss | 4 +- modules/order/front/volume/style.scss | 4 +- modules/ticket/front/picture/index.html | 107 ++++++++--------- modules/ticket/front/sale/style.scss | 4 +- modules/ticket/front/summary/style.scss | 24 ++-- 15 files changed, 273 insertions(+), 338 deletions(-) create mode 100644 front/salix/styles/list.scss diff --git a/front/salix/styles/border.scss b/front/salix/styles/border.scss index 142dc6c3e..ba97afb73 100644 --- a/front/salix/styles/border.scss +++ b/front/salix/styles/border.scss @@ -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 */ diff --git a/front/salix/styles/index.js b/front/salix/styles/index.js index 49c60a40a..806021463 100644 --- a/front/salix/styles/index.js +++ b/front/salix/styles/index.js @@ -12,4 +12,5 @@ import './effects.scss'; import './order-product.scss'; import './summary.scss'; import './descriptor.scss'; +import './list.scss'; import './modal-form.scss'; diff --git a/front/salix/styles/list.scss b/front/salix/styles/list.scss new file mode 100644 index 000000000..c483feca1 --- /dev/null +++ b/front/salix/styles/list.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; + } +} \ No newline at end of file diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss index d06269c86..c73cd6959 100644 --- a/front/salix/styles/misc.scss +++ b/front/salix/styles/misc.scss @@ -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%; diff --git a/front/salix/styles/order-product.scss b/front/salix/styles/order-product.scss index 255d4f610..00eee52e2 100644 --- a/front/salix/styles/order-product.scss +++ b/front/salix/styles/order-product.scss @@ -1,100 +1,96 @@ @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; - .product { + & > .product { box-sizing: border-box; - padding: 4px; + padding: $pad-small; + width: 33.33%; - & > vn-one { - border: 1px solid rgba($color-spacer, 0.5); - display: block - } + & > div { + display: flex; + border: $border-thin; + 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: $pad-small; - & > span { + & > h3 { + font-family: vn-font; + margin: 0; + margin-bottom: .4em; + font-weight: normal; + line-height: initial; + font-size: 1.2em; + max-height:2.2em; + overflow: hidden; + } + & > h4 { color: $color-font-secondary; text-transform: uppercase; - margin-bottom: 0.5em; - font-weight: bold; - font-size: 0.8em + margin-bottom: .4em; + line-height: initial; + font-size: 1em; + flex: 1; } - - & > vn-label-value { - font-size: 0.8em + & > .tags { + padding-bottom: .4em; + 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 - } + @media screen and (max-width: 1600px) { + width: 50%; + } + @media screen and (max-width: 1280px) { + width: 100%; } } } diff --git a/front/salix/styles/variables.scss b/front/salix/styles/variables.scss index 36a1a14db..ea496f4f4 100644 --- a/front/salix/styles/variables.scss +++ b/front/salix/styles/variables.scss @@ -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%); -/**/ \ No newline at end of file +/**/ + +// Border + +$border-thin: .1em solid $color-spacer; +$border-thin-light: .1em solid $color-spacer-light; diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html index d088238df..036f93993 100644 --- a/modules/order/front/catalog/index.html +++ b/modules/order/front/catalog/index.html @@ -4,7 +4,7 @@ filter="$ctrl.filter" limit="50" data="items" - on-data-change="$ctrl.onDataChange()" > + on-data-change="$ctrl.onDataChange()">
@@ -38,56 +38,51 @@
- - - - - - - -

- {{::item.name}} -

- - {{::item.subName}} - - - - - - - - - - - - - - {{::item.available}} - from - {{::item.price | currency: 'EUR': 2}} - - - - - - - - - - - +
+
+ +
+
+

+ {{::item.name}} +

+

+ {{::item.subName}} +

+
+ + + + + + +
+
+
+ {{::item.available}} + from + {{::item.price | currency: 'EUR': 2}} +
+ + +
+
+
diff --git a/modules/order/front/catalog/style.scss b/modules/order/front/catalog/style.scss index e22e182bc..17172eca0 100644 --- a/modules/order/front/catalog/style.scss +++ b/modules/order/front/catalog/style.scss @@ -1,8 +1,7 @@ @import "variables"; vn-order-catalog .catalog-header { - border-color: $color-spacer; - border-bottom: 1px solid rgba($color-spacer, 0.5); + border-bottom: $border-thin; vn-one:first-child { padding-top: 2em; diff --git a/modules/order/front/filter/style.scss b/modules/order/front/filter/style.scss index fb561f78c..07a7b1dbd 100644 --- a/modules/order/front/filter/style.scss +++ b/modules/order/front/filter/style.scss @@ -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; diff --git a/modules/order/front/line/style.scss b/modules/order/front/line/style.scss index 6f06532e0..ceef14fa1 100644 --- a/modules/order/front/line/style.scss +++ b/modules/order/front/line/style.scss @@ -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; diff --git a/modules/order/front/summary/style.scss b/modules/order/front/summary/style.scss index 283214a2d..0a3e6df83 100644 --- a/modules/order/front/summary/style.scss +++ b/modules/order/front/summary/style.scss @@ -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; diff --git a/modules/order/front/volume/style.scss b/modules/order/front/volume/style.scss index 2900023a1..baeabf383 100644 --- a/modules/order/front/volume/style.scss +++ b/modules/order/front/volume/style.scss @@ -1,6 +1,8 @@ +@import "./variables"; + .totalBox { - border: 1px solid #CCC; + border: $border-thin-light; text-align: left; align-self: flex-end; } diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html index 23965fec5..6c8921485 100644 --- a/modules/ticket/front/picture/index.html +++ b/modules/ticket/front/picture/index.html @@ -8,64 +8,55 @@ auto-load="true"> - - - -
- - - - - - - -

- {{::sale.item.name}} -

- - {{::sale.item.subName}} - - - - - - - - - - - - - - {{::sale.quantity}} - by - {{::sale.price | currency: 'EUR': 2}} - - - - - - -
- - - - No results - - - + + +
+
+
+ +
+
+

+ + {{::sale.item.name}} + +

+

+ {{::sale.item.subName}} +

+
+ + + + + + +
+
+
+ {{::sale.quantity}} + by + {{::sale.price | currency: 'EUR': 2}} +
+
+
+
+
+ + + + No results + + diff --git a/modules/ticket/front/sale/style.scss b/modules/ticket/front/sale/style.scss index 91d793290..2831631ff 100644 --- a/modules/ticket/front/sale/style.scss +++ b/modules/ticket/front/sale/style.scss @@ -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; diff --git a/modules/ticket/front/summary/style.scss b/modules/ticket/front/summary/style.scss index 571402188..4e94fb4a6 100644 --- a/modules/ticket/front/summary/style.scss +++ b/modules/ticket/front/summary/style.scss @@ -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; + } } } } \ No newline at end of file From 26419e75c9e9189aae646cfd872f795b1981120a Mon Sep 17 00:00:00 2001 From: Juan Ferrer Toribio Date: Fri, 22 Feb 2019 16:15:54 +0100 Subject: [PATCH 5/5] Style fixes --- front/salix/styles/order-product.scss | 24 ++-- modules/order/front/catalog/index.html | 156 ++++++++++++------------ modules/order/front/catalog/style.scss | 36 ++++-- modules/ticket/front/picture/index.html | 93 +++++++------- 4 files changed, 160 insertions(+), 149 deletions(-) diff --git a/front/salix/styles/order-product.scss b/front/salix/styles/order-product.scss index 00eee52e2..aaa070ed8 100644 --- a/front/salix/styles/order-product.scss +++ b/front/salix/styles/order-product.scss @@ -1,18 +1,18 @@ @import "./variables"; .catalog-list { - justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; + justify-content: center; & > .product { box-sizing: border-box; padding: $pad-small; - width: 33.33%; + width: 26em; + overflow: hidden; - & > div { + & > vn-card > div { display: flex; - border: $border-thin; height: 11em; .image { @@ -32,28 +32,28 @@ height: 100%; width: 100%; overflow: hidden; - padding: $pad-small; + padding: .8em; & > h3 { font-family: vn-font; margin: 0; - margin-bottom: .4em; + margin-bottom: .3em; font-weight: normal; line-height: initial; font-size: 1.2em; - max-height:2.2em; + max-height:2.4em; overflow: hidden; } & > h4 { color: $color-font-secondary; text-transform: uppercase; - margin-bottom: .4em; + margin-bottom: .3em; line-height: initial; font-size: 1em; flex: 1; } & > .tags { - padding-bottom: .4em; + padding-bottom: .2em; height: 3em; & > vn-label-value { @@ -86,11 +86,5 @@ } } } - @media screen and (max-width: 1600px) { - width: 50%; - } - @media screen and (max-width: 1280px) { - width: 100%; - } } } diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html index 036f93993..2ad3af2f6 100644 --- a/modules/order/front/catalog/index.html +++ b/modules/order/front/catalog/index.html @@ -9,88 +9,90 @@
- - More than {{model.limit}} results - - - - - - - - - - -
-
-
- +
+ More than {{model.limit}} results
-
-

- {{::item.name}} -

-

- {{::item.subName}} -

-
- - - - - - -
-
-
- {{::item.available}} - from - {{::item.price | currency: 'EUR': 2}} -
- - -
-
-
-
- - - - No results + + + + + + + + No results + + +
+ +
+ +
+
+

+ {{::item.name}} +

+

+ {{::item.subName}} +

+
+ + + + + + +
+
+
+ {{::item.available}} + from + {{::item.price | currency:'EUR':2}} +
+ + +
+
+ +
+
diff --git a/modules/order/front/catalog/style.scss b/modules/order/front/catalog/style.scss index 17172eca0..8061cabc4 100644 --- a/modules/order/front/catalog/style.scss +++ b/modules/order/front/catalog/style.scss @@ -1,15 +1,31 @@ @import "variables"; -vn-order-catalog .catalog-header { - border-bottom: $border-thin; +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 - } -} \ No newline at end of file +} + diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html index 6c8921485..8e2462b44 100644 --- a/modules/ticket/front/picture/index.html +++ b/modules/ticket/front/picture/index.html @@ -8,56 +8,55 @@ auto-load="true"> - - -
-
-
- + + No results + + +
+ +
+ +
+
+

+ + {{::sale.item.name}} + +

+

+ {{::sale.item.subName}} +

+
+ + + + + +
-
-

- - {{::sale.item.name}} - -

-

- {{::sale.item.subName}} -

-
- - - - - - -
-
-
- {{::sale.quantity}} - by - {{::sale.price | currency: 'EUR': 2}} -
+
+
+ {{::sale.quantity}} + by + {{::sale.price | currency: 'EUR': 2}}
-
- - - - No results - - - - + +
+ +