From cfc893cd566173faf8fa812d55c7763b482a4932 Mon Sep 17 00:00:00 2001 From: Matthias Mees Date: Mon, 3 Mar 2014 17:48:13 +0100 Subject: [PATCH 1/4] Refactor smallscreen nav to off-canvas nav (basics). MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit – 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 --- templates/2k11/admin/index.tpl | 186 +++++++++--------- .../2k11/admin/serendipity_editor.js.tpl | 10 +- templates/2k11/admin/style.css | 140 +++++++------ 3 files changed, 163 insertions(+), 173 deletions(-) diff --git a/templates/2k11/admin/index.tpl b/templates/2k11/admin/index.tpl index b06bf373..0fbea382 100644 --- a/templates/2k11/admin/index.tpl +++ b/templates/2k11/admin/index.tpl @@ -13,33 +13,19 @@ {if NOT $admin_vars.no_banner}
-
-
- {if $admin_vars.admin_installed} -

{$CONST.SERENDIPITY_ADMIN_SUITE}: {$blogTitle}

- {else} -

{$CONST.SERENDIPITY_INSTALLATION}

- {/if} -
+
{if $admin_vars.is_logged_in} - + Navigation {* i18n *} + {/if} + {if $admin_vars.admin_installed} +

{$CONST.SERENDIPITY_ADMIN_SUITE}: {$blogTitle}

+ {else} +

{$CONST.SERENDIPITY_INSTALLATION}

{/if}
{/if} -
+
{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} -
- Navigation {* i18n *} +
+ + + {/if} + {if 'adminUsersGroups'|checkPermission OR 'adminImport'|checkPermission OR 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission OR 'adminUsers'|checkPermission OR 'adminTemplates'|checkPermission OR 'adminPlugins'|checkPermission} +

  • Settings

    {* i18n *} +
      + {if 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission} +
    • {$CONST.CONFIGURATION}
      • + {/if} + {if 'adminTemplates'|checkPermission} +
    • Designs
      • {* i18n *} + {/if} + {if 'adminPlugins'|checkPermission} +
    • Plugins
      • {* i18n *} + {/if} + {if 'adminUsers'|checkPermission} +
    • Users
      • {* i18n *} + {/if} + {if 'adminUsersGroups'|checkPermission} +
    • Groups
      • {* i18n *} + {/if} +
    • Maintenance
      • {* i18n *} + {if $admin_vars.no_create !== true} + {serendipity_hookPlugin hook="backend_sidebar_admin" hookAll="true"} + {/if} +
    +
    • + {/if} + + {/if}
    {$admin_vars.main_content} diff --git a/templates/2k11/admin/serendipity_editor.js.tpl b/templates/2k11/admin/serendipity_editor.js.tpl index 5a4a5515..80e4c02d 100644 --- a/templates/2k11/admin/serendipity_editor.js.tpl +++ b/templates/2k11/admin/serendipity_editor.js.tpl @@ -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(); }); diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css index 2c6536cd..35d7a436 100644 --- a/templates/2k11/admin/style.css +++ b/templates/2k11/admin/style.css @@ -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; From 1d764468902e5dcfc46a3d13b790acf0914d8c4a Mon Sep 17 00:00:00 2001 From: Matthias Mees Date: Mon, 3 Mar 2014 18:07:48 +0100 Subject: [PATCH 2/4] Some stylesheet maintenance. --- templates/2k11/admin/style.css | 33 ++------------------------------- 1 file changed, 2 insertions(+), 31 deletions(-) diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css index 35d7a436..492d439e 100644 --- a/templates/2k11/admin/style.css +++ b/templates/2k11/admin/style.css @@ -1107,13 +1107,6 @@ summary { /* LAYOUT ----------------------------------------------------------------- */ -/*#top > div, -#main_menu > ul > li, -#content { - margin-left: .75em; - margin-right: .75em; -}*/ - #serendipity_customfields label { margin-right: 1em; } @@ -1312,8 +1305,6 @@ summary { ----------------------------------------------------------------- */ #main_menu { background: #ccdde7; - /*box-shadow: 0 1px 4px rgba(0,0,0,.5); - overflow: hidden;*/ } #top > div, @@ -1336,9 +1327,6 @@ summary { .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 { @@ -1355,37 +1343,20 @@ summary { overflow: hidden; } -/*#main_menu h3 { - display: none; - visibility: hidden; -}*/ - -/*#main_menu > ul { +#main_menu > ul { margin-bottom: .75em; } -#main_menu li > ul > li { - float: left; - width: 50%; -} - -#main_menu a { - display: inline-block; - padding: .2125em 0; -} - #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;*/ float: left; font-size: 1.25em; - /*margin: .25em .5em;*/ margin: .35em .8em 0 0; } From 39a3da9e8f596b495ff16c81abceacb5303453d5 Mon Sep 17 00:00:00 2001 From: Matthias Mees Date: Mon, 3 Mar 2014 19:31:12 +0100 Subject: [PATCH 3/4] Bring back the button links, some minor CSS fixes. --- templates/2k11/admin/index.tpl | 10 ++--- templates/2k11/admin/style.css | 67 ++++++++++++++++++++++++---------- 2 files changed, 52 insertions(+), 25 deletions(-) diff --git a/templates/2k11/admin/index.tpl b/templates/2k11/admin/index.tpl index 0fbea382..6959e38e 100644 --- a/templates/2k11/admin/index.tpl +++ b/templates/2k11/admin/index.tpl @@ -66,13 +66,13 @@

    • {$admin_vars.self_info}

      -
        -
      • Dashboard
        • {* i18n *} -
      • {$CONST.LOGOUT}
        • + {if 'adminEntries'|checkPermission OR 'adminEntriesPlugins'|checkPermission} diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css index 492d439e..f11abd5b 100644 --- a/templates/2k11/admin/style.css +++ b/templates/2k11/admin/style.css @@ -1107,6 +1107,19 @@ summary { /* LAYOUT ----------------------------------------------------------------- */ +#top > div, +#main_menu, +#content { + margin: 0; + padding-left: 2.5%; + padding-right: 2.5%; + width: 95%; +} + +#workspace { + overflow: hidden; +} + #serendipity_customfields label { margin-right: 1em; } @@ -1303,19 +1316,6 @@ summary { /* NAVIGATION ----------------------------------------------------------------- */ -#main_menu { - background: #ccdde7; -} - -#top > div, -#main_menu, -#content { - margin: 0; - padding-left: 2.5%; - padding-right: 2.5%; - width: 95%; -} - .js #main_menu { margin-left: -100%; } @@ -1339,14 +1339,28 @@ summary { margin-right: -100%; } -#workspace { - overflow: hidden; +#main_menu { + background: #ccdde7; +} + +#main_menu h3 { + border-bottom: 1px solid #aaa; + color: #666; + font-size: 1em; + margin-bottom: .5em; + padding-bottom: .25em; } #main_menu > ul { margin-bottom: .75em; } +#main_menu a { + display: block; + padding-top: 3px; + padding-bottom: 3px; +} + #main_menu a, #main_menu a:visited, .quick_list h3 a, @@ -1360,6 +1374,13 @@ summary { margin: .35em .8em 0 0; } +#main_menu #user_menu li { + display: inline-block; + font-size: 1.25em; + margin-right: .5em; + width: auto; +} + /* CONTENT ----------------------------------------------------------------- */ @@ -2895,11 +2916,6 @@ img.mfp-img { margin-left: 0; } - #main_menu a { - display: block; - padding: .125em 0; - } - #nav-toggle { display: none !important; visibility: hidden; @@ -2951,6 +2967,17 @@ img.mfp-img { margin: 0 2% 0 0; } + #main_menu #user_menu { + border: 0 none; + padding: 0; + } + + #main_menu #user_menu h3 { + background: transparent; + border: 0 none; + padding-top: 0; + } + #content { float: right; margin: 0 0 0 2%; From 0c40e05195410d8ac80bc691b53f6e94ea271f09 Mon Sep 17 00:00:00 2001 From: Matthias Mees Date: Mon, 3 Mar 2014 19:50:54 +0100 Subject: [PATCH 4/4] Bring the user menu back to the top bar on desktop. --- templates/2k11/admin/style.css | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css index f11abd5b..15169882 100644 --- a/templates/2k11/admin/style.css +++ b/templates/2k11/admin/style.css @@ -1376,7 +1376,6 @@ summary { #main_menu #user_menu li { display: inline-block; - font-size: 1.25em; margin-right: .5em; width: auto; } @@ -2906,6 +2905,28 @@ img.mfp-img { background: transparent; } + #user_menu { + position: absolute; + top: 0; + right: 2.5%; + text-align: right; + width: auto; + } + + #main_menu #user_menu h3 { + border: 0 none; + color: #ccdee7; + float: left; + font-weight: normal; + margin: 1em 1em 0 0; + padding: 0; + } + + #user_menu > ul { + float: right; + margin-top: .6em; + } + #main_menu, #content { padding-left: 0;