torproject/styleguide
1
0
Fork 0
mirror of https://github.com/torproject/styleguide.git synced 2024-11-23 09:29:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix sidebar menu and make it sticky

Browse Source
This commit is contained in:
Antonela 2019-12-04 15:01:30 -03:00
parent b7310e63e4
commit ee53dae149
8 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/contents+en.lr
View File

@ -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="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

15
databags/sidebar.ini Normal file
View File

@ -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

6
templates/about.html
View File

@ -1,10 +1,10 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %} {% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %} {% 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"> <div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">
<!--h1 class="mt-5">{{ this.title }}</h1-->
<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="row">
<div class="col-12"> <div class="col-12">

12
templates/components.html
View File

@ -2,22 +2,22 @@
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %} {% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %} {% block body %}
<nav id="components-nav" class="nav flex-column d-none d-xl-block col-xl-1 bd-toc border"> <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 nav-pills flex-column sticky-top"> <ul class="nav bd-toc flex-column">
{% for id, item in bag('components').items() %} {% for id, item in bag('components').items() %}
<li class="nav-item"> <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> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </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">
<!--h1 class="mt-5">{{ this.title }}</h1-->
<main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0">
{{ this.body }} {{ this.body }}
<h1 id="buttons"> </h1>
<div class="page-header mb-4 mt-5"> <div class="page-header mb-4 mt-5">
<h3>Buttons</h3> <h3>Buttons</h3>
<!--p class="text-muted">Some Description about buttons.</p--> <!--p class="text-muted">Some Description about buttons.</p-->

6
templates/getting-started.html
View File

@ -1,10 +1,10 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %} {% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %} {% 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"> <div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">
<!--h1 class="mt-5">{{ this.title }}</h1-->
<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="row">
<div class="col-12"> <div class="col-12">

19
templates/layout.html
View File

@ -9,15 +9,24 @@
<title>{% block title %} | Tor Styleguide | The Tor Project {% endblock %}</title> <title>{% block title %} | Tor Styleguide | The Tor Project {% endblock %}</title>
<body class="no-gutters"> <body class="no-gutters">
<header> <header>
{% include 'navbar.html' %} {% include 'navbar-min.html' %}
</header> </header>
<div class="page"> <div class="page">
<div class="container-fluid"> <div class="container-fluid">
<div class="row flex-xl-nowrap"> <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"> <nav id="sidenav-topics" class="border bg-white p-4 sticky-top">
{% block body %}{% endblock %} <ul class="nav bd-toc flex-column">
</div> {% 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> </div>
</div> </div>

19
templates/navbar-min.html Normal file
View File

@ -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@2x.png'|asseturl }}" >
<span class="sr-only">Tor Logo</span>
</a>
</div>
</nav>
</div>

13
templates/visuals.html
View File

@ -1,22 +1,23 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %} {% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %} {% block body %}
<nav id="visuals-nav" class="nav flex-column d-none d-xl-block col-xl-1 bd-toc border"> <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 nav-pills flex-column sticky-top"> <ul class="nav bd-toc flex-column">
{% for id, item in bag('visuals').items() %} {% for id, item in bag('visuals').items() %}
<li class="nav-item"> <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> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </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 }} {{ this.body }}
<h1 id="colors"> </h1>
<div class="page-header mb-4 mt-5"> <div class="page-header mb-4 mt-5">
<h3>Colors</h3> <h3>Colors</h3>
<p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p> <p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p>