Style fixes
gitea/salix/test This commit looks good
Details
gitea/salix/test This commit looks good
Details
This commit is contained in:
parent
961eb6edaf
commit
26419e75c9
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,88 +9,90 @@
|
|||
<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">
|
||||
<div>
|
||||
<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> <!-- ng-if="model.moreRows" -->
|
||||
<span translate>More than</span> {{model.limit}} <span translate>results</span>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal ng-if="!model.data || model.data.length == 0">
|
||||
<vn-one pad-small translate style="text-align: center">
|
||||
No results
|
||||
</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,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;
|
||||
}
|
||||
span {
|
||||
color: $color-font-secondary
|
||||
.catalog-list {
|
||||
padding-top: $pad-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,56 +8,55 @@
|
|||
auto-load="true">
|
||||
</vn-crud-model>
|
||||
<vn-vertical>
|
||||
<vn-card pad-medium>
|
||||
<vn-horizontal class="catalog-list" pad-small>
|
||||
<section class="product" ng-repeat="sale in sales">
|
||||
<div>
|
||||
<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/>
|
||||
<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="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 class="footer">
|
||||
<div class="price">
|
||||
<span>{{::sale.quantity}}</span>
|
||||
<span translate>by</span>
|
||||
<span>{{::sale.price | currency: 'EUR': 2}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal ng-if="model.data.length == 0">
|
||||
<vn-one pad-small-v translate>
|
||||
No results
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-pagination model="model"></vn-pagination>
|
||||
</vn-card>
|
||||
</vn-card>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
<vn-pagination model="model"></vn-pagination>
|
||||
</vn-vertical>
|
||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||
|
|
|
|||
Loading…
Reference in New Issue