Refactor smallscreen nav to off-canvas nav (basics).
– necessary layout changes – move toggle nav button – incorporate user menu back into main nav – basic styles required for off-canvas nav – adapt typography, remove some redundant styles – adapt toggle JS
This commit is contained in:
Matthias Mees
parent
e6456b022f
commit
cfc893cd56
@ -13,33 +13,19 @@
|
||||
<body id="serendipity_admin_page">
|
||||
{if NOT $admin_vars.no_banner}
|
||||
<header id="top">
|
||||
<div class="clearfix">
|
||||
<div id="banner{if not $admin_vars.is_logged_in}_install{/if}">
|
||||
{if $admin_vars.admin_installed}
|
||||
<h1><a href="serendipity_admin.php"><span class="visuallyhidden">{$CONST.SERENDIPITY_ADMIN_SUITE}: </span>{$blogTitle}</a></h1>
|
||||
{else}
|
||||
<h1>{$CONST.SERENDIPITY_INSTALLATION}</h1>
|
||||
{/if}
|
||||
</div>
|
||||
<div id="banner{if not $admin_vars.is_logged_in}_install{/if}" class="clearfix">
|
||||
{if $admin_vars.is_logged_in}
|
||||
<nav id="user_menu">
|
||||
<h2 class="visuallyhidden">User menu</h2> {* i18n *}
|
||||
|
||||
<ul>
|
||||
<li class="logged_in"><span>{$admin_vars.self_info}</span></li>
|
||||
<li><a class="button_link" href="serendipity_admin.php" title="Dashboard"><span class="icon-home"></span><span class="visuallyhidden"> Dashboard</span></a></li>{* i18n *}
|
||||
{if 'personalConfiguration'|checkPermission}
|
||||
<li><a class="button_link" href="serendipity_admin.php?serendipity[adminModule]=personal" title="{$CONST.PERSONAL_SETTINGS}"><span class="icon-cog-alt"></span><span class="visuallyhidden"> {$CONST.PERSONAL_SETTINGS}</span></a></li>
|
||||
{/if}
|
||||
<li><a class="button_link" href="{$serendipityBaseURL}" title="{$CONST.BACK_TO_BLOG}"><span class="icon-globe"></span><span class="visuallyhidden"> {$CONST.BACK_TO_BLOG}</span></a></li>
|
||||
<li><a class="button_link" href="serendipity_admin.php?serendipity[adminModule]=logout" title="{$CONST.LOGOUT}"><span class="icon-logout"></span><span class="visuallyhidden"> {$CONST.LOGOUT}</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a id="nav-toggle" class="button_link" href="#main_menu"><span class="icon-menu"></span><span class="visuallyhidden"> Navigation</span></a> {* i18n *}
|
||||
{/if}
|
||||
{if $admin_vars.admin_installed}
|
||||
<h1><a href="serendipity_admin.php"><span class="visuallyhidden">{$CONST.SERENDIPITY_ADMIN_SUITE}: </span>{$blogTitle}</a></h1>
|
||||
{else}
|
||||
<h1>{$CONST.SERENDIPITY_INSTALLATION}</h1>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
{/if}
|
||||
<main class="clearfix">
|
||||
<main id="workspace" class="clearfix">
|
||||
{if NOT $admin_vars.is_logged_in}
|
||||
{$admin_vars.out|@serendipity_refhookPlugin:'backend_login_page'}
|
||||
{$admin_vars.out.header}
|
||||
@ -75,89 +61,95 @@
|
||||
{$admin_vars.out.footer}
|
||||
{else}
|
||||
{if NOT $admin_vars.no_sidebar}
|
||||
<div class="smallscreen">
|
||||
<a id="nav-toggle" href="#main_menu"><span class="icon-menu"></span><span class="visuallyhidden"> Navigation</span></a> {* i18n *}
|
||||
<nav id="main_menu">
|
||||
<h2 class="visuallyhidden">Main menu</h2> {* i18n *}
|
||||
|
||||
<nav id="main_menu" class="additional_info">
|
||||
<h2 class="visuallyhidden">Main menu</h2> {* i18n *}
|
||||
|
||||
<ul class="clearfix">
|
||||
<ul class="clearfix">
|
||||
<li id="user_menu"><h3>{$admin_vars.self_info}</h3>
|
||||
<ul>
|
||||
<li><a href="serendipity_admin.php">Dashboard</a></li> {* i18n *}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=logout">{$CONST.LOGOUT}</a></li>
|
||||
{if 'personalConfiguration'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=personal">{$CONST.PERSONAL_SETTINGS}</a></li>
|
||||
{/if}
|
||||
<li><a href="{$serendipityBaseURL}">{$CONST.BACK_TO_BLOG}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
{if 'adminEntries'|checkPermission OR 'adminEntriesPlugins'|checkPermission}
|
||||
<li><h3>Content</h3> {* i18n *}
|
||||
<ul>
|
||||
{if 'adminEntries'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=entries&serendipity[adminAction]=new">{$CONST.NEW_ENTRY}</a></li>
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=entries&serendipity[adminAction]=editSelect">{$CONST.EDIT_ENTRIES}</a></li>
|
||||
{/if}
|
||||
{if 'adminCategories'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=category&serendipity[adminAction]=view">{$CONST.CATEGORIES}</a></li>
|
||||
{/if}
|
||||
{if 'adminEntries'|checkPermission OR 'adminEntriesPlugins'|checkPermission}
|
||||
<li><h3>Content</h3> {* i18n *}
|
||||
<ul>
|
||||
{if 'adminEntries'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=entries&serendipity[adminAction]=new">{$CONST.NEW_ENTRY}</a></li>
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=entries&serendipity[adminAction]=editSelect">{$CONST.EDIT_ENTRIES}</a></li>
|
||||
{/if}
|
||||
{if 'adminCategories'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=category&serendipity[adminAction]=view">{$CONST.CATEGORIES}</a></li>
|
||||
{/if}
|
||||
{if 'adminEntries'|checkPermission OR 'adminEntriesPlugins'|checkPermission}
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_entries" hookAll="true"}
|
||||
{/if}
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{if 'adminImages'|checkPermission}
|
||||
<li><h3>{$CONST.MEDIA}</h3>
|
||||
<ul>
|
||||
{if 'adminImagesAdd'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=addSelect">{$CONST.ADD_MEDIA}</a></li>
|
||||
{/if}
|
||||
{if 'adminImagesView'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=media">{$CONST.MEDIA_LIBRARY}</a></li>
|
||||
{/if}
|
||||
{if 'adminImagesDirectories'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=directorySelect">{$CONST.MANAGE_DIRECTORIES}</a></li>
|
||||
{/if}
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_entries_images" hookAll="true"}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_entries" hookAll="true"}
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{if 'adminImages'|checkPermission}
|
||||
<li><h3>{$CONST.MEDIA}</h3>
|
||||
<ul>
|
||||
{if 'adminImagesAdd'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=addSelect">{$CONST.ADD_MEDIA}</a></li>
|
||||
{/if}
|
||||
{if 'adminImagesView'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=media">{$CONST.MEDIA_LIBRARY}</a></li>
|
||||
{/if}
|
||||
{if 'adminImagesDirectories'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=directorySelect">{$CONST.MANAGE_DIRECTORIES}</a></li>
|
||||
{/if}
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_entries_images" hookAll="true"}
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{if 'adminComments'|checkPermission}
|
||||
<li><h3>Activity</h3> {* i18n *}
|
||||
<ul>
|
||||
{if 'adminComments'|checkPermission}
|
||||
<li><h3>Activity</h3> {* i18n *}
|
||||
<ul>
|
||||
{if 'adminComments'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=comments">{$CONST.COMMENTS}</a></li>
|
||||
{/if}
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_admin_appearance" hookAll="true"}
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=comments">{$CONST.COMMENTS}</a></li>
|
||||
{/if}
|
||||
{if 'adminUsersGroups'|checkPermission OR 'adminImport'|checkPermission OR 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission OR 'adminUsers'|checkPermission OR 'adminTemplates'|checkPermission OR 'adminPlugins'|checkPermission}
|
||||
<li><h3>Settings</h3> {* i18n *}
|
||||
<ul>
|
||||
{if 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=configuration">{$CONST.CONFIGURATION}</a></li>
|
||||
{/if}
|
||||
{if 'adminTemplates'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=templates">Designs</a></li> {* i18n *}
|
||||
{/if}
|
||||
{if 'adminPlugins'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=plugins">Plugins</a></li> {* i18n *}
|
||||
{/if}
|
||||
{if 'adminUsers'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=users">Users</a></li> {* i18n *}
|
||||
{/if}
|
||||
{if 'adminUsersGroups'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=groups">Groups</a></li> {* i18n *}
|
||||
{/if}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=maintenance">Maintenance</a></li> {* i18n *}
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_admin" hookAll="true"}
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_admin_appearance" hookAll="true"}
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{if 'adminUsersGroups'|checkPermission OR 'adminImport'|checkPermission OR 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission OR 'adminUsers'|checkPermission OR 'adminTemplates'|checkPermission OR 'adminPlugins'|checkPermission}
|
||||
<li><h3>Settings</h3> {* i18n *}
|
||||
<ul>
|
||||
{if 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=configuration">{$CONST.CONFIGURATION}</a></li>
|
||||
{/if}
|
||||
{if 'adminTemplates'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=templates">Designs</a></li> {* i18n *}
|
||||
{/if}
|
||||
{if 'adminPlugins'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=plugins">Plugins</a></li> {* i18n *}
|
||||
{/if}
|
||||
{if 'adminUsers'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=users">Users</a></li> {* i18n *}
|
||||
{/if}
|
||||
{if 'adminUsersGroups'|checkPermission}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=groups">Groups</a></li> {* i18n *}
|
||||
{/if}
|
||||
<li><a href="serendipity_admin.php?serendipity[adminModule]=maintenance">Maintenance</a></li> {* i18n *}
|
||||
{if $admin_vars.no_create !== true}
|
||||
{serendipity_hookPlugin hook="backend_sidebar_admin" hookAll="true"}
|
||||
{/if}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
{/if}
|
||||
<div id="content" class="clearfix">
|
||||
{$admin_vars.main_content}
|
||||
|
||||
@ -715,13 +715,13 @@ var AccessifyHTML5 = function (defaults, more_fixes) {
|
||||
if($('body').has('#main_menu').size() > 0) {
|
||||
$('#nav-toggle').click(function(e) {
|
||||
var $el = $(this);
|
||||
var $target = $el.attr('href');
|
||||
var $target = $('body');
|
||||
var $icon = $el.find('span:first-child');
|
||||
$($target).toggleClass('additional_info');
|
||||
if($($target).hasClass('additional_info')) {
|
||||
$icon.removeClass('icon-cancel').addClass('icon-menu');
|
||||
} else {
|
||||
$($target).toggleClass('active_nav');
|
||||
if($($target).hasClass('active_nav')) {
|
||||
$icon.removeClass('icon-menu').addClass('icon-cancel');
|
||||
} else {
|
||||
$icon.removeClass('icon-cancel').addClass('icon-menu');
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
@ -413,7 +413,6 @@ nav ol {
|
||||
#insert_image,
|
||||
form > a,
|
||||
form > button,
|
||||
#user_menu li,
|
||||
.edit_actions li,
|
||||
.actions li,
|
||||
#login .form_field label,
|
||||
@ -1108,12 +1107,12 @@ summary {
|
||||
|
||||
/* LAYOUT
|
||||
----------------------------------------------------------------- */
|
||||
#top > div,
|
||||
/*#top > div,
|
||||
#main_menu > ul > li,
|
||||
#content {
|
||||
margin-left: .75em;
|
||||
margin-right: .75em;
|
||||
}
|
||||
}*/
|
||||
|
||||
#serendipity_customfields label {
|
||||
margin-right: 1em;
|
||||
@ -1308,34 +1307,60 @@ summary {
|
||||
color: #fcfcfc;
|
||||
}
|
||||
|
||||
#user_menu ul {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
#user_menu li {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#user_menu .logged_in {
|
||||
display: block;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
|
||||
/* NAVIGATION
|
||||
----------------------------------------------------------------- */
|
||||
.smallscreen {
|
||||
#main_menu {
|
||||
background: #ccdde7;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.5);
|
||||
/*box-shadow: 0 1px 4px rgba(0,0,0,.5);
|
||||
overflow: hidden;*/
|
||||
}
|
||||
|
||||
#top > div,
|
||||
#main_menu,
|
||||
#content {
|
||||
margin: 0;
|
||||
padding-left: 2.5%;
|
||||
padding-right: 2.5%;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.js #main_menu {
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
.js #content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.js #main_menu,
|
||||
.js #content {
|
||||
float: left;
|
||||
/*-webkit-transition: .2s all ease;
|
||||
-moz-transition: .2s all ease;
|
||||
transition: .2s all ease;*/
|
||||
}
|
||||
|
||||
.active_nav #main_menu {
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.5);
|
||||
margin-left: 0;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.active_nav #content {
|
||||
margin-right: -100%;
|
||||
}
|
||||
|
||||
#workspace {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main_menu h3 {
|
||||
/*#main_menu h3 {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}*/
|
||||
|
||||
#main_menu > ul {
|
||||
/*#main_menu > ul {
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
|
||||
@ -1350,16 +1375,18 @@ summary {
|
||||
}
|
||||
|
||||
#main_menu a,
|
||||
#main_menu a:visited,
|
||||
#main_menu a:visited,*/
|
||||
.quick_list h3 a,
|
||||
.quick_list h3 a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
margin: .25em .5em;
|
||||
/*display: inline-block;*/
|
||||
float: left;
|
||||
font-size: 1.25em;
|
||||
/*margin: .25em .5em;*/
|
||||
margin: .35em .8em 0 0;
|
||||
}
|
||||
|
||||
|
||||
@ -2523,20 +2550,6 @@ img.mfp-img {
|
||||
/* SMALL SCREEN (e.g. smartphones)
|
||||
----------------------------------------------------------------- */
|
||||
@media only screen and (min-width: 480px) {
|
||||
#user_menu ul {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#user_menu li {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
#user_menu .logged_in {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#edit_entry_submit {
|
||||
top: -3.25em;
|
||||
}
|
||||
@ -2563,21 +2576,9 @@ img.mfp-img {
|
||||
.configuration_group .form_area textarea {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
#user_menu .logged_in {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 0 0 .75em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
#banner,
|
||||
#user_menu {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#entries_list h3,
|
||||
#serendipity_comments_list h4 {
|
||||
max-width: none;
|
||||
@ -2628,17 +2629,15 @@ img.mfp-img {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h1 {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.125em;
|
||||
margin: .6em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: .5em 0 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
@ -2904,10 +2903,6 @@ img.mfp-img {
|
||||
margin: .6667em 0;
|
||||
}
|
||||
|
||||
#user_menu ul {
|
||||
margin: .75em 0;
|
||||
}
|
||||
|
||||
#top > div,
|
||||
main {
|
||||
margin: 0 auto;
|
||||
@ -2915,10 +2910,18 @@ img.mfp-img {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.smallscreen {
|
||||
#main_menu {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#main_menu,
|
||||
#content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.js #main_menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#main_menu a {
|
||||
@ -2972,11 +2975,6 @@ img.mfp-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#user_menu .logged_in {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#main_menu {
|
||||
float: left;
|
||||
margin: 0 2% 0 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user