|
@@ -0,0 +1,398 @@
|
|
|
+{% extends "wagtailadmin/base.html" %}
|
|
|
+{% load wagtailadmin_tags %}
|
|
|
+{% load compress i18n %}
|
|
|
+{% load gravatar %}
|
|
|
+
|
|
|
+{% block extra_css %}
|
|
|
+ {% compress css %}
|
|
|
+ <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/styleguide.scss" type="text/x-scss" />
|
|
|
+ {% endcompress %}
|
|
|
+{% endblock %}
|
|
|
+
|
|
|
+{% block titletag %}{% trans 'Styleguide' %}{% endblock %}
|
|
|
+{% block bodyclass %}styleguide{% endblock %}
|
|
|
+
|
|
|
+{% block content %}
|
|
|
+ {% trans "Styleguide" as title_trans %}
|
|
|
+ {% include "wagtailadmin/shared/header.html" with title=title_trans %}
|
|
|
+
|
|
|
+ <div class="nice-padding">
|
|
|
+ <h2>Contents</h2>
|
|
|
+ <nav>
|
|
|
+ <ul class="unlist">
|
|
|
+ <li><a href="#palette">Colour palette</a></li>
|
|
|
+ <li><a href="#typography">Typography</a></li>
|
|
|
+ <li><a href="#listings">Listings</a></li>
|
|
|
+ <li><a href="#buttons">Buttons</a></li>
|
|
|
+ <li><a href="#dropdowns">Dropdown buttons</a></li>
|
|
|
+ <li><a href="#header">Header</a></li>
|
|
|
+ <li><a href="#forms">Forms</a></li>
|
|
|
+ <li><a href="#editor">Page editor</a></li>
|
|
|
+ <li><a href="#tabs">Tabs</a></li>
|
|
|
+ <li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
|
|
+ <li><a href="#misc">Misc formatters</a></li>
|
|
|
+ <li><a href="#icons">Icons</a></li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <section id="palette">
|
|
|
+ <h2>Colour palette</h2>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li class="color-teal">color-teal</li>
|
|
|
+ <li class="color-teal-darker">color-teal-darker</li>
|
|
|
+ <li class="color-teal-dark">color-teal-dark</li>
|
|
|
+ <li class="color-red">color-red</li>
|
|
|
+ <li class="color-orange">color-orange</li>
|
|
|
+ <li class="color-green">color-green</li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li class="color-grey-1">color-grey-1</li>
|
|
|
+ <li class="color-grey-1-1">color-grey-1-1</li>
|
|
|
+ <li class="color-grey-2">color-grey-2</li>
|
|
|
+ <li class="color-grey-3">color-grey-3</li>
|
|
|
+ <li class="color-grey-4">color-grey-4</li>
|
|
|
+ <li class="color-grey-5">color-grey-5</li>
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="typography">
|
|
|
+ <h2>Typography</h2>
|
|
|
+ <h1>This is an h1</h1>
|
|
|
+ <h2>This is an h2</h2>
|
|
|
+ <h3>This is an h3</h3>
|
|
|
+ <h4>This is an h4</h4>
|
|
|
+ <h5>This is an h5</h5>
|
|
|
+ <p>This is a paragraph</p>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li>These are</li>
|
|
|
+ <li>items in an</li>
|
|
|
+ <li>unordered list</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ol>
|
|
|
+ <li>These are</li>
|
|
|
+ <li>items in an</li>
|
|
|
+ <li>ordered list</li>
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <code>This is an example of code</code>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="listings">
|
|
|
+ <h2>Listings</h2>
|
|
|
+
|
|
|
+ <h3><code>table</code> listing</h3>
|
|
|
+ <table class="listing">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Heading 1</th>
|
|
|
+ <th>Heading 2</th>
|
|
|
+ <th>Heading 3</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td class="title">
|
|
|
+ <h2>TD with title class</h2>
|
|
|
+ </td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="title">
|
|
|
+ <h2>TD with title class</h2>
|
|
|
+ </td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <h3><code>ul</code> listing</h3>
|
|
|
+ <ul class="listing">
|
|
|
+ <li>List item</li>
|
|
|
+ <li>List item</li>
|
|
|
+ <li>List item</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <h3>Listings used for choosing a list item</h3>
|
|
|
+ <table class="listing chooser">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Heading 1</th>
|
|
|
+ <th>Heading 2</th>
|
|
|
+ <th>Heading 3</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr class="can-choose">
|
|
|
+ <td class="title">
|
|
|
+ <h2><a href="#">TD with title class</a></h2>
|
|
|
+ </td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ </li>
|
|
|
+ <tr class="can-choose">
|
|
|
+ <td class="title">
|
|
|
+ <h2>TD with title class</h2>
|
|
|
+ </td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ <td>Regular listing TD</td>
|
|
|
+ </li>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="buttons">
|
|
|
+ <h2>Buttons</h2>
|
|
|
+
|
|
|
+ <div href="" class="button">button</div>
|
|
|
+
|
|
|
+ <div href="" class="button button-secondary">button-secondary</div>
|
|
|
+
|
|
|
+ <div href="" class="button yes">yes</div>
|
|
|
+
|
|
|
+ <div href="" class="button no">no / serious</div>
|
|
|
+
|
|
|
+ <div href="" class="button bicolor icon icon-plus">bicolor with icon</div>
|
|
|
+
|
|
|
+ <div href="" class="button button-small">button-small</div>
|
|
|
+
|
|
|
+ <div href="" class="button bicolor button-small icon icon-plus">bicolo button-small</div>
|
|
|
+
|
|
|
+ <div href="" class="button button-secondary no">mixed 1</div>
|
|
|
+
|
|
|
+ <div href="" class="button no bicolor icon icon-cog">mixed 2</div>
|
|
|
+
|
|
|
+ <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
|
|
|
+
|
|
|
+ <button>button</button>
|
|
|
+
|
|
|
+ <button class="bicolor icon icon-plus">bicolor with icon</button>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="dropdowns">
|
|
|
+ <h2>Dropdown buttons</h2>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div class="col3">
|
|
|
+ <div class="dropdown dropdown-button match-width">
|
|
|
+ <input type="button" value="drop down" class="button" />
|
|
|
+ <div class="dropdown-toggle icon icon-arrow-down"></div>
|
|
|
+ <ul role="menu">
|
|
|
+ <li><a href="#">items should not exceed button width</a></li>
|
|
|
+ <li><a href="#">item 2</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col3">
|
|
|
+ <div class="dropdown dropdown-button">
|
|
|
+ <div class="button">drop down</div>
|
|
|
+ <div class="dropdown-toggle icon icon-arrow-down"></div>
|
|
|
+ <ul role="menu">
|
|
|
+ <li><a href="#">Items in this list do not match button width</a></li>
|
|
|
+ <li><a href="#">item 2</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col3">
|
|
|
+ <div class="dropdown dropup dropdown-button match-width">
|
|
|
+ <input type="button" value="drop up" class="button" />
|
|
|
+ <div class="dropdown-toggle icon icon-arrow-up"></div>
|
|
|
+ <ul role="menu">
|
|
|
+ <li><a href="#">item 1</a></li>
|
|
|
+ <li><a href="#">item 2</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col3">
|
|
|
+ <div class="dropdown dropup dropdown-button match-width">
|
|
|
+ <button value="drop up" class="button icon icon-view">icon dropup</button>
|
|
|
+ <div class="dropdown-toggle icon icon-arrow-up"></div>
|
|
|
+ <ul role="menu">
|
|
|
+ <li><a href="#">item 1</a></li>
|
|
|
+ <li><a href="#">item 2</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="header">
|
|
|
+ <h2>Header</h2>
|
|
|
+
|
|
|
+ {% include "wagtailadmin/shared/header.html" with title=title_trans %}
|
|
|
+
|
|
|
+ {% include "wagtailadmin/shared/header.html" with title=title_trans add_link="wagtailimages_add_image" icon="image" add_text="button" search_url="wagtailimages_index" %}
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="forms">
|
|
|
+ <h2>Forms</h2>
|
|
|
+
|
|
|
+ <form>
|
|
|
+ <ul class="fields">
|
|
|
+ {% for field in example_form %}
|
|
|
+ {% if field.name == 'file' %}
|
|
|
+ {% include "wagtailimages/images/_file_field.html" %}
|
|
|
+ {% elif field.name == 'date' %}
|
|
|
+ {% include "wagtailadmin/shared/field_as_li.html" with input_classes="iconfield icon-date" %}
|
|
|
+ {% else %}
|
|
|
+ {% include "wagtailadmin/shared/field_as_li.html" %}
|
|
|
+ {% endif %}
|
|
|
+ {% endfor %}
|
|
|
+ <li><input type="submit" value="{% trans 'Save' %}" /><a href="#" class="button button-secondary no">{% trans "Delete image" %}</a></li>
|
|
|
+ </ul>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <h3>TODO: Date picker</h3>
|
|
|
+ <h3>TODO: Time picker</h3>
|
|
|
+ <h3>TODO: Datetime picker</h3>
|
|
|
+ <h3>TODO: Rich text input</h3>
|
|
|
+ <h3>TODO: Page chooser</h3>
|
|
|
+ <h3>TODO: Image chooser</h3>
|
|
|
+ <h3>TODO: Document chooser</h3>
|
|
|
+ <h3>TODO: Snippet chooser</h3>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="editor">
|
|
|
+ <h2>Page editor</h2>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="tabs">
|
|
|
+ <h2>Tabs</h2>
|
|
|
+
|
|
|
+ <ul class="tab-nav">
|
|
|
+ <li class="active"><a href="#tab1">Tab 1</a></li>
|
|
|
+ <li><a href="#tab2">Tab 2</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <p>Tabs are currently only used following headers, where they often appear merged with the bottom of the header:</p>
|
|
|
+
|
|
|
+ {% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}
|
|
|
+ <ul class="tab-nav merged">
|
|
|
+ <li class="active"><a href="#">Tab1</a></li>
|
|
|
+ <li><a href="#">Tab2</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <p>Tabs can also indicate errors:</p>
|
|
|
+
|
|
|
+ {% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}
|
|
|
+ <ul class="tab-nav merged">
|
|
|
+ <li class="active"><a href="#" class="errors" data-count="123">Tab1</a></li>
|
|
|
+ <li><a href="#" class="errors" data-count="1">Tab2</a></li>
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="breadcrumbs">
|
|
|
+ <h2>Breadcrumbs</h2>
|
|
|
+
|
|
|
+ <ul class="breadcrumb">
|
|
|
+ <li class="home"><a href="#" class="icon icon-home text-replace">Home</a></li>
|
|
|
+ <li><a href="#">Various</a></li>
|
|
|
+ <li><a href="#">Subpages</a></li>
|
|
|
+ <li><a href="#">There is a max length of this many</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="misc">
|
|
|
+ <h2>Misc formatters</h2>
|
|
|
+ <h3>Avatar icons</h3>
|
|
|
+
|
|
|
+ <p><span class="avatar small icon icon-user"><img src="{% gravatar_url "david@torchbox.com" 25 %}" /></span> Gravatar set</p>
|
|
|
+ <p><span class="avatar small icon icon-user"><img src="{% gravatar_url "aeon@torchbox.com" 25 %}" /></span> Gravatar not set</p>
|
|
|
+
|
|
|
+ <h3>Status tags</h3>
|
|
|
+ <div class="status-tag primary">Primary tag</div>
|
|
|
+
|
|
|
+ <div class="status-tag">Secondary tag</div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section id="icons">
|
|
|
+ <h2>Icons</h2>
|
|
|
+
|
|
|
+ <ul class="unlist">
|
|
|
+ <li class="icon icon-wagtail">wagtail</li>
|
|
|
+ <li class="icon icon-wagtail-inverse">wagtail-inverse</li>
|
|
|
+ <li class="icon icon-cogs">cogs</li>
|
|
|
+ <li class="icon icon-doc-empty-inverse">doc-empty-inverse</li>
|
|
|
+ <li class="icon icon-doc-empty">doc-empty</li>
|
|
|
+ <li class="icon icon-edit">edit</li>
|
|
|
+ <li class="icon icon-arrow-up">arrow-up</li>
|
|
|
+ <li class="icon icon-arrow-down">arrow-down</li>
|
|
|
+ <li class="icon icon-search">search</li>
|
|
|
+ <li class="icon icon-cross">cross</li>
|
|
|
+ <li class="icon icon-folder-open-1">folder-open-1</li>
|
|
|
+ <li class="icon icon-folder-inverse">folder-inverse</li>
|
|
|
+ <li class="icon icon-mail">mail</li>
|
|
|
+ <li class="icon icon-arrows-up-down">arrows-up-down</li>
|
|
|
+ <li class="icon icon-locked">locked</li>
|
|
|
+ <li class="icon icon-unlocked">unlocked</li>
|
|
|
+ <li class="icon icon-arrow-right">arrow-right</li>
|
|
|
+ <li class="icon icon-doc-full">doc-full / file-text-alt</li>
|
|
|
+ <li class="icon icon-image">image / picture</li>
|
|
|
+ <li class="icon icon-doc-full-inverse">doc-full-inverse</li>
|
|
|
+ <li class="icon icon-folder">folder</li>
|
|
|
+ <li class="icon icon-plus">plus</li>
|
|
|
+ <li class="icon icon-tag">tag</li>
|
|
|
+ <li class="icon icon-folder-open-inverse">folder-open-inverse</li>
|
|
|
+ <li class="icon icon-cog">cog</li>
|
|
|
+ <li class="icon icon-tick">tick</li>
|
|
|
+ <li class="icon icon-user">user</li>
|
|
|
+ <li class="icon icon-arrow-left">arrow-left</li>
|
|
|
+ <li class="icon icon-tick-inverse">tick-inverse</li>
|
|
|
+ <li class="icon icon-plus-inverse">plus-inverse</li>
|
|
|
+ <li class="icon icon-snippet">snippet</li>
|
|
|
+ <li class="icon icon-bold">bold</li>
|
|
|
+ <li class="icon icon-italic">italic</li>
|
|
|
+ <li class="icon icon-undo">undo</li>
|
|
|
+ <li class="icon icon-repeat">repeat</li>
|
|
|
+ <li class="icon icon-list-ol">list-ol</li>
|
|
|
+ <li class="icon icon-list-ul">list-ul</li>
|
|
|
+ <li class="icon icon-link">link</li>
|
|
|
+ <li class="icon icon-radio-full">radio-full</li>
|
|
|
+ <li class="icon icon-radio-empty">radio-empty</li>
|
|
|
+ <li class="icon icon-arrow-up-big">arrow-up-big</li>
|
|
|
+ <li class="icon icon-arrow-down-big">arrow-down-big</li>
|
|
|
+ <li class="icon icon-group">group</li>
|
|
|
+ <li class="icon icon-media">media</li>
|
|
|
+ <li class="icon icon-horizontalrule">horizontalrule</li>
|
|
|
+ <li class="icon icon-password">password</li>
|
|
|
+ <li class="icon icon-download">download</li>
|
|
|
+ <li class="icon icon-order">order</li>
|
|
|
+ <li class="icon icon-grip">grip</li>
|
|
|
+ <li class="icon icon-home">home</li>
|
|
|
+ <li class="icon icon-order-down">order-down</li>
|
|
|
+ <li class="icon icon-order-up">order-up</li>
|
|
|
+ <li class="icon icon-bin">bin</li>
|
|
|
+ <li class="spinner"><div class="icon icon-spinner">spinner</div> spinner</li>
|
|
|
+ <li class="icon icon-pick">pick</li>
|
|
|
+ <li class="icon icon-redirect">redirect</li>
|
|
|
+ <li class="icon icon-view">view</li>
|
|
|
+ <li class="icon icon-collapse-up">collapse-up</li>
|
|
|
+ <li class="icon icon-collapse-down">collapse-down</li>
|
|
|
+ <li class="icon icon-help">help</li>
|
|
|
+ <li class="icon icon-warning">warning</li>
|
|
|
+ <li class="icon icon-success">success</li>
|
|
|
+ <li class="icon icon-date">date</li>
|
|
|
+ <li class="icon icon-form">form</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+
|
|
|
+{% endblock %}
|
|
|
+
|
|
|
+{% block extra_js %}
|
|
|
+<script>
|
|
|
+ $(function(){
|
|
|
+
|
|
|
+ })
|
|
|
+</script>
|
|
|
+{% endblock %}
|