Browse Source

Simplify code for visibility toggle

master v2.2.3
F.W. Dekker 6 months ago
parent
commit
b5be385ea5
Signed by: FWDekker GPG Key ID: B1B567AF58D6EE0F
  1. 34
      package-lock.json
  2. 4
      package.json
  3. 21
      src/main/css/snippets/common.css
  4. 13
      src/main/js/main.js

34
package-lock.json

@ -1,12 +1,12 @@
{
"name": "@fwdekker/template",
"version": "2.1.3",
"version": "2.2.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@fwdekker/template",
"version": "2.1.3",
"version": "2.2.2",
"license": "MIT",
"dependencies": {
"milligram": "^1.4.1",
@ -20,7 +20,7 @@
"grunt-contrib-watch": "^1.1.0",
"grunt-focus": "^1.0.0",
"grunt-webpack": "^4.0.3",
"webpack": "^5.35.0",
"webpack": "^5.36.0",
"webpack-cli": "^4.6.0"
}
},
@ -272,9 +272,9 @@
"dev": true
},
"node_modules/acorn": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
"integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
"version": "8.2.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.1.tgz",
"integrity": "sha512-z716cpm5TX4uzOzILx8PavOE6C6DKshHDw1aQN52M/yNSqE9s5O8SMfyhCCfCJ3HmTL0NkVOi+8a/55T7YB3bg==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
@ -2547,9 +2547,9 @@
}
},
"node_modules/webpack": {
"version": "5.35.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.35.0.tgz",
"integrity": "sha512-au3gu55yYF/h6NXFr0KZPZAYxS6Nlc595BzYPke8n0CSff5WXcoixtjh5LC/8mXunkRKxhymhXmBY0+kEbR6jg==",
"version": "5.36.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.0.tgz",
"integrity": "sha512-HdOhLXClUEwTnzQnzpSG9iL00ej23ojvfnGpF49ba0MkuAT2q+WhQilHFFJHOIVRBqbzakQ1vCWQV2K+QLX0Qw==",
"dev": true,
"dependencies": {
"@types/eslint-scope": "^3.7.0",
@ -2557,7 +2557,7 @@
"@webassemblyjs/ast": "1.11.0",
"@webassemblyjs/wasm-edit": "1.11.0",
"@webassemblyjs/wasm-parser": "1.11.0",
"acorn": "^8.0.4",
"acorn": "^8.2.1",
"browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.8.0",
@ -2983,9 +2983,9 @@
"dev": true
},
"acorn": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
"integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
"version": "8.2.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.1.tgz",
"integrity": "sha512-z716cpm5TX4uzOzILx8PavOE6C6DKshHDw1aQN52M/yNSqE9s5O8SMfyhCCfCJ3HmTL0NkVOi+8a/55T7YB3bg==",
"dev": true
},
"ajv": {
@ -4798,9 +4798,9 @@
}
},
"webpack": {
"version": "5.35.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.35.0.tgz",
"integrity": "sha512-au3gu55yYF/h6NXFr0KZPZAYxS6Nlc595BzYPke8n0CSff5WXcoixtjh5LC/8mXunkRKxhymhXmBY0+kEbR6jg==",
"version": "5.36.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.0.tgz",
"integrity": "sha512-HdOhLXClUEwTnzQnzpSG9iL00ej23ojvfnGpF49ba0MkuAT2q+WhQilHFFJHOIVRBqbzakQ1vCWQV2K+QLX0Qw==",
"dev": true,
"requires": {
"@types/eslint-scope": "^3.7.0",
@ -4808,7 +4808,7 @@
"@webassemblyjs/ast": "1.11.0",
"@webassemblyjs/wasm-edit": "1.11.0",
"@webassemblyjs/wasm-parser": "1.11.0",
"acorn": "^8.0.4",
"acorn": "^8.2.1",
"browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.8.0",

4
package.json

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "2.2.2",
"version": "2.2.3",
"description": "The base template for pages on fwdekker.com.",
"author": "Felix W. Dekker",
"license": "MIT",
@ -35,7 +35,7 @@
"grunt-contrib-watch": "^1.1.0",
"grunt-focus": "^1.0.0",
"grunt-webpack": "^4.0.3",
"webpack": "^5.35.0",
"webpack": "^5.36.0",
"webpack-cli": "^4.6.0"
}
}

21
src/main/css/snippets/common.css

@ -9,7 +9,16 @@ body {
color: black;
}
main {
/* Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099 */
display: flex;
flex-direction: column;
min-height: 100%;
}
#contents {
flex: 1;
margin-top: 5rem;
margin-bottom: 5rem;
}
@ -24,18 +33,6 @@ noscript p {
}
/* Main element display state */
main.pageVisible {
display: flex;
flex-direction: column;
min-height: 100%;
}
.pageContents.pageVisible {
flex: 1;
}
/* Header */
header .container {
text-align: center;

13
src/main/js/main.js

@ -193,19 +193,10 @@ const footerLink = function(prefix, text, url, suffix) {
* Unhides the main element on the page and applies default display styling.
*/
const showPage = function() {
// Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099
const main = $("main");
// TODO: Remove .style commands once all pages are migrated
main.style.display = "flex";
main.style.flexDirection = "column";
main.style.minHeight = "100%";
// TODO: Remove .style command once all pages are migrated
main.style.display = null;
main.classList.remove("hidden");
main.classList.add("pageVisible");
// TODO: Remove .style commands once all pages are migrated
const contents = $("#contents");
contents.style.flex = "1";
contents.classList.add("pageVisible");
}

Loading…
Cancel
Save