Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-27 17:00:54 +01:00
Code Issues Releases Wiki Activity

Implemented basic search modal functionality

Browse Source
This commit is contained in:
squidfunk 2016-10-23 10:21:37 +02:00
parent 46b7e0f5fe
commit 95435e7035
56 changed files with 7298 additions and 790 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.babelrc
View File

@ -2,6 +2,7 @@
"presets": ["es2015"],
"plugins": [
"add-module-exports",
"babel-root-import",
["transform-react-jsx", {
"pragma": "JSX.createElement"
}]

1
.eslintignore
View File

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

1
.eslintrc
View File

@ -191,6 +191,7 @@
"virtual": "abstract"
},
"requireParamDescription": true,
"requireReturn": false,
"requireReturnDescription": true
}],
"yield-star-spacing": 2

28
.github/ISSUE_TEMPLATE.md vendored Normal file
View File

@ -0,0 +1,28 @@
## Description
[Description of the bug]
### Expected behavior
[What you expected to happen]
### Actual behavior
[What is actually happening]
### Steps to reproduce the bug
1. [First step]
2. [Second step]
3. [and so on...]
### Package versions
- Python: `python --version`
- MkDocs: `mkdocs --version`
- Material: `pip show mkdocs-material | grep -E ^Version`
### System information
- OS: [The operating system you're running]
- Browser: [The browser used, if relevant]

2
.sass-lint.yml
View File

@ -22,7 +22,7 @@ files:
ignore:
- node_modules/**
- src/assets/stylesheets/_shame.scss
- src/assets/stylesheets/extensions/_codehilite.scss # Temporary disabled
- src/assets/stylesheets/extensions/_codehilite.scss
options:
merge-default-rules: true

2
docs/extensions/codehilite.md
View File

@ -543,7 +543,7 @@ io.write("\n")
``` mysql
SELECT
Employees.EmployeeID`,
Employees.EmployeeID,
Employees.Name,
Employees.Salary,
Manager.Name AS Manager

2
docs/extensions/footnotes.md
View File

@ -8,7 +8,7 @@ sit amet, consectetur adipiscing elit.
## Headline on fourth level
Footnotes[^1] have a label[^@#$%] and the footnote's content.
### 2nd Headline on fourth level
### Second Headline on fourth level
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam

2
lib/providers/jsx.js
View File

@ -27,7 +27,7 @@
export default /* JSX */ {
/**
* Create a native DOM node
* Create a native DOM node from JSX's intermediate representation
*
* @param {string} tag - Tag name
* @param {object} properties - Properties

72
lib/tasks/tests/regression/foo.js Normal file
View File

@ -0,0 +1,72 @@
import * as selenium from "./selenium"
import path from "path"
import Gemini from "gemini"
export default (gulp, config) => {
return done => {
selenium.start(() => {
// const file = require(
// path.resolve(process.cwd(),
// config.tests.regression.geminiConfigPath,
// ".gemini-local.json"
// ))
const configx = {
"rootUrl": "http://localhost:8000",
"gridUrl": "http://localhost:4444/wd/hub",
"screenshotsDir": "./tests/regression/baseline/local",
"browsers": {
"chrome": {
"desiredCapabilities": {
"browserName": "chrome"
}
}
},
"system": {
"projectRoot": "../../../",
"sourceRoot": "src/assets/stylesheets"
}
}
// https://www.npmjs.com/package/gemini-sauce
console.log("running gemini...")
const gemini = new Gemini(configx)
gemini.test("tests/regression/styleguide.js", {
reporters: ["html"]
})
.then(() => {
console.log("success")
selenium.stop()
done()
}, err => {
console.log("fail")
selenium.stop()
throw err
})
})
// selenium.start(() => {
// const geminiConfig = require(
// path.resolve(
// process.cwd(),
// config.tests.regression.geminiConfigPath,
// ".gemini-local.json"
// ))
// geminiConfig.rootUrl = `http://127.0.0.1:${config.patternlabServer.port}`
//
// const gemini = new Gemini(geminiConfig)
// gemini.test(config.tests.regression.patternlabToGeminiOutput, {
// reporters: ["html"]
// })
// .then(() => {
// selenium.stop()
// done()
// }, err => {
// selenium.stop()
// throw err
// })
// })
}
}

87
src/assets/javascripts/components/expander.js → lib/tasks/tests/regression/selenium.js
View File

@ -20,72 +20,53 @@
* IN THE SOFTWARE.
*/
import selenium from "selenium-standalone"
/* ----------------------------------------------------------------------------
* Navigation expander
* Locals
* ------------------------------------------------------------------------- */
class Expander {
/* Selenium server */
let server = null
/**
* Constructor
*
* @constructor
* @param {(string|HTMLElement)} el - Selector or HTML element
*/
constructor(el) {
this.el_ = (typeof el === "string")
? document.querySelector(el)
: el
/* ----------------------------------------------------------------------------
* Definition
* ------------------------------------------------------------------------- */
/* Event listener */
this.handler_ = ev => {
this.update(ev)
export const start = done => {
selenium.start({}, (err, proc) => {
if (err) {
/* Install selenium, if not present */
if (/^Missing(.*)chromedriver$/.test(err.message)) {
selenium.install(done)
/* Start selenium again */
selenium.start({}, (err_, proc_) => {
server = proc_
})
/* Otherwise, throw error */
} else {
throw err
}
}
/**
* Update state of expandable element
*
* @param {Event} ev - Event
* @return {void}
*/
update() {}
/**
* Reset state of expandable element
*
* @return {void}
*/
reset() {}
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
["click"].forEach(name => {
window.addEventListener(name, this.handler_, false)
/* Remember process handle */
server = server || proc
done()
})
}
/**
* Unregister listener for all relevant events
*
* @return {void}
*/
unlisten() {
["click"].forEach(name => {
window.removeEventListener(name, this.handler_, false)
})
/* Perform reset */
this.reset()
}
export const stop = () => {
if (server)
server.kill()
}
/* ----------------------------------------------------------------------------
* Exports
* Signal handler
* ------------------------------------------------------------------------- */
export default Expander
/* Register signal handler for all relevant events */
for (const signal of ["SIGTERM", "SIGINT", "exit"])
process.on(signal, stop)

1
material/assets/images/icons/bitbucket-black-850dc5f8b2.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448" viewBox="0 0 352 448"><path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875 1.5q-9.75-4.25-13.375-14.5t-.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875 6.875 16.875zm27.75-5.25q-3.5-26.75-28.25-41T154 165.25q-15.75 7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2 38-21t12.5-42zM291.25 74q-5-6.75-14-11.125t-14.5-5.5T245 54.25q-72.75-11.75-141.5.5-10.75 1.75-16.5 3t-13.75 5.5T60.75 74q7.5 7 19 11.375t18.375 5.5T120 93.75Q177 101 232 94q15.75-2 22.375-3t18.125-5.375T291.25 74zm14.25 258.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5T88.75 412 70.5 401.125t-13-15.375q-6.25-24-14.25-73l1.5-4 4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2 9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875 10T291.75 288q-63 31.5-152.5 22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875T25 232.75q-2.25-12.5-6.625-37.5t-7-40.375T5.5 118 0 78.5Q.75 72 4.375 66.375T12.25 57t11.25-7.5T35 43.875t12-4.625q31.25-11.5 78.25-16 94.75-9.25 169 12.5Q333 47.25 348 66.25q4 5 4.125 12.75t-1.375 13.5z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

20
material/assets/images/icons/bitbucket-black.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
viewBox="0 0 352 448">
<path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
38-21t12.5-42zM291.25
74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
10-13.625 7.75q-63 31.5-152.5
22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
12.75t-1.375 13.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
material/assets/images/icons/bitbucket-white-42306ad0de.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448" viewBox="0 0 352 448"><path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875 1.5q-9.75-4.25-13.375-14.5t-.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875 6.875 16.875zm27.75-5.25q-3.5-26.75-28.25-41T154 165.25q-15.75 7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2 38-21t12.5-42zM291.25 74q-5-6.75-14-11.125t-14.5-5.5T245 54.25q-72.75-11.75-141.5.5-10.75 1.75-16.5 3t-13.75 5.5T60.75 74q7.5 7 19 11.375t18.375 5.5T120 93.75Q177 101 232 94q15.75-2 22.375-3t18.125-5.375T291.25 74zm14.25 258.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5T88.75 412 70.5 401.125t-13-15.375q-6.25-24-14.25-73l1.5-4 4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2 9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875 10T291.75 288q-63 31.5-152.5 22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875T25 232.75q-2.25-12.5-6.625-37.5t-7-40.375T5.5 118 0 78.5Q.75 72 4.375 66.375T12.25 57t11.25-7.5T35 43.875t12-4.625q31.25-11.5 78.25-16 94.75-9.25 169 12.5Q333 47.25 348 66.25q4 5 4.125 12.75t-1.375 13.5z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

20
material/assets/images/icons/bitbucket-white.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
viewBox="0 0 352 448">
<path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
38-21t12.5-42zM291.25
74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
10-13.625 7.75q-63 31.5-152.5
22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
12.75t-1.375 13.5z" fill="white" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
material/assets/images/icons/github-black-da331b3ec4.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 959 B

18
material/assets/images/icons/github-black.svg Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
viewBox="0 0 416 448">
<path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
99.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
material/assets/images/icons/github-white-1cfc8ff99e.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 971 B

18
material/assets/images/icons/github-white.svg Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
viewBox="0 0 416 448">
<path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
99.5z" fill="white" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
material/assets/images/icons/gitlab-black-81ba4a278f.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 742 B

31
material/assets/images/icons/gitlab-black.svg Normal file
View File

@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
viewBox="0 0 500 500">
<g transform="translate(156.197863, 1.160267)">
<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
473.347L93.667,473.347z" />
</g>
<g transform="translate(28.531199, 1.160800)" opacity="0.7">
<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
473.345z" />
</g>
<g transform="translate(0.088533, 0.255867)" opacity="0.5">
<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
20.99l238.514,173.29 L32,195.155L32,195.155z" />
</g>
<g transform="translate(29.421866, 280.255593)">
<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
0L2.667-84.844 L2.667-84.844z" />
</g>
<g transform="translate(247.197860, 1.160800)" opacity="0.7">
<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
473.345z" />
</g>
<g transform="translate(246.307061, 0.255867)" opacity="0.5">
<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z" />
</g>
<g transform="translate(336.973725, 280.255593)">
<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
17.856,0L130.667-84.844 L130.667-84.844z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
material/assets/images/icons/gitlab-white-d65054b8fe.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z" fill="#fff"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" fill="#fff" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" fill="#fff" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z" fill="#fff"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" fill="#fff" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" fill="#fff" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 826 B

32
material/assets/images/icons/gitlab-white.svg Normal file
View File

@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
viewBox="0 0 500 500">
<g transform="translate(156.197863, 1.160267)">
<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
473.347L93.667,473.347z" fill="white" />
</g>
<g transform="translate(28.531199, 1.160800)" opacity="0.7">
<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
473.345z" fill="white" />
</g>
<g transform="translate(0.088533, 0.255867)" opacity="0.5">
<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
20.99l238.514,173.29 L32,195.155L32,195.155z" fill="white" />
</g>
<g transform="translate(29.421866, 280.255593)">
<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
0L2.667-84.844 L2.667-84.844z" fill="white" />
</g>
<g transform="translate(247.197860, 1.160800)" opacity="0.7">
<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
473.345z" fill="white" />
</g>
<g transform="translate(246.307061, 0.255867)" opacity="0.5">
<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z"
fill="white" />
</g>
<g transform="translate(336.973725, 280.255593)">
<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
17.856,0L130.667-84.844 L130.667-84.844z" fill="white" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

58
material/assets/javascripts/application-2ff8f6a9f1.js
View File

File diff suppressed because one or more lines are too long

3756
material/assets/javascripts/application.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/javascripts/application.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/modernizr-dede1352ed.js
View File

File diff suppressed because one or more lines are too long

1220
material/assets/javascripts/modernizr.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/stylesheets/application-2ebf05d4b7.css
View File

File diff suppressed because one or more lines are too long

1576
material/assets/stylesheets/application.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/stylesheets/application.css.map Normal file
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -20,11 +20,11 @@
<meta name="author" content="{{ site_author }}">
{% endif %}
<meta name="generator" content="mkdocs+mkdocs-material#0.2.1">
<script src="{{ base_url }}/assets/javascripts/modernizr-dede1352ed.js"></script>
<script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-2ebf05d4b7.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.css">
{% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}">
{% endfor %}
@ -87,7 +87,7 @@
</main>
{% include "partials/footer.html" %}
</div>
<script src="{{ base_url }}/assets/javascripts/application-2ff8f6a9f1.js"></script>
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
<script>
/* Configuration for application */
var config = {

7
material/partials/search.html
View File

@ -3,9 +3,8 @@
<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">
search
</label>
<label class="md-icon md-search__icon" for="query"></label>
</form>
<div class="md-search__output">
<div class="md-search-result">
<div class="md-search-result__meta">
@ -15,5 +14,5 @@
</ol>
</div>
</div>
</form></div>
</div>
</div>

1
mkdocs.yml
View File

@ -53,6 +53,7 @@ markdown_extensions:
- markdown.extensions.meta
- markdown.extensions.toc:
permalink: '¶'
- pymdownx.superfences
# Page tree
pages:

1
package.json
View File

@ -46,6 +46,7 @@
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.13.2",
"babel-register": "^6.16.3",
"babel-root-import": "^4.1.3",
"chai": "^3.5.0",
"css-mqpacker": "^4.0.0",
"del": "^2.2.0",

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

@ -71,19 +71,19 @@ document.addEventListener("DOMContentLoaded", () => {
const query = document.getElementById("query")
query.addEventListener("focus", () => {
document.querySelector(".md-search").classList.add("md-js__search--locked")
document.querySelector(".md-search").dataset.mdLocked = ""
})
/* Intercept click on search mode toggle */
let offset = 0
const toggle = document.getElementById("search")
toggle.addEventListener("click", ev => {
const list = document.body.classList
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.contains("md-js__body--locked")) {
list.remove("md-js__body--locked")
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 */
@ -109,17 +109,28 @@ document.addEventListener("DOMContentLoaded", () => {
/* 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 (ev.target.checked) {
if (lock)
list.add("md-js__body--locked")
list.dataset.mdLocked = ""
setTimeout(() => {
document.getElementById("md-search").focus()
document.getElementById("query").focus()
}, 200)
}
// }
}, 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!!!
// toggleSearchClose.addEventListener("click", ev => {
// ev.preventDefault()
// // ev.target
//
// const search = document.getElementById("search")
// search.checked = false
// })
// var toc = new Sidebar('.md-sidebar--secondary');
// toc.listen();
@ -179,6 +190,7 @@ document.addEventListener("DOMContentLoaded", () => {
return response.json()
})
.then(data => {
// console.log(data)
const stars = data.stargazers_count
const forks = data.forks_count
// store in session!!!
@ -223,7 +235,7 @@ document.addEventListener("DOMContentLoaded", () => {
// console.log(data)
/* Create index */
const index = lunr(() => {
const index = lunr(function() {
/* eslint-disable no-invalid-this, lines-around-comment */
this.field("title", { boost: 10 })
this.field("text")
@ -290,10 +302,21 @@ document.addEventListener("DOMContentLoaded", () => {
title.innerHTML = article.title
link.appendChild(title)
/* Truncate a string after the given number of characters */
const truncate = function(string, n) {
let i = n
if (string.length > i) {
while (string[i] !== " " && --i > 0);
return `${string.substring(0, i)}&hellip;`
}
return string
}
/* Create text element */
const text = document.createElement("p")
text.classList.add("md-search-result__description")
text.innerHTML = article.text // .truncate(140);
text.innerHTML = truncate(article.text) // .truncate(140);
text.innerHTML = truncate(article.text, 140) // .truncate(140);
link.appendChild(text)
container.appendChild(li)
@ -324,4 +347,13 @@ document.addEventListener("DOMContentLoaded", () => {
})
// }, 1000);
fetch(
"https://api.github.com/repos/squidfunk/mkdocs-material/releases/latest")
.then(response => {
return response.json()
})
// .then(data => {
// // console.log(data)
// })
})

13
src/assets/javascripts/components/Material/Sidebar/Abstract.js
View File

@ -24,8 +24,7 @@
* Definition
* ------------------------------------------------------------------------- */
export default
class Abstract {
export default class Abstract {
/**
* Dispatch update on next repaint
@ -33,8 +32,8 @@ class Abstract {
* @constructor
*/
constructor() {
// if (new.target === this.constructor)
// throw new TypeError("Cannot construct abstract instance")
if (this === Abstract)
throw new TypeError("Cannot construct abstract instance")
/* Dispatch update on next repaint */
this.handler_ = ev => {
@ -48,7 +47,6 @@ class Abstract {
* Update state
*
* @abstract
* @return {void}
*/
update() {
throw new Error("update(): not implemented")
@ -58,7 +56,6 @@ class Abstract {
* Reset state
*
* @abstract
* @return {void}
*/
reset() {
throw new Error("reset(): not implemented")
@ -66,8 +63,6 @@ class Abstract {
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
["scroll", "resize", "orientationchange"].forEach(name => {
@ -80,8 +75,6 @@ class Abstract {
/**
* Unregister listener for all relevant events
*
* @return {void}
*/
unlisten() {
["scroll", "resize", "orientationchange"].forEach(name => {

19
src/assets/javascripts/components/Material/Sidebar/Marker.js
View File

@ -26,14 +26,13 @@ import Abstract from "./Abstract"
* Definition
* ------------------------------------------------------------------------- */
export default
class Marker extends Abstract {
export default class Marker extends Abstract {
/**
* Mark anchors within the table of contents above current page y-offset
*
* @constructor
* @param {(string|HTMLCollection)} els - Selector or HTML elements
* @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
*/
constructor(els) {
super()
@ -57,16 +56,16 @@ class Marker extends Abstract {
* Update anchor states
*
* @param {Event} ev - Event (omitted)
* @return {void}
*/
update() {
const offset = window.pageYOffset
/* Scroll direction is down */
if (this.offset_ <= window.pageYOffset) {
if (this.offset_ <= offset) {
for (let i = this.index_ + 1; i < this.els_.length; i++) {
if (this.anchors_[i].offsetTop <= window.pageYOffset) {
if (this.anchors_[i].offsetTop <= offset) {
if (i > 0)
this.els_[i - 1].dataset.mdMarked = true
this.els_[i - 1].dataset.mdMarked = ""
this.index_ = i
} else {
break
@ -76,7 +75,7 @@ class Marker extends Abstract {
/* Scroll direction is up */
} else {
for (let i = this.index_; i >= 0; i--) {
if (this.anchors_[i].offsetTop > window.pageYOffset) {
if (this.anchors_[i].offsetTop > offset) {
if (i > 0)
delete this.els_[i - 1].dataset.mdMarked
} else {
@ -87,13 +86,11 @@ class Marker extends Abstract {
}
/* Remember current offset for next iteration */
this.offset_ = window.pageYOffset
this.offset_ = offset
}
/**
* Reset anchor states
*
* @return {void}
*/
reset() {
[].forEach.call(this.els_, el => {

43
src/assets/javascripts/components/Material/Sidebar/Position.js
View File

@ -26,8 +26,7 @@ import Abstract from "./Abstract"
* Definition
* ------------------------------------------------------------------------- */
export default
class Position extends Abstract {
export default class Position extends Abstract {
/**
* Set sidebars to locked state and limit height to parent node
@ -44,8 +43,15 @@ class Position extends Abstract {
: el
/* Index inner and outer container */
this.inner_ = this.el_.parentNode
this.outer_ = this.el_.parentNode.parentNode
const inner = this.el_.parentNode
const outer = this.el_.parentNode.parentNode
/* Get top and bottom bounds */
this.offset_ = outer.offsetTop
this.bounds_ = {
top: inner.offsetTop,
bottom: inner.offsetTop + inner.offsetHeight
}
/* Initialize current height */
this.height_ = 0
@ -55,45 +61,34 @@ class Position extends Abstract {
* Update locked state and height
*
* @param {Event} ev - Event (omitted)
* @return {void}
*/
update() {
const bounds = this.inner_.getBoundingClientRect() // TODO: thresholds can be calculated as a function
const parent = this.outer_.offsetTop
/* Determine top and bottom offsets */
const top = bounds.top + window.pageYOffset,
bottom = bounds.bottom + window.pageYOffset
/* Determine current y-offset at top and bottom of window */
const upper = window.pageYOffset,
lower = window.pageYOffset + window.innerHeight
const scroll = window.pageYOffset
const expand = window.innerHeight
/* Calculate new bounds */
const offset = top - upper
const height = window.innerHeight
- Math.max(lower - bottom, 0)
- Math.max(offset, parent)
const offset = this.bounds_.top - scroll
const height = expand
- Math.max(0, scroll + expand - this.bounds_.bottom)
- Math.max(offset, this.offset_)
/* If height changed, update element */
if (height !== this.height_)
this.el_.style.height = `${this.height_ = height}px`
/* Sidebar should be locked, as we're below parent offset */
if (offset < parent) {
if (offset < this.offset_) {
if (!this.el_.dataset.mdLocked)
this.el_.dataset.mdLocked = true
this.el_.dataset.mdLocked = ""
/* Sidebar should be unlocked, if locked */
} else if (this.el_.dataset.mdLocked) {
} else if (typeof this.el_.dataset.mdLocked === "string") {
delete this.el_.dataset.mdLocked
}
}
/**
* Reset locked state and height
*
* @return {void}
*/
reset() {
delete this.el_.dataset.mdLocked

72
src/assets/javascripts/components/search.js → src/assets/javascripts/components/Material/Source/Abstract.js
View File

@ -21,76 +21,18 @@
*/
/* ----------------------------------------------------------------------------
* Search
* Definition
* ------------------------------------------------------------------------- */
class Search {
export default
class Abstract {
/**
* Constructor
* Dispatch update on next repaint
*
* @constructor
* @param {(string|HTMLElement)} el - Selector or HTML element
*/
constructor(el) {
this.el_ = (typeof el === "string") ? document.querySelector(el) : el
/* Event listener */
this.handler_ = ev => {
this.update(ev)
// constructor() {
//
// }
}
}
/**
* Update state and height of sidebar
*
* @param {Event} ev - Event
* @return {void}
*/
update() {
}
/**
* Reset state and height of sidebar
*
* @return {void}
*/
reset() {
}
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
// ['scroll', 'resize', 'orientationchange'].forEach(name => {
// window.addEventListener(name, this.handler_, false);
// });
/* Initial update */
this.update()
}
/**
* Unregister listener for all relevant events
*
* @return {void}
*/
unlisten() {
// ['scroll', 'resize', 'orientationchange'].forEach(name => {
// window.removeEventListener(name, this.handler_, false);
// });
/* Perform reset */
this.reset()
}
}
/* ----------------------------------------------------------------------------
* Exports
* ------------------------------------------------------------------------- */
export default Search

0
src/assets/javascripts/components/Material/Source/GitHub.js Normal file
View File

0
src/assets/javascripts/components/Material/Source/GitLab.js Normal file
View File

131
src/assets/javascripts/components/scrollspy.js
View File

@ -1,131 +0,0 @@
/*
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Sidebar scroll-spy
* ------------------------------------------------------------------------- */
export default
class ScrollSpy {
/**
* Constructor
*
* @constructor
* @param {(string|HTMLCollection)} els - Selector or HTML elements
*/
constructor(els) {
this.els_ = (typeof els === "string")
? document.querySelectorAll(els)
: els
/* Initialize index for currently active element */
this.index_ = 0
this.offset_ = window.pageYOffset
/* Index anchor nodes for fast lookup */
this.anchors_ = [].map.call(this.els_, el => {
return document.querySelector(el.hash)
})
/* Event listener */
this.handler_ = ev => {
this.update(ev)
}
}
/**
* Update state of sidebar
*
* @param {Event} ev - Event (omitted)
* @return {void}
*/
update() {
/* Scroll direction is down */
if (this.offset_ <= window.pageYOffset) {
for (let i = this.index_ + 1; i < this.els_.length; i++) {
if (this.anchors_[i].offsetTop <= window.pageYOffset) {
if (i > 0)
this.els_[i - 1].dataset.mdMarked = true
this.index_ = i
} else {
break
}
}
/* Scroll direction is up */
} else {
for (let i = this.index_; i >= 0; i--) {
if (this.anchors_[i].offsetTop > window.pageYOffset) {
if (i > 0)
delete this.els_[i - 1].dataset.mdMarked
} else {
this.index_ = i
break
}
}
}
/* Remember current offset for next cycle */
this.offset_ = window.pageYOffset
}
/**
* Reset state of sidebar
*
* @return {void}
*/
reset() {
[].forEach.call(this.els_, el => {
delete el.dataset.mdMarked
})
}
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
["scroll", "resize", "orientationchange"].forEach(name => {
window.addEventListener(name, this.handler_, false)
})
/* Initial update */
this.update()
}
/**
* Unregister listener for all relevant events
*
* @return {void}
*/
unlisten() {
["scroll", "resize", "orientationchange"].forEach(name => {
window.removeEventListener(name, this.handler_, false)
})
/* Perform reset */
this.reset()
}
}

142
src/assets/javascripts/components/sidebar.js
View File

@ -1,142 +0,0 @@
/*
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Sidebar sticky-scroll handler
* ------------------------------------------------------------------------- */
class Sidebar {
/**
* Constructor
*
* @constructor
* @param {(string|HTMLElement)} el - Selector or HTML element
*/
constructor(el) {
this.el_ = (typeof el === "string")
? document.querySelector(el)
: el
/* Grab inner and outer container */
this.inner_ = this.el_.parentNode
this.outer_ = this.el_.parentNode.parentNode
/* Initialize parameters */
this.height_ = 0
this.locked_ = false
/* Event listener */
this.handler_ = ev => {
this.update(ev)
}
}
/**
* Update state and height of sidebar
*
* @param {Event} ev - Event
* @return {void}
*/
update() {
const bounds = this.inner_.getBoundingClientRect()
const parent = this.outer_.offsetTop
/* Determine top and bottom offsets */
const top = bounds.top + window.pageYOffset,
bottom = bounds.bottom + window.pageYOffset
/* Determine current y-offset at top and bottom of window */
const upper = window.pageYOffset,
lower = window.pageYOffset + window.innerHeight
/* Calculate new bounds */
const offset = top - upper
const height = window.innerHeight - Math.max(lower - bottom, 0)
- Math.max(offset, parent)
/* If height changed, update element */
if (height !== this.height_)
this.el_.style.height = `${this.height_ = height}px`
/* Sidebar should be locked, as we're below parent offset */
if (offset < parent) {
if (!this.locked_) {
this.el_.classList.add("md-js__sidebar--locked")
this.locked_ = true
}
/* Sidebar should be unlocked, if locked */
} else if (this.locked_) {
this.el_.classList.remove("md-js__sidebar--locked")
this.locked_ = false
}
}
/**
* Reset state and height of sidebar
*
* @return {void}
*/
reset() {
this.el_.classList.remove("md-js__sidebar--locked")
this.el_.style.height = ""
/* Reset parameters */
this.height_ = 0
this.locked_ = false
}
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
["scroll", "resize", "orientationchange"].forEach(name => {
window.addEventListener(name, this.handler_, false)
})
/* Initial update */
this.update()
}
/**
* Unregister listener for all relevant events
*
* @return {void}
*/
unlisten() {
["scroll", "resize", "orientationchange"].forEach(name => {
window.removeEventListener(name, this.handler_, false)
})
/* Perform reset */
this.reset()
}
}
/* ----------------------------------------------------------------------------
* Exports
* ------------------------------------------------------------------------- */
export default Sidebar

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

@ -24,42 +24,85 @@
// Rules
// ----------------------------------------------------------------------------
@include break-from-device(screen) {
// .md-search__form {
// background: red;
// width: 23.0rem;
// transition: width 0.6s;
//
// .md-js__search--locked & {
// background: blue;
// width: 66.8rem;
// }
// }
// .md-search__input {
// width: 100% !important;
// }
// 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 {
@include z-depth(6);
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
// }
width: 100%;
max-height: 0vh; // TODO: can this be done in percent!?!?!?
opacity: 0;
transition: opacity .4s, max-height .4s;
[data-md-locked] & {
max-height: 75vh;
opacity: 1;
}
position: absolute; // must be absolute, or header nav will stretch
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!
text-align: left; // TODO: wrap with another div for this effect
border-radius: 0 0 0.3rem 0.3rem;
z-index: -1;
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 {
@ -76,10 +119,6 @@
}
}
}
}
// Scroll shadow!
.md-search__output {
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
@ -91,6 +130,7 @@
/* Opera doesn't support this in the shorthand */
background-attachment: local, scroll;
}
}
.md-search-result {
@ -123,9 +163,10 @@
display: block;
padding-left: 4.8rem;
padding-right: 1.6rem;
transition: background 0.25s;
&:hover {
background: yellow;
background: transparentize($md-color-accent, 0.9);
}
}
@ -143,7 +184,6 @@
margin: 0.5em 0;;
}
}
}
// .md-nav--secondary > .md-nav__title {
// // -webkit-overflow-scrolling: touch;
@ -180,28 +220,12 @@
// }
// }
.md-search__input:focus {
border-radius: 0.3rem 0.3rem 0 0;
}
// TODO: only on tablet and bind to search active state!
// .md-search__input:focus {
// border-radius: 0.3rem 0.3rem 0 0;
// }
@include break-to-device(mobile landscape) {
.md-search__inner {
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 56px;
opacity: 0;
z-index: 2;
transform: translate3d(5%, 0, 0);
transition: transform .3s .15s cubic-bezier(0.1, 0.7, 0.1, 1.0), opacity .15s .15s;
.md-toggle--search:checked ~ .md-header & {
transform: translate3d(0, 0, 0);
left: 0;
opacity: 1;
}
}
.md-search__suggest {
position: relative;
@ -396,8 +420,29 @@ mark {
padding: 0 16px;
}
.md-search__output {
overflow-y: auto; // necessary for rounded borders
// TODO: integrate stylelint and property order!
.md-typeset {
sup {
// background: $md-color-black--lighter;
padding: 0 0.125em;
border-radius: 0.2em;
// font-weight: bold;
// color: $md-color-white;
&[id]:target {
background: orange;
}
// TODO: integrate stylelint and property order!
a {
// color: white;
}
}
}
// TODO: remove jitter
// .md-search,
// .md-search__inner,
// .md-search__form {
// text-align: right;
// }

3
src/assets/stylesheets/base/_icons.scss
View File

@ -58,8 +58,7 @@
// Build representational classes
@each $ligature, $name in (
"arrow_back": "back",
"arrow_forward": "forward",
"close": "close"
"arrow_forward": "forward"
) {
&--#{$name}::before {
content: $ligature;

6
src/assets/stylesheets/base/_typeset.scss
View File

@ -25,7 +25,8 @@
// ----------------------------------------------------------------------------
// Default fonts
body {
body,
input {
color: $md-color-black;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400;
@ -160,7 +161,8 @@ kbd {
background: $md-code-background;
color: $md-code-color;
font-size: 85%;
box-shadow: 0.4rem 0 0 $md-code-background,
box-shadow:
0.4rem 0 0 $md-code-background,
-0.4rem 0 0 $md-code-background;
word-break: break-word;
box-decoration-break: clone;

4
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -48,7 +48,7 @@
// Make back references visible on hover
&:hover .footnote-backref,
&:target .footnote-backref {
transform: translate3d(0, 0, 0);
transform: translateX(0);
opacity: 1;
}
@ -73,7 +73,7 @@
@extend %md-icon;
position: absolute;
transform: translate3d(0.5rem, 0, 0);
transform: translateX(0.5rem);
transition: transform 0.25s 0.125s,
color 0.25s,
opacity 0.125s 0.125s;

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

@ -101,8 +101,9 @@ hr {
top: 0;
width: 0;
height: 0;
transition: width 0.0s 0.25s,
height 0.0s 0.25s,
transition:
width 0s 0.25s,
height 0s 0.25s,
opacity 0.25s;
background: $md-color-black--light;
opacity: 0;
@ -115,8 +116,9 @@ hr {
.md-toggle--drawer:checked ~ & {
width: 100%;
height: 100%;
transition: width 0.0s,
height 0.0s,
transition:
width 0s,
height 0s,
opacity 0.25s;
opacity: 1;
}

2
src/assets/stylesheets/layout/_content.scss
View File

@ -37,7 +37,7 @@
margin-left: 24.2rem;
}
// Define padding
// Define spacing
&__inner {
margin: 2.4rem 1.6rem;

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

@ -81,7 +81,7 @@
}
}
// Link icon
// Icons
&__icon {
@extend %md-icon__button;

11
src/assets/stylesheets/layout/_header.scss
View File

@ -42,7 +42,7 @@
.md-header-nav {
padding: 0.4rem;
// Header icon
// Icons
&__icon {
@extend %md-icon__button;
@ -55,8 +55,13 @@
opacity: 0.7;
}
// [tablet +]: Hide the search icon
@include break-from-device(tablet) {
// Hide search icon, if JavaScript is not available.
.no-js &--search {
display: none;
}
// [tablet landscape +]: Hide the search icon
@include break-from-device(tablet landscape) {
// Search icon
&--search {

10
src/assets/stylesheets/layout/_nav.scss
View File

@ -259,8 +259,9 @@
// Animate appearance, if browser supports 3D transforms
.csstransforms3d & {
display: block;
transform: translate3d(100%, 0, 0);
transition: transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
transform: translateX(100%);
transition:
transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
opacity 0.125s 0.05s;
opacity: 0;
}
@ -272,8 +273,9 @@
// Animate appearance, if browser supports 3D transforms
.csstransforms3d & {
transform: translate3d(0, 0, 0);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
opacity 0.125s 0.125s;
opacity: 1;
}

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

@ -26,66 +26,114 @@
// Search container
.md-search {
padding: 0.8rem 0.8rem 0;
// Hide search, in case JavaScript is not available.
// Hide search, if JavaScript is not available.
.no-js & {
display: none;
}
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
padding: 0.4rem;
padding-right: 3.2rem;
}
// // Search overlay
// &__overlay {
// display: none;
//
// // [mobile -]: Only show overlay on mobile
// @include break-to-device(mobile) {
// display: block;
// position: absolute;
// top: 0.4rem;
// left: 0.4rem;
// width: 4.0rem;
// height: 4.0rem;
// transform-origin: center;
// transition: transform 0.3s 0.1s,
// opacity 0.2s 0.2s;
// border-radius: 2.0rem; // TODO: correct?
// background: #EEEEEE;
// opacity: 0;
// overflow: hidden;
// z-index: 0;
//
// // Expanded overlay
// .md-toggle--search:checked ~ .md-header & {
// transform: scale(40);
// transition: transform 0.4s,
// opacity 0.1s;
// opacity: 1;
// z-index: 1;
// }
// }
// }
// Search modal overlay
&__overlay {
display: none;
pointer-events: none;
// [tablet portrait -]: Show overlay
@include break-to-device(tablet portrait) {
display: block;
position: absolute;
top: 0.4rem;
left: 0.4rem;
width: 4.0rem;
height: 4.0rem;
transform-origin: center;
transition:
transform 0.3s 0.1s,
opacity 0.2s 0.2s;
border-radius: 2.0rem;
background: $md-color-white;
opacity: 0;
overflow: hidden;
z-index: 1;
// Expanded overlay
.md-toggle--search:checked ~ .md-header & {
transition:
transform 0.4s,
opacity 0.1s;
opacity: 1;
}
}
// Set scale factors (currently selected by trial)
.md-toggle--search:checked ~ .md-header & {
// [mobile portrait -]: Scale up 45 times
@include break-to-device(mobile portrait) {
transform: scale(45);
}
// [mobile landscape]: Scale up 60 times
@include break-at-device(mobile landscape) {
transform: scale(60);
}
// [mobile landscape]: Scale up 75 times
@include break-at-device(tablet portrait) {
transform: scale(75);
}
}
}
// Search modal wrapper
&__inner {
width: 100%;
// [tablet portrait -]: Put search modal off-canvas by default
@include break-to-device(tablet portrait) {
position: fixed;
top: 0;
left: 100%;
height: 100%;
transform: translateX(5%);
transition:
left 0s 0.3s,
transform 0.15s 0.15s cubic-bezier(0.4, 0.0, 0.2, 1.0),
opacity 0.15s 0.15s;
opacity: 0;
z-index: 2;
// Active search modal
.md-toggle--search:checked ~ .md-header & {
left: 0;
transform: translateX(0);
transition:
left 0s 0s,
transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1.0),
opacity 0.15s 0.15s;
opacity: 1;
}
}
// [tablet landscape +]: Make relative for inner positioning
@include break-from-device(tablet landscape) {
position: relative;
}
}
// Search form
&__form {
position: relative;
border-radius: 0.2rem;
text-align: right;
// [mobile -]: Add drop-shadow on mobile
@include break-to-device(mobile) {
@include z-depth(2);
}
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
width: 23.0rem;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
border-radius: 0.2rem;
// Active search field
[data-md-locked] & {
@ -98,16 +146,23 @@
&__icon {
position: absolute;
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin;
left: $md-icon-padding + $md-icon-margin; // TODO: solve in some other way...
transition: color 0.25s;
font-size: $md-icon-size;
cursor: pointer;
// [mobile -]: Use back arrow as search icon
@include break-to-device(mobile) {
top: 1.2rem;
// 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";
}
// Hack: @extend doesn't work in media queries, so override manually
// [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";
}
@ -116,8 +171,7 @@
// Search field
&__input {
padding: 0 1.6rem 0 6.4rem;
border-radius: 0.2rem;
padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis;
// Placeholder and icon color in active state
@ -126,20 +180,22 @@
color: $md-color-black--light;
}
// [mobile -]: Full-screen search bar
@include break-to-device(mobile) {
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
width: 100%;
height: 4.8rem;
height: 5.6rem;
font-size: 1.8rem;
}
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
width: 100%;
height: 4.0rem;
padding-left: 4.8rem;
transition: background-color 0.25s,
transition:
background-color 0.25s,
color 0.25s;
border-radius: 0.2rem;
background: $md-color-black--lighter;
color: $md-color-white;
font-size: ms(0);
@ -158,7 +214,7 @@
// Active search field
[data-md-locked] & {
border-radius: 0.3rem 0.3rem 0 0;
border-radius: 0.2rem 0.2rem 0 0;
background: $md-color-white;
color: $md-color-black;
text-overflow: none;

9
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -53,8 +53,9 @@
left: -24.2rem;
width: 24.2rem;
height: 100%;
transform: translate3d(0, 0, 0);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
box-shadow 0.25s;
background: $md-color-white;
z-index: 2;
@ -68,7 +69,7 @@
.md-toggle--drawer:checked ~ .md-container & {
@include z-depth(8);
transform: translate3d(24.2rem, 0, 0);
transform: translateX(24.2rem);
// Just show drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
@ -146,7 +147,7 @@
}
}
// Actual sidebar content
// Sidebar content
&__inner {
// [screen +]: Add line for reference

5
src/assets/stylesheets/layout/_source.scss
View File

@ -105,8 +105,9 @@
&__fact {
float: left;
transform: translateY(0%);
transition: opacity 0.25s,
transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
transition:
transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
opacity 0.25s;
opacity: 1;
// Facts are hidden by default

31
src/partials/search.html
View File

@ -30,9 +30,20 @@
<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">
search
</label>
<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! -->
</form>
<div class="md-search__output">
<div class="md-search-result">
<div class="md-search-result__meta">
@ -85,19 +96,5 @@
</ol>
</div>
</div>
<!--<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>-->
</div>
<!-- TODO: search results! -->
</form>
</div>
</div>