Skip to content

Commit 3c40f7c

Browse files
author
Olivier Giulieri
committed
Misc. small improvements.
1 parent 4c0cad2 commit 3c40f7c

5 files changed

Lines changed: 107 additions & 14 deletions

File tree

‎dist/css/demo.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,16 @@
175175
margin-top: 200px;
176176
content: " ";
177177
}
178+
.evo-links-views > li {
179+
margin: 4px 0 10px;
180+
}
181+
.evo-links-views a > i {
182+
margin: 5px;
183+
}
184+
#evol-views-params > div {
185+
float: left;
186+
margin-right: 5px;
187+
}
178188
@media only screen and (min-width: 900px) {
179189
.evo-h-gap {
180190
display: none;
@@ -188,7 +198,7 @@ body {
188198
}
189199
h1,
190200
h2,
191-
h3,
201+
h3:not.panel-title,
192202
h4 {
193203
color: #0099cc !important;
194204
}

‎doc/ui-model.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ <h1>object</h1>
7878
<tr>
7979
<td>leadfield</td>
8080
<td>id of the field which value is the page title (when using option "$title"). Can also be a function taking model as a parameter.
81-
(example &quot;firstname&quot; or "function(model){return model.get('firstname')+' '+model.get('lastname')}").</td>
81+
<br/>Examples: leadfield: &quot;firstname&quot; or leadfield: function(model){return model.get('firstname')+' '+model.get('lastname')}).</td>
8282
</tr>
8383
<tr>
8484
<td>icon
@@ -90,7 +90,7 @@ <h1>object</h1>
9090
</tr>
9191
<tr>
9292
<td>$title</td>
93-
<td>jQuery selector for an element outside of the View to show item main fild as a title on navigation.
93+
<td>jQuery selector for an element outside of the View to show item main field as a title on navigation.
9494
<br />
9595
Example: <code>$title</code>=&quot;#title&quot; </td>
9696
</tr>

‎doc/views.html‎

Lines changed: 77 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,35 @@ <h1>Views</h1>
3232

3333
<div class="evo-content3">
3434

35-
<p>Evolutility provides 3 types of views:
35+
<p>For a <a href="ui-model.html">ui-model</a> (mapping a Backbone model),
36+
Evolutility provides a set of generic Backbone Views for CRUD and more.</p>
37+
38+
<p>3 types of views:
39+
40+
<ul class="evo-links-views">
41+
<li><b><a href="#one">Evol.ViewOne</a></b>
42+
<br/>Views for <strong>one</strong> model:
43+
<a href="#one-view"><i class="glyphicon glyphicon-file"></i>View</a>,
44+
<a href="#one-edit"><i class="glyphicon glyphicon-th"></i>Edit</a>,
45+
<a href="#one-mini"><i class="glyphicon glyphicon-th-large"></i>Mini</a> (quick-edit),
46+
<a href="#one-json"><i class="glyphicon glyphicon-barcode"></i>JSON</a>...</li>
47+
48+
<li><b><a href="#many">Evol.ViewMany</a></b>
49+
<br/>Views for a collection of <strong>many</strong> models:
50+
<a href="#many-list"><i class="glyphicon glyphicon-th-list"></i>List</a>,
51+
<a href="#many-badges"><i class="glyphicon glyphicon-th-large"></i>Badges</a>,
52+
<a href="#many-charts"><i class="glyphicon glyphicon-stats"></i>Charts</a>...</li>
53+
54+
<li><b><a href="#action">Evol.ViewAction</a></b>
55+
<br/>Views for <strong>actions</strong> on a collection or a model:
56+
<a href="#action-filter"><i class="glyphicon glyphicon-filter"></i>Filter</a>,
57+
<a href="#action-export"><i class="glyphicon glyphicon-cloud-download"></i>Export</a>...</li>
3658

37-
<ul>
38-
<li>Evol.ViewOne - Views for <strong>one</strong> model</li>
39-
<li>Evol.ViewMany - Views for a collection of <strong>many</strong> models</li>
40-
<li>Evol.ViewAction - Views for actions on a model or a collection</li>
4159
</ul>
42-
</p>
4360

44-
<p>For each Backbone model all views are defined by a single <a href="ui-model.html">ui-model</a>.</p>
61+
More Views will be added on the future.
62+
63+
</p>
4564

4665
<div class="evol-doc-views">
4766

@@ -52,7 +71,16 @@ <h1>Views</h1>
5271
<h2>Evol.ViewOne</h2>
5372

5473
<p>Backbone views for <strong>one</strong> model.</p>
55-
74+
<p class="evo-links-views">
75+
<a href="#one-view"><i class="glyphicon glyphicon-file"></i>View</a>,
76+
<a href="#one-edit"><i class="glyphicon glyphicon-th"></i>Edit</a>,
77+
<a href="#one-mini"><i class="glyphicon glyphicon-th-large"></i>Mini</a> (quick-edit),
78+
<a href="#one-json"><i class="glyphicon glyphicon-barcode"></i>JSON</a>...
79+
</p>
80+
81+
<a name="one-view"></a>
82+
<p class="evo-h-gap">&nbsp;</p>
83+
<p>&nbsp;</p>
5684
<h3><i class="glyphicon glyphicon-file"></i>&nbsp;View</h3>
5785
<p>Shows all fields for viewing (read only). Fields are grouped in panels and tabs.</p>
5886
<code>new Evol.ViewOne.Edit(myConfig);</code>
@@ -62,6 +90,9 @@ <h3><i class="glyphicon glyphicon-file"></i>&nbsp;View</h3>
6290
</div>
6391

6492

93+
<a name="one-edit"></a>
94+
<p class="evo-h-gap">&nbsp;</p>
95+
<p>&nbsp;</p>
6596
<h3><i class="glyphicon glyphicon-th"></i>&nbsp;Edit</h3>
6697
<p>Shows all fields for edition. Fields are grouped in panels and tabs.</p>
6798
<code>
@@ -72,6 +103,9 @@ <h3><i class="glyphicon glyphicon-th"></i>&nbsp;Edit</h3>
72103
</div>
73104

74105

106+
<a name="one-mini"></a>
107+
<p class="evo-h-gap">&nbsp;</p>
108+
<p>&nbsp;</p>
75109
<h3><i class="glyphicon glyphicon-th-large"></i>&nbsp;Mini (quick-edit)</h3>
76110
<p>Only shows important fields (required or showing as a column in grids) in one panel.</p>
77111
<code>
@@ -80,6 +114,10 @@ <h3><i class="glyphicon glyphicon-th-large"></i>&nbsp;Mini (quick-edit)</h3>
80114
<img class="pixEvoMode shadow" src="screenshots/one-mini.png"/> <br />&nbsp;
81115
</div>
82116

117+
118+
<a name="one-json"></a>
119+
<p class="evo-h-gap">&nbsp;</p>
120+
<p>&nbsp;</p>
83121
<h3><i class="glyphicon glyphicon-barcode"></i>&nbsp;JSON</h3>
84122
<p>JSON representation of the data.</p>
85123
<code>
@@ -100,8 +138,14 @@ <h3><i class="glyphicon glyphicon-barcode"></i>&nbsp;JSON</h3>
100138
<h2>Evol.ViewMany</h2>
101139

102140
<p>Backbone views for a collection containing <strong>many</strong> models.</p>
103-
104-
141+
<p class="evo-links-views">
142+
<a href="#many-list"><i class="glyphicon glyphicon-th-list"></i>List</a>,
143+
<a href="#many-badges"><i class="glyphicon glyphicon-th-large"></i>Badges</a>,
144+
<a href="#many-charts"><i class="glyphicon glyphicon-stats"></i>Charts</a>...</li>
145+
</p>
146+
<a name="many-list"></a>
147+
<p class="evo-h-gap">&nbsp;</p>
148+
<p>&nbsp;</p>
105149
<h3><i class="glyphicon glyphicon-th-list"></i>&nbsp;List</h3>
106150
<p>Gives a tabular view of a collection.</p>
107151
<code>
@@ -110,6 +154,9 @@ <h3><i class="glyphicon glyphicon-th-list"></i>&nbsp;List</h3>
110154
<img class="pixEvoMode shadow" src="screenshots/many-list.png"/> <br />&nbsp;
111155
</div>
112156

157+
<a name="many-badges"></a>
158+
<p class="evo-h-gap">&nbsp;</p>
159+
<p>&nbsp;</p>
113160
<h3><i class="glyphicon glyphicon-th-large"></i>&nbsp;Badges</h3>
114161
<p>Shows records side by side as badges.</p>
115162
<code>
@@ -119,6 +166,9 @@ <h3><i class="glyphicon glyphicon-th-large"></i>&nbsp;Badges</h3>
119166
</div>
120167

121168

169+
<a name="many-charts"></a>
170+
<p class="evo-h-gap">&nbsp;</p>
171+
<p>&nbsp;</p>
122172
<h3><i class="glyphicon glyphicon-stats"></i>&nbsp;Charts</h3>
123173
<p>Draws charts about the collection.</p>
124174
<code>
@@ -137,6 +187,16 @@ <h3><i class="glyphicon glyphicon-stats"></i>&nbsp;Charts</h3>
137187

138188
<h2>Evol.ViewAction</h2>
139189

190+
<p>Backbone Views for actions on a collection or a model.</p>
191+
<p class="evo-links-views">
192+
<a href="#action-filter"><i class="glyphicon glyphicon-filter"></i>Filter</a>,
193+
<a href="#action-export"><i class="glyphicon glyphicon-cloud-download"></i>Export</a>...
194+
</p>
195+
196+
197+
<a name="action-filter"></a>
198+
<p class="evo-h-gap">&nbsp;</p>
199+
<p>&nbsp;</p>
140200
<h3><i class="glyphicon glyphicon-filter"></i>&nbsp;Filter</h3>
141201
<p>Filter collection.</p>
142202
<code>
@@ -147,6 +207,10 @@ <h3><i class="glyphicon glyphicon-filter"></i>&nbsp;Filter</h3>
147207
<p>Filter example: "phone number start by 415" or "for
148208
categories Finances and Business"...&nbsp;</p>
149209

210+
211+
<a name="action-export"></a>
212+
<p class="evo-h-gap">&nbsp;</p>
213+
<p>&nbsp;</p>
150214
<h3><i class="glyphicon glyphicon-cloud-download"></i>&nbsp;Export</h3>
151215
<p>Export in different data formats.</p>
152216
<code>
@@ -160,6 +224,9 @@ <h3><i class="glyphicon glyphicon-cloud-download"></i>&nbsp;Export</h3>
160224
</section>
161225

162226

227+
228+
229+
163230
<p class="evo-h-gap">&nbsp;</p>
164231
<p>&nbsp;</p>
165232
<section>

‎less/demo.less‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ body{
1313
font-weight: 300;
1414
}
1515

16-
h1, h2, h3, h4{color:@color-header !important;}
16+
h1, h2, h3:not.panel-title, h4{color:@color-header !important;}
1717
.evo-title>h1,.evo-title2>h1{
1818
color:white !important;
1919
}
2020

21+
2122
.blueBox{
2223
float:left;
2324
padding:5px 10px;

‎less/doc.less‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,21 @@
3232
content: " ";
3333
}
3434

35+
.evo-links-views {
36+
> li{
37+
margin: 4px 0 10px;
38+
}
39+
a > i{
40+
margin:5px;
41+
}
42+
}
43+
44+
#evol-views-params{
45+
>div{
46+
float:left;
47+
margin-right:5px;
48+
}
49+
}
3550
@media only screen and (min-width: @screen2) {
3651

3752
.evo-h-gap{

0 commit comments

Comments
 (0)