Greetings, fellow editors
I have been working on some methods to structure a large volume of information and handle navigation of pages clusters (main article and subspaces + partials ecosystem) such as event pages, guides, combat mechanics and of course our front page. Without an index of these pages clusters, it is very difficult for readers find information in the cluster and for our editors to update the pages.
I have been working on the issue for a while and I have reached some interesting results I would like to share. After that, I will invite everyone to take a look at the new front page design in a sandbox and give feedback / suggestions to improve the design before I make it official.
Shiny new toys
What I came up with last December is navigation hubs--a map of a cluster similar to Template:Tutorialportal or Template:Equipmentlist but designed as an individual page instead of a simple table. This allows the application of visual hierarchy to the index without compromising the hierarchy of the page containing the index.
Tiles
This results in the creation of Template:Tile. The template is designed to act like an item in search results. It gives a short snippet of the page and a link to the full page.
The snippet is created by clipping a partial transclusion of the full page. Vertical scrollbar can be enabled as an option
- Description
- A template to generate metro-styled tiles.
- These are float:left HTML dividers and they can be stacked horizontally or vertically, creating highly customized table cells.
- To stop tiles and other content from stacking horizontally, put
{{Clear}}
where the stacking should stop
- Syntax
- Fill in the form below. Some fields can be omitted (see simplified sample for mandatory fields)
{{Tile
| header=
| content=
| image=
| source=
| size=
| width=
| height=
| rgba=
| text-color=
| text-height=
| image-pos=
| opacity=
| source-pos=
| float=
}}
- Main arguments
header
- Set the text in h3 header. Default value is hidden
content
- Set the content written on top of the tile. To source the content from a partial within the main namespace, use
{{:<Page>}}
image
- Set the background overlay image. Default is hidden.
source
- This field creates a footer with a "See more >" link to the sourced partial. Default is hidden.
- Styling arguments
width
- Set the width of the tile. Default value is 50%.
height
- Set the height of the tile. Default value is 360px
rgba
- Set the color and opacity of the tile (see CSS3 Colors tutorial for more information). Default value is 250,250,255,0.1
text-color
- Set the color of the text. This color styling is not restricted to rgba definition. Default value is set by the wiki's theme.
text-height
- Set the height of the inner text box. The text box is set to hidden overflow; texts that go outside the set height are cropped. Default value is 288px.
image-pos
- Set the position of the background image within the tile. Default value is top:0px;left:0px
opacity
- Set the opacity of the background image. Default value is 0.2
source-pos
- Set the position of the "See more" link and the footer. Default value is bottom:20px;right:10px;
float
- Set the float direction of the tile. Default value is left.
- Full width tile
{{Tile
|header=Resources management
|content={{:Sandbox/Guides/Resources}}
|source=Sandbox/Guides/Resources
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|width=100%
}}
- Double height tile
{{Tile
|header=Resources management
|content={{:Sandbox/Guides/Resources}}
|source=Sandbox/Guides/Resources
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|height=741px
|text-height=628px
}}
- Quarter tile
{{Tile
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|size=300px
|width=25%
|height=180px
|text-height=113px
}}
{{Tile
|header=high opacity
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,1
|size=300px
|width=25%
|height=180px
|text-height=113px
|opacity=1
}}
{{Tile
|header=reposition
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|size=300px
|width=25%
|height=180px
|text-height=113px
|image-pos=top:-60px;left:-60px
}}
{{Tile
|header=default
|size=300px
|width=25%
|height=180px
|text-height=113px
|image-pos=top:-60px;left:-60px
}}
Tiles will be competing against current tabview + collapsible, as well as tabber implementations in various pages clusters. The first implementation of Tile is in Help:Guides and it demonstrates how a navigation hub might look like.
Clickbox
Remember that Template:ItemStack I introduced two years ago? When linking to a page using the built-in image link, there exists a blind spot over the text area as seen below
x7
This issue has then been fixed using an invisible clickbox overlay, the same kind used in interactive maps:
x7
Animated tiles
Combining Tile, clickbox overlay and Oasis theme's default classes and it is possible to create a variety of responsive elements. One of which is as seen below
Front page overhaul
All the above elements are designed to be used in the new front page design and future navigation hubs. As the front page is a high traffic area, it is necessary to make a site-wide announcement ahead of time. I myself am very interested in hearing feedback and suggestions from everyone on how to better organize and improve the design.
Click on this message to visit the sandbox page.
Feedback I'm looking for in particular are:
I expected <item> to be at <location>.
I expected <action> to have <effect>.
I use <item> a lot. Please make it more accessible.
I think <item> should belong to <dropdown> or <section>
I think <item> should be on top/below/before/after <item>
I prefer <item> to be of <style> or in <color>
I find <item> to be working incorrectly in <browser> or <monitor size>
Known issues
Dropdown list should be displayed on hover, not click
Color of animated tiles and buttons cannot be changed
Broken mobile compatibility
- Issue dropped. Wikia uses its own mobile front page which cannot be edited
Monobook skin does not have comparable Oasis's button classes
</style></item></item></item></section></dropdown></item></item></effect></action></location></item>