Skip to content

Commit 18d2eff

Browse files
author
Olivier Giulieri
committed
Layout improvements
reduced label font-weight. readonly field height. paddings.
1 parent ef41b37 commit 18d2eff

9 files changed

Lines changed: 72 additions & 33 deletions

File tree

dist/css/demo.css

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
padding: 80px 30px 30px;
145145
}
146146
.evo-content2 {
147-
padding: 90px 30px 30px;
147+
padding: 70px 30px 30px;
148148
}
149149
.evo-content3 {
150150
padding: 96px 30px 30px;
@@ -213,6 +213,9 @@ h4 {
213213
.evo-title2 > h1 {
214214
color: white !important;
215215
}
216+
#evol-views-params {
217+
margin: 20px;
218+
}
216219
.blueBox {
217220
float: left;
218221
padding: 5px 10px;
@@ -267,13 +270,17 @@ h4 {
267270
font-size: smaller;
268271
font-weight: normal;
269272
}
270-
/* winecellar demo */
271-
.winecellar .evol-many-badges > div.panel {
272-
height: 260px !important;
273+
/* demo badge view*/
274+
[data-eid="todo"] .evol-badges-body > div.panel,
275+
[data-eid="contact"] .evol-badges-body > div.panel {
276+
height: 160px !important;
277+
}
278+
[data-eid="winecellar"] .evol-badges-body > div.panel {
279+
height: 272px !important;
273280
}
274-
.winecellar .evol-many-badges p {
281+
[data-eid="winecellar"] .evol-badges-body p {
275282
clear: left;
276283
}
277-
.test .evol-many-badges > div.panel {
284+
[data-eid="test"] .evol-badges-body > div.panel {
278285
height: 182px !important;
279286
}

dist/css/evolutility.css

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@
6464
color: #0099cc;
6565
}
6666
.evo-rdonly {
67-
min-height: 20px;
67+
min-height: 32px;
68+
padding-top: 5px;
6869
}
6970
.evol-buttons {
7071
clear: both;
@@ -87,6 +88,10 @@
8788
display: inline !important;
8889
}
8990
/* bootstrap customizations*/
91+
label {
92+
font-weight: 500 !important;
93+
margin-bottom: 2px;
94+
}
9095
.evol-mini-holder .help-block,
9196
.evolw-edit .help-block {
9297
color: #737373 !important;
@@ -184,6 +189,10 @@
184189
.evol-many-icon {
185190
margin-right: 6px !important;
186191
}
192+
.evol-many-list > .table th {
193+
font-weight: 500 !important;
194+
background-color: #fbfbfb;
195+
}
187196
.evol-many-list > .table th .glyphicon {
188197
display: none;
189198
position: absolute;
@@ -210,9 +219,13 @@
210219
width: 300px;
211220
}
212221
.evol-sort-icons > .glyphicon {
222+
color: #31708f;
213223
position: absolute;
214224
top: 2px;
215225
}
226+
.evol-sort-icons > .glyphicon:hover {
227+
color: #428bca;
228+
}
216229
.evol-sort-icons > .glyphicon-chevron-up {
217230
left: 7px;
218231
}
@@ -235,7 +248,7 @@
235248
min-width: 140px;
236249
height: 182px;
237250
margin: 5px;
238-
padding: 10px;
251+
padding: 2px 10px 10px;
239252
border-radius: 10px;
240253
-moz-border-radius: 10px;
241254
-webkit-border-radius: 10px;

dist/css/evolutility.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

index.html

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
66

7+
<meta name="keywords" content="UI Backbone model view open source metadata driven SPA single page app application CRUDBootstrap" />
8+
<meta name="description" content="Evolutility :: UI models for your Backbone models" /></head>
9+
710
<title>evolutility.js</title>
811
<link href="dist/css/demo.css" rel="stylesheet" />
912
<link href="dist/css/evolutility.min.css" rel="stylesheet" />
@@ -34,11 +37,9 @@ <h1 class="title1"><span class="title2" >...plus a set of views which follow UI
3437

3538
<p></p>
3639

37-
<p>
40+
<h4>
3841
Evolutility (currently v0.2.1) provides a set of Backbone views which can change form, volume and structure based on a UI-model.
39-
</p>
40-
41-
42+
</h4>
4243

4344
<div id="evol-views-params" >
4445

@@ -101,12 +102,7 @@ <h2>Documentation</h2>
101102
<ul>
102103
<li><a href="doc/ui-model.html">ui-model</a></li>
103104
<li><a href="doc/views.html">views</a></li>
104-
</ul>
105-
</div>
106-
107-
<div class="blueBox">
108-
<h2>Download</h2>
109-
<ul>
105+
<li>&nbsp;</li>
110106
<li><a href="https://github.com/evoluteur/evolutility">GitHub</a></li>
111107
</ul>
112108
</div>
@@ -184,7 +180,9 @@ <h2>Download</h2>
184180
uiModel=winecellar_ui;
185181
break;
186182
}
187-
var $e=$('#evol1').empty(),
183+
var $e=$('#evol1')
184+
.empty()
185+
.attr('data-eid', uiModel.id),// .data('eid') is cached and not updating CSS
188186
collec = new Backbone.Collection(sampleData),
189187
config={
190188
style: 'panel-primary',

less/demo.less

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ h4{
2121
color:white !important;
2222
}
2323

24+
#evol-views-params{
25+
margin: 20px;
26+
}
2427

2528
.blueBox{
2629
float:left;
@@ -78,21 +81,27 @@ h4{
7881
font-weight: normal;
7982
}
8083

81-
/* winecellar demo */
82-
.winecellar .evol-many-badges {
83-
84+
.mixin-badgeHeight(@h){
85+
.evol-badges-body > div.panel {
86+
@height: @h !important;
87+
}
88+
}
89+
/* demo badge view*/
90+
[data-eid="todo"],
91+
[data-eid="contact"] {
92+
.evol-badges-body > div.panel {
93+
height: 160px !important;
94+
}
95+
}
96+
[data-eid="winecellar"] .evol-badges-body {
8497
> div.panel {
85-
height: 260px !important;
98+
height: 272px !important;
8699
}
87-
88100
p{
89101
clear:left;
90102
}
91103
}
92104

93-
.test .evol-many-badges {
94-
95-
> div.panel {
96-
height: 182px !important;
97-
}
105+
[data-eid="test"] .evol-badges-body > div.panel {
106+
height: 182px !important;
98107
}

less/header.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
padding: 80px 30px 30px;
165165
}
166166
.evo-content2{
167-
padding: 90px 30px 30px;
167+
padding: 70px 30px 30px;
168168
}
169169
.evo-content3{
170170
padding: 96px 30px 30px;

less/many-badges.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
min-width:140px;
1212
height:182px;
1313
margin: 5px;
14-
padding:10px;
14+
padding:2px 10px 10px;
1515
.border-radius(10px);
1616
overflow: auto;
1717

less/many.less

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313

1414
> .table th {
1515

16+
font-weight: 500 !important;
17+
background-color: @toolbar-background-color;
18+
1619
.glyphicon {
1720
display:none;
1821
position:absolute;
@@ -46,8 +49,12 @@
4649
padding: 3px;
4750
width:300px;
4851
> .glyphicon {
52+
color:@color-icon;
4953
position: absolute;
5054
top:2px;
55+
&:hover{
56+
color:@color-icon-hover;
57+
}
5158
}
5259
> .glyphicon-chevron-up {
5360
left:7px;

less/one.less

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
color:#0099cc;
4141
}
4242
.evo-rdonly{
43-
min-height:20px;
43+
min-height: 32px;
44+
padding-top: 5px;
4445
}
4546
.evol-buttons{
4647
clear:both;
@@ -65,6 +66,10 @@
6566
}
6667

6768
/* bootstrap customizations*/
69+
label{
70+
font-weight: 500 !important;
71+
margin-bottom: 2px;
72+
}
6873
.evol-mini-holder,
6974
.evolw-edit {
7075
.help-block{

0 commit comments

Comments
 (0)