Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 11.1
edited by Ecaterina Moraru
on 2013/11/13 12:50
Change comment: Moved page to http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x
To version 10.11
edited by Ecaterina Valica
on 2013/04/29 12:10
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.risherry
1 +XWiki.evalica
Content
... ... @@ -1,1 +1,246 @@
1 -{{warning}}Moved to [[design.xwiki.org:Improvements.Skin4x>>http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x]]{{/warning}}
1 +{{velocity}}
2 +$xwiki.ssx.use("Improvements.WebHome")
3 +$xwiki.ssx.use("Standards.WebHome")
4 +{{/velocity}}
5 +
6 +{{warning}}
7 +Denis Gervalle worked on an experimental [[demo skin>>BluebirdSkin.WebHome]] based on this proposal.
8 +Jerome Velociter has the [[Lyrebird skin>>http://extensions.xwiki.org/xwiki/bin/view/Extension/Lyrebird+Skin]] created also with Bootstrap.
9 +{{/warning}}
10 +
11 +== Community Feedback ==
12 +
13 +{{info}}
14 + [Brainstorming] Sources of HTML and ability to use pre-made CSS like Bootstrap http://xwiki.markmail.org/thread/shd55qxt7w56ypy3
15 + [Brainstorming] Choose a name for our next skin http://markmail.org/thread/nqpnvmzffe5w6oe6
16 + [UX][Proposal] Skin 4.x http://xwiki.markmail.org/thread/mo5ntmxeawnn5p6c
17 +{{/info}}
18 +
19 +(% class="left column50 dashboardleft" style="width: 48%; min-width: 640px; margin-right: 2%;" %)
20 +(((
21 +
22 +=== Objective ===
23 +
24 +This proposal is focused on presenting ideas for a new XWiki skin.
25 +The skin is focused on the usage of applications and also proposes some changes on menu structure, panels listing per application, some applications are restyled or improved; all these changes being done on a responsive layout (based on [[Bootstrap>>http://twitter.github.com/bootstrap/]]).
26 +
27 +)))
28 +
29 +(% class="dashboardright left column50 " style="width:49%" %)
30 +(((
31 +
32 +=== Proposal ===
33 +
34 +{{toc start='4'/}}
35 +
36 +* Related: [[Create Step Improvements>>CreateImprovements]]
37 +
38 +)))
39 +
40 +(%class='clearfloats'%)((()))
41 +
42 +(% class="left column50 dashboardleft" style="width: 48%; min-width: 640px; margin-right: 2%;" %)
43 +(((
44 +
45 +(% class=""%)
46 +(((
47 +
48 +==== Annotations Overview ====
49 +
50 +{{gallery}}
51 +image:loginDesktopSnapshotAnnotations.png
52 +image:loginDesktopDetails.png
53 +image:homepageDesktopSnapshot.png
54 +image:homepageDesktopSnapshotAnnotationsOverview.png
55 +image:homepageDesktopSnapshotAnnotationsMenu1.png
56 +image:homepageDesktopSnapshotAnnotationsMenu2.png
57 +image:homepageDesktopSnapshotAnnotationsMenu3.png
58 +image:homepageDesktopSnapshotAnnotationsMenu4.png
59 +image:homepageDesktopSnapshotAnnotationsMenu5.png
60 +image:homepageDesktopSnapshotAnnotationsMenu6.png
61 +image:homepageDesktopSnapshotAnnotationsMenu7.png
62 +image:profileDesktopSnapshot.png
63 +image:profileDesktopSnapshotAnnotations.png
64 +image:profileDesktopSnapshotAnnotationsPanels.png
65 +image:profileDesktopSnapshotAnnotationsPanels1.png
66 +image:profileDesktopSnapshotAnnotationsPanels2.png
67 +image:profileDesktopSnapshotAnnotationsAppBar.png
68 +image:administrationDesktopSnapshot.png
69 +image:administrationDesktopSnapshotAnnotations.png
70 +image:appWithinMinutesDesktopSnapshot.png
71 +image:appWithinMinutesDesktopSnapshotAnnotations.png
72 +image:userDirectoryDesktopSnapshot.png
73 +image:userDirectoryDesktopSnapshotAnnotations.png
74 +image:documentIndexDesktopSnapshot.png
75 +image:documentIndexDesktopSnapshotAnnotations.png
76 +image:dashboardDesktopSnapshot.png
77 +image:dashboardDesktopSnapshotAnnotations.png
78 +image:dashboardDesktopSnapshotAnnotationsStandard.png
79 +image:blogDesktopSnapshot.png
80 +image:blogDesktopSnapshotAnnotations.png
81 +image:helpDesktopSnapshot.png
82 +image:helpDesktopSnapshotAnnotations.png
83 +image:pageExample2DesktopSnapshot.png
84 +image:pageExample3DesktopSnapshotComments.png
85 +image:pageExample3DesktopSnapshotCommentsAnnotations.png
86 +image:pageExample3DesktopSnapshotAttachments.png
87 +image:pageExample3DesktopSnapshotAttachmentsAnnotations.png
88 +image:pageExample1DesktopSnapshot.png
89 +image:editDesktopSnapshot.png
90 +image:editDesktopSnapshotAnnotations.png
91 +image:commentsDesktopSnapshot.png
92 +image:attachmentsDesktopSnapshot.png
93 +image:historyDesktopSnapshot.png
94 +image:Skin4xMenus@menusDetails.png
95 +image:Skin4xMenus@menusSnapshotActivators.png
96 +image:Skin4xMenus@menusAppBarAnnotations.png
97 +image:Skin4xMenus@menusMenuAnnotations.png
98 +image:Skin4xMenus@dashboardPhoneLandscapeMenu.png
99 +image:Skin4xMenus@dashboardPhonePortraitMenu.png
100 +{{/gallery}}
101 +
102 +(%class='clearfloats'%)((()))
103 +)))
104 +
105 +(% class=""%)
106 +(((
107 +
108 +==== Simple Overview ====
109 +
110 +{{gallery}}
111 +image:loginDesktopDetails.png
112 +image:homepageDesktopSnapshot.png
113 +image:profileDesktopSnapshot.png
114 +image:administrationDesktopSnapshot.png
115 +image:appWithinMinutesDesktopSnapshot.png
116 +image:userDirectoryDesktopSnapshot.png
117 +image:documentIndexDesktopSnapshot.png
118 +image:dashboardDesktopSnapshot.png
119 +image:blogDesktopSnapshot.png
120 +image:helpDesktopSnapshot.png
121 +image:pageExample1DesktopSnapshot.png
122 +image:editDesktopSnapshot.png
123 +image:commentsDesktopSnapshot.png
124 +image:attachmentsDesktopSnapshot.png
125 +image:historyDesktopSnapshot.png
126 +image:Skin4xMenus@dashboardPhoneLandscapeMenu.png
127 +image:Skin4xMenus@dashboardPhonePortraitMenu.png
128 +{{/gallery}}
129 +
130 +(%class='clearfloats'%)((()))
131 +)))
132 +
133 +)))
134 +
135 +(% class="dashboardright left column50 " style="width:49%" %)
136 +(((
137 +
138 +==== Components ====
139 +
140 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
141 +(((
142 +[[Login>>Skin4xLogin]]
143 +[[[[image:loginDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xLogin]]
144 +)))
145 +
146 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
147 +(((
148 +[[Homepage>>Skin4xHomepage]]
149 +[[[[image:homepageDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xHomepage]]
150 +)))
151 +
152 +(% class="left column33 dashboardright" style="width: 29%;"%)
153 +(((
154 +[[Profile>>Skin4xProfile]]
155 +[[[[image:profileDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xProfile]]
156 +)))
157 +
158 +(%class='clearfloats'%)((()))
159 +
160 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
161 +(((
162 +[[Administration>>Skin4xAdministration]]
163 +[[[[image:administrationDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xAdministration]]
164 +)))
165 +
166 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
167 +(((
168 +[[AppWithinMinutes>>Skin4xAppWithinMinutes]]
169 +[[[[image:appWithinMinutesDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xAppWithinMinutes]]
170 +)))
171 +
172 +(% class="left column33 dashboardright" style="width: 29%;"%)
173 +(((
174 +[[User Directory>>Skin4xUserDirectory]]
175 +[[[[image:userDirectoryDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xUserDirectory]]
176 +)))
177 +
178 +(%class='clearfloats'%)((()))
179 +
180 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
181 +(((
182 +[[Document Index>>Skin4xDocumentIndex]]
183 +[[[[image:documentIndexDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xDocumentIndex]]
184 +)))
185 +
186 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
187 +(((
188 +[[Dashboard>>Skin4xDashboard]]
189 +[[[[image:dashboardDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xDashboard]]
190 +)))
191 +
192 +(% class="left column33 dashboardright" style="width: 29%;"%)
193 +(((
194 +[[Blog>>Skin4xBlog]]
195 +[[[[image:blogDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xBlog]]
196 +)))
197 +
198 +(%class='clearfloats'%)((()))
199 +
200 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
201 +(((
202 +[[Help Center>>HelpCenter]] ([[v2>>attach:helpDesktopDetails.png]])
203 +[[[[image:helpDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>HelpCenter]]
204 +)))
205 +
206 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
207 +(((
208 +[[Page View>>Skin4xPageView]]
209 +[[[[image:pageExample1DesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageView]]
210 +)))
211 +
212 +(% class="left column33 dashboardleft" style="width: 29%;" %)
213 +(((
214 +[[Page Edit>>CollaborativeEditing]] ([[v2>>attach:editDesktopDetails.png]])
215 +[[[[image:editDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>CollaborativeEditing]]
216 +)))
217 +
218 +(%class='clearfloats'%)((()))
219 +
220 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
221 +(((
222 +[[Page Comments>>Skin4xPageComments]]
223 +[[[[image:commentsDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageComments]]
224 +)))
225 +
226 +(% class="left column33 dashboardleft" style="margin-right: 2%; width: 29%;" %)
227 +(((
228 +[[Page Attachments>>Skin4xPageAttachments]]
229 +[[[[image:attachmentsDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageAttachments]]
230 +)))
231 +
232 +(% class="left column33 dashboardright" style="width: 29%;"%)
233 +(((
234 +[[Page History>>Skin4xPageHistory]]
235 +[[[[image:historyDesktopSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xPageHistory]]
236 +)))
237 +
238 +(%class='clearfloats'%)((()))
239 +
240 +(% class="left column33 dashboardright" style="margin-right: 2%; width: 29%;" %)
241 +(((
242 +[[Menus>>Skin4xMenus]]
243 +[[[[image:menusSnapshotMini.png||style="border: 1px dotted #DFDFF2; max-width: 100%;"]]>>Skin4xMenus]]
244 +)))
245 +
246 +(%class='clearfloats'%)((()))