From 5af334778abda786ce57d40bd11efa0de3b2b447 Mon Sep 17 00:00:00 2001 From: Michael Nowina-Krowicki Date: Fri, 27 Nov 2020 11:40:41 +1030 Subject: [PATCH 1/2] Changing css to target css classes instead of IDs --- css/betternavigator.css | 52 ++++++++-------- javascript/betternavigator.js | 41 +++++++------ scss/betternavigator.scss | 17 +++--- src/Extension/BetterNavigatorExtension.php | 1 + templates/BetterNavigator/BetterNavigator.ss | 64 ++++++++++---------- 5 files changed, 92 insertions(+), 83 deletions(-) diff --git a/css/betternavigator.css b/css/betternavigator.css index 9fdc4dc..bcc076c 100644 --- a/css/betternavigator.css +++ b/css/betternavigator.css @@ -24,32 +24,32 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; } -#BetterNavigator { position: fixed; top: 0; right: 0; z-index: 99999; max-height: 100%; overflow: auto; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; text-align: left; } -#BetterNavigator a { text-decoration: none; } -#BetterNavigator form { display: none; } -#BetterNavigator.collapsed { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -moz-transform-origin: right top; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; -moz-transform: rotate(90deg) translate(100%, 0); -ms-transform: rotate(90deg) translate(100%, 0); -webkit-transform: rotate(90deg) translate(100%, 0); transform: rotate(90deg) translate(100%, 0); border-width: 0 1px 1px 0; } -#BetterNavigator.collapsed #BetterNavigatorStatus { border-width: 0 1px 1px 0; } -#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-close { display: none; } -#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-cog { display: inline-block; } -#BetterNavigator.collapsed #BetterNavigatorContent { display: none; } +.better-navigator { position: fixed; top: 0; right: 0; z-index: 99999; max-height: 100%; overflow: auto; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; text-align: left; } +.better-navigator a { text-decoration: none; } +.better-navigator form { display: none; } +.better-navigator.collapsed { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -moz-transform-origin: right top; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; -moz-transform: rotate(90deg) translate(100%, 0); -ms-transform: rotate(90deg) translate(100%, 0); -webkit-transform: rotate(90deg) translate(100%, 0); transform: rotate(90deg) translate(100%, 0); border-width: 0 1px 1px 0; } +.better-navigator.collapsed .better-navigator__status { border-width: 0 1px 1px 0; } +.better-navigator.collapsed .better-navigator__status .bn-icon-close { display: none; } +.better-navigator.collapsed .better-navigator__status .bn-icon-cog { display: inline-block; } +.better-navigator.collapsed .better-navigator__content { display: none; } -#BetterNavigatorStatus { color: #fff; background: #6f6f6f; border: 1px solid #646464; border-width: 0 0 0 1px; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; font-weight: bold; } -#BetterNavigatorStatus .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; } -#BetterNavigatorStatus .bn-icon-close { float: right; margin: 1px 0 0 0; } -#BetterNavigatorStatus .bn-icon-cog, #BetterNavigatorStatus .bn-icon-close { opacity: .7; } -#BetterNavigatorStatus:hover { background: dimgray; } -#BetterNavigatorStatus:hover .bn-icon-cog, #BetterNavigatorStatus:hover .bn-icon-close { opacity: 1; } -#BetterNavigatorStatus.Live { background: #39b54a; border-color: #33a343; } -#BetterNavigatorStatus.Live:hover { background: #36ac46; } -#BetterNavigatorStatus.Draft { background: #f26c4f; border-color: #da6147; } -#BetterNavigatorStatus.Draft:hover { background: #e6674b; } +.better-navigator__status { color: #fff; background: #6f6f6f; border: 1px solid #646464; border-width: 0 0 0 1px; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; font-weight: bold; } +.better-navigator__status .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; } +.better-navigator__status .bn-icon-close { float: right; margin: 1px 0 0 0; } +.better-navigator__status .bn-icon-cog, .better-navigator__status .bn-icon-close { opacity: .7; } +.better-navigator__status:hover { background: dimgray; } +.better-navigator__status:hover .bn-icon-cog, .better-navigator__status:hover .bn-icon-close { opacity: 1; } +.better-navigator__status.live { background: #39b54a; border-color: #33a343; } +.better-navigator__status.live:hover { background: #36ac46; } +.better-navigator__status.draft { background: #f26c4f; border-color: #da6147; } +.better-navigator__status.draft:hover { background: #e6674b; } -#BetterNavigatorContent { padding: 6px; color: #71767a; background: #cfd8de; border: 1px solid #bac2c8; border-width: 0 0 1px 1px; } -#BetterNavigatorContent .bn-heading { text-align: center; text-transform: uppercase; font-size: 11px; margin: 8px 0 4px 0; } -#BetterNavigatorContent span[class^='bn-icon'], #BetterNavigatorContent span[class*=' bn-icon'] { margin: -2px 5px -3px -2px; } -#BetterNavigatorContent a, #BetterNavigatorContent span.bn-disabled { display: block; background: #eceff2; color: #313639; font-family: Helvetica, Arial, sans-serif; font-size: 12px; border-radius: 5px; border-bottom: 1px solid #a3aaaf; margin: 0 0 4px 0; padding: 6px 10px 5px 10px; line-height: 16px; font-weight: bold; } -#BetterNavigatorContent a .light, #BetterNavigatorContent span.bn-disabled .light { font-weight: normal; } -#BetterNavigatorContent a:focus, #BetterNavigatorContent a:hover, #BetterNavigatorContent a:active { background: #fff; color: #000; } -#BetterNavigatorContent span.bn-disabled { background: #afbac0; color: #51565a; cursor: default; } +.better-navigator__content { padding: 6px; color: #71767a; background: #cfd8de; border: 1px solid #bac2c8; border-width: 0 0 1px 1px; } +.better-navigator__content .bn-heading { text-align: center; text-transform: uppercase; font-size: 11px; margin: 8px 0 4px 0; } +.better-navigator__content span[class^='bn-icon'], .better-navigator__content span[class*=' bn-icon'] { margin: -2px 5px -3px -2px; } +.better-navigator__content a, .better-navigator__content span.bn-disabled { display: block; background: #eceff2; color: #313639; font-family: Helvetica, Arial, sans-serif; font-size: 12px; border-radius: 5px; border-bottom: 1px solid #a3aaaf; margin: 0 0 4px 0; padding: 6px 10px 5px 10px; line-height: 16px; font-weight: bold; } +.better-navigator__content a .light, .better-navigator__content span.bn-disabled .light { font-weight: normal; } +.better-navigator__content a:focus, .better-navigator__content a:hover, .better-navigator__content a:active { background: #fff; color: #000; } +.better-navigator__content span.bn-disabled { background: #afbac0; color: #51565a; cursor: default; } -body > p.message { text-align: left; background: #fff; color: #222; padding: 10px 20px; margin: 0; border-bottom: 1px solid #ccc; border-left: 5px solid #1d8aff; } \ No newline at end of file +body > p.message { text-align: left; background: #fff; color: #222; padding: 10px 20px; margin: 0; border-bottom: 1px solid #ccc; border-left: 5px solid #1d8aff; } diff --git a/javascript/betternavigator.js b/javascript/betternavigator.js index 7ba77d0..eb06493 100755 --- a/javascript/betternavigator.js +++ b/javascript/betternavigator.js @@ -1,10 +1,10 @@ // For reading cookies function getCookie(cname) { - var name = cname + "="; - var ca = document.cookie.split(';'); - for(var i=0; i $member, 'Stage' => Versioned::get_stage(), 'Viewing' => $viewing, // What we're viewing doesn't necessarily align with the active Stage + 'ViewingCssClass' => strtolower($viewing), 'ViewingTitle' => $viewingTitle, 'LoginLink' => Controller::join_links(Director::absoluteBaseURL(), Security::config()->login_url, $backURL), 'LogoutLink' => Controller::join_links(Director::absoluteBaseURL() . Security::config()->logout_url, $backURL), diff --git a/templates/BetterNavigator/BetterNavigator.ss b/templates/BetterNavigator/BetterNavigator.ss index 3398e6b..e5d06df 100644 --- a/templates/BetterNavigator/BetterNavigator.ss +++ b/templates/BetterNavigator/BetterNavigator.ss @@ -1,47 +1,47 @@ -