wcrisman/avusd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed the issues with the custom fonts not being used (sometimes they are ignored if other options exist); Added more OpenSans options; Switched to OpenSans in the menus for clarity and size reasons; Fixed the menu closing on focus lost issues.

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2021-03-17 13:55:04 -07:00
parent 93292040f2
commit 2610b82439
12 changed files with 191 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/modules/apostrophe-assets/public/css/bootstrap.css vendored
View File

@@ -541,8 +541,8 @@ pre code {
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
//padding-right: 15px;
//padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

30
lib/modules/apostrophe-assets/public/css/main.css
View File

@@ -45,7 +45,7 @@ p {
text-indent: 0;
margin: 0.3rem 0 0.7rem 0 !important;
padding: 0 !important;
font-family: "Merriweather", "serif";
font-family: Merriweather;
font-size: 1.1rem;
line-height: 1.4rem;
}
@@ -58,7 +58,7 @@ p.indent {
text-indent: 0;
margin: 0.3rem 0 0.7rem 0;
padding: 0.25rem 0;
font-family: "Merriweather", "serif";
font-family: Merriweather;
font-size: 1.1rem;
line-height: 1.4rem;
}
@@ -70,12 +70,12 @@ p.indent {
padding-left: 1rem;
}
.apos-rich-text th {
font-family: "MerriweatherSans", "sans-serif";
font-family: MerriweatherSans;
font-weight: 700;
}
h2.h2, h3.h3, h4.h4 {
font-family: "MerriweatherSans", "sans-serif";
font-family: MerriweatherSans;
margin-bottom: 1rem;
}
@@ -90,27 +90,27 @@ p + h2.h2, p + h3.h3, p + h4.h4, ul + h2.h2, ul + h3.h3, ul + h4.h4, ol + h2.h2,
h2.h2 {
font-size: 2.2rem;
line-height: 2.8rem;
font-family: "MerriweatherSans", "sans-serif";
font-family: MerriweatherSans;
font-weight: 700;
}
h3.h3 {
font-size: 1.5rem;
line-height: 2rem;
font-family: "MerriweatherSans", "sans-serif";
font-family: MerriweatherSans;
font-weight: 700;
}
h4.h4 {
font-size: 1.2rem;
line-height: 1.5rem;
font-family: "MerriweatherSans", "sans-serif";
font-family: MerriweatherSans;
font-weight: 900;
}
div[data-apos-widget=apostrophe-files] a, .apos-rich-text a {
margin: 0.3rem 0 0.7rem 0 !important;
font-family: "MerriweatherSans", "sans-serif";
font-family: MerriweatherSans;
font-size: 1.4rem;
line-height: 1.6rem;
color: #1c1cc4;
@@ -169,7 +169,7 @@ h5 {
margin: 0.3rem 0 0.7rem 2rem;
text-indent: -1.5rem;
padding: 0;
font-family: "Merriweather", "serif";
font-family: Merriweather;
font-size: 1.1rem;
line-height: 1.4rem;
}
@@ -187,7 +187,7 @@ h5 {
margin: 0.3rem 0 0.7rem 2rem;
text-indent: -1.5rem;
padding: 0;
font-family: "Merriweather", "serif";
font-family: Merriweather;
font-size: 1.1rem;
line-height: 1.4rem;
}
@@ -200,7 +200,7 @@ h5 {
}
blockquote {
font-family: AlexBrush, Serif;
font-family: AlexBrush;
font-size: 1.2rem;
line-height: 1.3rem;
margin: 0.2rem 0;
@@ -219,7 +219,7 @@ blockquote:after, blockquote:before {
color: #666666;
}
blockquote p {
font-family: AlexBrush, Serif;
font-family: AlexBrush;
font-size: 2rem;
line-height: 2rem;
display: inline;
@@ -248,10 +248,10 @@ blockquote p {
}
.alert {
margin: 0;
padding: 0.4rem 0 0.4rem 1rem;
margin: 1.4rem 0;
padding: 0.4rem 0 0.4rem 0;
font-size: 1.3rem;
font-family: "Montserrat-ExtraBold", "sans-serif";
font-family: Montserrat-ExtraBold;
line-height: 1.4rem;
font-weight: 700;
color: #000;

30
lib/modules/apostrophe-assets/public/css/main.sass
View File

@@ -22,7 +22,7 @@ p
// Remove !important if we can figure out how to remove the style CKEditor outputs.
margin: 0.3rem 0 0.7rem 0 !important
padding: 0 !important
font-family: "Merriweather", "serif"
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
p.indent
@@ -33,7 +33,7 @@ p.indent
text-indent: 0
margin: 0.3rem 0 0.7rem 0
padding: 0.25rem 0
font-family: "Merriweather", "serif"
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
p
@@ -42,11 +42,11 @@ p.indent
td + td, th + th // All table data elements following another table data element should have a bit of space between element contents.
padding-left: 1rem
th
font-family: "MerriweatherSans", "sans-serif"
font-family: MerriweatherSans
font-weight: 700
h2.h2, h3.h3, h4.h4
font-family: "MerriweatherSans", "sans-serif"
font-family: MerriweatherSans
margin-bottom: 1rem
// Remove the margin-top from the paragraphs that follow a heading. Make !important because we have to override the styles set by CKEditor.
h2.h2 + p, h3.h3 + p, h4.h4 + p
@@ -57,24 +57,24 @@ p + h2.h2, p + h3.h3, p + h4.h4, ul + h2.h2, ul + h3.h3, ul + h4.h4, ol + h2.h2,
h2.h2
font-size: 2.2rem
line-height: 2.8rem
font-family: "MerriweatherSans", "sans-serif"
font-family: MerriweatherSans
font-weight: 700
h3.h3
font-size: 1.5rem
line-height: 2rem
font-family: "MerriweatherSans", "sans-serif"
font-family: MerriweatherSans
font-weight: 700
h4.h4
font-size: 1.2rem
line-height: 1.5rem
font-family: "MerriweatherSans", "sans-serif"
font-family: MerriweatherSans
font-weight: 900
//Links using Apostrophe Files or Rich Text Widgets
div[data-apos-widget='apostrophe-files'], .apos-rich-text
a
margin: 0.3rem 0 0.7rem 0 !important
font-family: "MerriweatherSans", 'sans-serif'
font-family: MerriweatherSans
font-size: 1.4rem
line-height: 1.6rem
color: #1c1cc4
@@ -123,7 +123,7 @@ h5
margin: 0.3rem 0 0.7rem 2rem
text-indent: -1.5rem
padding: 0
font-family: "Merriweather", "serif"
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
.apos-rich-text ul ul
@@ -138,7 +138,7 @@ h5
margin: 0.3rem 0 0.7rem 2rem
text-indent: -1.5rem
padding: 0
font-family: "Merriweather", "serif"
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
.apos-rich-text ol ol
@@ -148,7 +148,7 @@ h5
list-style-position: inside
blockquote
font-family: AlexBrush, Serif
font-family: AlexBrush
font-size: 1.2rem
line-height: 1.3rem
margin: .2rem 0
@@ -163,7 +163,7 @@ blockquote
top: 0.5rem
color: lighten(#000, 40%)
p
font-family: AlexBrush, Serif
font-family: AlexBrush
font-size: 2rem
line-height: 2rem
display: inline
@@ -189,10 +189,10 @@ blockquote
.alert
//background: #581d17
margin: 0
padding: 0.4rem 0 0.4rem 1rem
margin: 1.4rem 0
padding: 0.4rem 0 0.4rem 0
font-size: 1.3rem
font-family: "Montserrat-ExtraBold", "sans-serif"
font-family: Montserrat-ExtraBold
line-height: 1.4rem
font-weight: 700
color: #000

39
lib/modules/apostrophe-assets/public/css/menu.css
View File

@@ -24,6 +24,22 @@
font-family: "OpenSans";
src: url("/modules/theme/fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansLight";
src: url("/modules/theme/fonts/OpenSans-Light.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansSemiBold";
src: url("/modules/theme/fonts/OpenSans-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansBold";
src: url("/modules/theme/fonts/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansExtraBold";
src: url("/modules/theme/fonts/OpenSans-ExtraBold.ttf") format("truetype");
}
.navbar {
overflow: visible;
background-color: #333;
@@ -120,16 +136,20 @@
border-top: white 1rem solid;
}
.navbar .dropdown-content h1 {
font-size: 3rem;
font-family: Roboto Arial sans-serif;
font-family: OpenSansBold;
font-size: 2rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
margin: 0.6rem 0 0.6rem 0;
color: #c2e09d;
border-bottom: 2px solid grey;
width: 100%;
}
.navbar .dropdown-content h2 {
font-size: 1.5rem;
font-family: Roboto Arial sans-serif;
font-family: OpenSansSemiBold;
font-size: 1.2rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
margin: 0.6rem 0 0.4rem 0;
border-bottom: #656565 1.5px dashed;
color: #CCC;
@@ -138,8 +158,9 @@
width: 100%;
}
.navbar .dropdown-content a {
font-size: 1rem;
font-family: Roboto Arial sans-serif;
font-size: 0.9rem;
font-family: OpenSans;
letter-spacing: 0.05rem;
color: white;
text-decoration: none;
margin: 0.5rem 0 0.5rem 0.6rem;
@@ -149,6 +170,12 @@
color: #ff7700;
text-decoration: underline;
}
.navbar .dropdown-content a sup {
font-size: 0.6rem;
font-family: OpenSansLight;
letter-spacing: 0.05rem;
top: -0.6rem;
}
@media only screen and (max-width: 500px) {
.navbar {

2
lib/modules/apostrophe-assets/public/css/menu.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["common.sass","menu.sass"],"names":[],"mappings":"AAAA;EACC;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;;ACdD;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AACD;EACC;EACA;;AACD;EACC;;AAGD;EACC;EACA;EACA;;AACD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;EACA;EACA;EAEA;EACA;;AACD;EACC;EACA;EACA;EACA;EACA;;AACD;EACC;;AACD;EAEC;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;EACA;;;AAiBH;EACC;IACC;;EAEC;IACC;;EACD;IACC;;EACD;IACC","file":"menu.css"}
{"version":3,"sourceRoot":"","sources":["common.sass","menu.sass"],"names":[],"mappings":"AAAA;EACC;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;;ACdD;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AACD;EACC;EACA;;AACD;EACC;;AAGD;EACC;EACA;EACA;;AACD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAGC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACD;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;;AACD;EAEC;EAEA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;EACA;;;AAiBJ;EACC;IACC;;EAEC;IACC;;EACD;IACC;;EACD;IACC","file":"menu.css"}

45
lib/modules/apostrophe-assets/public/css/menu.sass
View File

@@ -3,6 +3,18 @@
@font-face
font-family: "OpenSans"
src: url('/modules/theme/fonts/OpenSans-Regular.ttf') format("truetype")
@font-face
font-family: "OpenSansLight"
src: url('/modules/theme/fonts/OpenSans-Light.ttf') format("truetype")
@font-face
font-family: "OpenSansSemiBold"
src: url('/modules/theme/fonts/OpenSans-SemiBold.ttf') format("truetype")
@font-face
font-family: "OpenSansBold"
src: url('/modules/theme/fonts/OpenSans-Bold.ttf') format("truetype")
@font-face
font-family: "OpenSansExtraBold"
src: url('/modules/theme/fonts/OpenSans-ExtraBold.ttf') format("truetype")
.navbar
overflow: visible
@@ -95,16 +107,24 @@
border-top: white 1rem solid
.dropdown-content
h1
font-size: 3rem
font-family: Roboto Arial sans-serif
//font-size: 3rem
//font-family: Roboto Arial sans-serif
font-family: OpenSansBold
font-size: 2rem
letter-spacing: .1rem
text-transform: uppercase
margin: .6rem 0 .6rem 0
color: #c2e09d
//background-color: #555
border-bottom: 2px solid grey
width: 100%
h2
font-size: 1.5rem
font-family: Roboto Arial sans-serif
//font-size: 1.5rem
//font-family: Roboto Arial sans-serif
font-family: OpenSansSemiBold
font-size: 1.2rem
letter-spacing: .1rem
text-transform: uppercase
margin: .6rem 0 .4rem 0
border-bottom: #656565 1.5px dashed
color: #CCC
@@ -112,15 +132,22 @@
width: 100%
a
@extend .noselect
font-size: 1rem
font-family: Roboto Arial sans-serif
font-size: 0.9rem
//font-family: Roboto
font-family: OpenSans
letter-spacing: 0.05rem
color: white
text-decoration: none
margin: .5rem 0 .5rem .6rem
display: block
a:hover
color: #ff7700
text-decoration: underline
&:hover
color: #ff7700
text-decoration: underline
sup
font-size: 0.6rem
font-family: OpenSansLight
letter-spacing: 0.05rem
top: -0.6rem
//
//@media only screen and (max-width: 950px)

71
lib/modules/apostrophe-assets/public/js/site.js
View File

@@ -11,32 +11,73 @@ $(function() {
//
let $topMenuItems = $("nav.navbar ul > li");
let $topMenuContent = $("nav.navbar ul > li > div.dropdown-content");
// Handle the menu losing focus. This should remove visibility of the menu normally, but not when the click will result in one of the menus from displaying or hiding (clicking the same menu button).
$topMenuContent.focusout(function(event) {
let currentTarget = $(event.currentTarget);
// Get the element that focus is switching to. This is held by the focus event that caused the focusout event to fire.
let focused = event.originalEvent.target;
// Test whether the newly focused element is one of the navigation elements.
let isNav = $(focused).parents("nav.navbar ul > li").length > 0;
// let $topMenuContent = $("nav.navbar ul > li > div.dropdown-content");
// Hide the menu if the newly focused element isn't one of the menu elements.
if(!isNav) {
currentTarget.parent().removeClass('display');
}
});
// function focusLost(event) {
// let currentTarget = $(event.currentTarget);
// // Get the element that focus is switching to. This is held by the focus event that caused the focusout event to fire.
// //let focused = event.originalEvent ? event.originalEvent.target : null;
// // Test whether the newly focused element is one of the navigation elements.
// //let isNav = focused ? $(focused).parents("nav.navbar ul > li").length > 0 : false;
//
// // Hide the menu if the newly focused element isn't one of the menu elements.
// //if(!isNav) {
// //currentTarget.parent().removeClass('display');
// //}
//
// //When clicking the same link (to close the menu) there is a race condition where the focusLost event might happen before the click event, in which case the menu flashes.
// //To fix this we will detect the special case of the user clicking the same link that is open, and ignoring the focus out in that event.
//
// if(currentTarget.is("li")) {
// setTimeout(() => currentTarget.removeClass('display'), 200);
// }
// }
// Handle the menu losing focus. This should remove visibility of the menu normally, but not when the click will result in one of the menus from displaying or hiding (clicking the same menu button).
//$topMenuContent.focusout(function(event) {
// focusLost(event);
//});
//$topMenuItems.focusout(function(event) {
// focusLost(event);
//});
// Handle one of the top level menu items being clicked. This normally shows the mega menu div and chevron by applying a "display" class to the li element for the menu.
// If the menu already is open then the menu should close. If another menu was already open then close it here so that there is a nice smooth transition.
$topMenuItems.click((event) => {
let $clickedMenuItem = $(event.currentTarget);
if($clickedMenuItem.hasClass('display')) {
$clickedMenuItem.removeClass('display');
$topMenuItems.removeClass('display');
}
else {
$topMenuItems.removeClass('display');
$clickedMenuItem.addClass('display');
//My attempts to set a specific handler. HTML just sucks at navigation management.
// let $menuContent = $clickedMenuItem.children('div.dropdown-content');
// function eventHandler(event) {
// lostFocus(event, eventHandler, $clickedMenuItem);
// }
// //$menuContent.find(':focusable').first().focus();
// $(document).focusout(eventHandler);
}
});
//
// I have been forced to use this general focusout handle to detect when the user leaves the menu so we can close it.
// Originally I tried to register a focusout handler on the menu when it opened, but ultimately it wasn't possible.
// I then tried to setup a background div that would capture clicks outside the menu, but that was not working and would have not been great anyway.
//
$(document).focusout(function(event) {
//Give time for the focus event to complete first. This way we can call document.activeElement and actually get it.
setTimeout(() => {
// Find the active menu (if there is one).
let $content = $('li.display div.dropdown-content');
// If there is an active menu, check to see if the active element is a child of the menu. If not then close the menu.
if($content.length && !$.contains($content[0], document.activeElement)) {
$content.parents('li.display').removeClass('display');
}
}, 50);
});
});