From 5736a79fd732ede3eba2c3cb89b901e7ffa587dd Mon Sep 17 00:00:00 2001 From: philipp Date: Mon, 19 Feb 2024 22:08:57 +0100 Subject: [PATCH] format frontend code --- templates/app.js | 132 +++++++++---------- templates/index.html | 108 ++++++++-------- templates/law.html | 116 +++++++++-------- templates/style.css | 301 ++++++++++++++++++------------------------- templates/toggle.js | 26 ++-- 5 files changed, 317 insertions(+), 366 deletions(-) diff --git a/templates/app.js b/templates/app.js index 86759ca..ae7be83 100644 --- a/templates/app.js +++ b/templates/app.js @@ -1,93 +1,93 @@ -document.addEventListener('DOMContentLoaded', function() { - changeTheme(); - initcolorTheme(); - apply_stickies() +document.addEventListener("DOMContentLoaded", function () { + changeTheme(); + initcolorTheme(); + apply_stickies(); }); function changeTheme() { - let toggleBtn = document.querySelector('#theme-toggle-js'); + let toggleBtn = document.querySelector("#theme-toggle-js"); - if(toggleBtn) { - toggleBtn.addEventListener('click', function() { - if(toggleBtn.dataset.theme === 'light') { - setTheme('dark', true); - } else { - setTheme('light', true); - } - }); - } + if (toggleBtn) { + toggleBtn.addEventListener("click", function () { + if (toggleBtn.dataset.theme === "light") { + setTheme("dark", true); + } else { + setTheme("light", true); + } + }); + } } /*** -* init javascript -* 1) detect native color scheme or use set theme in local storage -* 2) detect view (desktop or responsive) if on mobile device with touch screen -* 3) set base font size to 112.5% -> 18px -*/ + * init javascript + * 1) detect native color scheme or use set theme in local storage + * 2) detect view (desktop or responsive) if on mobile device with touch screen + * 3) set base font size to 112.5% -> 18px + */ function initcolorTheme() { - colorThemeWatcher(); - let theme = localStorage.getItem('theme'); - if (theme == null || theme === 'auto') { - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - setTheme('dark', false); - } else { - setTheme('light', false); - } - } else { - setTheme(theme) - } + colorThemeWatcher(); + let theme = localStorage.getItem("theme"); + if (theme == null || theme === "auto") { + if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { + setTheme("dark", false); + } else { + setTheme("light", false); + } + } else { + setTheme(theme); + } } /*** -* Listener operating system native color configuration -*/ + * Listener operating system native color configuration + */ function colorThemeWatcher() { - try { - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { - setTheme(e.matches ? 'dark' : 'light'); - }); - } catch { - console.warn('color theme watcher not supported'); - } + try { + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => { + setTheme(e.matches ? "dark" : "light"); + }); + } catch { + console.warn("color theme watcher not supported"); + } } /** -* Define color scheme, colors without losing the base font size configuration -* and add data-theme to html tag -* @param theme -*/ + * Define color scheme, colors without losing the base font size configuration + * and add data-theme to html tag + * @param theme + */ function setTheme(theme, setLocalStorage = true) { - let toggleBtn = document.querySelector('#theme-toggle-js'); + let toggleBtn = document.querySelector("#theme-toggle-js"); - if (setLocalStorage) { - localStorage.setItem('theme', theme); - } - if (toggleBtn) toggleBtn.setAttribute('data-theme', theme); + if (setLocalStorage) { + localStorage.setItem("theme", theme); + } + if (toggleBtn) toggleBtn.setAttribute("data-theme", theme); - if (document.documentElement.dataset.theme === 'dark' && theme === 'light') { - document.documentElement.dataset.theme = 'light'; - } else if(document.documentElement.dataset.theme === 'light' && theme === 'dark'){ - document.documentElement.dataset.theme = 'dark'; - } + if (document.documentElement.dataset.theme === "dark" && theme === "light") { + document.documentElement.dataset.theme = "light"; + } else if (document.documentElement.dataset.theme === "light" && theme === "dark") { + document.documentElement.dataset.theme = "dark"; + } } -window.addEventListener('scroll', function() { - apply_stickies() -}) +window.addEventListener("scroll", function () { + apply_stickies(); +}); function apply_stickies() { - var _$stickies = [].slice.call(document.querySelectorAll('.sticky')) - _$stickies.forEach(function(_$sticky) { - if (CSS.supports && CSS.supports('position', 'sticky')) { - apply_sticky_class(_$sticky) + var _$stickies = [].slice.call(document.querySelectorAll(".sticky")); + _$stickies.forEach(function (_$sticky) { + if (CSS.supports && CSS.supports("position", "sticky")) { + apply_sticky_class(_$sticky); } - }) + }); } function apply_sticky_class(_$sticky) { - var currentOffset = _$sticky.getBoundingClientRect().top - var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace('px', '')) - var isStuck = currentOffset <= stickyOffset + var currentOffset = _$sticky.getBoundingClientRect().top; + var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace("px", "")); + var isStuck = currentOffset <= stickyOffset; - _$sticky.classList.toggle('js-is-sticky', isStuck) -} \ No newline at end of file + _$sticky.classList.toggle("js-is-sticky", isStuck); +} diff --git a/templates/index.html b/templates/index.html index ed0cc83..bb9e680 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,54 +1,58 @@ - - - - RIS Parser - - - - - - -
-
- - RIS - parser - -
-
-
-
    - {{content}} -
-
- - - + + + + RIS Parser + + + + + + +
+
+ + RIS + parser + +
+
+
+
    + {{content}} +
+
+ + + diff --git a/templates/law.html b/templates/law.html index 7b1a4a5..6ac2b89 100644 --- a/templates/law.html +++ b/templates/law.html @@ -1,58 +1,62 @@ - - - - RIS Parser - - - - - - -
-
- - RIS - parser - -
-
-
-
- - -
-

{{title}}

- {{content}} -
- - - - + + + + RIS Parser + + + + + + +
+
+ + RIS + parser + +
+
+
+
+ + +
+

{{title}}

+ {{content}} +
+ + + + diff --git a/templates/style.css b/templates/style.css index c4f79fc..ae150d6 100644 --- a/templates/style.css +++ b/templates/style.css @@ -1,281 +1,224 @@ - - html { - -webkit-hyphens: auto; - hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } - h1 { - margin-top: var(--pico-spacing); + margin-top: var(--pico-spacing); } - h2, h3, h4, -h5, +h5, h6 { - --pico-font-weight: 400; - - display: inline; + --pico-font-weight: 400; + display: inline; } - h2 { - --pico-font-size: 1.3rem; - --pico-font-weight: 200; + --pico-font-size: 1.3rem; + --pico-font-weight: 200; } - h3 { - --pico-font-size: 1.2rem; - --pico-font-weight: 200; + --pico-font-size: 1.2rem; + --pico-font-weight: 200; } - h4 { - --pico-font-size: 1.1rem; - --pico-font-weight: 200; + --pico-font-size: 1.1rem; + --pico-font-weight: 200; } - mark { - --pico-mark-gradient: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%); - - padding: 0; - background: var(--pico-mark-gradient); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + --pico-mark-gradient: linear-gradient(270deg, #08aeea 0%, #2af598 100%); + padding: 0; + background: var(--pico-mark-gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; } - main { - min-height: 100vh; + min-height: 100vh; } - details summary { - line-height: unset; - display: flex; - width: 100%; - align-items: center; + line-height: unset; + display: flex; + width: 100%; + align-items: center; } - details summary::after { - flex-shrink: 0; + flex-shrink: 0; } - details > summary { - position: sticky; - background-color: var(--pico-background-color); - top: 0; + position: sticky; + background-color: var(--pico-background-color); + top: 0; } - details details > summary { - position: unset !important; + position: unset !important; } - summary h2, summary h3, summary h4, -summary h5 { - flex-grow: 1; +summary h5 { + flex-grow: 1; } - summary.js-is-sticky { - padding: 1.5rem 0; - background: linear-gradient(0deg, transparent 0%, var(--pico-background-color) 30%); + padding: 1.5rem 0; + background: linear-gradient(0deg, transparent 0%, var(--pico-background-color) 30%); } - summary.js-is-sticky h2, summary.js-is-sticky h3, summary.js-is-sticky h4, -summary.js-is-sticky h5 { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-bottom: 0; - font-size: 1rem; - font-weight: 700; +summary.js-is-sticky h5 { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; + font-size: 1rem; + font-weight: 700; } - .par { - margin-bottom: calc(var(--pico-spacing) * 2); + margin-bottom: calc(var(--pico-spacing) * 2); } - .symb { - --pico-font-weight: 700; - - display: inline-block; - margin-right: calc(var(--pico-spacing) / 3); - font-weight: var(--pico-font-weight) + --pico-font-weight: 700; + display: inline-block; + margin-right: calc(var(--pico-spacing) / 3); + font-weight: var(--pico-font-weight); } - .header { - --pico-font-weight: 300; - - font-weight: var(--pico-font-weight); + --pico-font-weight: 300; + font-weight: var(--pico-font-weight); } - h4, -h5, +h5, h6 { - --pico-font-weight: 400; - - display: inline; + --pico-font-weight: 400; + display: inline; } - h2 { - --pico-font-size: 1.3rem; - --pico-font-weight: 200; + --pico-font-size: 1.3rem; + --pico-font-weight: 200; } - h3 { - --pico-font-size: 1.2rem; - --pico-font-weight: 200; + --pico-font-size: 1.2rem; + --pico-font-weight: 200; } - h4 { - --pico-font-size: 1.1rem; - --pico-font-weight: 200; + --pico-font-size: 1.1rem; + --pico-font-weight: 200; } - .par > ul { - margin: var(--pico-spacing) 0; - padding: 0; + margin: var(--pico-spacing) 0; + padding: 0; } - .par > ul > li { - list-style: none; - margin: 1rem 0; + list-style: none; + margin: 1rem 0; } - ul { - padding: 0 2rem; + padding: 0 2rem; } - li { - list-style: square; + list-style: square; } - button { - --pico-form-element-spacing-vertical: 0.25rem; + --pico-form-element-spacing-vertical: 0.25rem; } - body > footer { - padding-block: calc(var(--pico-block-spacing-vertical) * 2); - background: linear-gradient(180deg, black, transparent); + padding-block: calc(var(--pico-block-spacing-vertical) * 2); + background: linear-gradient(180deg, black, transparent); } - -:root:not([data-theme=dark]) body > footer, -[data-theme=light] body > footer { - background: linear-gradient(180deg, rgba(0,0,0,.1), transparent); +:root:not([data-theme="dark"]) body > footer, +[data-theme="light"] body > footer { + background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent); } - /* approx 800px */ .container { - max-width: 38rem; + max-width: 38rem; } - .btn-container { - position: fixed; - bottom: 0rem; - right: 0rem; - padding: 1rem; - width: 100%; - display: flex; - justify-content: flex-end; - background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color)); + position: fixed; + bottom: 0rem; + right: 0rem; + padding: 1rem; + width: 100%; + display: flex; + justify-content: flex-end; + background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color)); } - -.btn-open, +.btn-open, .btn-close { - font-size: .8rem; - display: inline-block; + font-size: 0.8rem; + display: inline-block; } - .btn-open { - margin-right: 1rem; + margin-right: 1rem; } - .par { - margin-bottom: calc(var(--pico-spacing) * 2); + margin-bottom: calc(var(--pico-spacing) * 2); } - .symb { - --pico-font-weight: 700; - - display: inline-block; - margin-right: calc(var(--pico-spacing) / 3); - font-weight: var(--pico-font-weight) + --pico-font-weight: 700; + display: inline-block; + margin-right: calc(var(--pico-spacing) / 3); + font-weight: var(--pico-font-weight); } - .header { - --pico-font-weight: 300; - - font-weight: var(--pico-font-weight); + --pico-font-weight: 300; + font-weight: var(--pico-font-weight); } - .content { - display: block; + display: block; } - .note { - --pico-font-weight: 200; - - font-weight: var(--pico-font-weight); - display: block; - font-style: italic; - padding: calc(var(--pico-spacing) / 3) 0; + --pico-font-weight: 200; + font-weight: var(--pico-font-weight); + display: block; + font-style: italic; + padding: calc(var(--pico-spacing) / 3) 0; } - /* List index.html */ ol { - counter-reset: index; - padding: 0; - width: 100%; + counter-reset: index; + padding: 0; + width: 100%; } - /* List element index.html */ ol li { - counter-increment: index; - display: flex; - align-items: center; - padding: 12px 0; - box-sizing: border-box; + counter-increment: index; + display: flex; + align-items: center; + padding: 12px 0; + box-sizing: border-box; } - - /* Element counter */ ol li::before { - content: "§"; - font-size: 1.5rem; - text-align: right; - font-weight: bold; - padding-right: 12px; - align-self: flex-start; - background-image: linear-gradient(to bottom, #08AEEA, #2AF598); - background-attachment: fixed; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + content: "§"; + font-size: 1.5rem; + text-align: right; + font-weight: bold; + padding-right: 12px; + align-self: flex-start; + background-image: linear-gradient(to bottom, #08aeea, #2af598); + background-attachment: fixed; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; } - - /* Element separation */ ol li + li { - border-top: var(--pico-contrast-focus) solid 1px; + border-top: var(--pico-contrast-focus) solid 1px; } - .hidden { - display: none; + display: none; } - .inline { - display: inline; + display: inline; } - -:root:not([data-theme=dark]) .dark-inline, -[data-theme=light] .dark-inline{ - display: inline; +:root:not([data-theme="dark"]) .dark-inline, +[data-theme="light"] .dark-inline { + display: inline; } - -:root:not([data-theme=dark]) .dark-hidden, -[data-theme=light] .dark-hidden { - display: none; +:root:not([data-theme="dark"]) .dark-hidden, +[data-theme="light"] .dark-hidden { + display: none; } diff --git a/templates/toggle.js b/templates/toggle.js index cc7dc92..9986929 100644 --- a/templates/toggle.js +++ b/templates/toggle.js @@ -1,21 +1,21 @@ -document.addEventListener('DOMContentLoaded', function() { - toggleSummary(); +document.addEventListener("DOMContentLoaded", function () { + toggleSummary(); }); function toggleSummary() { - const openBtns = document.querySelectorAll('.open-js'); - const closeBtns = document.querySelectorAll('.close-js'); - const detailElements = document.querySelectorAll('details'); + const openBtns = document.querySelectorAll(".open-js"); + const closeBtns = document.querySelectorAll(".close-js"); + const detailElements = document.querySelectorAll("details"); - openBtns.forEach(function(openBtn) { - openBtn.addEventListener('click', function(){ - detailElements.forEach((detail) => detail.setAttribute("open", "")); + openBtns.forEach(function (openBtn) { + openBtn.addEventListener("click", function () { + detailElements.forEach((detail) => detail.setAttribute("open", "")); + }); }); - }); - closeBtns.forEach(function(closeBtn) { - closeBtn.addEventListener('click', function(){ - detailElements.forEach((detail) => detail.removeAttribute("open", "")); + closeBtns.forEach(function (closeBtn) { + closeBtn.addEventListener("click", function () { + detailElements.forEach((detail) => detail.removeAttribute("open", "")); + }); }); - }); }