Changes for page Flamingo (4.x) Skin Proposal
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
on 2013/11/13 12:50
Change comment:
Moved page to http://design.xwiki.org/xwiki/bin/view/Improvements/Skin4x
To version 10.10
edited by Ecaterina Valica
on 2013/04/29 12:10
on 2013/04/29 12:10
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 - xwiki:XWiki.risherry1 +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 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'%)((()))