Skip to content

Commit

Permalink
Hide cookie consent in media print styles
Browse files Browse the repository at this point in the history 
- Also reorder css properties based on stylelint rules
  • Loading branch information
@roelandvs
roelandvs committed Jan 25, 2024
1 parent d528068 commit 522cdfb
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 53 deletions.
44 changes: 28 additions & 16 deletions src/dialog.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,27 +26,39 @@ const Dialog = ({ config, preferences }) => {
return DIALOG_TEMPLATE(templateVars);
}

return `
<aside id="${PREFIX}" class="${PREFIX} js-cookie-bar" role="dialog" aria-live="polite" aria-describedby="${PREFIX}-description" aria-hidden="true" tabindex="0">
<!--googleoff: all-->
<header class="${PREFIX}__header" id="${PREFIX}-description">
<h2>${config.get('labels.title')}</h2>
${config.get('labels.description')}
</header>
<form>
<button class="${PREFIX}__button" aria-label="${config.get('labels.aria.button')}">
<span>${config.get('labels.button.default')}</span>
</button>
</form>
<!--googleon: all-->
</aside>
`;
const template = `
<aside id="${PREFIX}" class="${PREFIX} js-cookie-bar" role="dialog" aria-live="polite" aria-describedby="${PREFIX}-description" aria-hidden="true" tabindex="0">
<!--googleoff: all-->
<header class="${PREFIX}__header" id="${PREFIX}-description">
<h1>${config.get('labels.title')}</h1>
${config.get('labels.description')}
</header>
<form>
<button class="${PREFIX}__button" aria-label="${config.get('labels.aria.button')}">
<span>${config.get('labels.button.default')}</span>
</button>
</form>
<!--googleon: all-->
</aside>`;

const dialogElement = htmlToElement(template);

dialogElement.insertAdjacentHTML('afterbegin', `
<style>
@media print {
.${PREFIX} {
display: none;
}
}
</style>`);

return dialogElement;
};

/**
* Dialog and form elements.
*/
const dialog = htmlToElement(renderDialog());
const dialog = renderDialog();
const form = dialog.querySelector('form');
const button = form.querySelector('button');

Expand Down
126 changes: 89 additions & 37 deletions styles/cookie-consent.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,37 @@
$cookie-consent-breakpoint: 40em;
$cookie-consent-dark: #000000;
$cookie-consent-light: #FFFFFF;
$cookie-consent-light: #ffffff;
$cookie-consent-horizontal-padding: 25px;

.cookie-consent {
overflow: hidden;
overflow-y: auto;
z-index: 1000;
position: fixed;
right: 0;
bottom: 0;
left: 0;
max-height: 100%;
background: $cookie-consent-light;
color: $cookie-consent-dark;
box-shadow: 0 0 5px 0 rgba($cookie-consent-dark, 0.3);
transform: translate3d(0, 0, 0);
transition: transform 0.5s, opacity 0.5s, visibility 0.5s;
overscroll-behavior: contain;
// Standardized (currently only Firefox, plus on macOS only when system
// preferences are set to always show scrollbars).
// sass-lint:disable no-misspelled-properties
scrollbar-color: $cookie-consent-dark transparent;
scrollbar-width: thin;

@media (min-width: $cookie-consent-breakpoint) {
right: 25px;
bottom: 25px;
left: auto;
max-width: 400px;
max-height: calc(100% - 50px);
}

// sass-lint:enable no-misspelled-properties
// WebKit only (Chrome, Safari, Edge).
&::-webkit-scrollbar-track {
Expand All @@ -20,25 +43,18 @@ $cookie-consent-horizontal-padding: 25px;
}
&::-webkit-scrollbar-thumb {
background-color: $cookie-consent-dark;
border: 3px solid transparent;
border-top: 0; border-bottom: 0;
background-clip: padding-box;
}
z-index: 1000; position: fixed; right: 0; bottom: 0; left: 0;
max-height: 100%; overflow: hidden; overflow-y: auto; overscroll-behavior: contain;
background: $cookie-consent-light;
box-shadow: 0 0 5px 0 rgba($cookie-consent-dark, 0.3);
color: $cookie-consent-dark;
transform: translate3d(0, 0, 0);
transition: transform 0.5s, opacity 0.5s, visibility 0.5s;
@media (min-width: $cookie-consent-breakpoint) {
right: 25px; bottom: 25px; left: auto;
max-width: 400px; max-height: calc(100% - 50px);
border: 3px solid transparent;
border-top: 0;
border-bottom: 0;
}
}
.cookie-consent[aria-hidden="true"] {
visibility: hidden; opacity: 0; pointer-events: none;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translate(0, 100px);

@media (min-width: $cookie-consent-breakpoint) {
transform: translate(100px, 0);
}
Expand All @@ -48,10 +64,14 @@ $cookie-consent-horizontal-padding: 25px;
* Header
*/
.cookie-consent__header {
padding: 20px $cookie-consent-horizontal-padding; font-size: 0.8em;
padding: 20px $cookie-consent-horizontal-padding;
font-size: 0.8em;
}
.cookie-consent__header h1 {
margin: 0 auto 0.5em; font-size: 20px; line-height: 1.2;
margin: 0 auto 0.5em;
font-size: 20px;
line-height: 1.2;

@media (min-width: $cookie-consent-breakpoint) {
font-size: 28px;
}
Expand All @@ -64,22 +84,29 @@ $cookie-consent-horizontal-padding: 25px;
* Tabs
*/
.cookie-consent__tab-list {
margin: 0; padding: 0; list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.cookie-consent__tab-list li {
margin: 0; border-top: 1px solid rgba($cookie-consent-dark, 0.1);
margin: 0;
border-top: 1px solid rgba($cookie-consent-dark, 0.1);
}
.cookie-consent__tab {
display: flex; align-items: stretch;
display: flex;
align-items: stretch;
}

/**
* Tab option (label with input in it) & tab toggle
*/
.cookie-consent__option {
flex: 1 1 auto; display: flex; align-items: center;
display: flex;
flex: 1 1 auto;
align-items: center;
padding: 15px $cookie-consent-horizontal-padding 17px;
font-size: 0.9em; user-select: none;
user-select: none;
font-size: 0.9em;
}
.cookie-consent__option input {
margin-right: 10px;
Expand All @@ -88,17 +115,27 @@ $cookie-consent-horizontal-padding: 25px;
background: rgba($cookie-consent-dark, 0.05);
}
.cookie-consent__tab-toggle {
position: relative; flex: 0 0 auto;
display: block; width: 55px; min-height: 55px; padding: 10px;
background: rgba($cookie-consent-dark, 0.1); line-height: 0;
position: relative;
display: block;
flex: 0 0 auto;
width: 55px;
min-height: 55px;
padding: 10px;
background: rgba($cookie-consent-dark, 0.1);
line-height: 0;
}
.cookie-consent__tab-toggle:hover {
background: rgba($cookie-consent-dark, 0.2);
}
.cookie-consent__tab-toggle > svg {
position: absolute; top: 50%; left: 50%;
margin-top: -6px; margin-left: -9px;
width: 18px; height: 11px; fill: $cookie-consent-dark;
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 11px;
margin-top: -6px;
margin-left: -9px;
fill: $cookie-consent-dark;
}
.cookie-consent__tab-toggle[aria-selected="true"] > svg {
transform: scaleY(-1);
Expand All @@ -108,30 +145,45 @@ $cookie-consent-horizontal-padding: 25px;
* Tab panel (with description)
*/
.cookie-consent__tab-panel {
position: relative; overflow: hidden;
overflow: hidden;
position: relative;
transition: all 0.35s;
}
.cookie-consent__tab-panel[aria-hidden="true"] {
display: none;
}
.cookie-consent__tab-description {
padding: 20px $cookie-consent-horizontal-padding;
background: rgba($cookie-consent-dark, 0.05); font-size: 0.8em;
background: rgba($cookie-consent-dark, 0.05);
font-size: 0.8em;
}
.cookie-consent__tab-description::after {
content: '';
position: absolute; top: 0; left: 25px; width: 0; height: 0;
border: 8px solid transparent; border-top-color: $cookie-consent-light; border-bottom: 0;
content: "";
position: absolute;
top: 0;
left: 25px;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $cookie-consent-light;
border-bottom: 0;
}

/**
* Button
*/
.cookie-consent__button {
width: 100%; min-height: 55px;
background: $cookie-consent-dark; border: 0; color: $cookie-consent-light;
font-weight: bold; line-height: 1.1; text-decoration: none; text-align: center;
cursor: pointer; appearance: none;
width: 100%;
min-height: 55px;
background: $cookie-consent-dark;
color: $cookie-consent-light;
cursor: pointer;
font-weight: bold;
line-height: 1.1;
text-align: center;
text-decoration: none;
border: 0;
appearance: none;
}
.cookie-consent__button:hover,
.cookie-consent__button:focus {
Expand Down

0 comments on commit 522cdfb

Please sign in to comment.