card item structure
This commit is contained in:
parent
7acb047ec9
commit
86209e43cd
|
@ -1,5 +1,5 @@
|
|||
import ngModule from '../module';
|
||||
import './style.scss';
|
||||
|
||||
export default class Controller {
|
||||
constructor() {
|
||||
this.client = null;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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>
|
|
@ -0,0 +1,12 @@
|
|||
import ngModule from '../module';
|
||||
|
||||
class ItemCard {
|
||||
constructor() {
|
||||
this.item = {};
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.component('vnItemCard', {
|
||||
template: require('./item-card.html'),
|
||||
controller: ItemCard
|
||||
});
|
|
@ -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})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,3 +3,4 @@ export * from './module';
|
|||
import './list/list';
|
||||
import './filter-panel/filter-panel';
|
||||
import './create/item-create';
|
||||
import './card/item-card';
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue