Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 10.12
edited by Ecaterina Valica
on 2013/04/29 12:15
Change comment: There is no comment for this version
To 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

Summary

Details

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