Skip to content

Instantly share code, notes, and snippets.

@guzart

guzart/inde.html

Created June 24, 2019 20:28
Show Gist options
  • Save guzart/60cddbe6c3c3fb262126a14d77e9aab6 to your computer and use it in GitHub Desktop.
Save guzart/60cddbe6c3c3fb262126a14d77e9aab6 to your computer and use it in GitHub Desktop.
Download ZIP
Smashing Dequeue Workshop
Raw
inde.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipe Dashboard</title>
<script src="https://use.fontawesome.com/99d8f1b106.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
</head>
<body class="dqpl-no-sidebar">
<div id="app">
<div class="App">
<nav class="dqpl-skip-container">
<a href="#main-content" class="dqpl-skip-link">
<span class="dqpl-skip-one">Skip to</span>
<span class="dqpl-skip-two">Main Content</span></a></nav>
<div class="dqpl-top-bar" role="banner">
<ul role="menubar">
<li tabindex="0" role="menuitem"><span>awesome recipes</span></li>
</ul>
</div>
<div class="dqpl-layout">
<div class="dqpl-main-content" role="main" id="main-content" aria-labelledby="main-heading" tabindex="-1">
<div class="App__head">
<div class="confined">
<h1 id="main-heading">Recipe Dashboard</h1>
</div>
</div>
<button type="button" class="Edit">
<span aria-hidden="true" class="fa fa-pencil"></span>
</button>
<div class="Modal" role="dialog" aria-modal="false" aria-labelledby="edit-recipe-title">
<h2 id="edit-recipe-title" tabindex="-1">
Edit Recipe
</h2>
<button class="Close" aria-label="Close Modal">X</button>
MODAL CONTENT GOES HERE
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
<a href="#main-content" class="dqpl-skip-link">
<span class="dqpl-skip-one">Skip to</span>
<span class="dqpl-skip-two">Main Content</span></a></nav>
</html>
Raw
index.css
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
h1 {
font-size: 26px;
color: #333;
font-weight: 400;
}
h2 {
font-size: 28px;
color: #666;
}
h3 {
font-size: 24px;
color: #333;
font-weight: 400;
}
body .dqpl-top-bar [role='menubar'],
.confined {
max-width: 1024px;
margin: 0 auto;
}
body .dqpl-top-bar [role='menubar'] > li:first-child {
border-left: 1px solid #5a6268;
border-right: 1px solid #5a6268;
}
body .dqpl-layout,
body .dqpl-layout .dqpl-main-content {
padding: 0;
}
.App .dqpl-top-bar img {
width: 30px;
}
.App .App__head {
background: #f2f2f2;
border-bottom: 1px solid #ccc;
z-index: 2;
}
.App .App__head,
.App .dqpl-main-content {
width: 100%;
min-width: 1024px;
}
.App .dqpl-layout {
overflow-x: auto;
}
.App .App__head h1 {
text-transform: uppercase;
margin-left: 10px;
}
.App .dqpl-field-wrap {
margin-bottom: 0;
}
.App .dqpl-content {
max-height: calc(100vh - 300px);
}
.Stats {
border-bottom: 1px solid #ccc;
}
.Stats .confined {
display: flex;
justify-content: center;
}
.App .dqpl-layout .dqpl-main-content {
border: none;
}
.App .dqpl-layout .dqpl-main-content::before {
content: '';
position: absolute;
background-color: transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
top: 70px;
left: 9px;
bottom: 0;
width: 18px;
}
.App .dqpl-layout .dqpl-main-content:focus::before {
border-left: 6px solid #fdfdfe;
border-right: 6px solid #fdfdfe;
background-color: #283640;
}
.App .dqpl-modal .dqpl-dialog-inner .dqpl-modal-header h2 {
padding: 10px 24px;
}
.App .Edit {
margin: 25px auto;
font-size: 30px;
background: #f2f2f2;
box-shadow: 0 0 1px #000;
}
.Modal {
border: solid 1px black;
width: 500px;
height: 500px;
}
.Modal[aria-modal="false"] {
display: none;
}
.Modal[aria-modal="true"] {
display: block;
}
.Modal h2:focus {
color: red;
}
Raw
index.js
import delegate from 'delegate';
import './index.css';
import 'deque-pattern-library/dist/css/pattern-library.min.css';
import 'deque-pattern-library/dist/js/pattern-library.min.js';
const editButton = document.querySelector('.Edit');
editButton.addEventListener('click', () => {
const modal = document.querySelector('.Modal');
modal.setAttribute('aria-modal', 'true')
const heading = modal.querySelector('h2');
heading.focus();
});
const closeButton = document.querySelector('.Close')
closeButton.addEventListener('click', () => {
const modal = document.querySelector('.Modal');
modal.setAttribute('aria-modal', 'false');
})
/**
* Example delegated modal keydown listener
* NOTE: For this to work, uncomment out lines 20-22 (and line 1!)
* and add the following to the index.html file:
* ```html
* <div class="Modal">MODAL CONTENT GOES HERE</div>
* ```
*/
delegate('.Modal', 'keydown', e => {
const modal = document.querySelector('.Modal');
if (e.key === 'Escape') {
modal.setAttribute('aria-modal', 'false')
}
if (e.key === 'Tab') {
const focusableElements = Array.from(modal.querySelectorAll('a,button,input,select'));
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
const firstFocusableIsActive = e.target === firstFocusableElement;
const lastFocusableElementIsActive = e.target === lastFocusableElement
const isShiftKeyPressed = e.shiftKey
if (isShiftKeyPressed && firstFocusableIsActive) {
e.preventDefault();
lastFocusableElement.focus()
} else if (!isShiftKeyPressed && lastFocusableElementIsActive) {
e.preventDefault()
firstFocusableElement.focus()
}
}
});
/**
* Here is an example recipe object:
{
"name": "Chocolate Cake",
"date": "11/17/2018",
"cookCount": 4,
"image": "/food/cake.png",
"prepTime": "20 min",
"cookTime": "30 min",
"difficulty": "Beginner",
"greaseFireCount": 2,
"yumminess": 42,
"ingredients": [
"2 cups white sugar",
"1 3/4 cups of all-purpose flour",
"3/4 cup unsweetened cocoa powder",
"1 1/2 teaspoons baking powder",
"1 1/2 teaspoons baking soda",
"1 teaspoon of salt",
"2 eggs",
"1 cup milk",
"1/2 cup vegetable oil",
"2 teaspoons vanilla extract",
"1 cup boiling water"
],
"instructions": [
"Preheat oven to 350 degrees F (175 degrees C)",
"In a large bowl, stir together the sugar, flour, cocoa, baking poweder, baking soda and salt. Add the eggs, milk, oil and vanilla, mix for 2 mins on medium speed of mixer. Stir in the boiling water last. Batter will be thin. Pour evenly into prepared pans.",
"Bake 30 to 35 minutes in the preheated oven, until the cake tests done with a toothpick. Cool in the pans for 10 minutes, then remove to a wire rack to completely cool down."
]
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment