[tor-commits] [styleguide/master] Fix sidebar menu and make it sticky
hiro at torproject.org
hiro at torproject.org
Wed Dec 4 18:40:19 UTC 2019
commit ee53dae149a446bfaf2596c75641e87cfe8b13aa
Author: Antonela <hola at antonela.me>
Date: Wed Dec 4 15:01:30 2019 -0300
Fix sidebar menu and make it sticky
---
content/contents+en.lr | 6 ------
databags/sidebar.ini | 15 +++++++++++++++
templates/about.html | 6 +++---
templates/components.html | 12 ++++++------
templates/getting-started.html | 6 +++---
templates/layout.html | 19 ++++++++++++++-----
templates/navbar-min.html | 19 +++++++++++++++++++
templates/visuals.html | 13 +++++++------
8 files changed, 67 insertions(+), 29 deletions(-)
diff --git a/content/contents+en.lr b/content/contents+en.lr
index a22e4f2..82c09cc 100644
--- a/content/contents+en.lr
+++ b/content/contents+en.lr
@@ -11,9 +11,3 @@ This guide can help you create materials and answer questions you might have abo
<p class="text-black small text-muted">Contact</p>
-<p class="purple"> Please reach out to the UX team if you encounter a situation this guide does not cover. We will work with you to help you find a solution for your design problem, and your feedback will also help us expand and refine the guide to help it better meet the Tor Community’s needs. You can also reach out to the UX team for any
-other styleguide related questions or inquiries.</p>
-
-
----
-_template: about.html
diff --git a/databags/sidebar.ini b/databags/sidebar.ini
new file mode 100644
index 0000000..bbea356
--- /dev/null
+++ b/databags/sidebar.ini
@@ -0,0 +1,15 @@
+[About]
+path = /
+label = About
+
+[Getting Started]
+path = /getting-started
+label = Getting started
+
+[Visuals]
+path = /visuals
+label = Visuals
+
+[Components]
+path = /components
+label = Components
diff --git a/templates/about.html b/templates/about.html
index a8732f4..af1b9fc 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -1,10 +1,10 @@
{% extends "layout.html" %}
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
-
{% block body %}
-<main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 content-scroll" data-spy="scroll" data-target="#components-nav" data-offset="0">
- <!--h1 class="mt-5">{{ this.title }}</h1-->
+<div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">
+
+<main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0">
<div class="row">
<div class="col-12">
diff --git a/templates/components.html b/templates/components.html
index abcb006..e9afbab 100644
--- a/templates/components.html
+++ b/templates/components.html
@@ -2,22 +2,22 @@
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %}
-<nav id="components-nav" class="nav flex-column d-none d-xl-block col-xl-1 bd-toc border">
- <ul class="nav nav-pills flex-column sticky-top">
+<nav id="components-nav" class="nav flex-column d-none d-xl-block col-xl-1 border bg-white p-4 sticky-top">
+ <ul class="nav bd-toc flex-column">
{% for id, item in bag('components').items() %}
<li class="nav-item">
- <a class="nav-link" href="{{ item.path }}">{{ item.label }}</a>
+ <a class="nav-link p-2" href="{{ item.path }}">{{ item.label }}</a>
</li>
{% endfor %}
</ul>
</nav>
-<main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5" data-offset="0">
- <!--h1 class="mt-5">{{ this.title }}</h1-->
+<div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">
+
+<main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0">
{{ this.body }}
- <h1 id="buttons"> </h1>
<div class="page-header mb-4 mt-5">
<h3>Buttons</h3>
<!--p class="text-muted">Some Description about buttons.</p-->
diff --git a/templates/getting-started.html b/templates/getting-started.html
index 2f289c9..3f6448f 100644
--- a/templates/getting-started.html
+++ b/templates/getting-started.html
@@ -1,10 +1,10 @@
{% extends "layout.html" %}
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
-
{% block body %}
-<main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 content-scroll" data-spy="scroll" data-target="#components-nav" data-offset="0">
- <!--h1 class="mt-5">{{ this.title }}</h1-->
+<div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">
+
+<main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0">
<div class="row">
<div class="col-12">
diff --git a/templates/layout.html b/templates/layout.html
index 37a97b6..ced0dfb 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -9,15 +9,24 @@
<title>{% block title %} | Tor Styleguide | The Tor Project {% endblock %}</title>
<body class="no-gutters">
<header>
- {% include 'navbar.html' %}
+ {% include 'navbar-min.html' %}
</header>
<div class="page">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
- {% include 'sidenav.html' %}
- <div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto m-5">
- {% block body %}{% endblock %}
- </div>
+
+ <nav id="sidenav-topics" class="border bg-white p-4 sticky-top">
+ <ul class="nav bd-toc flex-column">
+ {% for id, item in bag('sidebar').items() %}
+ <li{% if this.is_child_of(item.path) %} class="nav-item active" {% else %} class="nav-item"{% endif %}>
+ <a class="nav-link p-1 pr-4" href="{{ item.path|url }}">{{ item.label }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+ </nav>
+
+ {% block body %}{% endblock %}
+
</div>
</div>
</div>
diff --git a/templates/navbar-min.html b/templates/navbar-min.html
new file mode 100644
index 0000000..f9d2bc7
--- /dev/null
+++ b/templates/navbar-min.html
@@ -0,0 +1,19 @@
+{% if not this.color %}
+<div class="container-fluid bg-primary">
+ <nav class="navbar no-background navbar-expand-lg navbar-dark bg-primary p-2">
+{% elif this.color == 'primary' %}
+<div class="container-fluid bg-primary">
+ <nav class="navbar no-background navbar-expand-lg navbar-dark bg-primary p-2">
+{% else %}
+<div class="container-fluid bg-dark">
+ <nav class="navbar no-background navbar-expand-lg navbar-dark bg-dark p-2">
+{% endif %}
+
+ <a class="navbar-brand" href="{{ '/'|url(alt=this.alt) }}">
+ <img alt="{{ 'The Tor Project' }}" src="{{ '/static/images/tor-logo at 2x.png'|asseturl }}" >
+ <span class="sr-only">Tor Logo</span>
+ </a>
+
+ </div>
+ </nav>
+</div>
diff --git a/templates/visuals.html b/templates/visuals.html
index e637e13..f6ae0a5 100644
--- a/templates/visuals.html
+++ b/templates/visuals.html
@@ -1,22 +1,23 @@
{% extends "layout.html" %}
-{% block title %}{{ this.title }}{% endblock %}
+{% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %}
-<nav id="visuals-nav" class="nav flex-column d-none d-xl-block col-xl-1 bd-toc border">
- <ul class="nav nav-pills flex-column sticky-top">
+<nav id="visuals-nav" class="nav flex-column d-none d-xl-block col-xl-1 border bg-white p-4 sticky-top">
+ <ul class="nav bd-toc flex-column">
{% for id, item in bag('visuals').items() %}
<li class="nav-item">
- <a class="nav-link" href="{{ item.path }}">{{ item.label }}</a>
+ <a class="nav-link p-2" href="{{ item.path }}">{{ item.label }}</a>
</li>
{% endfor %}
</ul>
</nav>
-<main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5" data-offset="0">
+<div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">
+
+<main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0">
{{ this.body }}
- <h1 id="colors"> </h1>
<div class="page-header mb-4 mt-5">
<h3>Colors</h3>
<p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p>
More information about the tor-commits
mailing list