Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-09-24 03:18:21 +02:00
Code Issues Releases Wiki Activity

Cleaned up search modal styles

Browse Source
This commit is contained in:
squidfunk 2016-10-23 19:31:54 +02:00
parent e61f12d429
commit 83c5c7512b
15 changed files with 1024 additions and 1098 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -1,4 +1,3 @@
/build
/material
/site
/lib

6
.sass-lint.yml
View File

@ -73,7 +73,9 @@ rules:
- break-at-device
- break-from-device
- break-to-device
nesting-depth: 2
nesting-depth:
- 2
- max-depth: 3
no-color-keywords: 2
no-color-literals: 2
no-css-comments: 2
@ -100,7 +102,7 @@ rules:
- order: smacss
property-units:
- 2
- global: [rem, em, s]
- global: [rem, em, s, vh]
pseudo-element: 2
quotes:
- 2

2
lib/providers/jsx.js
View File

@ -31,7 +31,7 @@ export default /* JSX */ {
*
* @param {string} tag - Tag name
* @param {object} properties - Properties
* @param {string|number|Array} children - Child nodes
* @param {...(string|number|Array)} children - Child nodes
* @return {HTMLElement} Native DOM node
*/
createElement(tag, properties, ...children) {

163
material/assets/javascripts/application.js
View File

@ -2,41 +2,41 @@ var Application =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
@ -175,58 +175,72 @@ var Application =
/* Attack FastClick to mitigate 300ms delay on touch devices */
_fastclick2.default.attach(document.body);
var query = document.getElementById("query");
query.addEventListener("focus", function () {
document.querySelector(".md-search").dataset.mdLocked = "";
});
// const query = document.getElementById("query")
// query.addEventListener("focus", () => {
// document.querySelector(".md-search").dataset.mdLocked = ""
// })
/* Intercept click on search mode toggle */
var offset = 0;
var toggle = document.getElementById("search");
toggle.addEventListener("click", function () {
// TODO: click may be the wrong event...
var list = document.body; // classList md bla
var lock = !matchMedia("only screen and (min-width: 960px)").matches;
/* Exiting search mode */
if (list.dataset.mdLocked) {
delete list.dataset.mdLocked;
/* Scroll to former position, but wait for 100ms to prevent flashes
on iOS. A short timeout seems to do the trick */
if (lock) setTimeout(function () {
window.scrollTo(0, offset);
}, 100);
/* Entering search mode */
} else {
offset = window.scrollY;
/* First timeout: scroll to top after transition, to omit flickering */
if (lock) setTimeout(function () {
window.scrollTo(0, 0);
}, 400);
/* Second timeout: Lock body after finishing transition and scrolling to
top and focus input field. Sadly, the focus event is not dispatched
on iOS Safari and there's nothing we can do about it. */
setTimeout(function () {
/* This additional check is necessary to handle fast subsequent clicks
on the toggle and the timeout to lock the body must be cancelled */
// if (ev.target.checked) {
if (lock) list.dataset.mdLocked = "";
setTimeout(function () {
document.getElementById("query").focus();
}, 200);
// const toggle = document.getElementById("search")
// toggle.addEventListener("click", () => { // TODO: click may be the wrong event...
// const list = document.body // classList md bla
// const lock = !matchMedia("only screen and (min-width: 960px)").matches
//
// /* Exiting search mode */
// if (list.dataset.mdLocked) {
// delete list.dataset.mdLocked
//
// /* Scroll to former position, but wait for 100ms to prevent flashes
// on iOS. A short timeout seems to do the trick */
// if (lock)
// setTimeout(() => {
// window.scrollTo(0, offset)
// }, 100)
//
// /* Entering search mode */
// } else {
// offset = window.scrollY
//
// /* First timeout: scroll to top after transition, to omit flickering */
// if (lock)
// setTimeout(() => {
// window.scrollTo(0, 0)
// }, 400)
//
// /* Second timeout: Lock body after finishing transition and scrolling to
// top and focus input field. Sadly, the focus event is not dispatched
// on iOS Safari and there's nothing we can do about it. */
// setTimeout(() => {
//
// /* This additional check is necessary to handle fast subsequent clicks
// on the toggle and the timeout to lock the body must be cancelled */
// // if (ev.target.checked) {
// if (lock)
// list.dataset.mdLocked = ""
// setTimeout(() => {
// document.getElementById("query").focus()
// }, 200)
// // }
// }, 450)
// }
}, 450);
}
});
// })
// TODO: only do this on MOBILE and TABLET
var toggleSearchClose = document.querySelector(".md-search__icon");
toggleSearchClose.setAttribute("for", "search"); // TODO: override query with search, when on mobile!!!
// const toggleSearchClose = document.querySelector(".md-search__icon")
// toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
document.getElementById("query").addEventListener("focus", function () {
document.getElementById("search").checked = true;
});
document.querySelector(".md-container").addEventListener("click", function () {
if (document.getElementById("search").checked) document.getElementById("search").checked = false;
});
// stop propagation, if search is active...
document.querySelector(".md-search").addEventListener("click", function (ev) {
ev.stopPropagation();
});
// toggleSearchClose.addEventListener("click", ev => {
// ev.preventDefault()
// // ev.target
@ -1260,7 +1274,7 @@ var Application =
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
/**
* lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.7.2
* lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.7.1
* Copyright (C) 2016 Oliver Nightingale
* @license MIT
*/
@ -1312,7 +1326,7 @@ var Application =
return idx;
};
lunr.version = "0.7.2";
lunr.version = "0.7.1";
/*!
* lunr.utils
* Copyright (C) 2016 Oliver Nightingale
@ -1444,12 +1458,12 @@ var Application =
/**
* A function for splitting a string into tokens ready to be inserted into
* the search index. Uses `lunr.tokenizer.separator` to split strings, change
* the search index. Uses `lunr.tokenizer.seperator` to split strings, change
* the value of this property to change how strings are split into tokens.
*
* @module
* @param {String} obj The string to convert into tokens
* @see lunr.tokenizer.separator
* @see lunr.tokenizer.seperator
* @returns {Array}
*/
lunr.tokenizer = function (obj) {
@ -1458,29 +1472,9 @@ var Application =
return lunr.utils.asString(t).toLowerCase();
});
// TODO: This exists so that the deprecated property lunr.tokenizer.seperator can still be used. By
// default it is set to false and so the correctly spelt lunr.tokenizer.separator is used unless
// the user is using the old property to customise the tokenizer.
//
// This should be removed when version 1.0.0 is released.
var separator = lunr.tokenizer.seperator || lunr.tokenizer.separator;
return obj.toString().trim().toLowerCase().split(separator);
return obj.toString().trim().toLowerCase().split(lunr.tokenizer.seperator);
};
/**
* This property is legacy alias for lunr.tokenizer.separator to maintain backwards compatability.
* When introduced the token was spelt incorrectly. It will remain until 1.0.0 when it will be removed,
* all code should use the correctly spelt lunr.tokenizer.separator property instead.
*
* @static
* @see lunr.tokenizer.separator
* @deprecated since 0.7.2 will be removed in 1.0.0
* @private
* @see lunr.tokenizer
*/
lunr.tokenizer.seperator = false;
/**
* The sperator used to split a string into tokens. Override this property to change the behaviour of
* `lunr.tokenizer` behaviour when tokenizing strings. By default this splits on whitespace and hyphens.
@ -1488,7 +1482,7 @@ var Application =
* @static
* @see lunr.tokenizer
*/
lunr.tokenizer.separator = /[\s\-]+/;
lunr.tokenizer.seperator = /[\s\-]+/;
/**
* Loads a previously serialised tokenizer.
@ -2215,7 +2209,7 @@ var Application =
idx._fields = serialisedData.fields;
idx._ref = serialisedData.ref;
idx.tokenizer(lunr.tokenizer.load(serialisedData.tokenizer));
idx.tokenizer = lunr.tokenizer.load(serialisedData.tokenizer);
idx.documentStore = lunr.Store.load(serialisedData.documentStore);
idx.tokenStore = lunr.TokenStore.load(serialisedData.tokenStore);
idx.corpusTokens = lunr.SortedSet.load(serialisedData.corpusTokens);
@ -3906,4 +3900,3 @@ var Application =
/***/ }
/******/ ]);
//# sourceMappingURL=application.js.map

201
material/assets/stylesheets/application.css
View File

@ -89,7 +89,7 @@ input {
border: 0;
outline: 0; }
.md-icon, .md-nav__title::before, .md-nav__link::after, .admonition-title::before, .footnote-backref, .md-search-term::before, .checklist li::before, .critic.comment::before {
.md-icon, .md-nav__title::before, .md-nav__link::after, .admonition-title::before, .footnote-backref, .checklist li::before, .critic.comment::before {
font-family: "Material Icons";
font-style: normal;
font-variant: normal;
@ -389,8 +389,7 @@ hr {
position: absolute;
bottom: 0;
width: 100%; }
.md-footer-pagination {
.md-footer__inner {
background: rgba(0, 0, 0, 0.87);
color: white; }
@ -486,20 +485,11 @@ hr {
.md-search__inner {
width: 100%; }
.md-search__icon {
position: absolute;
top: 0.8rem;
left: 1.2rem;
-webkit-transition: color 0.25s;
transition: color 0.25s;
font-size: 2.4rem;
cursor: pointer; }
.md-search__icon::before {
content: "search"; }
.md-search__input {
position: relative;
padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis; }
text-overflow: ellipsis;
z-index: 1; }
.md-search__input + .md-search__icon, .md-search__input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.54); }
.md-search__input + .md-search__icon, .md-search__input::-moz-placeholder {
@ -509,6 +499,34 @@ hr {
.md-search__input + .md-search__icon, .md-search__input::placeholder {
color: rgba(0, 0, 0, 0.54); }
.md-search__icon {
position: absolute;
top: 0.8rem;
left: 1.2rem;
-webkit-transition: color 0.25s;
transition: color 0.25s;
font-size: 2.4rem;
cursor: pointer;
z-index: 1; }
.md-search__icon::before {
content: "search"; }
.md-search__output {
width: 100%;
border-radius: 0 0 0.2rem 0.2rem;
overflow: hidden; }
.md-search__scrollwrap {
height: 100%;
background: -webkit-linear-gradient(top, white 10%, rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.07) 35%, transparent 60%);
background: linear-gradient(to bottom, white 10%, rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.07) 35%, transparent 60%);
background-attachment: local, scroll;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 2.0rem, 100% 1.0rem;
box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.07) inset;
overflow-y: auto; }
.md-sidebar {
position: relative;
width: 24.2rem;
@ -1016,17 +1034,6 @@ hr {
padding-top: 9rem;
content: ""; }
.md-search__output {
overflow-y: auto;
width: 100%;
opacity: 0;
-webkit-transition: opacity .4s, max-height .4s;
transition: opacity .4s, max-height .4s;
text-align: left;
z-index: -1; }
[data-md-locked] .md-search__output {
opacity: 1; }
.md-search-result__meta {
color: rgba(0, 0, 0, 0.54);
padding-left: 4.8rem;
@ -1062,24 +1069,6 @@ hr {
line-height: 1.4;
margin: 0.5em 0; }
.md-search-term {
position: relative;
padding: 0 0.8rem 0 4.8rem;
line-height: 4.0rem;
font-size: 1.6rem;
-webkit-transition: background .25s;
transition: background .25s;
cursor: pointer; }
.md-search-term::before {
position: absolute;
content: "access_time";
font-size: 2.4rem;
line-height: 4.0rem;
left: 1.2rem;
color: rgba(0, 0, 0, 0.26); }
.md-search-term:hover {
background: #eceef8; }
.checklist li {
position: relative;
list-style-type: none; }
@ -1186,22 +1175,29 @@ mark {
border-radius: 0.2em; }
.md-typeset sup[id]:target {
background: orange; }
@media only screen and (max-width: 44.9375em){
.md-header {
position: static !important; }
.md-toggle {
display: initial !important; }
@media only screen and (max-width: 44.9375em){
.md-typeset > div > pre,
.md-typeset > pre > code{
margin: 1.0em -1.6rem;
padding: 1.0rem 1.6rem;
border-radius: 0; }
.md-search__suggest{
position: relative;
z-index: 2; } }
@media only screen and (min-width: 100em){
border-radius: 0; } }
@media only screen and (min-width: 100em){
html{
font-size: 68.75%; } }
@media only screen and (min-width: 125em){
@media only screen and (min-width: 125em){
html{
font-size: 75%; } }
@media only screen and (max-width: 74.9375em){
@media only screen and (max-width: 74.9375em){
.md-toggle--drawer:checked ~ .md-overlay{
width: 100%;
height: 100%;
@ -1336,7 +1332,8 @@ mark {
overflow: hidden; }
.md-sidebar--primary .md-sidebar__scrollwrap{
margin: 0; } }
@media only screen and (min-width: 60em){
@media only screen and (min-width: 60em){
.md-content{
margin-right: 24.2rem; }
.md-header-nav__icon--search{
@ -1353,10 +1350,11 @@ mark {
position: relative; }
.md-search__form{
width: 23.0rem;
float: right;
-webkit-transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: 0.2rem; }
[data-md-locked] .md-search__form{
.md-toggle--search:checked ~ .md-header .md-search__form{
width: 66.8rem; }
.md-search__input{
width: 100%;
@ -1386,50 +1384,46 @@ mark {
color: white; }
.md-search__input:hover{
background: rgba(255, 255, 255, 0.12); }
[data-md-locked] .md-search__input{
.md-toggle--search:checked ~ .md-header .md-search__input{
border-radius: 0.2rem 0.2rem 0 0;
background: white;
color: rgba(0, 0, 0, 0.87);
text-overflow: none; }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input::-webkit-input-placeholder{
.md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input::-webkit-input-placeholder{
color: rgba(0, 0, 0, 0.54); }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input::-moz-placeholder{
.md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input::-moz-placeholder{
color: rgba(0, 0, 0, 0.54); }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input:-ms-input-placeholder{
.md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input:-ms-input-placeholder{
color: rgba(0, 0, 0, 0.54); }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input::placeholder{
.md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input::placeholder{
color: rgba(0, 0, 0, 0.54); }
.md-search__output{
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity: 0; }
.md-toggle--search:checked ~ .md-header .md-search__output{
opacity: 1; }
.md-search__scrollwrap{
max-height: 0; }
.md-toggle--search:checked ~ .md-header .md-search__scrollwrap{
max-height: 75vh; }
.md-search__scrollwrap::-webkit-scrollbar{
width: 0.4rem;
height: 0.4rem; }
.md-search__scrollwrap::-webkit-scrollbar-thumb{
background-color: rgba(0, 0, 0, 0.26); }
.md-search__scrollwrap::-webkit-scrollbar-thumb:hover{
background-color: #536dfe; }
.md-sidebar--secondary{
display: block;
float: right; }
.md-sidebar--secondary[data-md-locked]{
margin-left: 100%;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0); }
.md-search__output{
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
background: white;
border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
border-radius: 0 0 0.3rem 0.3rem;
position: absolute;
max-height: 0vh;
background: -webkit-linear-gradient(white 10%, rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, transparent 60%);
background: linear-gradient(white 10%, rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, transparent 60%);
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 5px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, scroll; }
[data-md-locked] .md-search__output{
max-height: 75vh; }
.md-search__output::-webkit-scrollbar{
width: 0.4rem;
height: 0.4rem; }
.md-search__output::-webkit-scrollbar-thumb{
background-color: rgba(0, 0, 0, 0.26); }
.md-search__output::-webkit-scrollbar-thumb:hover{
background-color: #536dfe; } }
@media only screen and (min-width: 75em){
transform: translate(-100%, 0); } }
@media only screen and (min-width: 75em){
.md-content{
margin-left: 24.2rem; }
.md-content__inner{
@ -1463,16 +1457,19 @@ mark {
transform: rotateX(180deg); }
.md-sidebar__inner{
border-right: 0.1rem solid rgba(0, 0, 0, 0.07); } }
@media only screen and (min-width: 30em){
@media only screen and (min-width: 30em){
.md-footer-nav__link{
width: 50%; } }
@media only screen and (max-width: 29.9375em){
@media only screen and (max-width: 29.9375em){
.md-footer-nav__link--prev .md-footer-nav__title{
display: none; }
.md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-transform: scale(45);
transform: scale(45); } }
@media only screen and (max-width: 59.9375em){
@media only screen and (max-width: 59.9375em){
.md-nav--secondary{
border-left: 0; }
html .md-nav__link[for="toc"]{
@ -1539,40 +1536,34 @@ mark {
transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s;
transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
opacity: 1; }
.md-search__input{
width: 100%;
height: 5.6rem;
font-size: 1.8rem; }
.md-search__icon{
top: 1.6rem;
left: 1.6rem; }
.md-search__icon::before{
content: "arrow_back"; }
.md-search__input{
width: 100%;
height: 5.6rem;
font-size: 1.8rem; }
.md-search__output{
position: absolute;
top: 5.6rem;
bottom: 0;
background: -webkit-linear-gradient(white 10%, rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.125) 20%, transparent 60%);
background: linear-gradient(white 10%, rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.125) 20%, transparent 60%);
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 10px;
background-attachment: local, scroll; }
bottom: 0; }
.md-search-result__link{
padding: 0 1.6rem; }
.md-search-result__meta{
padding-left: 1.6rem;
border-top: 0.1rem solid rgba(0, 0, 0, 0.07); } }
@media only screen and (min-width: 30em) and (max-width: 44.9375em){
padding-left: 1.6rem; } }
@media only screen and (min-width: 30em) and (max-width: 44.9375em){
.md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-transform: scale(60);
transform: scale(60); } }
@media only screen and (min-width: 45em) and (max-width: 59.9375em){
@media only screen and (min-width: 45em) and (max-width: 59.9375em){
.md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-transform: scale(75);
transform: scale(75); } }
@media only screen and (min-width: 60em) and (min-width: 75em){
@media only screen and (min-width: 60em) and (min-width: 75em){
.md-sidebar--secondary[data-md-locked]{
margin-left: 120.0rem; } }
/*# sourceMappingURL=application.css.map */

4
material/partials/footer.html
View File

@ -1,6 +1,6 @@
<footer class="md-footer">
<div class="md-footer__inner">
{% if previous_page or next_page %}
<div class="md-footer-pagination">
<nav class="md-footer-nav md-grid">
{% if previous_page %}
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
@ -33,6 +33,6 @@
</a>
{% endif %}
</nav>
</div>
{% endif %}
</div>
</footer>

9
material/partials/search.html
View File

@ -3,15 +3,16 @@
<div class="md-search__inner">
<form class="md-search__form">
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
<label class="md-icon md-search__icon" for="query"></label>
<label class="md-icon md-search__icon" for="search"></label>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap">
<div class="md-search-result">
<div class="md-search-result__meta">
3 Search results
Type to search...
</div>
<ol class="md-search-result__list"></ol>
</div>
<ol class="md-search-result__list">
</ol>
</div>
</div>
</div>

112
src/assets/javascripts/application.js
View File

@ -100,59 +100,74 @@ document.addEventListener("DOMContentLoaded", () => {
FastClick.attach(document.body)
const query = document.getElementById("query")
query.addEventListener("focus", () => {
document.querySelector(".md-search").dataset.mdLocked = ""
})
// query.addEventListener("focus", () => {
// document.querySelector(".md-search").dataset.mdLocked = ""
// })
/* Intercept click on search mode toggle */
let offset = 0
const toggle = document.getElementById("search")
toggle.addEventListener("click", () => { // TODO: click may be the wrong event...
const list = document.body // classList md bla
const lock = !matchMedia("only screen and (min-width: 960px)").matches
/* Exiting search mode */
if (list.dataset.mdLocked) {
delete list.dataset.mdLocked
/* Scroll to former position, but wait for 100ms to prevent flashes
on iOS. A short timeout seems to do the trick */
if (lock)
setTimeout(() => {
window.scrollTo(0, offset)
}, 100)
/* Entering search mode */
} else {
offset = window.scrollY
/* First timeout: scroll to top after transition, to omit flickering */
if (lock)
setTimeout(() => {
window.scrollTo(0, 0)
}, 400)
/* Second timeout: Lock body after finishing transition and scrolling to
top and focus input field. Sadly, the focus event is not dispatched
on iOS Safari and there's nothing we can do about it. */
setTimeout(() => {
/* This additional check is necessary to handle fast subsequent clicks
on the toggle and the timeout to lock the body must be cancelled */
// if (ev.target.checked) {
if (lock)
list.dataset.mdLocked = ""
setTimeout(() => {
document.getElementById("query").focus()
}, 200)
// const offset = 0
// const toggle = document.getElementById("search")
// toggle.addEventListener("click", () => {
// const list = document.body // classList md bla
// const lock = !matchMedia("only screen and (min-width: 960px)").matches
//
// /* Exiting search mode */
// if (list.dataset.mdLocked) {
// delete list.dataset.mdLocked
//
// /* Scroll to former position, but wait for 100ms to prevent flashes
// on iOS. A short timeout seems to do the trick */
// if (lock)
// setTimeout(() => {
// window.scrollTo(0, offset)
// }, 100)
//
// /* Entering search mode */
// } else {
// offset = window.scrollY
//
// /* First timeout: scroll to top after transition, to omit flickering */
// if (lock)
// setTimeout(() => {
// window.scrollTo(0, 0)
// }, 400)
//
// /* Second timeout: Lock body after finishing transition and scrolling
// to top and focus input field. Sadly, the focus event is not
// dispatched on iOS Safari and there's nothing we can do about it. */
// setTimeout(() => {
//
// /* This additional check is necessary to handle fast subsequent
// clicks on the toggle and the timeout to lock the body must be
// cancelled */
// // if (ev.target.checked) {
// if (lock)
// list.dataset.mdLocked = ""
// setTimeout(() => {
// document.getElementById("query").focus()
// }, 200)
// // }
// }, 450)
// }
}, 450)
}
})
// })
// TODO: only do this on MOBILE and TABLET
const toggleSearchClose = document.querySelector(".md-search__icon")
toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
// const toggleSearchClose = document.querySelector(".md-search__icon")
// toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
document.getElementById("query").addEventListener("focus", () => {
document.getElementById("search").checked = true
})
// should be registered on body, but leads to problems
document.querySelector(".md-container").addEventListener("click", () => {
if (document.getElementById("search").checked)
document.getElementById("search").checked = false
})
// stop propagation, if search is active...
document.querySelector(".md-search").addEventListener("click", ev => {
ev.stopPropagation()
})
// toggleSearchClose.addEventListener("click", ev => {
// ev.preventDefault()
// // ev.target
@ -202,7 +217,6 @@ document.addEventListener("DOMContentLoaded", () => {
nav.style.maxHeight = `${last}px`
})
}
})
// Capture the end with transitionend

2
src/assets/stylesheets/_config.scss
View File

@ -62,12 +62,14 @@ $md-color-black: hsla(0, 0%, 0%, 0.87);
$md-color-black--light: hsla(0, 0%, 0%, 0.54);
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26);
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
$md-color-black--transparent: hsla(0, 0%, 0%, 0);
// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1.00);
$md-color-white--light: hsla(0, 0%, 100%, 0.70);
$md-color-white--lighter: hsla(0, 0%, 100%, 0.30);
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
$md-color-white--transparent: hsla(0, 0%, 100%, 0);
// ----------------------------------------------------------------------------
// Variables: sizing and spacing

183
src/assets/stylesheets/_shame.scss
View File

@ -24,124 +24,23 @@
// Rules
// ----------------------------------------------------------------------------
// TODO: cleanup redundant data-md-locked,
// --> use hidden checkbox for reasons of label/button/trigger easyness...
// TODO: set label for magnifying glasses onto search toggle
// --> this way we can always use the search toggle and only need the locked state on the body!
// --> question: how does this play with directly focusing the search field!?
.md-search__output {
overflow-y: auto; // necessary for rounded borders
// &::after {
// display: block;
// content: "";
// width: 100%;
// height: 20px;
// background: red; // TODO: white shadow overlay to fade out result scrolling
// }
[data-md-locked] & {
opacity: 1;
}
width: 100%;
opacity: 0;
transition: opacity .4s, max-height .4s;
text-align: left; // TODO: wrap with another div for this effect
z-index: -1; // ??? wherefor? probably not necessary anymore.
}
@include break-to-device(tablet portrait) {
.md-search__output {
position: absolute;
top: 5.6rem;
bottom: 0;
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
linear-gradient(to bottom, rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.125) 20%,
rgba(0, 0, 0, 0) 60%); // shadow
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 10px;
// Opera doesn't support this in the shorthand
background-attachment: local, scroll;
}
.md-search-result__item {
// margin: 0.8rem;
}
.md-search-result__link {
padding: 0 1.6rem;
// background: white;
// border-radius: 0.2rem;
// @include z-depth(2);
}
.md-search-result__meta {
padding-left: 1.6rem;
border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
}
}
@include break-from-device(tablet landscape) {
// Scroll shadow - WIP
.md-search__output {
@include z-depth(6);
background: $md-color-white;
// color: red;
border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
border-radius: 0 0 0.3rem 0.3rem; // ???
position: absolute; // must be absolute, or header nav will stretch
max-height: 0vh; // TODO: can this be done in percent!?!?!?
[data-md-locked] & {
max-height: 75vh;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
// Style scrollbar thumb
&-thumb {
background-color: $md-color-black--lighter;
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
}
}
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 60%); // shadow
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 5px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, scroll;
}
}
.md-search-result {
&__meta {
color: $md-color-black--light;
padding-left: 4.8rem;
padding-right: 1.6rem;
line-height: 4.0rem;
font-size: ms(-1);
}
&__list {
@ -151,13 +50,6 @@
border-top: 0.1rem solid $md-color-black--lightest;
}
&__item {
// background: yellow;
// border-top: 0.1rem solid $md-color-black--lightest;
}
&__link {
overflow: auto;
display: block;
@ -225,37 +117,37 @@
// border-radius: 0.3rem 0.3rem 0 0;
// }
@include break-to-device(mobile landscape) {
.md-search__suggest {
position: relative;
z-index: 2;
}
}
.md-search-term {
position: relative;
padding: 0 0.8rem 0 4.8rem;
line-height: 4.0rem; // don't use line height????
font-size: 1.6rem;
&::before {
@extend %md-icon;
position: absolute;
content: "access_time";
font-size: 2.4rem;
line-height: 4.0rem; // this sucks...
left: 1.2rem;
color: $md-color-black--lighter;
}
transition: background .25s;
cursor: pointer;
&:hover {
background: mix($md-color-white, $md-color-primary, 90%);
}
}
// @include break-to-device(mobile landscape) {
//
// .md-search__suggest {
// position: relative;
// z-index: 2;
// }
// }
//
// .md-search-term {
// position: relative;
// padding: 0 0.8rem 0 4.8rem;
// line-height: 4.0rem; // don't use line height????
// font-size: 1.6rem;
//
// &::before {
// @extend %md-icon;
//
// position: absolute;
//
// content: "access_time";
// font-size: 2.4rem;
// line-height: 4.0rem; // this sucks...
// left: 1.2rem;
// color: $md-color-black--lighter;
// }
// transition: background .25s;
// cursor: pointer;
// &:hover {
// background: mix($md-color-white, $md-color-primary, 90%);
// }
// }
@ -440,9 +332,10 @@ mark {
}
}
// TODO: remove jitter
// .md-search,
// .md-search__inner,
// .md-search__form {
// text-align: right;
// }
// TODO for temporary fixes
.md-header {
position: static !important
}
.md-toggle {
display: initial !important;
}

4
src/assets/stylesheets/layout/_base.scss
View File

@ -30,12 +30,12 @@ html {
height: 100%;
font-size: 62.5%;
// [screen medium +] Set base font-size to 11px
// [screen medium +]: Set base font-size to 11px
@include break-from-device(screen medium) {
font-size: 68.75%;
}
// [screen large +] Set base font-size to 12px
// [screen large +]: Set base font-size to 12px
@include break-from-device(screen large) {
font-size: 75%;
}

8
src/assets/stylesheets/layout/_footer.scss
View File

@ -29,15 +29,15 @@
position: absolute;
bottom: 0;
width: 100%;
}
// Pagination container
.md-footer-pagination {
// Footer container
&__inner {
background: $md-color-black;
color: $md-color-white;
}
}
// Footer navigation
// Navigation within footer
.md-footer-nav {
padding: 0.4rem;
overflow: auto;

159
src/assets/stylesheets/layout/_search.scss
View File

@ -43,7 +43,7 @@
display: none;
pointer-events: none;
// [tablet portrait -]: Show overlay
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
display: block;
position: absolute;
@ -70,7 +70,7 @@
}
}
// Set scale factors (currently selected by trial)
// Set scale factors
.md-toggle--search:checked ~ .md-header & {
// [mobile portrait -]: Scale up 45 times
@ -83,7 +83,7 @@
transform: scale(60);
}
// [mobile landscape]: Scale up 75 times
// [tablet portrait]: Scale up 75 times
@include break-at-device(tablet portrait) {
transform: scale(75);
}
@ -120,7 +120,7 @@
}
}
// [tablet landscape +]: Make relative for inner positioning
// [tablet landscape +]: Make relative for inner layout
@include break-from-device(tablet landscape) {
position: relative;
}
@ -132,47 +132,26 @@
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
width: 23.0rem;
// Hack: omit jitter when form is resized
float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
border-radius: 0.2rem;
// Active search field
[data-md-locked] & {
// Enlarge search field when active
.md-toggle--search:checked ~ .md-header & {
width: 66.8rem;
}
}
}
// Icon
&__icon {
position: absolute;
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin; // TODO: solve in some other way...
transition: color 0.25s;
font-size: $md-icon-size;
cursor: pointer;
// Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay
&::before {
content: "search";
}
// [tablet portrait -]: Use back arrow as search icon
@include break-to-device(tablet portrait) {
top: 1.6rem;
left: 1.6rem;
// Show back arrow instead of search icon
&::before {
content: "arrow_back";
}
}
}
// Search field
// Search input
&__input {
position: relative;
padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis;
z-index: 1;
// Placeholder and icon color in active state
+ .md-search__icon,
@ -212,8 +191,8 @@
background: $md-color-white--lightest;
}
// Active search field
[data-md-locked] & {
// Set light background on active search field
.md-toggle--search:checked ~ .md-header & {
border-radius: 0.2rem 0.2rem 0 0;
background: $md-color-white;
color: $md-color-black;
@ -227,4 +206,112 @@
}
}
}
// Icon
&__icon {
position: absolute;
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin;
transition: color 0.25s;
font-size: $md-icon-size;
cursor: pointer;
z-index: 1;
// Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay
&::before {
content: "search";
}
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
top: 1.6rem;
left: 1.6rem;
// Show back arrow instead of search icon
&::before {
content: "arrow_back";
}
}
}
// Search output container
&__output {
width: 100%;
border-radius: 0 0 0.2rem 0.2rem;
overflow: hidden;
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
position: absolute;
top: 5.6rem;
bottom: 0;
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
@include z-depth(6);
transition: opacity 0.4s;
opacity: 0;
// Show search output in active state
.md-toggle--search:checked ~ .md-header & {
opacity: 1;
}
}
}
// Wrapper for scrolling on overflow
&__scrollwrap {
height: 100%;
// Pure CSS scrolling shadows, taken from
// http://lea.verou.me/2012/04/background-attachment-local/
background:
linear-gradient(
to bottom,
$md-color-white 10%,
$md-color-white--transparent),
linear-gradient(
to bottom,
$md-color-black--lighter,
$md-color-black--lightest 35%,
$md-color-black--transparent 60%);
// Hack: Opera doesn't support this in the shorthand
background-attachment: local, scroll;
background-color: $md-color-white;
background-repeat: no-repeat;
background-size: 100% 2.0rem, 100% 1.0rem;
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
overflow-y: auto;
// [tablet landscape +]: Limit height to viewport
@include break-from-device(tablet landscape) {
max-height: 0;
// Expand in active state
.md-toggle--search:checked ~ .md-header & {
max-height: 75vh;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
// Style scrollbar thumb
&-thumb {
background-color: $md-color-black--lighter;
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
}
}
}
}
}

4
src/partials/footer.html
View File

@ -22,10 +22,10 @@
<!-- Application footer -->
<footer class="md-footer">
<div class="md-footer__inner">
<!-- Link to previous and/or next page -->
{% if previous_page or next_page %}
<div class="md-footer-pagination">
<nav class="md-footer-nav md-grid">
<!-- Link to previous page -->
@ -68,6 +68,6 @@
</a>
{% endif %}
</nav>
</div>
{% endif %}
</div>
</footer>

64
src/partials/search.html
View File

@ -23,77 +23,21 @@
<!-- Search interface -->
<div class="md-search">
<div class="md-search__overlay"></div>
<!-- Include search input -->
<div class="md-search__inner">
<form class="md-search__form">
<input type="text" class="md-search__input"
placeholder="Search" autocapitalize="off" autocorrect="off"
autocomplete="off" spellcheck="false" id="query" />
<label class="md-icon md-search__icon" for="query"></label>
<!--<div class="md-search__suggest">
<div class="md-search-term">
change color
</div>
<div class="md-search-term">
fork theme
</div>
<div class="md-search-term">
contributing
</div>-->
<!-- TODO: search results! -->
<label class="md-icon md-search__icon" for="search"></label>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap">
<div class="md-search-result">
<div class="md-search-result__meta">
3 Search results
Type to search...
</div>
<ol class="md-search-result__list"> <!-- TODO: use semantic tags -->
<!--<li class="md-search-result__item">
<a href="#" class="md-search-result__link">
<div class="md-search-result__title">
Changing the color palette
<ol class="md-search-result__list"></ol>
</div>
<p class="md-search-result__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec pellentesque orci id
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
</p>
</a>
</li>
<li class="md-search-result__item">
<a href="#" class="md-search-result__link">
<div class="md-search-result__title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor.
</div>
<p class="md-search-result__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec pellentesque orci id
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
</p>
</a>
</li>
<li class="md-search-result__item">
<a href="#" class="md-search-result__link">
<div class="md-search-result__title">
Admonition
</div>
<p class="md-search-result__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec pellentesque orci id
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
</p>
</a>
</li>-->
</ol>
</div>
</div>
</div>