fwdekker.com
/
template
1
0
Fork 0
Code Issues 2 Pull Requests Releases 90 Activity

Simplify code for visibility toggle

This commit is contained in:
Florine W. Dekker 2021-04-28 12:19:46 +02:00
parent 46718785af
commit b5be385ea5
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 13 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
package-lock.json generated
View File

Binary file not shown.

4
package.json
View File

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

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

@ -9,7 +9,16 @@ body {
color: black; color: black;
} }
main {
/* Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099 */
display: flex;
flex-direction: column;
min-height: 100%;
}
#contents { #contents {
flex: 1;
margin-top: 5rem; margin-top: 5rem;
margin-bottom: 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 */
header .container { header .container {
text-align: center; text-align: center;

13
src/main/js/main.js
View File

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