Show last authors
1 This proposal was done following Google's [[Material Design>>http://www.google.com/design/spec/material-design/introduction.html]] guidelines and using FezVrasta's [[Material design theme for Bootstrap 3>>https://github.com/FezVrasta/bootstrap-material-design]].
2
3 While the proposals displays the Totem application using [[Macaw Skin>>Proposal.MacawSkin]], the proposed structure can be applied also on [[Flamingo Skin>>Improvements.Skin4x]].
4
5 (% class="row" %)
6 (((
7 (% class="col-xs-12 col-sm-12" %)
8 (((
9 = Proposal =
10 )))
11 (% class="col-xs-12 col-sm-4" %)
12 (((
13 {{toc start="2"/}}
14 )))
15 )))
16
17 (% class="row" %)
18 (((
19 (% class="col-xs-12" %)
20 (((
21 == Homepage ==
22 )))
23
24 (% class="col-xs-12 col-sm-6 col-md-6" %)
25 (((
26 Add inline-form (Colibri/Flamingo style)
27 [[{{image reference="addColibri.png" width="100%"/}}>>attach:addColibri.png]]
28 )))
29
30 (% class="col-xs-12 col-sm-6 col-md-6" %)
31 (((
32 Add button (Macaw style)
33 [[{{image reference="addMacaw.png" width="100%"/}}>>attach:addMacaw.png]]
34 )))
35
36 )))
37
38 (% class="row" %)
39 (((
40 (% class="col-xs-12" %)
41 (((
42 == Forms ==
43 )))
44
45 (% class="col-xs-12 col-sm-12" %)
46 (((
47 === Single-line fields ===
48 )))
49
50 (% class="col-xs-12 col-sm-4 col-md-4" %)
51 (((
52 Placeholder
53 [[{{image reference="addPlaceholder.png" width="100%"/}}>>attach:addPlaceholder.png]]
54 )))
55
56 (% class="col-xs-12 col-sm-4 col-md-4" %)
57 (((
58 Value and Success Message
59 [[{{image reference="addValueSuccess.png" width="100%"/}}>>attach:addValueSuccess.png]]
60 )))
61
62 (% class="col-xs-12 col-sm-4 col-md-4" %)
63 (((
64 Error Message
65 [[{{image reference="addValueError.png" width="100%"/}}>>attach:addValueError.png]]
66 )))
67
68 (% class="col-xs-12 col-sm-12" %)
69 (((
70 === Floating labels ===
71 )))
72
73 (% class="col-xs-12 col-sm-4 col-md-4" %)
74 (((
75 Label
76 [[{{image reference="configLabel.png" width="100%"/}}>>attach:configLabel.png]]
77 )))
78
79 (% class="col-xs-12 col-sm-4 col-md-4" %)
80 (((
81 Label + Hint
82 [[{{image reference="configHint.png" width="100%"/}}>>attach:configHint.png]]
83 )))
84
85 (% class="col-xs-12 col-sm-4 col-md-4" %)
86 (((
87 Label + Value
88 [[{{image reference="configValue.png" width="100%"/}}>>attach:configValue.png]]
89 )))
90 )))
91
92 (% class="row" %)
93 (((
94 (% class="col-xs-12" %)
95 (((
96 == Totem ==
97 )))
98
99 (% class="col-xs-12 col-sm-6 col-md-6" %)
100 (((
101 View Mode
102 [[{{image reference="totemView.png" width="100%"/}}>>attach:totemView.png]]
103
104
105 |=Edit Mode|
106 |((('Add Section', 'Delete Section'
107 'Edit Section', 'Edit Section Items')))|Launch dialogs
108 |'Manage items'|Links to Totem.Items
109
110 )))
111
112 (% class="col-xs-12 col-sm-6 col-md-6" %)
113 (((
114 Edit Mode
115 [[{{image reference="totemEdit.png" width="100%"/}}>>attach:totemEdit.png]]
116 )))
117
118 )))
119
120 (% class="row" %)
121 (((
122 (% class="col-xs-12" %)
123 (((
124 == Section ==
125 )))
126
127 (% class="col-xs-12 col-sm-6 col-md-6" %)
128 (((
129 Section View
130 [[{{image reference="section.png" width="100%"/}}>>attach:section.png]]
131 )))
132
133 (% class="col-xs-12 col-sm-6 col-md-6" %)
134 (((
135 'Drag&Drop' Button
136 [[{{image reference="sectionDrag.png" width="100%"/}}>>attach:sectionDrag.png]]
137 )))
138 )))
139
140 (% class="row" %)
141 (((
142 (% class="col-xs-12 col-sm-6 col-md-6" %)
143 (((
144 'Edit Section Items' Button
145 [[{{image reference="sectionEditItems.png" width="100%"/}}>>attach:sectionEditItems.png]]
146 )))
147
148 (% class="col-xs-12 col-sm-6 col-md-6" %)
149 (((
150 'Edit Section Items' Dialog
151 [[{{image reference="sectionEditItemsDialog.png" width="100%"/}}>>attach:sectionEditItemsDialog.png]]
152 )))
153
154 )))

Get Connected