diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss new file mode 100644 index 000000000..8e0894baa --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/styleguide.scss @@ -0,0 +1,77 @@ +@import "../variables.scss"; +@import "../mixins.scss"; +@import "../grid.scss"; + +section{ + border-top:1px solid $color-grey-3; + padding:0 0 2em 0; + + > h2:first-child{ + margin:0; + font-size:1em; + background:$color-grey-4; + padding:1em; + margin-bottom:1em; + } +} + +#palette{ + @include clearfix(); + + ul{ + @include clearfix(); + @include unlist(); + } + + li{ + float:left; + width:100px; + height:100px; + padding:10px; + color:black; + } + + .color-teal{ + background-color:$color-teal; + } + .color-teal-darker{ + background-color:$color-teal-darker; + } + .color-teal-dark{ + background-color:$color-teal-dark; + } + .color-red{ + background-color:$color-red; + } + .color-orange{ + background-color:$color-orange; + } + .color-green{ + background-color:$color-green; + } + .color-grey-1{ + background-color:$color-grey-1; + } + .color-grey-1-1{ + background-color:$color-grey-1-1; + } + .color-grey-2{ + background-color:$color-grey-2; + } + .color-grey-3{ + background-color:$color-grey-3; + } + .color-grey-4{ + background-color:$color-grey-4; + } + .color-grey-5{ + background-color:$color-grey-5; + } +} + + +#icons{ + ul{ + @include unlist(); + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html b/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html new file mode 100644 index 000000000..9f9eea922 --- /dev/null +++ b/wagtail/wagtailadmin/templates/wagtailadmin/styleguide/base.html @@ -0,0 +1,213 @@ +{% extends "wagtailadmin/base.html" %} +{% load wagtailadmin_tags %} +{% load compress i18n %} + +{% block extra_css %} + {% compress css %} + + {% 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 %} + +
+

Styleguide

+ + +
+

Colour palette

+ + + +
+ +
+

Typography

+

This is an h1

+

This is an h2

+

This is an h3

+

This is an h4

+
This is an h5
+

This is a paragraph

+ + + +
    +
  1. These are
    2. +
  2. items in an
    3. +
  3. ordered list
    4. +
+ +
+ +
+

Listings

+
+ +
+

Buttons

+ +
button
+ +
button-secondary
+ +
yes
+ +
no / serious
+ +
bicolor with icon
+ +
button-small
+ +
bicolo button-small
+ +
mixed
+ +
+ + + + + +
+

Messages

+
+ +
+

Forms

+
+ +
+

Page editor

+
+ +
+

Tabs

+
+ + + +
+

Misc formatters

+

Avatar icons

+

Status tags

+
+ +
+

Icons

+ + + +
+ + +
+{% endblock %} \ No newline at end of file diff --git a/wagtail/wagtailadmin/urls.py b/wagtail/wagtailadmin/urls.py index 3b1a98535..1241004a2 100644 --- a/wagtail/wagtailadmin/urls.py +++ b/wagtail/wagtailadmin/urls.py @@ -82,4 +82,6 @@ urlpatterns += patterns( 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'), ) diff --git a/wagtail/wagtailadmin/views/styleguide.py b/wagtail/wagtailadmin/views/styleguide.py new file mode 100644 index 000000000..33c87034c --- /dev/null +++ b/wagtail/wagtailadmin/views/styleguide.py @@ -0,0 +1,9 @@ +from django.shortcuts import render + +from wagtail.wagtailadmin.userbar import EditPageItem, AddPageItem, ApproveModerationEditPageItem, RejectModerationEditPageItem +from wagtail.wagtailadmin import hooks +from wagtail.wagtailcore.models import Page, PageRevision + +def index(request): + # Render the edit bird + return render(request, 'wagtailadmin/styleguide/base.html', {})