Add some accessibility fixes to the markup and script
This commit is contained in:
Ed Wilde
parent
b0409fb30c
commit
689b3e73a0
|
|
@ -1 +1 @@
|
|||
.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-ce8a5080.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{transform:scale(0.8);margin:-1px -6px 0 0}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.8)}.bn-icon-tick{transform:scale(0.85)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;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,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px}#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-close{display:none}#BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-cog{display:inline-block}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -4px -4px;display:none}#BetterNavigatorStatus .bn-icon-close{float:right}#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:#4a831c;border-color:#437619}#BetterNavigatorStatus.Live:hover{background:#467c1b}#BetterNavigatorStatus.Draft{background:#c0462b;border-color:#ad3f27}#BetterNavigatorStatus.Draft:hover{background:#b64329}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{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{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent span.bn-disabled{background:#c6d3da;color:#51565a;cursor:default}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}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}/*# sourceMappingURL=betternavigator.css.map */
|
||||
.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-ce8a5080.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{transform:scale(0.8);margin:-3px -6px 0 0}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.8)}.bn-icon-tick{transform:scale(0.85)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;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,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px;padding:10px 15px 8px 35px}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out;font-size:14px;margin:0}#BetterNavigatorStatus #BetterNavigatorStatusButton{appearance:none;width:100%;height:38px;position:absolute;top:0;left:0;border:0;background:rgba(0,0,0,0);text-align:left;padding:2px 14px 0}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -2px -4px}#BetterNavigatorStatus .bn-icon-close{float:right}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatus:hover,#BetterNavigatorStatus:focus-visible{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close,#BetterNavigatorStatus:focus-visible .bn-icon-cog,#BetterNavigatorStatus:focus-visible .bn-icon-close{opacity:1}#BetterNavigatorStatus.Live{background:#4a831c;border-color:#437619}#BetterNavigatorStatus.Live:hover{background:#467c1b}#BetterNavigatorStatus.Draft{background:#c0462b;border-color:#ad3f27}#BetterNavigatorStatus.Draft:hover{background:#b64329}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{text-transform:uppercase;font-size:11px;margin:8px 0 4px 0;font-weight:normal}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent .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 .bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus-visible,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent .bn-disabled{background:#c6d3da;color:#51565a;cursor:default;pointer-events:none}#BetterNavigatorContent .bn-links{margin:0;padding:0;list-style-type:none}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}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}/*# sourceMappingURL=betternavigator.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,sBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBAEA,iEACI,aAGJ,+DACI,qBAIR,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,MA9KI,KA+KJ,WAnKW,QAoKX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CAEA,oCACE,0BACA,aAGF,sCACE,YAGF,0EAEE,WAGF,6BACI,mBAEA,sFAEE,UAIN,4BACI,WAtMI,QAuMJ,qBAEA,kCACI,mBAIR,6BACI,WA9MK,QA+ML,qBAEA,mCACI,mBAOZ,wBACI,YACA,MAnOW,QAoOX,WAnOgB,QAoOhB,yBACA,yBACA,gBACA,8CAEA,oCACI,yBACA,eACA,mBAGJ,6FAEE,0BAGF,mEAEI,cACA,WApPW,QAqPX,MAvPM,QAwPN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,iFACI,mBAIR,gEAEI,WA7QA,KA8QA,MA/QA,KAkRJ,iCACI,mBACA,qBAGJ,yCACI,WA/QmB,QAgRnB,MAlRc,QAmRd,eAIA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,sBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBACA,2BAGJ,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,MAvKI,KAwKJ,WA5JW,QA6JX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CACA,eACA,SAEA,oDACI,gBACA,WACA,YACA,kBACA,MACA,OACA,SACA,yBACA,gBACA,mBAGJ,oCACE,0BAGF,sCACE,YAGF,0EAEE,WAGF,kEAEI,mBAEA,4LAEE,UAIN,4BACI,WA9MI,QA+MJ,qBAEA,kCACI,mBAIR,6BACI,WAtNK,QAuNL,qBAEA,mCACI,mBAOZ,wBACI,YACA,MA3OW,QA4OX,WA3OgB,QA4OhB,yBACA,yBACA,gBACA,8CAEA,oCACI,yBACA,eACA,mBACA,mBAGJ,6FAEE,0BAGF,+DAEI,cACA,WA7PW,QA8PX,MAhQM,QAiQN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,6EACI,mBAIR,wEAEI,WAtRA,KAuRA,MAxRA,KA2RJ,iCACI,mBACA,qBAGJ,qCACI,WAxRmB,QAyRnB,MA3Rc,QA4Rd,eACA,oBAGJ,kCACI,SACA,UACA,qBAEA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"}
|
||||
|
|
@ -18,6 +18,8 @@ function initialiseBetterNavigator() {
|
|||
// Dom elements
|
||||
var BetterNavigator = document.getElementById("BetterNavigator");
|
||||
var BetterNavigatorStatus = document.getElementById("BetterNavigatorStatus");
|
||||
var BetterNavigatorStatusButton = document.getElementById("BetterNavigatorStatusButton");
|
||||
var BetterNavigatorStatusIcon = document.getElementById("BetterNavigatorStatusIcon");
|
||||
var BetterNavigatorLogoutLink = document.getElementById("BetterNavigatorLogoutLink");
|
||||
var BetterNavigatorLogoutForm = document.getElementById("LogoutForm_BetterNavigatorLogoutForm");
|
||||
|
||||
|
|
@ -26,10 +28,22 @@ function initialiseBetterNavigator() {
|
|||
if (BetterNavigator.classList.contains('collapsed')) {
|
||||
BetterNavigator.classList.add('open');
|
||||
BetterNavigator.classList.remove('collapsed');
|
||||
|
||||
// update the button state
|
||||
BetterNavigatorStatusButton.setAttribute('aria-expanded', 'true');
|
||||
BetterNavigatorStatusIcon.classList.remove('bn-icon-cog');
|
||||
BetterNavigatorStatusIcon.classList.add('bn-icon-close');
|
||||
|
||||
document.cookie = "BetterNavigator=open;path=/";
|
||||
} else {
|
||||
BetterNavigator.classList.add('collapsed');
|
||||
BetterNavigator.classList.remove('open');
|
||||
|
||||
// update the button state
|
||||
BetterNavigatorStatusButton.setAttribute('aria-expanded', 'false');
|
||||
BetterNavigatorStatusIcon.classList.remove('bn-icon-close');
|
||||
BetterNavigatorStatusIcon.classList.add('bn-icon-cog');
|
||||
|
||||
document.cookie = "BetterNavigator=collapsed;path=/";
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ de:
|
|||
VIEWING_DRAFT: 'Entwurf'
|
||||
VIEWING_ARCHIVED: 'Archiviert'
|
||||
|
||||
ARIA_MENU_LABEL: 'Werkzeugmenü'
|
||||
|
||||
DEVELOPER_TOOLS_HEADING: 'Entwickler Tools'
|
||||
DEBUGGING_HEADING: 'Debugging'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ en:
|
|||
VIEWING_DRAFT: 'Draft'
|
||||
VIEWING_ARCHIVED: 'Archived'
|
||||
|
||||
ARIA_MENU_LABEL: 'Tool menu'
|
||||
|
||||
DEVELOPER_TOOLS_HEADING: 'Developer tools'
|
||||
DEBUGGING_HEADING: 'Debugging'
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ span[class*=' bn-icon']{
|
|||
@extend .svg-images--bn-icon--close;
|
||||
@extend .svg-images--bn-icon--close-dims;
|
||||
transform: scale(0.8);
|
||||
margin: -1px -6px 0 0;
|
||||
margin: -3px -6px 0 0;
|
||||
}
|
||||
|
||||
.bn-icon-cog {
|
||||
|
|
@ -122,14 +122,7 @@ span[class*=' bn-icon']{
|
|||
|
||||
#BetterNavigatorStatus {
|
||||
border-width: 1px;
|
||||
|
||||
.bn-icon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bn-icon-cog {
|
||||
display: inline-block;
|
||||
}
|
||||
padding: 10px 15px 8px 35px;
|
||||
}
|
||||
|
||||
#BetterNavigatorContent {
|
||||
|
|
@ -190,10 +183,24 @@ span[class*=' bn-icon']{
|
|||
padding: 10px 15px 8px;
|
||||
font-weight: bold;
|
||||
transition: 100ms background-color ease-in-out;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
||||
#BetterNavigatorStatusButton {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 2px 14px 0;
|
||||
}
|
||||
|
||||
.bn-icon-cog {
|
||||
margin: -4px 8px -4px -4px;
|
||||
display: none;
|
||||
margin: -4px 8px -2px -4px;
|
||||
}
|
||||
|
||||
.bn-icon-close {
|
||||
|
|
@ -205,7 +212,8 @@ span[class*=' bn-icon']{
|
|||
opacity: .7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: mix($black, $archiveColor, 5%);
|
||||
|
||||
.bn-icon-cog,
|
||||
|
|
@ -248,6 +256,7 @@ span[class*=' bn-icon']{
|
|||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
margin: 8px 0 4px 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span[class^='bn-icon'],
|
||||
|
|
@ -256,7 +265,7 @@ span[class*=' bn-icon']{
|
|||
}
|
||||
|
||||
a,
|
||||
span.bn-disabled {
|
||||
.bn-disabled {
|
||||
display: block;
|
||||
background: $buttonBackground;
|
||||
color: $buttonColor;
|
||||
|
|
@ -274,7 +283,7 @@ span[class*=' bn-icon']{
|
|||
}
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:focus-visible,
|
||||
a:hover {
|
||||
background: $white;
|
||||
color: $black;
|
||||
|
|
@ -285,13 +294,18 @@ span[class*=' bn-icon']{
|
|||
border-color: mix($white, $buttonBorder, 10%);
|
||||
}
|
||||
|
||||
span.bn-disabled {
|
||||
.bn-disabled {
|
||||
background: $buttonBackgroundDisabled;
|
||||
color: $buttonColorDisabled;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bn-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<div id="BetterNavigator" class="collapsed $CssClass">
|
||||
<section id="BetterNavigator" class="collapsed $CssClass" aria-label="Better navigator - $ViewingTitle page">
|
||||
|
||||
<div id="BetterNavigatorStatus" class="$Viewing">
|
||||
<span class="bn-icon-cog"></span>
|
||||
<h2 id="BetterNavigatorStatus" class="$Viewing" tabindex="-1">
|
||||
<button id="BetterNavigatorStatusButton" aria-expanded="false" aria-controls="BetterNavigator" aria-label="<%t JonoM\BetterNavigator.ARIA_MENU_LABEL 'Tool menu' %>">
|
||||
<span id="BetterNavigatorStatusIcon" class="bn-icon-cog"></span>
|
||||
</button>
|
||||
$ViewingTitle
|
||||
<span class="bn-icon-close"></span>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div id="BetterNavigatorContent">
|
||||
|
||||
|
|
@ -17,14 +18,14 @@
|
|||
<% if $LiveLink.Link %>
|
||||
<a href="$LiveLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_LIVE_LABEL 'View live' %></a>
|
||||
<% else %>
|
||||
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></span>
|
||||
<a href="$LiveLink.Link" aria-disabled="true" class="bn-disabled"><span class="bn-icon-view"></a><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></a>
|
||||
<% 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>
|
||||
<a href="$StageLink.Link" aria-disabled="true" class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.DELETED_FROM_DRAFT_SITE_LABEL 'Deleted from draft site' %></a>
|
||||
<% 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 %>
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
|
||||
<% if $Member %>
|
||||
$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"><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 %>
|
||||
<a href="$LoginLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_IN_LABEL 'Log in' %></a>
|
||||
<% end_if %>
|
||||
|
|
@ -43,32 +44,34 @@
|
|||
|
||||
<% if $Mode == 'dev' || $IsDeveloper %>
|
||||
|
||||
<div class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></div>
|
||||
<h2 class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></h2>
|
||||
|
||||
<div class="bn-links">
|
||||
<ul class="bn-links">
|
||||
|
||||
<% if $Mode='dev' %>
|
||||
<span class="bn-disabled" title="<%t JonoM\BetterNavigator.END_DEV_MODE_TITLE 'Log out to end Dev Mode' %>">
|
||||
<li><span class="bn-disabled" title="<%t JonoM\BetterNavigator.END_DEV_MODE_TITLE 'Log out to end Dev Mode' %>">
|
||||
<span class="bn-icon-tick"></span><%t JonoM\BetterNavigator.DEV_MOVE_ON_LABEL 'Dev mode on' %>
|
||||
</span>
|
||||
</span></li>
|
||||
<% else %>
|
||||
<a href="{$AbsoluteLink}?isDev=1"><span class="bn-icon-devmode"></span><%t JonoM\BetterNavigator.DEV_MODE_LABEL 'Dev mode' %></a>
|
||||
<li><a href="{$AbsoluteLink}?isDev=1"><span class="bn-icon-devmode"></span><%t JonoM\BetterNavigator.DEV_MODE_LABEL 'Dev mode' %></a></li>
|
||||
<% end_if %>
|
||||
|
||||
<a href="{$AbsoluteLink}?flush=1"
|
||||
<li><a href="{$AbsoluteLink}?flush=1"
|
||||
title="<%t JonoM\BetterNavigator.FLUSH_CACHE_TITLE 'Flush templates and manifest, and regenerate images for this page (behaviour varies by Framework version)' %>"
|
||||
>
|
||||
<span class="bn-icon-flush"></span><%t JonoM\BetterNavigator.FLUSH_CACHE_LABEL 'Flush caches' %>
|
||||
</a>
|
||||
<a href="/dev/build/?flush=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="/dev/build/?flush=1"
|
||||
target="_blank"
|
||||
title="<%t JonoM\BetterNavigator.BUILD_DATABASE_TITLE 'Build database and flush caches (excludes template caches pre SS-3.1.7)' %>"
|
||||
>
|
||||
<span class="bn-icon-db"></span><%t JonoM\BetterNavigator.BUILD_DATABASE_LABEL 'Build database' %>
|
||||
</a>
|
||||
<a href="/dev/" target="_blank"><span class="bn-icon-tools"></span><%t JonoM\BetterNavigator.DEV_MENU_LABEL 'Dev menu' %></a>
|
||||
</a></li>
|
||||
|
||||
</div>
|
||||
<li><a href="/dev/" target="_blank"><span class="bn-icon-tools"></span><%t JonoM\BetterNavigator.DEV_MENU_LABEL 'Dev menu' %></a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<% include JonoM\BetterNavigator\BetterNavigatorExtraDevTools %>
|
||||
|
||||
|
|
@ -76,47 +79,53 @@
|
|||
|
||||
<% if $Mode == 'dev' %>
|
||||
|
||||
<div class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></div>
|
||||
<h2 class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></h2>
|
||||
|
||||
<div class="bn-links">
|
||||
<ul class="bn-links">
|
||||
|
||||
<a href="{$AbsoluteLink}?showtemplate=1"
|
||||
<li><a href="{$AbsoluteLink}?showtemplate=1"
|
||||
title="<%t JonoM\BetterNavigator.SHOW_TEMPLATE_TITLE 'Show the compiled version of all the templates used, including line numbers. Good when you have a syntax error in a template. Cannot be used on a Live site without isDev' %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.SHOW_TEMPLATE_LABEL 'Show template' %>
|
||||
</a>
|
||||
<a href="{$AbsoluteLink}?execmetric=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="{$AbsoluteLink}?execmetric=1"
|
||||
title="<%t JonoM\BetterNavigator.EXEC_METRIC_TITLE 'Display the execution time and peak memory usage for the request' %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.SHOW_METRICS_LABEL 'Show metrics' %>
|
||||
</a>
|
||||
<a href="{$AbsoluteLink}?debug=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="{$AbsoluteLink}?debug=1"
|
||||
title="<%t JonoM\BetterNavigator.DEBUG_PAGE_TITLE 'Show a collection of debugging information about the director / controller operation' %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.DEBUG_PAGE_LABEL 'Debug page' %>
|
||||
</a>
|
||||
<a href="{$AbsoluteLink}?debug_request=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="{$AbsoluteLink}?debug_request=1"
|
||||
title="<%t JonoM\BetterNavigator.DEBUG_REQUEST_TITLE 'Show all steps of the request from initial HTTPRequest to Controller to Template Rendering' %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.DEBUG_REQUEST_LABEL 'Debug request' %>
|
||||
</a>
|
||||
<a href="{$AbsoluteLink}?debugfailover=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="{$AbsoluteLink}?debugfailover=1"
|
||||
title="<%t JonoM\BetterNavigator.DEBUG_FAILOVER_TITLE 'Shows failover methods from classes extended' %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.DEBUG_FAILOVER_LABEL 'Debug failover' %>
|
||||
</a>
|
||||
<a href="{$AbsoluteLink}?showqueries=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="{$AbsoluteLink}?showqueries=1"
|
||||
title="<%t JonoM\BetterNavigator.SHOW_QUERIES_TITLE 'List all SQL queries executed' %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.SHOW_QUERIES_LABEL 'Show queries' %>
|
||||
</a>
|
||||
<a href="{$AbsoluteLink}?previewwrite=1"
|
||||
</a></li>
|
||||
|
||||
<li><a href="{$AbsoluteLink}?previewwrite=1"
|
||||
title="<%t JonoM\BetterNavigator.PREVIEW_WRITE_TITLE "List all insert / update SQL queries, and don't execute them. Useful for previewing writes to the database" %>"
|
||||
>
|
||||
<span class="bn-icon-info"></span><%t JonoM\BetterNavigator.PREVIEW_WRITE_LABEL 'Preview write' %>
|
||||
</a>
|
||||
</a></li>
|
||||
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<% include JonoM\BetterNavigator\BetterNavigatorExtraDebugging %>
|
||||
|
||||
|
|
@ -124,7 +133,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="application/javascript" src="$ScriptUrl"></script>
|
||||
<link rel="stylesheet" href="$CssUrl" />
|
||||
<script src="$ScriptUrl" async></script>
|
||||
<link rel="stylesheet" href="$CssUrl">
|
||||
|
|
|
|||
Loading…
Reference in New Issue