Theodor-Springmann-Stiftung/hamann-ausgabe-core
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/hamann-ausgabe-core.git synced 2025-10-30 01:35:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Did a lot of styling on letter & register view; introduced a new accent color. Added scroll and submit vutton, TODO style submit button

Browse Source
This commit is contained in:
schnulller
2022-06-09 02:07:21 +02:00
parent c2ecf0ea23
commit 11ccd7772e
20 changed files with 2324 additions and 4734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4483
HaWeb/wwwroot/css/output.css
View File

File diff suppressed because one or more lines are too long

130
HaWeb/wwwroot/css/site.css
View File

@@ -158,6 +158,22 @@
@apply border-b-2 border-slate-200
}
.ha-register .ha-register-head .ha-register-add a {
@apply rounded border border-black hover:shadow-md hover:border-hamannHighlight
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-plusbutton {
@apply rounded-l bg-slate-200
}
.ha-register .ha-register-head .ha-register-add a:hover .ha-register-add-plusbutton {
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-text {
}
.ha-register .ha-register-head .ha-register-nav a {
@apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-300
}
@@ -173,7 +189,7 @@
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks::before,
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks::before {
@apply bg-slate-400 dark:bg-slate-500
@apply bg-hamannSlate-500 dark:bg-slate-500
}
.ha-register .ha-register-body .ha-commenthead .ha-letlinks.ha-expanded-box {
@@ -181,40 +197,39 @@
}
.ha-register .ha-btn-collapsed-box {
@apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer
@apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer mt-0.5
}
.ha-register
.ha-register-body
.ha-comment
.ha-commenthead
.ha-letlinks
.ha-hkb {
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
@apply text-slate-900 dark:text-white
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
@apply hover:text-slate-900 dark:hover:text-gray-200 no-underline hover:underline
@apply hover:text-hamannSlate-900 dark:hover:text-gray-200 no-underline hover:underline
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
@apply text-slate-600 dark:text-white
@apply text-slate-700 dark:text-white
}
.ha-letterhead .ha-metadata .ha-tooltiptext {
@apply bg-slate-100 shadow
@apply shadow-sm bg-slate-50 border-hamannSlate-900 text-hamannSlate-900 border dark:border-none dark:shadow dark:bg-slate-800
}
.ha-tooltip .ha-tooltiptext::after {
@apply border-t-slate-600 border-l-transparent border-r-transparent border-b-transparent
@apply border-t-slate-600 dark:border-t-slate-800 border-l-transparent border-r-transparent border-b-transparent
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
@apply bg-slate-100 shadow dark:bg-gray-700
@apply rounded-lg border shadow-inner border-hamannSlate-900 text-hamannSlate-900 dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill.ha-newpill {
@apply dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
@apply border-b-2 border-gray-600 dark:border-gray-200
@apply border-b-2 border-hamannSlate-900 dark:border-gray-200
}
.ha-letterheader {
@@ -258,7 +273,7 @@
}
.ha-linecount.ha-firstline {
@apply sm:bg-slate-100 sm:dark:bg-gray-700 shadow
@apply rounded-lg sm:border sm:bg-slate-50 sm:shadow-inner sm:border-slate-600 text-slate-800 dark:text-white sm:dark:bg-slate-800 sm:dark:shadow-md sm:dark:border-slate-400
}
.ha-linecount .ha-zhpage,
@@ -268,7 +283,7 @@
.ha-tradzhtext .ha-marginal::before,
.ha-lettertext .ha-marginal:before {
@apply bg-slate-400 dark:bg-slate-500
@apply bg-hamannSlate-500 dark:bg-slate-500
}
.ha-tradzhtext .ha-marginalbox,
@@ -359,6 +374,14 @@
@apply border-none
}
.ha-scrollbutton {
@apply opacity-0 transition-opacity duration-500 cursor-pointer fixed left-[85%] text-center bottom-0 pb-3 pt-2 bg-slate-50 dark:bg-slate-700 dark:text-white px-2 shadow-md rounded-t-xl hover:shadow-lg text-hamannSlate-700 hover:text-hamannSlate-500
}
.ha-scrollbuttonarrow {
@apply h-8 w-8
}
/* Classes for the footer */
.ha-footer {
@apply font-serif;
@@ -435,7 +458,7 @@
}
.ha-static p {
@apply my-3
@apply my-4
}
.ha-static a {
@@ -473,6 +496,22 @@
@apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6
}
.ha-register .ha-register-head .ha-register-add a {
@apply -mt-4 mb-6 flex flex-row w-fit text-sm font-sans
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-plusbutton {
@apply px-2 leading-none text-xl font-bold pb-0.5
}
.ha-register .ha-register-head .ha-register-add a:hover .ha-register-add-plusbutton {
}
.ha-register .ha-register-head .ha-register-add a .ha-register-add-text {
@apply pl-1 pr-2 leading-none pt-1
}
.ha-register .ha-register-head .ha-register-nav {
@apply font-sans
}
@@ -535,11 +574,11 @@
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
@apply inline-block font-normal text-xs md:text-sm leading-snug font-sans caps-allpetite ml-2
@apply inline-block font-normal text-xs md:text-sm leading-snug font-sans caps-allpetite ml-2 mt-1
}
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks::before {
@apply absolute top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
@apply absolute mt-1 top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
}
.ha-register
@@ -637,7 +676,7 @@
}
.ha-letterhead .ha-metadata .ha-tooltip {
@apply self-center cursor-default inline-block relative
@apply self-center cursor-default inline-block relative
}
.ha-letterhead .ha-metadata .ha-tooltiptext {
@@ -649,7 +688,7 @@
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
@apply text-xs rounded px-2 ml-2 py-[0.1rem]
@apply text-sm rounded px-1.5 ml-2 py-0.5 leading-none caps-allpetite tracking-wide
}
.ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
@@ -755,7 +794,7 @@
}
.ha-uploadcontainer .ha-publishfilelist .ha-publishfilelabel {
@apply mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
@apply relative mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
}
.ha-uploadcontainer .ha-availablefiles {
@@ -1049,7 +1088,7 @@
}
.ha-linecount.ha-firstline {
@apply hidden sm:inline-block rounded px-1 sm:pb-1 caps-allpetite normal-nums whitespace-nowrap
@apply hidden sm:inline-block rounded px-1.5 sm:py-0.5 sm:pb-1 sm:leading-none caps-allpetite normal-nums whitespace-nowrap
}
.ha-linecount {
@@ -1075,12 +1114,12 @@
.ha-tradzhtext .ha-marginal::before,
.ha-lettertext .ha-marginal::before {
@apply absolute top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
@apply absolute top-[0.2rem] bottom-[0.1rem] left-0 w-0.5 content-['']
}
.ha-tradzhtext .ha-marginalbox,
.ha-lettertext .ha-marginalbox {
@apply hidden pl-2 md:block absolute left-full ml-6 mt-1 w-[16rem] desktop:w-[24rem] text-sm leading-tight rounded-sm font-sans
@apply hidden select-none hover:select-auto hyphenate pl-2 md:block absolute left-full ml-2 desktop:ml-10 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans
}
.ha-tradzhtext .ha-marginalbox .ha-marginallist,
@@ -1107,7 +1146,7 @@
.ha-tradzhtext .ha-btn-collapsed-box,
.ha-lettertext .ha-btn-collapsed-box {
@apply absolute left-full ml-4 hidden md:block cursor-pointer leading-none mt-0.5
@apply absolute left-full desktop:ml-7 hidden md:block cursor-pointer leading-none mt-0.5
}
.ha-minwidth .ha-tradzhtext,
@@ -1376,6 +1415,7 @@
/* Not implemented in tailwindcss */
* {
scroll-behavior: smooth;
text-decoration-skip-ink: all;
}
@@ -1440,6 +1480,9 @@ body {
-webkit-text-decoration-skip-ink: auto;
}
/* Missiung Tailwind classes */
.hyphenate {
hyphens: auto;
}
@@ -1468,6 +1511,7 @@ body {
font-variant-caps: normal;
}
.break-inside-avoid {
break-inside: avoid;
}
@@ -1584,7 +1628,23 @@ body {
bottom: 20px;
}
.ha-lds-ellipsis div {
.ha-lds-ellipsis-load {
display: none;
position: relative;
width: 38px;
bottom: 8px;
}
.ha-lds-ellipsis-publish {
display: none;
position: absolute;
left: -50px;
bottom: 16px;
}
.ha-lds-ellipsis div,
.ha-lds-ellipsis-load div,
.ha-lds-ellipsis-publish div {
position: absolute;
width: 7px;
height: 7px;
@@ -1593,22 +1653,30 @@ body {
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ha-lds-ellipsis div:nth-child(1) {
.ha-lds-ellipsis div:nth-child(1),
.ha-lds-ellipsis-load div:nth-child(1),
.ha-lds-ellipsis-publish div:nth-child(1) {
left: 6px;
animation: ha-lds-ellipsis1 0.6s infinite;
}
.ha-lds-ellipsis div:nth-child(2) {
.ha-lds-ellipsis div:nth-child(2),
.ha-lds-ellipsis-load div:nth-child(2),
.ha-lds-ellipsis-publish div:nth-child(2) {
left: 4px;
animation: ha-lds-ellipsis2 0.6s infinite;
}
.ha-lds-ellipsis div:nth-child(3) {
.ha-lds-ellipsis div:nth-child(3),
.ha-lds-ellipsis-load div:nth-child(3),
.ha-lds-ellipsis-publish div:nth-child(3) {
left: 16px;
animation: ha-lds-ellipsis2 0.6s infinite;
}
.ha-lds-ellipsis div:nth-child(4) {
.ha-lds-ellipsis div:nth-child(4),
.ha-lds-ellipsis-load div:nth-child(4),
.ha-lds-ellipsis-publish div:nth-child(4) {
left: 30px;
animation: ha-lds-ellipsis3 0.6s infinite;
}

51
HaWeb/wwwroot/js/site.js
View File

@@ -1,3 +1,4 @@
// Functions for opening and closing the menu on mobile devices
const openmenu = function () {
var x = document.getElementById("ha-topnav");
if (x !== null) x.className += " ha-topnav-collapsed";
@@ -31,6 +32,7 @@ const markactive_startswith = function (element) {
};
const markactive_exact = function (element) {
// Marks links active which target URL is exact the same as the current URL
var all_links = element.getElementsByTagName("a"),
i = 0,
len = all_links.length,
@@ -43,6 +45,7 @@ const markactive_exact = function (element) {
}
};
// Functions for collapsing marginals, and adding a button next to those
const getLineHeight = function (element) {
var temp = document.createElement(element.nodeName),
ret;
@@ -122,7 +125,6 @@ const addbuttoncaollapsebox = function (element, height, hoverfunction) {
element.parentNode.insertBefore(btn, element);
};
/* TODO: need a resize watcher to undo and reapply the effect on breakpoint */
const overlappingcollapsebox = function (selector, hoverfunction) {
let boxes = document.querySelectorAll(selector);
let lineheight = 1;
@@ -172,6 +174,22 @@ const overlappingcollapsebox = function (selector, hoverfunction) {
}
};
const marginalboxwidthset = function() {
let lt = document.getElementById("ha-letterbody");
if (lt !== null) {
let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
if (mg.length > 0) {
let ltbcr = lt.getBoundingClientRect();
let mgbcr = mg[0].getBoundingClientRect();
let nw = ltbcr.right - mgbcr.left - 18;
for (let element of mg) {
element.style.width = nw + "px";
}
}
}
}
/* Button to hide / show traditions, marginals and the text of the letter */
const showhidebutton = function (
buttonid,
@@ -215,6 +233,11 @@ const showhidebutton = function (
}
};
const collapseboxes = function () {
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
};
// Functions for switching theme
const go_to_dark = function () {
localStorage.setItem("theme", "ha-toggledark");
@@ -233,14 +256,26 @@ const get_theme_settings = function (standard) {
let toggleSwitch = document.getElementById(theme).click();
};
const collapseboxes = function () {
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
};
// Functions for scrolling
const scrollFunction = function () {
button = document.getElementById("ha-scrollbutton");
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
button.style.opacity = "1";
} else {
button.style.opacity = "0";
}
}
//////////////////////////////// ONLOAD ////////////////////////////////////
window.addEventListener("load", function () {
// Scroll button
let scrollbutton = this.document.getElementById("ha-scrollbutton");
scrollbutton.addEventListener("click", () => {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
})
this.window.addEventListener("scroll", scrollFunction);
// Menu: Show / Hide Buttons for mobile View
if (
document.getElementById("openmenubutton") !== null &&
@@ -263,11 +298,13 @@ window.addEventListener("load", function () {
markactive_exact(document.getElementById("ha-adminuploadfields"));
// Letter / Register View: Collapse all unfit boxes + resize observer
marginalboxwidthset();
collapseboxes();
var doit;
this.window.addEventListener("resize", function () {
this.clearTimeout(doit);
this.setTimeout(collapseboxes, 250);
marginalboxwidthset();
doit = this.setTimeout(collapseboxes, 250);
});
// Letter View: Show / Hide Tabs