Updated breadcrumb and explorer style. Added vary_on_headers wherever ajax search results are returned. Added icons to headers where previously missed.

This commit is contained in:
Dave Cranwell 2014-03-28 17:05:29 +00:00
parent 279450abbd
commit 36ca7cb741
28 changed files with 203 additions and 91 deletions

View file

@ -139,7 +139,8 @@ $(function(){
success: function(data, status) {
if (index > search_current_index) {
search_current_index = index;
$(window.headerSearch.targetOutput).html(data);
$(window.headerSearch.targetOutput).html(data).slideDown(800);
window.history.pushState(null, "Search results", "?q=" + $(window.headerSearch.termInput).val());
}
},
complete: function(){

View file

@ -578,12 +578,14 @@ ul.tagit li.tagit-choice-editable{
border-bottom:1px solid $color-grey-4;
}
label{
display:none;
}
.fields{
position:relative;
clear:both;
.field label{
display:none;
}
.field input{
padding-left:3em;
@ -635,7 +637,7 @@ ul.tagit li.tagit-choice-editable{
}
}
header &{
&.small{
margin:0;
padding:0;
.fields{

View file

@ -174,9 +174,11 @@ ul.listing{
}
.actions{
@include clearfix();
margin-top:0.8em;
text-transform:uppercase;
font-size:0.85em;
margin-bottom:-0.5em;
a{
text-decoration:none;
@ -217,22 +219,26 @@ ul.listing{
}
.children a,
.no-children a{
color:$color-teal;
display:block;
padding:2em 0;
}
.children a{
color:$color-teal;
display:block;
&:before{
font-size:3rem;
}
}
.no-children a{
color:$color-grey-3;
display:block;
&:before{
font-size:1.5rem;
}
&:hover{
color:$color-teal;
}
}
&.small .children a:before{
font-size:30px;
@ -323,7 +329,7 @@ ul.listing{
color:auto;
}
.actions{
margin-top:0.8em;
margin-top:1em;
}
.button{
color:white;
@ -356,10 +362,12 @@ table.listing{
color:white;
background-color:$color-header-bg;
.title{
padding-top:1.3em;
padding-bottom:1.3em;
td{
padding-top:1.5em;
padding-bottom:1.5em;
}
.title{
h2{
color:white;
font-size:1.8em;
@ -506,7 +514,6 @@ table.listing{
border-color:transparent;
}
.no-children a{
color:$color-teal;
opacity:0;
}
.no-children:hover{

View file

@ -146,10 +146,9 @@ img{
}
#nav-toggle{
left:0%;
left:$mobile-nice-padding;
cursor:pointer;
position:absolute;
width:40px;
&:before{
font-size:40px;
@ -397,7 +396,6 @@ body.explorer-open {
header{
padding-top:1em;
padding-bottom:1em;
padding-left: 4em !important;
background-color: $color-header-bg;
margin-bottom:2em;
color:white;
@ -465,6 +463,10 @@ header{
background-color:$color-teal-dark;
}
}
/* necessary on mobile only to make way for hamburger menu */
&.nice-padding{
padding-left:4em;
}
}
.page-explorer header{
@ -533,83 +535,109 @@ footer{
.breadcrumb{
@include unlist();
}
.breadcrumb{
@include clearfix();
overflow:hidden;
background:$color-teal-darker;
font-size:0.85em;
margin-bottom:-4px; /* negates the 4px margin on the bottom of each LI, used to make it wrap nicely */
li {
display: block;
float: left;
background: $color-teal-darker;
padding: 0.4em 1em 0.4em 2em;
padding: 0.5em 1.3em;
position: relative;
margin: 0 4px 4px 0;
text-decoration: none;
color: #fff;
line-height:1em;
white-space: nowrap;
max-width:30em;
line-height:1.5em;
a{
color:white;
a, span{
color:lighten($color-teal,40%);
display:block;
max-width:25em;
max-width:12em;
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
line-height:1.6em;
padding-right:1em;
&:after{
right:0;
z-index:5;
position:absolute;
font-family:wagtail;
content:"n";
padding-left:20px;
font-size:2em;
color:$color-teal;
line-height:0.9em;
}
}
&:after, &:before{
/* &:after, &:before{
content: "";
border-top: 1.2em solid transparent;
border-bottom: 1.2em solid transparent;
}
&:after {
border-left: 1em solid $color-teal-darker;
position: absolute; right: -0.9em; top: 0;
position: absolute; right: -1.2em; top: 0;
z-index: 1;
border:1em solid red;
}
&:before {
border-left: 1em solid white;
position: absolute; left: 0; top: 0;
}
} */
&:hover {
background: $color-teal-dark;
a{
color:white;
}
}
&:hover:after {
border-left-color: $color-teal-dark;
}
&:first-child {
padding:0.4em;
&:before{
display:none;
width:1em;
}
&.home {
a {
width:2em;
padding-right:0;
text-align:center;
width:3em;
font-size:1em;
&:before{
line-height:1em;
font-size:1.15rem;
line-height: 0.85em;
padding-top: 0.10em;
}
&:after{
right:-0.3em;
}
}
}
}
header & li{
&:before {
border-left: 1em solid $color-header-bg;
border-left: 1em solid white;
position: absolute; left: 0; top: 0;
}
}
}
&.single{
li a{
white-space: nowrap;
text-overflow:inherit;
max-width:100%;
}
}
}
.row{
@ -725,6 +753,7 @@ footer, .logo{
width:60px;
float:none;
margin:auto;
display:block;
}
}
@ -815,6 +844,10 @@ footer, .logo{
padding-top:1.5em;
padding-bottom:1.5em;
&.nice-padding{
@include nice-padding();
}
.left{
float:left;
margin-right:0;
@ -848,6 +881,10 @@ footer, .logo{
.col9{
@include column(9);
}
.breadcrumb{
margin-left:-($desktop-nice-padding);
margin-right:-($desktop-nice-padding);
}
}
footer{
width:80%;

View file

@ -25,38 +25,59 @@ header{
}
.summary{
@include row();
@include clearfix();
background-color:$color-grey-5;
margin-bottom:2em;
padding-top:2em;
padding-bottom:2em;
h2{
@include visuallyhidden();
}
ul{
ul.stats{
@include clearfix();
@include unlist();
width:100%;
}
li{
@include column(4);
padding-top:3em;
padding-bottom:3em;
&:first-child{
@include push-padding($grid-content-indent);
li{
@include column(4);
&:before{
opacity:0.2;
font-size:6em;
float:left;
}
}
span{
font-family:Bitter, Georgia, serif;
display:block;
font-size:4em;
line-height:1em;
font-weight:300;
}
}
li:before{
opacity:0.2;
font-size:6em;
float:left;
.search-bar{
@include clearfix();
border-top:1px solid $color-grey-4;
padding:1em 0 0 0;
h2{
display:inline-block;
margin-right:1em;
}
.fields{
display:inline-block;
clear:none;
}
.field{
display:inline-block;
}
label{
display:inline-blo;
}
input{
background-color:white;
}
}
span{
font-family:Bitter, Georgia, serif;
display:block;
font-size:4em;
line-height:1em;
font-weight:300;
}
}

View file

@ -6,6 +6,28 @@
margin-bottom:10em;
}
.page-editor header {
}
.page-editor .breadcrumb{
margin-top:-1.8em;
margin-bottom:2em;
}
.page-editor .modal .breadcrumb{
margin:0;
background-color:transparent;
a{
color:$color-grey-2;
}
li:hover{
background-color:$color-grey-4;
}
.home{
padding-left:0;
}
}
.objects{
background:url("#{$static-root}bg-dark-diag.svg");
}

View file

@ -2,7 +2,7 @@
{% if not is_searching %}
<h2>{% trans "Explorer" %}</h2>
<ul class="breadcrumb">
<li><a href="{% url 'wagtailadmin_explore_root' %}?{{ querystring }}" class="icon icon-home text-replace navigate-pages">{% trans "Home" %}</a></li>
<li class="home"><a href="{% url 'wagtailadmin_explore_root' %}?{{ querystring }}" class="icon icon-home text-replace navigate-pages">{% trans "Home" %}</a></li>
{% for page in parent_page.get_ancestors %}
<li><a href="{% url 'wagtailadmin_choose_page_child' page.id %}?{{ querystring }}" class="navigate-pages" >{{ page.title }}</a></li>
{% endfor %}

View file

@ -1,6 +1,6 @@
{% load i18n %}
{% trans "Choose a page" as choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str search_url="wagtailadmin_choose_page" %}
{% include "wagtailadmin/shared/header.html" with title=choose_str search_url="wagtailadmin_choose_page" icon="doc-empty-inverse" %}
<div class="nice-padding">
{% include 'wagtailadmin/chooser/_link_types.html' with current='internal' %}

View file

@ -19,7 +19,7 @@
<tbody>
{% for revision in page_revisions_for_moderation %}
<tr>
<td class="title">
<td class="title" valign="top">
<h2><a href="{% url 'wagtailadmin_pages_edit' revision.page.id %}" title="{% trans 'Edit this page' %}">{{ revision.page.title }}</a></h2>
<ul class="actions">
<li>
@ -38,13 +38,13 @@
<li><a href="{% url 'wagtailadmin_pages_preview_for_moderation' revision.id %}" class="button button-small">{% trans 'Preview' %}</a></li>
</ul>
</td>
<td>
<td valign="top">
<a href="{% url 'wagtailadmin_explore' revision.page.get_parent.id %}">{{ revision.page.get_parent.title }}</a>
</td>
<td class="type">
<td class="type" valign="top">
{{ revision.page.content_type.model_class.get_verbose_name }}
</td>
<td>
<td valign="top">
<div class="human-readable-date" title="{{ revision.created_at|date:"d M Y H:i" }}">{{ revision.created_at|timesince }} ago </div>
by {{ revision.user.get_full_name }}
</td>

View file

@ -17,7 +17,7 @@
<tbody>
{% for revision in last_edits %}
<tr>
<td class="title">
<td class="title" valign="top">
<h2><a href="{% url 'wagtailadmin_pages_edit' revision.page.id %}" title="{% trans 'Edit this page' %}">{{ revision.page.title }}</a></h2>
<ul class="actions">
<li><a href="{% url 'wagtailadmin_pages_edit' revision.page.id %}" class="button button-small" target="_blank">{% trans "Edit" %}</a></li>
@ -29,8 +29,8 @@
{% endif %}
</ul>
</td>
<td><div class="human-readable-date" title="{{ revision.created_at|date:"d M Y H:i" }}">{{ revision.created_at|timesince }}</div></td>
<td>
<td valign="top"><div class="human-readable-date" title="{{ revision.created_at|date:"d M Y H:i" }}">{{ revision.created_at|timesince }}</div></td>
<td valign="top">
{% if revision.page.live %}
<a href="{{ revision.page.url }}" target="_blank" class="status-tag {% if revision.page.status_string != "draft" %}primary{% endif %}">{{ revision.page.status_string }}</a>
{% else %}

View file

@ -1,7 +1,7 @@
{% load i18n %}
<section class="panel summary">
<h2>{% trans "Site summary" %}</h2>
<ul>
<section class="panel summary nice-padding">
<h2 class="visuallyhidden">{% trans "Site summary" %}</h2>
<ul class="stats">
<li class="icon icon-doc-empty-inverse">
{% blocktrans count counter=total_pages %}
<span>{{ total_pages }}</span> Page
@ -24,4 +24,4 @@
{% endblocktrans %}
</li>
</ul>
</section>
</section>

View file

@ -7,6 +7,15 @@
{% block content %}
<header class="merged tab-merged nice-padding">
{% if not page.get_parent.is_root %}
<ul class="breadcrumb single">
{% if not page.get_parent.get_parent.is_root %}
<li><a href="{% url 'wagtailadmin_explore' page.get_parent.get_parent.id %}">...</a></li>
{% endif %}
<li><a href="{% url 'wagtailadmin_explore' page.get_parent.id %}">{{ page.get_parent.title }}</a></li>
</ul>
{% endif %}
<div class="row row-flush">
<div class="left col9">
<h1>{% blocktrans with title=page.title %}Editing <span>{{ title }}</span>{% endblocktrans %}</h1>

View file

@ -12,7 +12,7 @@
<ul class="breadcrumb">
{% for page in parent_page.get_ancestors %}
{% if page.is_root %}
<li><a href="{% url 'wagtailadmin_explore_root' %}" class="icon icon-home text-replace">{% trans 'Home' %}</a></li>
<li class="home"><a href="{% url 'wagtailadmin_explore_root' %}" class="icon icon-home text-replace">{% trans 'Home' %}</a></li>
{% else %}
<li><a href="{% url 'wagtailadmin_explore' page.id %}">{{ page.title }}</a></li>
{% endif %}

View file

@ -53,10 +53,10 @@
<li><a href="{% url 'wagtailadmin_pages_edit' parent_page.id %}" class="button button-small">{% trans 'Edit' %}</a></li>
{% endif %}
{% if parent_page.has_unpublished_changes and 'view_draft' not in hide_actions|default:'' %}
<li><a href="{% url 'wagtailadmin_pages_view_draft' parent_page.id %}" class="button button-small" target="_blank">{% trans 'View draft' %}</a></li>
<li><a href="{% url 'wagtailadmin_pages_view_draft' parent_page.id %}" class="button button-small" target="_blank">{% trans 'draft' %}</a></li>
{% endif %}
{% if parent_page.live and not parent_page.is_root and 'view_live' not in hide_actions|default:'' %}
<li><a href="{{ parent_page.url }}" class="button button-small" target="_blank">{% trans 'View live' %}</a></li>
<li><a href="{{ parent_page.url }}" class="button button-small" target="_blank">{% trans 'live' %}</a></li>
{% endif %}
{% if parent_page_perms.can_move and 'move' not in hide_actions|default:'' %}
<li><a href="{% url 'wagtailadmin_pages_move' parent_page.id %}" class="button button-small">{% trans 'Move' %}</a></li>
@ -83,7 +83,6 @@
</td>
<td></td>
</tr>
<tr class="divider"><td colspan="100%">Child pages</td></tr>
{% endif %}
{% if not moving and not choosing %}
@ -139,7 +138,7 @@
{% if orderable %}
<td class="ord">{% if ordering == "ord" %}<div class="handle icon icon-grip text-replace">{% trans 'Drag' %}</div>{% endif %}</td>
{% endif %}
<td class="title">
<td class="title" valign="top">
<h2>
{% if moving %}
{% if page.can_choose %}
@ -167,10 +166,10 @@
<li><a href="{% url 'wagtailadmin_pages_edit' page.id %}" class="button button-small" title="{% trans 'Edit this page' %}">{% trans 'Edit' %}</a></li>
{% endif %}
{% if page.has_unpublished_changes and 'view_draft' not in hide_actions|default:'' %}
<li><a href="{% url 'wagtailadmin_pages_view_draft' page.id %}" class="button button-small" target="_blank">{% trans 'View draft' %}</a></li>
<li><a href="{% url 'wagtailadmin_pages_view_draft' page.id %}" class="button button-small" target="_blank">{% trans 'draft' %}</a></li>
{% endif %}
{% if page.live and 'view_live' not in hide_actions|default:'' %}
<li><a href="{{ page.url }}" class="button button-small" target="_blank">{% trans 'View live' %}</a></li>
<li><a href="{{ page.url }}" class="button button-small" target="_blank">{% trans 'live' %}</a></li>
{% endif %}
{% if page_perms.can_move and 'move' not in hide_actions|default:'' %}
<li><a href="{% url 'wagtailadmin_pages_move' page.id %}" class="button button-small">{% trans 'Move' %}</a></li>
@ -189,7 +188,7 @@
</td>
{% if show_parent %}
{% with page.get_parent as parent %}
<td class="parent">
<td class="parent" valign="top">
{% if parent %}
<a href="{% url 'wagtailadmin_explore' parent.id %}">{{ parent.title }}</a>
{% endif %}

View file

@ -4,9 +4,9 @@
{% if is_searching %}
<h2>
{% blocktrans count counter=pages.paginator.count %}
There is one page match
There is one matching page
{% plural %}
There are {{ counter }} page matches
There are {{ counter }} matching pages
{% endblocktrans %}
</h2>
{% endif %}

View file

@ -5,7 +5,7 @@
<h1 class="icon icon-{{ icon }}">{{ title }} <span>{{ subtitle }}</span></h1>
</div>
{% if search_url %}
<form class="col search-bar" action="{% url search_url %}" method="get">
<form class="col search-bar small" action="{% url search_url %}" method="get">
<ul class="fields">
{% for field in search_form %}
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}

View file

@ -5,6 +5,7 @@ from django.template import RequestContext
from django.template.loader import render_to_string
from wagtail.wagtailadmin import hooks
from wagtail.wagtailadmin.forms import SearchForm
from wagtail.wagtailcore.models import Page, PageRevision, UserPagePermissionsProxy
@ -26,6 +27,7 @@ class SiteSummaryPanel(object):
'total_pages': Page.objects.count() - 1, # subtract 1 because the root node is not a real page
'total_images': get_image_model().objects.count(),
'total_docs': Document.objects.count(),
'search_form': SearchForm(),
}, RequestContext(self.request))

View file

@ -8,6 +8,7 @@ from django.contrib.contenttypes.models import ContentType
from django.contrib.auth.decorators import permission_required
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.translation import ugettext as _
from django.views.decorators.vary import vary_on_headers
from wagtail.wagtailadmin.edit_handlers import TabbedInterface, ObjectList
from wagtail.wagtailadmin.forms import SearchForm
@ -534,6 +535,7 @@ def get_page_edit_handler(page_class):
@permission_required('wagtailadmin.access_admin')
@vary_on_headers('X-Requested-With')
def search(request):
pages = []
q = None

View file

@ -1,6 +1,6 @@
{% load i18n %}
{% trans "Choose a document" as choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str tabbed=1 merged=1 %}
{% include "wagtailadmin/shared/header.html" with title=choose_str tabbed=1 merged=1 icon="doc-full-inverse" %}
{% if uploadform %}
<ul class="tab-nav merged">

View file

@ -4,6 +4,7 @@ from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.contrib.auth.decorators import permission_required
from django.core.exceptions import PermissionDenied
from django.utils.translation import ugettext as _
from django.views.decorators.vary import vary_on_headers
from wagtail.wagtailadmin.forms import SearchForm
@ -12,6 +13,7 @@ from wagtail.wagtaildocs.forms import DocumentForm
@permission_required('wagtaildocs.add_document')
@vary_on_headers('X-Requested-With')
def index(request):
# Get documents
documents = Document.objects.all()

View file

@ -1,7 +1,7 @@
{% load image_tags ellipsistrim%}
{% load i18n %}
{% trans "Choose an image" as choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 %}
{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 icon="image" %}
{% if uploadform %}
<ul class="tab-nav merged">

View file

@ -4,6 +4,7 @@ from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.contrib.auth.decorators import permission_required
from django.core.exceptions import PermissionDenied
from django.utils.translation import ugettext as _
from django.views.decorators.vary import vary_on_headers
from wagtail.wagtailadmin.forms import SearchForm
@ -12,6 +13,7 @@ from wagtail.wagtailimages.forms import get_image_form
@permission_required('wagtailimages.add_image')
@vary_on_headers('X-Requested-With')
def index(request):
Image = get_image_model()

View file

@ -3,6 +3,7 @@ from django.contrib import messages
from django.contrib.auth.decorators import permission_required
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.translation import ugettext as _
from django.views.decorators.vary import vary_on_headers
from wagtail.wagtailadmin.edit_handlers import ObjectList
from wagtail.wagtailadmin.forms import SearchForm
@ -14,6 +15,7 @@ REDIRECT_EDIT_HANDLER = ObjectList(models.Redirect.content_panels)
@permission_required('wagtailredirects.change_redirect')
@vary_on_headers('X-Requested-With')
def index(request):
page = request.GET.get('p', 1)
query_string = request.GET.get('q', "")

View file

@ -3,10 +3,10 @@
{% block titletag %}{% trans "Add editor's pick" %}{% endblock %}
{% block content %}
{% trans "Add editor's pick" as add_str %}
{% include "wagtailadmin/shared/header.html" with title=add_str %}
{% include "wagtailadmin/shared/header.html" with title=add_str icon="pick" %}
<div class="nice-padding">
{% blocktrans %}
{% blocktrans %}s
<p>Editors picks are a means of recommending specific pages that might not organically come high up in search results. E.g recommending your primary donation page to a user searching with a less common term like "<em>giving</em>".</p>
{% endblocktrans %}
{% blocktrans %}

View file

@ -3,7 +3,7 @@
{% block titletag %}{% blocktrans with query=query.query_string %}Editing {{ query }}{% endblocktrans %}{% endblock %}
{% block content %}
{% trans "Editing" as editing_str %}
{% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=query.query_string %}
{% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=query.query_string icon="pick" %}
<form action="{% url 'wagtailsearch_editorspicks_edit' query.id %}" method="POST" class="nice-padding">
{% csrf_token %}

View file

@ -4,12 +4,14 @@ from django.contrib import messages
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.translation import ugettext as _
from django.views.decorators.vary import vary_on_headers
from wagtail.wagtailsearch import models, forms
from wagtail.wagtailadmin.forms import SearchForm
@permission_required('wagtailadmin.access_admin')
@vary_on_headers('X-Requested-With')
def index(request):
page = request.GET.get('p', 1)
query_string = request.GET.get('q', "")

View file

@ -1,6 +1,6 @@
{% load i18n %}
{% trans "Choose" as choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str subtitle=snippet_type_name %}
{% include "wagtailadmin/shared/header.html" with title=choose_str subtitle=snippet_type_name icon="snippet" %}
<div class="nice-padding">
{% include "wagtailsnippets/snippets/list.html" with choosing=1 %}

View file

@ -5,6 +5,7 @@ from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.contrib import messages
from django.db.models import Q
from django.utils.translation import ugettext as _
from django.views.decorators.vary import vary_on_headers
from wagtail.wagtailadmin.forms import SearchForm
from wagtail.wagtailusers.forms import UserCreationForm, UserEditForm
@ -12,6 +13,7 @@ from wagtail.wagtailusers.forms import UserCreationForm, UserEditForm
User = get_user_model()
@permission_required('auth.change_user')
@vary_on_headers('X-Requested-With')
def index(request):
q = None
p = request.GET.get("p", 1)