tonyair
/
silverstripe-betternavigator
mirror of https://github.com/jonom/silverstripe-betternavigator.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Changing css to target css classes instead of IDs

This commit is contained in:
3Dgoo 2020-12-01 12:07:47 +10:30 committed by GitHub
parent 83172d6da6 f88f1b5e67
commit 0a5d661fa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
css/betternavigator.css
View File

@ -24,32 +24,32 @@
span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; } 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; } .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; }
#BetterNavigator a { text-decoration: none; } .better-navigator a { text-decoration: none; }
#BetterNavigator form { display: none; } .better-navigator 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; } .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; }
#BetterNavigator.collapsed #BetterNavigatorStatus { border-width: 0 1px 1px 0; } .better-navigator.collapsed .better-navigator__status { border-width: 0 1px 1px 0; }
#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-close { display: none; } .better-navigator.collapsed .better-navigator__status .bn-icon-close { display: none; }
#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-cog { display: inline-block; } .better-navigator.collapsed .better-navigator__status .bn-icon-cog { display: inline-block; }
#BetterNavigator.collapsed #BetterNavigatorContent { display: none; } .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; } .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; }
#BetterNavigatorStatus .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; } .better-navigator__status .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; }
#BetterNavigatorStatus .bn-icon-close { float: right; margin: 1px 0 0 0; } .better-navigator__status .bn-icon-close { float: right; margin: 1px 0 0 0; }
#BetterNavigatorStatus .bn-icon-cog, #BetterNavigatorStatus .bn-icon-close { opacity: .7; } .better-navigator__status .bn-icon-cog, .better-navigator__status .bn-icon-close { opacity: .7; }
#BetterNavigatorStatus:hover { background: dimgray; } .better-navigator__status:hover { background: dimgray; }
#BetterNavigatorStatus:hover .bn-icon-cog, #BetterNavigatorStatus:hover .bn-icon-close { opacity: 1; } .better-navigator__status:hover .bn-icon-cog, .better-navigator__status:hover .bn-icon-close { opacity: 1; }
#BetterNavigatorStatus.Live { background: #39b54a; border-color: #33a343; } .better-navigator__status.live { background: #39b54a; border-color: #33a343; }
#BetterNavigatorStatus.Live:hover { background: #36ac46; } .better-navigator__status.live:hover { background: #36ac46; }
#BetterNavigatorStatus.Draft { background: #f26c4f; border-color: #da6147; } .better-navigator__status.draft { background: #f26c4f; border-color: #da6147; }
#BetterNavigatorStatus.Draft:hover { background: #e6674b; } .better-navigator__status.draft:hover { background: #e6674b; }
#BetterNavigatorContent { padding: 6px; color: #71767a; background: #cfd8de; border: 1px solid #bac2c8; border-width: 0 0 1px 1px; } .better-navigator__content { 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; } .better-navigator__content .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; } .better-navigator__content span[class^='bn-icon'], .better-navigator__content 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; } .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; }
#BetterNavigatorContent a .light, #BetterNavigatorContent span.bn-disabled .light { font-weight: normal; } .better-navigator__content a .light, .better-navigator__content span.bn-disabled .light { font-weight: normal; }
#BetterNavigatorContent a:focus, #BetterNavigatorContent a:hover, #BetterNavigatorContent a:active { background: #fff; color: #000; } .better-navigator__content a:focus, .better-navigator__content a:hover, .better-navigator__content a:active { background: #fff; color: #000; }
#BetterNavigatorContent span.bn-disabled { background: #afbac0; color: #51565a; cursor: default; } .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; } 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; }

41
javascript/betternavigator.js
View File

@ -1,10 +1,10 @@
// For reading cookies // For reading cookies
function getCookie(cname) { function getCookie(cname) {
var name = cname + "="; let name = cname + "=";
var ca = document.cookie.split(';'); let ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) { for (let i = 0; i < ca.length; i++) {
var c = ca[i]; let c = ca[i];
while (c.charAt(0)===' ') { while (c.charAt(0) === ' ') {
c = c.substring(1); c = c.substring(1);
} }
if (c.indexOf(name) !== -1) { if (c.indexOf(name) !== -1) {
@ -16,28 +16,35 @@ function getCookie(cname) {
function initialiseBetterNavigator() { function initialiseBetterNavigator() {
// Dom elements // Dom elements
var BetterNavigator = document.getElementById("BetterNavigator"); const betterNavigator = document.getElementById("BetterNavigator");
var BetterNavigatorStatus = document.getElementById("BetterNavigatorStatus"); const betterNavigatorStatus = document.getElementById("BetterNavigatorStatus");
var BetterNavigatorLogoutLink = document.getElementById("BetterNavigatorLogoutLink"); const betterNavigatorLogoutLink = document.getElementById("BetterNavigatorLogoutLink");
var BetterNavigatorLogoutForm = document.getElementById("LogoutForm_BetterNavigatorLogoutForm"); const betterNavigatorLogoutForm = document.getElementById("LogoutForm_BetterNavigatorLogoutForm");
// Toggle visibility of menu by clicking status // Toggle visibility of menu by clicking status
BetterNavigatorStatus.onclick = function () { betterNavigatorStatus.onclick = function () {
BetterNavigator.className = BetterNavigator.className === 'collapsed' ? 'open' : 'collapsed'; if (betterNavigator.classList.contains('collapsed')) {
//Set cookie to remember state betterNavigator.classList.add('open');
document.cookie = "BetterNavigator=" + BetterNavigator.className + ";path=/"; betterNavigator.classList.remove('collapsed');
document.cookie = "BetterNavigator=open;path=/";
} else {
betterNavigator.classList.add('collapsed');
betterNavigator.classList.remove('open');
document.cookie = "BetterNavigator=collapsed;path=/";
}
}; };
// Restore menu state // Restore menu state
if (getCookie('BetterNavigator') === 'open') { if (getCookie('BetterNavigator') === 'open') {
BetterNavigator.className = 'open'; betterNavigator.classList.add('open');
betterNavigator.classList.remove('collapsed');
} }
if (BetterNavigatorLogoutForm) { if (betterNavigatorLogoutForm) {
// Upgrade logout link to directly log users out instead of redirecting to logout form // Upgrade logout link to directly log users out instead of redirecting to logout form
BetterNavigatorLogoutLink.onclick = function (e) { betterNavigatorLogoutLink.onclick = function (e) {
e.preventDefault(); e.preventDefault();
BetterNavigatorLogoutForm.submit(); betterNavigatorLogoutForm.submit();
}; };
} }
} }

17
scss/betternavigator.scss
View File

@ -11,7 +11,7 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
//Container //Container
#BetterNavigator { .better-navigator {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -39,7 +39,7 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
@include transform(rotate(90deg) translate(100%,0)); @include transform(rotate(90deg) translate(100%,0));
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
#BetterNavigatorStatus { .better-navigator__status {
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
.bn-icon-close { .bn-icon-close {
@ -50,7 +50,7 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
} }
} }
#BetterNavigatorContent { .better-navigator__content {
display: none; display: none;
} }
} }
@ -62,7 +62,7 @@ $liveColor: #39b54a;
$stageColor: #f26c4f; $stageColor: #f26c4f;
$archiveColor: #6f6f6f; $archiveColor: #6f6f6f;
#BetterNavigatorStatus { .better-navigator__status {
color: #fff; color: #fff;
background: $archiveColor; background: $archiveColor;
border: 1px solid shade($archiveColor, 10); border: 1px solid shade($archiveColor, 10);
@ -96,7 +96,7 @@ $archiveColor: #6f6f6f;
} }
} }
&.Live { &.live {
background: $liveColor; background: $liveColor;
border-color: shade($liveColor, 10); border-color: shade($liveColor, 10);
@ -105,7 +105,7 @@ $archiveColor: #6f6f6f;
} }
} }
&.Draft { &.draft {
background: $stageColor; background: $stageColor;
border-color: shade($stageColor, 10); border-color: shade($stageColor, 10);
@ -117,7 +117,7 @@ $archiveColor: #6f6f6f;
//Content //Content
#BetterNavigatorContent { .better-navigator__content {
padding: 6px; padding: 6px;
color: #71767a; color: #71767a;
background: #cfd8de; background: #cfd8de;
@ -131,7 +131,8 @@ $archiveColor: #6f6f6f;
margin: 8px 0 4px 0; margin: 8px 0 4px 0;
} }
span[class^='bn-icon'],span[class*=' bn-icon']{ span[class^='bn-icon'],
span[class*=' bn-icon'] {
margin: -2px 5px -3px -2px; margin: -2px 5px -3px -2px;
} }

2
src/Extension/BetterNavigatorExtension.php
View File

@ -130,7 +130,7 @@ class BetterNavigatorExtension extends DataExtension
$bNData = array_merge($nav, [ $bNData = array_merge($nav, [
'Member' => $member, 'Member' => $member,
'Stage' => Versioned::get_stage(), 'Stage' => Versioned::get_stage(),
'Viewing' => $viewing, // What we're viewing doesn't necessarily align with the active Stage 'Viewing' => strtolower($viewing), // What we're viewing doesn't necessarily align with the active Stage
'ViewingTitle' => $viewingTitle, 'ViewingTitle' => $viewingTitle,
'LoginLink' => Controller::join_links(Director::absoluteBaseURL(), Security::config()->login_url, $backURL), 'LoginLink' => Controller::join_links(Director::absoluteBaseURL(), Security::config()->login_url, $backURL),
'LogoutLink' => Controller::join_links(Director::absoluteBaseURL() . Security::config()->logout_url, $backURL), 'LogoutLink' => Controller::join_links(Director::absoluteBaseURL() . Security::config()->logout_url, $backURL),

64
templates/BetterNavigator/BetterNavigator.ss
View File

@ -1,47 +1,47 @@
<div id="BetterNavigator" class="collapsed"> <div id="BetterNavigator" class="better-navigator collapsed">
<div id="BetterNavigatorStatus" class="$Viewing"> <div id="BetterNavigatorStatus" class="better-navigator__status $Viewing">
<span class="bn-icon-cog"></span> <span class="bn-icon-cog"></span>
$ViewingTitle $ViewingTitle
<span class="bn-icon-close"></span> <span class="bn-icon-close"></span>
</div> </div>
<div id="BetterNavigatorContent"> <div id="BetterNavigatorContent" class="better-navigator__content">
<div class="bn-links"> <div class="bn-links">
<% if $ArchiveLink.Active %> <% if $ArchiveLink.Active %>
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.RESTORE_LABEL 'Restore' %></a><% end_if %> <% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.RESTORE_LABEL 'Restore' %></a><% end_if %>
<% else %> <% else %>
<% if not $LiveLink.Active %> <% if not $LiveLink.Active %>
<% if $LiveLink.Link %> <% if $LiveLink.Link %>
<a href="$LiveLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_LIVE_LABEL 'View live' %></a> <a href="$LiveLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_LIVE_LABEL 'View live' %></a>
<% else %> <% else %>
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></span> <span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></span>
<% end_if %>
<% end_if %> <% end_if %>
<% if not $StageLink.Active %>
<% if $StageLink.Link %>
<a href="$StageLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_DRAFT_LABEL 'View draft' %></a>
<% else %>
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.DELETED_FROM_DRAFT_SITE_LABEL 'Deleted from draft site' %></span>
<% end_if %>
<% end_if %>
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.EDIT_IN_CMS_LABEL 'Edit in CMS' %></a><% end_if %>
<% end_if %> <% end_if %>
<% if not $StageLink.Active %>
<% if $StageLink.Link %>
<a href="$StageLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_DRAFT_LABEL 'View draft' %></a>
<% else %>
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.DELETED_FROM_DRAFT_SITE_LABEL 'Deleted from draft site' %></span>
<% end_if %>
<% end_if %>
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.EDIT_IN_CMS_LABEL 'Edit in CMS' %></a><% end_if %>
<% end_if %>
<% if $Member %> <% if $Member %>
$LogoutForm $LogoutForm
<a href="$LogoutLink" id="BetterNavigatorLogoutLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_OUT_LABEL 'Log out' %><% if $Member.FirstName %><span class="light"> ($Member.FirstName)</span><% end_if %></a> <a href="$LogoutLink" id="BetterNavigatorLogoutLink" class="better-navigator__logout-link"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_OUT_LABEL 'Log out' %><% if $Member.FirstName %><span class="light"> ($Member.FirstName)</span><% end_if %></a>
<% else %> <% else %>
<a href="$LoginLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_IN_LABEL 'Log in' %></a> <a href="$LoginLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_IN_LABEL 'Log in' %></a>
<% end_if %> <% end_if %>
</div> </div>
<% include BetterNavigator\BetterNavigatorExtraContent %> <% include BetterNavigator\BetterNavigatorExtraContent %>
<% if $Mode=='dev' || $IsDeveloper %> <% if $Mode == 'dev' || $IsDeveloper %>
<div class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></div> <div class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></div>
@ -77,7 +77,7 @@
<% end_if %> <% end_if %>
<% if $Mode=='dev' %> <% if $Mode == 'dev' %>
<div class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></div> <div class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></div>