Last modified by Ecaterina Moraru on 2013/11/13 12:50
From version 10.10
edited by Ecaterina Valica
on 2013/04/29 12:10
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,246 +1,1 @@
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 also has the [[Lyrebird skin>>http://extensions.xwiki.org/xwiki/bin/view/Extension/Lyrebird+Skin]] created 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'%)((()))
1 +{{warning}}Moved to [[design.xwiki.org:Improvements.Skin4x>>http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x]]{{/warning}}