kopia lustrzana https://github.com/wagtail/wagtail
Merge pull request #831 from davecranwell/nicer-menu-footer
Updated menu footer to use space better, be clearer in how it works.pull/791/merge
Karl Hobley
commit
377f2f4521
|
|
@ -426,8 +426,10 @@
|
|||
<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>
|
||||
<p><span class="avatar icon icon-user"><img src="{% gravatar_url "david@torchbox.com" %}" /></span> Gravatar set (normal)</p>
|
||||
<p><span class="avatar icon icon-user"><img src="{% gravatar_url "aeon@torchbox.com" %}" /></span> Gravatar not set (normal)</p>
|
||||
<p><span class="avatar small icon icon-user"><img src="{% gravatar_url "david@torchbox.com" %}" /></span> Gravatar set (small)</p>
|
||||
<p><span class="avatar small icon icon-user"><img src="{% gravatar_url "aeon@torchbox.com" %}" /></span> Gravatar not set (small)</p>
|
||||
|
||||
<h3>Status tags</h3>
|
||||
<div class="status-tag primary">Primary tag</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ class MenuItem(with_metaclass(MediaDefiningClass)):
|
|||
|
||||
def render_html(self, request):
|
||||
return format_html(
|
||||
"""<li class="menu-{0}"><a href="{1}" class="{2}"{3}>{4}</a></li>""",
|
||||
"""<li class="menu-item menu-{0}"><a href="{1}" class="{2}"{3}>{4}</a></li>""",
|
||||
self.name, self.url, self.classnames, self.attr_string, self.label)
|
||||
|
||||
|
||||
|
|
@ -103,7 +103,7 @@ class SubmenuMenuItem(MenuItem):
|
|||
|
||||
def render_html(self, request):
|
||||
return format_html(
|
||||
"""<li class="menu-{0}">
|
||||
"""<li class="menu-item menu-{0}">
|
||||
<a href="#" class="submenu-trigger {1}"{2}>{3}</a>
|
||||
<div class="nav-submenu">
|
||||
<h2 class="{1}">{3}</h2>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,16 @@
|
|||
@include border-radius(100%);
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
text-align:center;
|
||||
overflow:hidden;
|
||||
width:50px;
|
||||
height:50px;
|
||||
|
||||
a{
|
||||
img{
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
left:0;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:50px;
|
||||
}
|
||||
img{
|
||||
z-index:2;
|
||||
position:relative;
|
||||
top:0;left:0;right:0;
|
||||
@include border-radius(100%);
|
||||
border:0;
|
||||
}
|
||||
|
|
@ -26,20 +22,16 @@
|
|||
color:$color-grey-3;
|
||||
border: 2px solid $color-grey-3;
|
||||
text-align:center;
|
||||
display:block;
|
||||
display:inline-block;
|
||||
width:42px;
|
||||
height:42px;
|
||||
margin:2px 0 0 2px;
|
||||
line-height:42px;
|
||||
position:absolute;
|
||||
margin:2px 0 0 0;
|
||||
z-index:1;
|
||||
left:0;
|
||||
font-size:22px;
|
||||
}
|
||||
&:hover:before{
|
||||
color:$color-grey-3;
|
||||
border-color:$color-grey-3;
|
||||
}
|
||||
|
||||
|
||||
&.small{
|
||||
vertical-align:middle;
|
||||
margin:0 0.5em;
|
||||
|
|
@ -47,21 +39,20 @@
|
|||
height:25px;
|
||||
|
||||
&:before{
|
||||
margin:1px 0 0 1px;
|
||||
margin:0;
|
||||
width:22px;
|
||||
height:22px;
|
||||
line-height:22px;
|
||||
border-width:1px;
|
||||
font-size:1em;
|
||||
}
|
||||
img{
|
||||
border:0;
|
||||
}
|
||||
&:hover:before{
|
||||
color:$color-grey-3;
|
||||
border-color:$color-grey-3;
|
||||
font-size:14px;
|
||||
text-indent:0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.avatar-on-dark:before{
|
||||
color:$color-grey-2;
|
||||
border-color:$color-grey-2;
|
||||
}
|
||||
}
|
||||
|
||||
.media-placeholder {
|
||||
|
|
|
|||
|
|
@ -62,16 +62,25 @@ $submenu-color:darken($color-grey-1, 5%);
|
|||
}
|
||||
}
|
||||
|
||||
a {
|
||||
a{
|
||||
@include transition(border-color 0.2s ease);
|
||||
-webkit-font-smoothing: auto;
|
||||
text-decoration:none;
|
||||
display: block;
|
||||
color: #AAA;
|
||||
padding: 0.8em 1.7em;
|
||||
position:relative;
|
||||
font-size:0.95em;
|
||||
font-weight:300;
|
||||
|
||||
&:hover{
|
||||
background-color:rgba(100,100,100,0.15);
|
||||
color:white;
|
||||
text-shadow:-1px -1px 0px rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item a {
|
||||
position:relative;
|
||||
white-space:nowrap;
|
||||
border-left:3px solid transparent;
|
||||
|
||||
|
|
@ -81,12 +90,6 @@ $submenu-color:darken($color-grey-1, 5%);
|
|||
margin-right:0.5em;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color:rgba(100,100,100,0.15);
|
||||
color:white;
|
||||
text-shadow:-1px -1px 0px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* only really used for spinners and settings menu */
|
||||
&:after{
|
||||
font-size:1.5em;
|
||||
|
|
@ -99,11 +102,17 @@ $submenu-color:darken($color-grey-1, 5%);
|
|||
|
||||
}
|
||||
|
||||
.avatar{
|
||||
display:none;
|
||||
|
||||
a:hover{
|
||||
background-color:transparent;
|
||||
.account{
|
||||
@include clearfix();
|
||||
|
||||
|
||||
.avatar{
|
||||
display:none;
|
||||
}
|
||||
em{
|
||||
font-style:normal;
|
||||
float:left;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +124,7 @@ $submenu-color:darken($color-grey-1, 5%);
|
|||
display:none;
|
||||
}
|
||||
|
||||
a{
|
||||
.menu-item a{
|
||||
white-space:normal;
|
||||
padding: 0.9em 0 0.9em 4.5em;
|
||||
|
||||
|
|
@ -269,19 +278,26 @@ body.explorer-open {
|
|||
position:fixed;
|
||||
width:$menu-width - 7;
|
||||
bottom:0;
|
||||
text-align:center;
|
||||
|
||||
}
|
||||
.avatar{
|
||||
display:block;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
margin-bottom:1em;
|
||||
.account{
|
||||
@include clearfix();
|
||||
padding-right:0;
|
||||
padding-left:15px;
|
||||
|
||||
.avatar{
|
||||
display:inline-block;
|
||||
padding:0;
|
||||
margin:0 0.7em 0 0;
|
||||
border:0;
|
||||
float:left;
|
||||
|
||||
a{
|
||||
padding:0 0 1em 0;
|
||||
&:before{
|
||||
text-shadow:none;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
@include box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
|
||||
em{
|
||||
width:120px;
|
||||
}
|
||||
}
|
||||
a.submenu-trigger:after{
|
||||
|
|
|
|||
|
|
@ -244,6 +244,10 @@ footer{
|
|||
}
|
||||
}
|
||||
|
||||
.clearfix{
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.row{
|
||||
@include clearfix();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,11 @@
|
|||
<ul class="listing">
|
||||
<li class="row row-flush">
|
||||
<div class="col6">
|
||||
<a href="http://gravatar.com" class="button button-primary">{% trans "Set gravatar" %}</a>
|
||||
<a href="https://gravatar.com/emails/" class="button button-primary">{% trans "Set gravatar" %}</a>
|
||||
</div>
|
||||
|
||||
<small class="col6">
|
||||
{% trans "Your avatar image is provided by Gravatar and is connected to your email address. With a Gravatar account you can set an avatar for any number of other email addresses you use." %}
|
||||
|
||||
</small>
|
||||
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
{{ menu_html }}
|
||||
|
||||
<li class="footer">
|
||||
<div class="avatar icon icon-user"><a href="{% url 'wagtailadmin_account' %}" title="{% trans 'Account settings' %}">{% if request.user.email %}<img src="{% gravatar_url request.user.email %}" />{% endif %}</a></div>
|
||||
<a href="{% url 'wagtailadmin_logout' %}">{% trans "Log out" %}</a>
|
||||
<a href="{% url 'wagtailadmin_account' %}" title="{% trans 'Edit your account' %}" class="account"><span class="avatar small avatar-on-dark icon icon-user">{% if request.user.email %}<img src="{% gravatar_url request.user.email 25 %}" />{% endif %}</span> <em>{{ request.user.get_full_name|default:request.user.get_username }}</em></a>
|
||||
<div class="menu-item"><a href="{% url 'wagtailadmin_logout' %}" class="icon icon-arrow-left">{% trans "Log out" %}</a></div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue