Skip to content

Commit 82cd929

Browse files
author
Manuel Rauber
committed
Flakes: Customer List
1 parent c09cc83 commit 82cd929

File tree

4 files changed

+71
-160
lines changed

4 files changed

+71
-160
lines changed

‎src/ng2client/app/components/adminCustomerList/adminCustomerList.html

Lines changed: 56 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,60 @@
1-
<div id="list" class="pure-u-1">
2-
<a class="pure-button pure-button-primary new-customer" [routerLink]="['AdminCustomersCreate']">Create new
3-
customer</a>
4-
5-
<nfn-admin-customer-list-item template="ngFor #customer of customers" [customer]="customer" (onDeleted)="refresh()"
6-
(click)="selectedCustomer = customer" [active]="selectedCustomer === customer"></nfn-admin-customer-list-item>
7-
</div>
8-
<div id="main" class="pure-u-1" *ngIf="selectedCustomer">
9-
<div class="email-content">
10-
<div class="email-content-header pure-g">
11-
<div class="pure-u-1-2">
12-
<h1 class="email-content-title">{{ selectedCustomer.firstName }} {{ selectedCustomer.lastName }}</h1>
13-
<p class="email-content-subtitle">
14-
Customer Details
15-
</p>
16-
</div>
1+
<div class="grid-3 gutter-20">
2+
<div class="span-1">
3+
<div class="flakes-actions-bar">
4+
<a class="action button-gray smaller" [routerLink]="['AdminCustomersCreate']">Create new customer</a>
175
</div>
18-
19-
<div class="email-content-body">
20-
21-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus odio. Aenean eget nibh in sapien
22-
facilisis faucibus eu et risus. Suspendisse suscipit ante neque, quis blandit justo porta in. Mauris
23-
accumsan ipsum ex, non ultricies orci dapibus id. Quisque sollicitudin efficitur nulla, eu aliquet risus
24-
fringilla in. Quisque facilisis lorem sapien, in molestie nibh tincidunt volutpat. Etiam sit amet enim
25-
molestie, faucibus nibh vel, blandit diam. Ut tempor ante a enim imperdiet, non lacinia ipsum
26-
consequat.</p>
27-
28-
<p>Integer dapibus lacus sit amet quam luctus posuere. Etiam a mauris lectus. Duis convallis libero lorem,
29-
eu
30-
sollicitudin augue vulputate in. Phasellus vitae leo sed ligula consectetur auctor. Cras tincidunt augue
31-
pulvinar ex laoreet pharetra. Aenean vel sapien lobortis, mattis nisi at, gravida nisl. Phasellus
32-
dignissim
33-
tellus vitae efficitur tempus. Nam et ullamcorper dolor, vitae blandit tellus. Quisque pretium eros id
34-
odio
35-
interdum tempor in vel risus. Mauris id leo sollicitudin, suscipit elit sed, cursus turpis. Aenean
36-
ultrices
37-
sapien a lacinia pharetra. Quisque id metus a lacus euismod tempus vitae faucibus sapien. Donec non
38-
ligula
39-
faucibus, feugiat lectus et, mattis risus. Integer lobortis purus dolor, id faucibus diam euismod
40-
at.</p>
41-
42-
<p>In dictum, turpis et dictum commodo, nibh ex pellentesque ligula, id pharetra lacus eros vel dui. Nullam
43-
bibendum congue lacus, non pharetra quam facilisis nec. Etiam et molestie ipsum, in scelerisque augue.
44-
Nam
45-
condimentum venenatis libero sed ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus.
46-
Mauris et ligula neque. Nulla facilisi. Maecenas mi magna, vehicula eu scelerisque id, ultricies at
47-
tellus.
48-
Praesent finibus blandit purus eget volutpat. Nullam ac commodo ipsum. Sed consequat ex non quam porta
49-
efficitur. Aliquam erat volutpat.</p>
50-
51-
<p>Cras odio lectus, viverra condimentum ex ut, dictum accumsan tellus. Phasellus et semper leo, placerat
52-
mattis neque. In dictum metus nec ante vulputate consequat. Vivamus consequat sodales nisl a ultricies.
53-
Nam
54-
sed volutpat nulla. Integer nec nisi sodales, pellentesque arcu sit amet, pharetra enim. Aenean a felis
55-
sed
56-
purus feugiat dignissim sed porttitor eros. Nunc ac scelerisque justo, eu luctus ipsum. Phasellus
57-
volutpat
58-
dictum dui, et pellentesque mi suscipit vel. In ac sapien sit amet neque tempor malesuada nec vel risus.
59-
Donec gravida dolor in lectus rutrum interdum. Interdum et malesuada fames ac ante ipsum primis in
60-
faucibus.
61-
Ut sed velit turpis. Nulla facilisi. Donec lacinia, lacus et finibus ultrices, urna elit dapibus purus,
62-
non
63-
viverra sapien ante ac nunc.</p>
64-
65-
<p>Praesent elementum augue ut elit ornare rutrum. Curabitur interdum elit eget molestie varius. Nulla
66-
facilisi. Nullam ac odio ut nisi pretium pretium vel et elit. Aenean commodo dignissim arcu eget
67-
molestie.
68-
Quisque suscipit ut nulla eget vestibulum. Vestibulum auctor arcu libero, ac ultricies massa rhoncus sit
69-
amet. Nunc molestie rhoncus risus eu malesuada. Aliquam eleifend rhoncus mi at molestie. Aliquam gravida
70-
leo
71-
sit amet nibh molestie, in iaculis felis tincidunt. Praesent iaculis eros ipsum, at tempus dolor ornare
72-
ut.
73-
Quisque ultricies efficitur ex, vel pellentesque sapien aliquam a. Aliquam scelerisque metus vel dui
74-
fermentum, at cursus est laoreet. Curabitur elementum et enim at dictum.</p>
75-
76-
<p>Vivamus luctus, ipsum id porta ultrices, leo dolor blandit nisl, a tincidunt dolor leo ut ipsum.
77-
Vestibulum
78-
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean scelerisque mauris
79-
efficitur, ultrices enim vitae, bibendum diam. Sed at magna felis. Morbi placerat diam et felis
80-
hendrerit,
81-
ut lacinia purus laoreet. Donec convallis ligula elit, vitae sagittis nisi tempus nec. Fusce commodo vel
82-
velit ac rhoncus. Praesent porttitor scelerisque ante, a elementum justo gravida eu. Ut pharetra
83-
sollicitudin felis, at pharetra diam malesuada quis. Praesent hendrerit euismod lacus a tincidunt. Nunc
84-
euismod nulla in odio malesuada convallis. Fusce quis mauris eu odio euismod rutrum. Nullam faucibus
85-
blandit
86-
nulla, et mollis eros ultrices sed. Phasellus porttitor leo in pharetra lacinia. Donec convallis arcu a
87-
arcu
88-
consectetur placerat.</p>
89-
90-
<p>Quisque dapibus tincidunt nisl, at pulvinar est lobortis vel. Suspendisse placerat lorem neque, non
91-
pellentesque nisl lobortis quis. Nunc viverra ornare ex ut pharetra. Vivamus at ipsum ut arcu vehicula
92-
rhoncus. Aenean pellentesque fermentum turpis ac scelerisque. Pellentesque habitant morbi tristique
93-
senectus
94-
et netus et malesuada fames ac turpis egestas. Suspendisse hendrerit lacinia quam, in eleifend eros
95-
egestas
96-
vel. Maecenas consectetur, leo et ornare blandit, est est volutpat metus, in dictum mauris diam non
97-
purus.
98-
Nam vel lacus orci. Cras condimentum, tortor et bibendum tincidunt, ipsum nunc faucibus ipsum, ut
99-
maximus
100-
enim lectus sed magna.</p>
101-
102-
<p>Suspendisse in ipsum eget magna auctor convallis eu id sem. Vivamus sit amet nibh ex. Donec commodo ut
103-
odio
104-
quis fermentum. Nam sit amet purus sollicitudin, congue ex at, ornare mauris. Vestibulum ante ipsum
105-
primis
106-
in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lobortis eget enim vitae blandit. Nulla
107-
pharetra tempor erat in suscipit.</p>
108-
109-
<p>In varius, nibh sed ultricies ullamcorper, erat est euismod purus, auctor dictum nisi tortor nec lacus.
110-
Suspendisse potenti. Nunc ut pretium massa. Suspendisse nisl felis, convallis ullamcorper pretium et,
111-
fermentum quis quam. Fusce accumsan leo ac felis varius, sit amet sollicitudin massa rutrum. Donec
112-
pharetra
113-
nisi ac dolor bibendum pellentesque. Phasellus tincidunt venenatis lacus, in interdum elit tincidunt
114-
nec. In
115-
a libero aliquet, scelerisque justo ultricies, accumsan libero. Ut malesuada mauris et tortor hendrerit,
116-
ut
117-
malesuada urna tincidunt. Morbi molestie blandit mauris. Phasellus non ultrices justo.</p>
118-
119-
<p> Morbi egestas metus in est accumsan egestas. Vestibulum pretium nibh nec quam venenatis mattis. Donec
120-
convallis tristique arcu vitae vulputate. Vivamus sapien purus, gravida ac facilisis a, rutrum in purus.
121-
Duis in interdum est. Nulla vitae est augue. Pellentesque habitant morbi tristique senectus et netus et
122-
malesuada fames ac turpis egestas.</p>
6+
<table class="flakes-table">
7+
<thead>
8+
<tr>
9+
<th>ID</th>
10+
<th>First name</th>
11+
<th>Last name</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr *ngFor="#customer of customers" [class.active]="selectedCustomer === customer"
16+
(click)="selectedCustomer = customer">
17+
<td>{{ customer.id }}</td>
18+
<td>{{ customer.firstName }}</td>
19+
<td>{{ customer.lastName }}</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
</div>
24+
<div class="span-2">
25+
<div *ngIf="selectedCustomer">
26+
<fieldset class="flakes-information-box">
27+
<legend>Customer Details</legend>
28+
<dl>
29+
<dt>Id</dt>
30+
<dd>{{ selectedCustomer.id }}</dd>
31+
</dl>
32+
<div class="grid-4">
33+
<dl class="span-2">
34+
<dt>First name</dt>
35+
<dd>{{ selectedCustomer.firstName }}</dd>
36+
</dl>
37+
<dl class="span-2">
38+
<dt>Last name</dt>
39+
<dd>{{ selectedCustomer.lastName }}</dd>
40+
</dl>
41+
</div>
42+
<dl>
43+
<dt>Details</dt>
44+
<dd>
45+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus odio. Aenean eget nibh
46+
in sapien
47+
facilisis faucibus eu et risus. Suspendisse suscipit ante neque, quis blandit justo porta in.
48+
Mauris
49+
accumsan ipsum ex, non ultricies orci dapibus id. Quisque sollicitudin efficitur nulla, eu
50+
aliquet risus
51+
fringilla in. Quisque facilisis lorem sapien, in molestie nibh tincidunt volutpat. Etiam sit
52+
amet enim
53+
molestie, faucibus nibh vel, blandit diam. Ut tempor ante a enim imperdiet, non lacinia ipsum
54+
consequat.
55+
</dd>
56+
</dl>
57+
</fieldset>
12358
</div>
12459
</div>
12560
</div>

‎src/ng2client/app/components/adminCustomerListItem/adminCustomerListItem.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/ng2client/app/components/adminCustomerListItem/adminCustomerListItem.ts

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/ng2client/less/main.less

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,18 @@ li.router-link-active {
5252
}
5353
}
5454
}
55+
56+
// Makes flakes using the whole width
57+
@media only screen and (min-width: 1150px) {
58+
html {
59+
.flakes-frame {
60+
.flakes-content {
61+
width: ~"calc(100vw - 250px)";
62+
}
63+
}
64+
}
65+
}
66+
67+
table.flakes-table tbody tr.active td {
68+
background-color: lightgray;
69+
}

0 commit comments

Comments
 (0)