mirror of
https://github.com/torproject/styleguide.git
synced 2024-11-23 09:29:49 +00:00
Fix sidebar menu and make it sticky
This commit is contained in:
Antonela
parent
b7310e63e4
commit
ee53dae149
@ -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
|
||||
|
||||
15
databags/sidebar.ini
Normal file
15
databags/sidebar.ini
Normal 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
|
||||
@ -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">
|
||||
|
||||
@ -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-->
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
19
templates/navbar-min.html
Normal file
19
templates/navbar-min.html
Normal 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>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user