Skip to content
Snippets Groups Projects
Commit c9e4192e authored by Mark Hall's avatar Mark Hall
Browse files

Updated docs to include small screen details

parent da054848
No related branches found
No related tags found
No related merge requests found
......@@ -112,6 +112,52 @@ Full example:
<ul>
</nav>
Small devices
-------------
On small devices the navigation layout changes and moves the navigation to the top of the screen. Only the current
navigation entry is shown by default. To see the other items, the user must click on the menu icon. The basic structure
is as follows:
.. code-block:: html
<nav>
<div class="menu-toggle">
<svg viewBox="0 0 24 24">
<path d="..."/>
</svg>
</div>
<div class="menu-container">
<ul>
<!-- Just the current navigation entry as described above -->
</ul>
</div>
</nav>
After the user clicks on the menu icon, the HTML structure is updated to the following:
.. code-block:: html
<nav>
<div class="menu-toggle">
<svg viewBox="0 0 24 24">
<path d="..."/>
</svg>
</div>
<div class="menu-container">
<ul>
<!-- Just the current navigation entry as described above -->
</ul>
<div class="menu-overlay">
<div class="full-menu">
<ul>
<-- Full list of navigation entries as above -->
</ul>
</div>
</div>
</div>
</nav>
Annotations
===========
......@@ -134,7 +180,7 @@ Each annotation is structured as follows:
<div class="action">
<a>
<svg viewBox="0 0 24 24">
<path d="..."></path>
<path d="..."/>
</svg>
</a>
</div>
......@@ -157,7 +203,7 @@ Full example:
<div class="action">
<a>
<svg viewBox="0 0 24 24">
<path d="..."></path>
<path d="..."/>
</svg>
</a>
</div>
......@@ -165,3 +211,10 @@ Full example:
<dd>This is what an example annotation can look like.</dd>
</dl>
</aside>
Small devices
-------------
There is no difference in the generated HTML structure between large and small device sizes. However, for small
devices, annotations are shown at the bottom of the display, only one annotation is visible at any time, and the
annotation HTML is only generated when an annotation has been selected by the user.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment