FANDOM


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


DD Inazuma 037 Full


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%
}}
CL Ooyodo Kai 321 Full

Resources management

Sandbox/Guides/Resources


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
}}
CL Ooyodo Kai 321 Full

Resources management

Sandbox/Guides/Resources


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
}}
CL Ooyodo Kai 321 Full


CL Ooyodo Kai 321 Full

high opacity


CL Ooyodo Kai 321 Full

reposition


blank



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

Improvement materialx7 This issue has then been fixed using an invisible clickbox overlay, the same kind used in interactive maps:

Improvement materialx7Blank square


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

Anime akatsuki

Na

Blank square

Anime hibiki

No

Blank square

Anime ikazuchi

De

Blank square

Anime inazuma

Su

Blank square


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.


Feedback I'm looking for in particular are:

Known issues

</style></item></item></item></section></dropdown></item></item></effect></action></location></item>
Community content is available under CC-BY-SA unless otherwise noted.