Skip to content

Commit

Permalink
Merge pull request #244 from canonical/full-width-documentation-layout
Browse files Browse the repository at this point in the history 
Update to vanilla 4.5.0 and implement new documenttion layout
  • Loading branch information
@petesfrench
petesfrench authored Jan 22, 2024
2 parents 84fa333 + 291e93d commit 9346a4e
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 111 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"dependencies": {
"@canonical/global-nav": "3.5.0",
"@canonical/cookie-policy": "3.5.0",
"vanilla-framework": "4.2.0"
"vanilla-framework": "4.5.0"
},
"devDependencies": {
"autoprefixer": "10.4.13",
Expand Down
2 changes: 2 additions & 0 deletions static/sass/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ $color-aubergine: #77216f;
$color-hero: #252525;
$theme-default-nav: dark;
$breakpoint-navigation-threshold: 940px;
// update documentation sidebar width for deeper nesting
$l-documentation-sidebar-width: 18rem;
84 changes: 12 additions & 72 deletions templates/base_layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,83 +57,23 @@
<script src="{{ versioned_static('js/build/cookie-policy/cookie-policy.js') }}"></script>
</head>

<body>
<body class="{% block body_class %}l-site{% endblock %}">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TDTHR7H"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<header id="navigation" class="p-navigation is-dark">
<div class="p-navigation__row">
<div class="p-navigation__banner">
<div class="p-navigation__tagged-logo ">
<a class="p-navigation__link" href="/">
<div class="p-navigation__logo-tag">
<img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
</div>
<span class="p-navigation__logo-title">Canonical Mir Display Server</span>
</a>
</div>
<a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
<a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
</div>
<nav class="p-navigation__nav">
<ul class="p-navigation__items">
<li class="p-navigation__item" {% if '/ubuntu-frame' in request.path %}is-selected{% endif %}" role="menuitem">
<a href="/ubuntu-frame/" class="p-navigation__link">Ubuntu Frame</a>
</li>
<li class="p-navigation__item {% if '/tutorials' in request.path %}is-selected{% endif %}" role="menuitem">
<a href="/tutorials/" class="p-navigation__link">Tutorials</a>
</li>
<li class="p-navigation__item {% if '/docs' in request.path %}is-selected{% endif %}">
<a class="p-navigation__link" href="/docs">Docs</a>
</li>
<li class="p-navigation__item">
<a href="https://discourse.ubuntu.com/c/mir" class="p-navigation__link">Community</a>
</li>
</ul>
<ul class="p-navigation__items global-nav">
</ul>
</nav>
</div>
</header>

<main id="main-content">
{% block content %}
{{ content | safe }}
{% endblock content %}
</main>

<hr />
<footer class="p-strip">
<div class="row">
<div class="col-12">
<p>&copy; 2021 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
<nav>
<ul class="p-inline-list--middot">
<li class="p-inline-list__item">
<a aria-label="External link to the Ubuntu legal information page" href="http://www.ubuntu.com/legal">
Legal information
</a>
</li>
<li class="p-inline-list__item">
<a class="js-revoke-cookie-manager" href="">Manage your tracker settings</a>
</li>
<li class="p-inline-list__item">
<a aria-label="External link to report a bug on this site"
href="https://github.com/canonical-websites/mir-server.io/issues/new">
Report a bug on this site
</a>
</li>
</ul>
<span class="u-off-screen">
<a href="#">Go to the top of the page</a>
</span>
</nav>
</div>
</div>
</footer>
</main>
{% block body %}
{% include "partial/_navigation.html" %}

<main id="main-content">
{% block content %}
{{ content | safe }}
{% endblock content %}
</main>

{% include "partial/_footer.html" %}
{% endblock body %}
<script>
var origin = window.location.href;
var site = "mir-server.io";
Expand Down
124 changes: 90 additions & 34 deletions templates/docs/document.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

{% block title %}{{ document.title }} | Mir-server documentation{% endblock %}

{% block content %}
{% set is_docs = True %}
{% block body_class %}{# override default l-site with empty class #}{% endblock %}
{% block body %}

{% macro create_navigation(nav_items, expandable=False, expanded=False) %}
<ul class="p-side-navigation__list">
Expand Down Expand Up @@ -44,60 +46,114 @@
</ul>
{% endmacro %}

<section id="search-docs" class="p-strip--light is-shallow">
<div class="row">
<form class="p-search-box u-no-margin--bottom" action="/docs/search">
<input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
<button type="button" class="p-search-box__reset" alt="reset" onclick="this.previousElementSibling.value = '';this.previousElementSibling.focus()"><i class="p-icon--close">Reset</i></button>
<button type="submit" class="p-search-box__button" alt="search"><i class="p-icon--search">Search</i></button>
</form>
<div class="l-docs">
<div class="l-docs__header">
{% include "partial/_navigation.html" %}
<section id="search-docs" class="p-strip is-shallow is-bordered l-docs__subgrid">
<div class="l-docs__main">
<div class="row">
<form class="p-search-box u-no-margin--bottom" action="/docs/search">
<input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
<button type="button" class="p-search-box__reset" alt="reset" onclick="this.previousElementSibling.value = '';this.previousElementSibling.focus()"><i class="p-icon--close">Reset</i></button>
<button type="submit" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
</form>
</div>
</div>
</section>
</div>
</section>

<div class="p-strip is-shallow">
<div class="row">
<aside class="col-3">
<div class="p-side-navigation--raw-html" id="drawer">
<a href="#drawer" class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
Toggle side navigation
</a>
<div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div>
<div class="l-docs__sidebar">
<div class="l-docs__sticky-container">
<nav data-js="navigation" class="p-side-navigation" id="{{ navigation['path'] or 'default' }}" style="margin-top: 0.5rem">
<div class="u-hide--large p-strip is-shallow">
<div class="u-fixed-width">
<a href="#{{ navigation['path'] or 'default' }}" class="p-side-navigation__toggle js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}">
Toggle side navigation
</a>
</div>
</div>
<div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}"></div>
<div class="p-side-navigation__drawer">
<div class="p-side-navigation__drawer-header">
<a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
<a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="{{ navigation['path'] or 'default' }}">
Toggle side navigation
</a>
</div>
{% for nav_group in navigation.nav_items %}
{% if not nav_group.hidden %}
{% if nav_group.navlink_text %}
{% if nav_group.navlink_href %}
<h3>
<a href="{{ nav_group.navlink_href }}" {% if request.path == nav_group.navlink_href %}aria-current="page"{% endif %}>
<h3 class="p-side-navigation__heading--linked">
<a class="p-side-navigation__link" href="{{ nav_group.navlink_href }}" {% if nav_group.is_active %}aria-current="page"{% endif %}>
{{ nav_group.navlink_text }}
</a>
</h3>
{% else %}
<h3>{{ nav_group.navlink_text }}</h3>
<h3 class="p-side-navigation__heading">{{ nav_group.navlink_text }}</h3>
{% endif %}
{% endif %}
{{ create_navigation(nav_group.children) }}
{% endfor %}
{#
Use `create_navigation(nav_group.children)` for a default, fully expanded navigation.
Use `create_navigation(nav_group.children, expandable=True)` for the nested nav levels to expand only when parent page is active.
#}
{{ create_navigation(nav_group.children, expandable=True) }}
{% endif %}
{% endfor %}
</div>
</nav>
</div>
</div>

<div class="l-docs__title">
<div class="u-fixed-width">
{% if document.title %}
<div class="p-section--shallow u-no-padding--top">
<h1 class="u-no-margin--bottom">{{ document.title }}</h1>
</div>
</aside>
{% endif %}
</div>
</div>

<main class="col-9" id="main-content">
<h1>{{ document.title }}</h1>
{% if document.headings_map is defined and document.headings_map|length > 0 %}
<div class="l-docs__meta">
<div class="l-docs__sticky-container">
<aside class="p-table-of-contents">
<div class="p-table-of-contents__section">
<h4 class="p-table-of-contents__header">On this page</h4>
<nav class="p-table-of-contents__nav" aria-label="Table of contents">
<ul class="p-table-of-contents__list">
{% for heading in document.headings_map %}
<li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#{{ heading.heading_slug }}">{{ heading.heading_text }}</a></li>
{% endfor %}
</ul>
</nav>
</div>
</aside>
</div>
</div>
{% endif %}


<div class="l-docs__main u-text-max-width">
<main class="u-fixed-width">
<div class="p-strip is-shallow" style="overflow: visible;">
{{ document.body_html | safe }}
<div class="p-strip is-shallow">
<div class="p-notification--information">
<p class="p-notification__content">
Last updated {{ document.updated }}. <a href="{{ forum_url }}{{ document.topic_path }}">Help improve this document in the forum</a>.
</p>
</div>
</div>
</div>

<div class="p-strip is-shallow">
<div class="p-notification--information">
<div class="p-notification__content">
<p class="p-notification__message">Last updated {{ document.updated }}. <a href="{{ forum_url }}{{ document.topic_path }}">Help improve this document in the forum</a>.</p>
</div>
</div>
</div>
</main>
</div>

<div class="l-docs__footer">
{% include "partial/_footer.html" %}
</div>
</div>

<script src="{{ versioned_static('js/build/side-navigation.js') }}" defer></script>
{% endblock %}
{% endblock body %}
58 changes: 58 additions & 0 deletions templates/partial/_footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
{% if is_docs %}
<footer class="p-strip--dark p-footer">
<div class="l-docs__subgrid">
<div class="l-docs__sidebar u-fixed-width">
<p>&copy; {{ now("%Y") }} Canonical Ltd.</p>
</div>
<div class="l-docs__main u-fixed-width">
<ul class="p-inline-list--middot is-dark">
<li class="p-inline-list__item">
<a class="p-link--inverted" aria-label="External link to the Ubuntu legal information page" href="http://www.ubuntu.com/legal">
Legal information
</a>
</li>
<li class="p-inline-list__item">
<a class="js-revoke-cookie-manager p-link--inverted" href="">Manage your tracker settings</a>
</li>
<li class="p-inline-list__item">
<a class="p-link--inverted" aria-label="External link to report a bug on this site"
href="https://github.com/canonical-websites/mir-server.io/issues/new">
Report a bug on this site
</a>
</li>
</ul>
<p class="">Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
<span class="u-off-screen">
<a href="#">Go to the top of the page</a>
</span>
</div>
</div>
</footer>
{% else %}
<footer class="p-strip">
<div class="row">
<div class="col-12">
<p>&copy; {{ now("%Y") }} Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
<ul class="p-inline-list--middot">
<li class="p-inline-list__item">
<a aria-label="External link to the Ubuntu legal information page" href="http://www.ubuntu.com/legal">
Legal information
</a>
</li>
<li class="p-inline-list__item">
<a class="js-revoke-cookie-manager" href="">Manage your tracker settings</a>
</li>
<li class="p-inline-list__item">
<a aria-label="External link to report a bug on this site"
href="https://github.com/canonical-websites/mir-server.io/issues/new">
Report a bug on this site
</a>
</li>
</ul>
<span class="u-off-screen">
<a href="#">Go to the top of the page</a>
</span>
</div>
</div>
</footer>
{% endif %}
61 changes: 61 additions & 0 deletions templates/partial/_navigation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{% macro nav_logo() %}
<div class="p-navigation__banner {% if not is_docs %}u-no-padding--left{% endif %}">
<div class="p-navigation__tagged-logo ">
<a class="p-navigation__link" href="/">
<div class="p-navigation__logo-tag">
<img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
</div>
<span class="p-navigation__logo-title">Mir Display Server</span>
</a>
</div>
<a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
<a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
</div>
{% endmacro %}

{% macro nav_items() %}
<nav class="p-navigation__nav">
<ul class="p-navigation__items" {% if not is_docs %}style="margin-left: -.75rem;"{% endif %}>
<li class="p-navigation__item {% if '/ubuntu-frame' in request.path %}is-selected{% endif %}" role="menuitem">
<a href="/ubuntu-frame/" class="p-navigation__link">Ubuntu Frame</a>
</li>
<li class="p-navigation__item {% if '/tutorials' in request.path %}is-selected{% endif %}" role="menuitem">
<a href="/tutorials/" class="p-navigation__link">Tutorials</a>
</li>
<li class="p-navigation__item {% if '/docs' in request.path %}is-selected{% endif %}">
<a class="p-navigation__link" href="/docs">Docs</a>
</li>
<li class="p-navigation__item">
<a href="https://discourse.ubuntu.com/c/mir" class="p-navigation__link">Community</a>
</li>
</ul>
<ul class="p-navigation__items global-nav">
</ul>
</nav>
{% endmacro %}

<header id="navigation" class="p-navigation is-dark">
{% block header_banner %}
{% if is_docs %}
<div class="l-docs__subgrid">
<div class="l-docs__sidebar">
{{ nav_logo() }}
</div>
<div class="l-docs__main">
<div class="p-navigation__row u-fixed-width">
{{ nav_items() }}
</div>
</div>
</div>
{% else %}
<div class="row">
<div class="col-3">
{{ nav_logo() }}
</div>
<div class="col-9">
{{ nav_items() }}
</div>
</div>
{% endif %}
{% endblock header_banner %}
</header>
Loading

0 comments on commit 9346a4e

Please sign in to comment.