Redesign of letter search page; minor bug fixes (see README)

This commit is contained in:
Simon Martens
2022-11-01 00:39:05 +01:00
parent 18cdd1404a
commit 0ea6c61ff3
20 changed files with 217 additions and 84 deletions

View File

@@ -28,7 +28,7 @@
/* STYLES */
.ha-topnav {
@apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1;
@apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1
}
.ha-topnav a {
@@ -36,15 +36,15 @@
}
.ha-topnav a:last-child {
@apply mr-0;
@apply mr-0
}
.ha-topnav-dropdown {
@apply hidden desktop:relative desktop:inline-block;
@apply hidden desktop:relative desktop:inline-block
}
.ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
@apply desktop:block;
@apply desktop:block
}
.ha-topnav-dropdown .ha-topnav-dropdown-content {

View File

@@ -33,7 +33,7 @@
}
.ha-additions {
@apply hidden bg-slate-50 dark:bg-slate-900
@apply bg-slate-50 dark:bg-slate-900
}
.ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
@@ -288,7 +288,7 @@
.ha-tradzhtext .ha-marginalbox,
.ha-lettertext .ha-marginalbox {
@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
@apply hidden select-none hover:select-auto hyphenate pl-2 md:block absolute left-full ml-6 desktop:ml-16 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans
}
.ha-tradzhtext .ha-marginalbox .ha-marginallist,
@@ -315,12 +315,12 @@
.ha-tradzhtext .ha-btn-collapsed-box,
.ha-lettertext .ha-btn-collapsed-box {
@apply absolute left-full desktop:ml-7 hidden md:block cursor-pointer leading-none mt-0.5
@apply absolute left-full ml-4 desktop:ml-[3.5rem] hidden md:block cursor-pointer leading-none mt-0.5
}
.ha-minwidth .ha-tradzhtext,
.ha-lettertext.ha-minwidth {
@apply min-w-[44rem] desktop:min-w-[58rem]
@apply min-w-[44rem] desktop:min-w-[52rem]
}
.ha-minwidth .ha-tradzhtext .ha-alignright,

View File

@@ -9,9 +9,13 @@
}
.ha-pill {
@apply rounded-lg border shadow-inner bg-slate-50 border-hamannSlate-900 text-hamannSlate-900 dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
@apply rounded bg-gray-200 text-gray-600
}
/* .ha-pill {
@apply border-hamannSlate-900 text-hamannSlate-900 dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400 caps-petite
} */
.ha-pill.ha-newpill {
@apply dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
}
@@ -37,6 +41,10 @@
@apply flex self-end grow flex-col
}
.ha-letterhead .ha-metadatastrike {
@apply flex self-center
}
.ha-letterhead .ha-metadata .ha-metadataupperrow {
@apply flex flex-row leading-snug
}
@@ -58,7 +66,7 @@
}
.ha-pill {
@apply text-xs rounded px-1.5 ml-1.5 py-0.5 leading-none tracking-wide whitespace-nowrap
@apply text-xs px-1 ml-1.5 tracking-normal whitespace-nowrap
}
.ha-pill .ha-cross {

File diff suppressed because one or more lines are too long

View File

@@ -135,7 +135,7 @@
}
.ha-register .ha-register-body {
@apply md:pr-96 pb-9 md:pb-12 rounded-b-sm
@apply md:pr-[29rem] pb-9 md:pb-12 rounded-b-sm
}
.ha-register .ha-register-body .ha-comment {

View File

@@ -4,10 +4,10 @@
/* STYLES */
.ha-scrollbutton {
@apply opacity-0 transition-opacity duration-500 cursor-pointer fixed left-[82%] 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
@apply opacity-0 transition-opacity duration-500 cursor-pointer fixed right-0 bottom-6 text-center py-2 pr-6 bg-slate-50 dark:bg-slate-700 dark:text-white px-2 shadow rounded-l-xl transition-all hover:shadow-md text-hamannSlate-700 hover:text-hamannSlate-500
}
.ha-scrollbuttonarrow {
@apply h-8 w-8
@apply h-8 w-8 desktop:h-10 desktop:w-10
}
}

View File

@@ -1,10 +1,45 @@
@layer components {
/* THEME OPTIONS */
.ha-search {
@apply bg-slate-50
@apply bg-slate-50 dark:bg-slate-900
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult:nth-child(even) {
@apply bg-slate-100 dark:bg-slate-900
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult:nth-child(odd) {
@apply bg-slate-50 dark:bg-slate-900
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry {
@apply bg-slate-100 dark:bg-slate-900 dark:border-none border-r border-b border-gray-200
}
.ha-search .ha-searchhead .ha-searchnav a.active {
@apply dark:!text-white hover:dark:!text-white dark:font-bold
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry:hover {
@apply border-gray-300
}
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a {
@apply hover:!bg-slate-200 dark:hover:!bg-slate-800
}
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a.active {
@apply dark:!text-white dark:font-bold
}
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(odd) {
@apply bg-slate-100 dark:bg-zinc-900
}
/* NON THEME RULES */
.ha-search .ha-searchhead {
@apply pt-9 md:pt-12 px-9 md:px-16 border-b-2
@apply pt-9 md:pt-12 px-9 md:px-16 border-b-2
}
.ha-search .ha-searchhead h1 {
@@ -24,11 +59,11 @@
}
.ha-search .ha-searchbody {
@apply pt-4 pr-4 clear-both flex flex-row gap-x-4
@apply pt-4 clear-both flex flex-row gap-x-4
}
.ha-search .ha-searchbody .ha-letterlist {
@apply pl-6 pb-4 basis-2/3 grow-0
@apply pb-4 basis-2/3 grow-0
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry:not(:first-child) {
@@ -36,9 +71,26 @@
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry {
@apply block border
@apply rounded-sm block pt-3 transition-all duration-100
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry:hover {
@apply transition-all duration-100
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterhead {
@apply pb-3 px-3 pl-6
}
input, select {
@apply dark:!bg-zinc-900 dark:border-none
}
button {
@apply dark:!bg-zinc-900 dark:!border-zinc-800
}
/* Old stuff
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader {
@apply border-b flex flex-row py-1 px-2 bg-slate-100
}
@@ -53,14 +105,14 @@
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistletterdata {
@apply px-2 py-1
}
} */
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults {
@apply px-2 py-1
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult {
@apply px-6 py-1 bg-slate-50 block
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultlocation {
@@ -68,19 +120,15 @@
}
.ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultpreview {
@apply inline-block pl-2
@apply inline-block pl-4
}
.ha-search .ha-searchbody .ha-filterlist {
@apply flex flex-col gap-y-5 pb-4 float-right max-w-lg basis-1/3 min-w-0 shrink
}
.ha-search .ha-searchbody .ha-filterlist > div {
@apply border border-slate-200 hover:shadow transition-shadow duration-200 bg-slate-50
@apply hidden md:flex flex-col gap-y-5 pb-4 float-right max-w-lg basis-1/3 min-w-0 shrink
}
.ha-search .ha-searchbody .ha-filterlist .ha-filtertitle {
@apply text-2xl px-3 pb-2 pt-3 font-serif leading-none border-b bg-slate-100
@apply text-2xl pr-4 pl-1 mb-1 pb-1 pt-3 font-serif leading-none border-b border-gray-400
}
.ha-search .ha-searchbody .ha-filterlist .ha-reversefilter {
@@ -96,7 +144,7 @@
} */
.ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form {
@apply font-sans py-2 px-3 bg-slate-50
@apply font-sans py-1 pl-1 pr-2
}
.ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form .ha-gototext {
@@ -108,11 +156,11 @@
}
.ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form button {
@apply float-right inline-block px-2 border bg-slate-50 disabled:bg-gray-200 border-slate-200 hover:border-black disabled:hover:border-slate-200 disabled:text-slate-600
@apply float-right inline-block px-2 border bg-slate-50 disabled:bg-gray-200 border-slate-200 hover:border-black disabled:hover:border-slate-200 disabled:text-gray-600
}
.ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform {
@apply py-2 px-3
@apply py-1 pl-1 pr-2
}
.ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform > span {
@@ -124,7 +172,7 @@
}
.ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform button {
@apply float-right px-2 border bg-slate-50 border-slate-200 disabled:bg-gray-200 hover:border-black disabled:hover:border-slate-200 disabled:text-slate-600
@apply float-right px-2 border bg-slate-50 border-slate-200 disabled:bg-gray-200 hover:border-black disabled:hover:border-slate-200 disabled:text-gray-600
}
.ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform select {
@@ -132,7 +180,7 @@
}
.ha-search .ha-searchbody .ha-filterlist .ha-searchfilter .ha-searchform {
@apply py-2 px-3 flex flex-row gap-x-2
@apply py-1 pl-1 pr-2 flex flex-row gap-x-2
}
.ha-search .ha-searchbody .ha-filterlist .ha-searchfilter .ha-searchform input {
@@ -140,18 +188,18 @@
}
.ha-search .ha-searchbody .ha-filterlist .ha-searchfilter .ha-searchform button {
@apply float-right px-2 border border-slate-200 hover:border-black disabled:bg-gray-200 disabled:hover:border-slate-200 disabled:text-slate-600
@apply float-right px-2 border border-slate-200 hover:border-black disabled:bg-gray-200 disabled:hover:border-slate-200 disabled:text-gray-600
}
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist {
@apply max-h-64 overflow-y-auto overflow-x-hidden pb-2
@apply max-h-[23rem] overflow-y-auto overflow-x-hidden py-1 pl-1 mr-2
}
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a {
@apply block px-3 hover:!bg-slate-200 !transition-none
@apply block px-3 !transition-none
}
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(even) {
@apply block bg-slate-100
.ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(odd) {
@apply block
}
}

View File

@@ -158,11 +158,11 @@
@apply relative -top-[0.5em]
}
.ha-alignright {
.ha-alignright:not(.reference *, .reference, .ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
@apply float-right
}
.ha-aligncenter {
.ha-aligncenter:not(.reference *, .reference, .ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
@apply absolute left-[45%] whitespace-nowrap -translate-x-1/2
}
@@ -260,6 +260,7 @@
html {
overflow-y: scroll;
font-size: 15.5px;
}
body {

View File

@@ -21,6 +21,11 @@
.caps-petite {
font-variant-caps: petite-caps;
}
.caps {
font-variant-caps: normal;
text-transform: uppercase;
}
.caps-normal {
font-variant-caps: normal;