card item structure

This commit is contained in:
Daniel Herrero 2017-12-20 14:36:12 +01:00
parent 7acb047ec9
commit 86209e43cd
13 changed files with 79 additions and 34 deletions

View File

@ -1,5 +1,5 @@
import ngModule from '../module';
import './style.scss';
export default class Controller {
constructor() {
this.client = null;

View File

@ -1,12 +0,0 @@
vn-main-block {
display:block;
max-width: 1920px;
width:100%;
margin: 0 auto;
.left-block {
min-width: 18em;
padding-left: 1em;
padding-bottom: 1em;
}
}

View File

@ -18,9 +18,18 @@
"state": "item.create",
"component": "vn-item-create"
}, {
"url": "/:id/data",
"state": "item.data",
"component": "vn-item-data"
"url": "/:id",
"state": "item.card",
"abstract": true,
"component": "vn-item-card"
}, {
"url" : "/data",
"state": "item.card.data",
"component": "vn-item-data",
"menu": {
"description": "Basic data",
"icon": "folder"
}
}
]
}

View File

@ -0,0 +1,20 @@
<vn-main-block>
<mg-ajax
path="/item/api/Items/{{edit.params.id}}"
actions="$ctrl.item = edit.model"
options="mgEdit">
</mg-ajax>
<vn-horizontal>
<vn-auto class="left-block">
<vn-card margin-medium-v>
<a class="item-product-link" ui-sref="item.index">
<vn-item-product item="$ctrl.item"></vn-item-product>
</a>
</vn-card>
<vn-left-menu></vn-left-menu>
</vn-auto>
<vn-one>
<vn-vertical ui-view></vn-vertical>
</vn-one>
</vn-horizontal>
</vn-main-block>

View File

@ -0,0 +1,12 @@
import ngModule from '../module';
class ItemCard {
constructor() {
this.item = {};
}
}
ngModule.component('vnItemCard', {
template: require('./item-card.html'),
controller: ItemCard
});

View File

@ -7,7 +7,7 @@ class ItemCreate {
onSubmit() {
this.$.watcher.submit().then(
json => this.$state.go('item.data', {id: json.data.id})
json => this.$state.go('item.card.basic', {id: json.data.id})
);
}
}

View File

View File

View File

@ -3,3 +3,4 @@ export * from './module';
import './list/list';
import './filter-panel/filter-panel';
import './create/item-create';
import './card/item-card';

View File

@ -1,14 +1,14 @@
<a ui-sref="item.data({ id: {{$ctrl.item.id}} })" pad-medium border-solid-bottom>
<vn-horizontal>
<vn-auto margin-medium-right ng-if="$ctrl.item.image">
<img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
</vn-auto>
<vn-one>
<div><span translate>Id</span>: <b>{{$ctrl.item.id}}</b></div>
<div><span translate>Category</span>: <b>{{$ctrl.item.category}}</b></div>
<div><span translate>Description</span>: <b>{{$ctrl.item.description}}</b></div>
<div><span translate>Size</span>: <b>{{$ctrl.item.size}}</b></div>
<div><span translate>Type</span>: <b>{{$ctrl.item.itemType.name}}</b></div>
</vn-one>
</vn-horizontal>
</a>
<vn-horizontal pad-medium border-solid-bottom>
<vn-auto margin-medium-right ng-if="$ctrl.item.image">
<img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
</vn-auto>
<vn-one>
<div><span translate>Id</span>: <b>{{$ctrl.item.id}}</b></div>
<div><span translate>Category</span>: <b>{{$ctrl.item.category}}</b></div>
<div><span translate>Description</span>: <b>{{$ctrl.item.description}}</b></div>
<div><span translate>Size</span>: <b>{{$ctrl.item.size}}</b></div>
<div><span translate>Type</span>: <b>{{$ctrl.item.itemType.name}}</b></div>
</vn-one>
</vn-horizontal>

View File

@ -14,7 +14,9 @@
</vn-horizontal>
</vn-card>
<vn-card margin-medium-top>
<vn-item-product ng-repeat="item in index.model.instances" title="View item" item="item"></vn-item-product>
<a class="item-product-link" ng-repeat="item in index.model.instances" ui-sref="item.card.data({ id: {{item.id}} })" >
<vn-item-product title="View item" item="item"></vn-item-product>
</a>
</vn-card>
<vn-paging index="index" total="index.model.count"></vn-paging>
</div>

View File

@ -1,12 +1,12 @@
vn-item-product {
display: block;
}
vn-item-product a {
a.item-product-link {
display: block;
text-decoration: none;
color: inherit;
}
vn-item-product a:hover {
a.item-product-link:hover {
color: white;
background-color: #424242;
}

View File

@ -99,3 +99,16 @@ html [pointer], .pointer{
html [noDrop], .noDrop{
cursor: no-drop;
}
vn-main-block {
display:block;
max-width: 1920px;
width:100%;
margin: 0 auto;
.left-block {
min-width: 18em;
padding-left: 1em;
padding-bottom: 1em;
}
}