mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-11 08:43:10 +00:00
updates to styleguide
This commit is contained in:
Dave Cranwell
parent
d88d562a99
commit
0f3b74817f
7 changed files with 269 additions and 37 deletions
|
|
@ -3,7 +3,18 @@
|
|||
@include clearfix();
|
||||
|
||||
.dropdown-toggle{
|
||||
color:white;
|
||||
text-transform:uppercase;
|
||||
background-color:$color-teal;
|
||||
line-height:3em;
|
||||
padding-left:1em;
|
||||
padding-right:1em;
|
||||
cursor:pointer;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=button], input[type=submit], button, .button{
|
||||
|
|
@ -27,10 +38,9 @@
|
|||
|
||||
li{
|
||||
float:none;
|
||||
border-top:1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
li:first-child{
|
||||
border-top:0;
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
border-style: solid;
|
||||
border-width:1px 0 0 0;
|
||||
}
|
||||
|
||||
a{
|
||||
|
|
@ -101,6 +111,10 @@
|
|||
@include box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
|
||||
top:auto;
|
||||
bottom:100%;
|
||||
|
||||
li{
|
||||
border-width:0 0 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -134,10 +148,22 @@
|
|||
}
|
||||
|
||||
/* Styles for dropdowns which are also buttons e.g page editor */
|
||||
|
||||
&.dropdown-button{
|
||||
.dropdown-toggle{
|
||||
@include border-radius(0 3px 3px 0);
|
||||
}
|
||||
&.open{
|
||||
> input[type=button], > input[type=submit], > button, > .button{
|
||||
@include border-radius(3px 3px 0px 0px);
|
||||
}
|
||||
.dropdown-toggle{
|
||||
@include border-radius(0 3px 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropup.dropdown-button{
|
||||
&.open{
|
||||
> input[type=button], > input[type=submit], > button, > .button{
|
||||
@include border-radius(0 0 3px 3px);
|
||||
|
|
@ -215,25 +241,6 @@ h2 .dropdown{
|
|||
|
||||
}
|
||||
|
||||
footer .actions .dropdown-toggle{
|
||||
text-transform:uppercase;
|
||||
background-color:$color-teal;
|
||||
line-height:3em;
|
||||
color:white;
|
||||
padding-left:1em;
|
||||
padding-right:1em;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
footer .actions .dropdown ul li{
|
||||
border-bottom:1px solid rgba(255,255,255,0.2);
|
||||
border-top:0;
|
||||
}
|
||||
|
||||
|
||||
/* Transitions */
|
||||
.dropdown ul{
|
||||
|
|
|
|||
|
|
@ -177,4 +177,8 @@ a.tag:hover{
|
|||
/* make a block-level element inline */
|
||||
.inline{
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.unlist{
|
||||
@include unlist();
|
||||
}
|
||||
|
|
@ -52,6 +52,7 @@ ul.listing{
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.dropdown{
|
||||
padding:0;
|
||||
}
|
||||
|
|
@ -65,6 +66,7 @@ ul.listing{
|
|||
background-color:white;
|
||||
margin-left:-$grid-gutter-width * 2;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
&.full-width td:first-child,
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@
|
|||
@import "../mixins.scss";
|
||||
@import "../grid.scss";
|
||||
|
||||
|
||||
|
||||
section{
|
||||
border-top:1px solid $color-grey-3;
|
||||
margin-top:2em;
|
||||
padding:0 0 2em 0;
|
||||
|
||||
> h2:first-child{
|
||||
|
|
@ -71,7 +74,15 @@ section{
|
|||
|
||||
|
||||
#icons{
|
||||
:before, :after{
|
||||
font-size:2em;
|
||||
}
|
||||
ul{
|
||||
@include unlist();
|
||||
-webkit-column-count:3; /* Chrome, Safari, Opera */
|
||||
-moz-column-count:3; /* Firefox */
|
||||
column-count:3;
|
||||
}
|
||||
li{
|
||||
margin-bottom:1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
{% extends "wagtailadmin/base.html" %}
|
||||
{% load wagtailadmin_tags %}
|
||||
{% load compress i18n %}
|
||||
{% load gravatar %}
|
||||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
|
|
@ -16,16 +17,15 @@
|
|||
{% include "wagtailadmin/shared/header.html" with title=title_trans %}
|
||||
|
||||
<div class="nice-padding">
|
||||
<h1>Styleguide</h1>
|
||||
<h2>Contents</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<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">Dropdowns</a></li>
|
||||
<li><a href="#dropdowns">Dropdown buttons</a></li>
|
||||
<li><a href="#header">Header</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#editor">Page editor</a></li>
|
||||
<li><a href="#tabs">Tabs</a></li>
|
||||
|
|
@ -77,10 +77,73 @@
|
|||
<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>
|
||||
</li>
|
||||
<tr>
|
||||
<td class="title">
|
||||
<h2>TD with title class</h2>
|
||||
</td>
|
||||
<td>Regular listing TD</td>
|
||||
<td>Regular listing TD</td>
|
||||
</li>
|
||||
</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">
|
||||
|
|
@ -104,22 +167,91 @@
|
|||
|
||||
<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>Dropdowns</h2>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section id="messages">
|
||||
<h2>Messages</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" %}
|
||||
{% 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>
|
||||
|
||||
<p>TODO: page chooser</p>
|
||||
<p>TODO: image chooser</p>
|
||||
<p>TODO: document chooser</p>
|
||||
<p>TODO: snippet chooser</p>
|
||||
</section>
|
||||
|
||||
<section id="editor">
|
||||
|
|
@ -128,22 +260,58 @@
|
|||
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ from django.conf.urls import url
|
|||
from django.conf import settings
|
||||
|
||||
from wagtail.wagtailadmin.forms import LoginForm, PasswordResetForm
|
||||
from wagtail.wagtailadmin.views import account, chooser, home, pages, tags, userbar
|
||||
from wagtail.wagtailadmin.views import account, chooser, home, pages, tags, userbar, styleguide
|
||||
from wagtail.wagtailadmin import hooks
|
||||
|
||||
urlpatterns = [
|
||||
|
|
@ -90,7 +90,7 @@ urlpatterns += [
|
|||
url(r'^userbar/(\d+)/$', userbar.for_frontend, name='wagtailadmin_userbar_frontend'),
|
||||
url(r'^userbar/moderation/(\d+)/$', userbar.for_moderation, name='wagtailadmin_userbar_moderation'),
|
||||
|
||||
url(r'^styleguide/$', 'styleguide.index', name='wagtailadmin_styleguide'),
|
||||
url(r'^styleguide/$', styleguide.index, name='wagtailadmin_styleguide'),
|
||||
]
|
||||
|
||||
# Import additional urlpatterns from any apps that define a register_admin_urls hook
|
||||
|
|
|
|||
|
|
@ -1,9 +1,49 @@
|
|||
from django import forms
|
||||
from django.db import models
|
||||
from django.shortcuts import render
|
||||
from django.utils.translation import ugettext as _
|
||||
from django.contrib import messages
|
||||
from django.contrib.auth.decorators import permission_required
|
||||
|
||||
from wagtail.wagtailadmin.userbar import EditPageItem, AddPageItem, ApproveModerationEditPageItem, RejectModerationEditPageItem
|
||||
from wagtail.wagtailadmin import hooks
|
||||
from wagtail.wagtailcore.models import Page, PageRevision
|
||||
|
||||
from wagtail.wagtailadmin.edit_handlers import PageChooserPanel
|
||||
from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
|
||||
from wagtail.wagtaildocs.edit_handlers import DocumentChooserPanel
|
||||
|
||||
from wagtail.wagtailadmin.forms import SearchForm
|
||||
from wagtail.wagtailcore.fields import RichTextField
|
||||
|
||||
|
||||
CHOICES = (
|
||||
('choice1', 'choice 1'),
|
||||
('choice2', 'choice 2'),
|
||||
)
|
||||
|
||||
class ExampleForm(forms.Form):
|
||||
text = forms.CharField(required=True, help_text="help text")
|
||||
url = forms.URLField(required=True)
|
||||
email = forms.EmailField(max_length=254)
|
||||
date = forms.DateField()
|
||||
rich_text = RichTextField()
|
||||
select = forms.ChoiceField(choices=CHOICES)
|
||||
boolean = forms.BooleanField(required=False)
|
||||
page_chooser = forms.CharField(required=True, help_text="help text")
|
||||
|
||||
@permission_required('wagtailadmin.access_admin')
|
||||
def index(request):
|
||||
# Render the edit bird
|
||||
return render(request, 'wagtailadmin/styleguide/base.html', {})
|
||||
|
||||
form = SearchForm(placeholder=_("Search something"))
|
||||
|
||||
example_form = ExampleForm()
|
||||
|
||||
messages.success(request, _("Success message"))
|
||||
messages.warning(request, _("Warning message"))
|
||||
messages.error(request, _("Error message"))
|
||||
|
||||
return render(request, 'wagtailadmin/styleguide/base.html', {
|
||||
'search_form': form,
|
||||
'example_form': example_form,
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue