evan/AnthoLume
evan/AnthoLume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[fix] various ios pwa styling issues

Browse Source
This commit is contained in:
Evan Reichard 2023-10-12 21:16:57 -04:00
parent a972b5a8aa
commit 7aa11715ba
2 changed files with 295 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
templates/base.html
View File

@ -1,19 +1,122 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="manifest" href="{{ .RelBase }}./manifest.json" /> <link rel="manifest" href="{{ .RelBase }}./manifest.json" />
<meta name="theme-color" content="#F3F4F6" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#F3F4F6" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1F2937" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#1F2937" media="(prefers-color-scheme: dark)">
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=0.90, user-scalable=no">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<title>Book Manager - {{block "title" .}}{{end}}</title> <title>Book Manager - {{block "title" .}}{{end}}</title>
<style>
/* ----------------------------- */
/* -------- PWA Styling -------- */
/* ----------------------------- */
html,
body {
overscroll-behavior-y: none;
margin: 0px;
}
html {
height: 100vh;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
0 env(safe-area-inset-left);
}
main {
height: calc(100dvh - 4rem - env(safe-area-inset-top));
}
#container {
padding-bottom: calc(5em + env(safe-area-inset-bottom) * 2);
}
/* No Scrollbar - IE, Edge, Firefox */
* {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* No Scrollbar - WebKit */
*::-webkit-scrollbar {
display: none;
}
/* ----------------------------- */
/* ------- User Dropdown ------- */
/* ----------------------------- */
#user-dropdown-button:checked + #user-dropdown {
visibility: visible;
opacity: 1;
}
#user-dropdown {
visibility: hidden;
opacity: 0;
}
/* ----------------------------- */
/* ----- Mobile Navigation ----- */
/* ----------------------------- */
#mobile-nav-button span {
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#mobile-nav-button span:first-child {
transform-origin: 0% 0%;
}
#mobile-nav-button span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#mobile-nav-button input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(2px, -2px);
}
#mobile-nav-button input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#mobile-nav-button input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, 6px);
}
#mobile-nav-button input:checked ~ div {
transform: none;
}
@media (min-width: 1024px) {
#mobile-nav-button input ~ div {
transform: none;
}
}
#menu {
top: 0;
padding-top: env(safe-area-inset-top);
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
@media (orientation: landscape) {
#menu {
transform: translate(calc(-1 * (env(safe-area-inset-left) + 100%)), 0);
}
}
</style>
</head> </head>
<body class="bg-gray-100 dark:bg-gray-800"> <body class="bg-gray-100 dark:bg-gray-800">
<main
class="relative h-[100dvh] overflow-hidden"
>
<div class="flex items-center justify-between w-full h-16"> <div class="flex items-center justify-between w-full h-16">
<div id="mobile-nav-button" class="flex flex-col z-40 relative ml-6"> <div id="mobile-nav-button" class="flex flex-col z-40 relative ml-6">
<input type="checkbox" class="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0 w-12 h-12" /> <input type="checkbox" class="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0 w-12 h-12" />
@ -21,7 +124,7 @@
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span> <span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
<span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span> <span class="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white"></span>
<div id="menu" class="fixed -mt-6 -ml-6 lg:-mt-8 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg"> <div id="menu" class="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg">
<div class="h-16 flex justify-end lg:justify-around"> <div class="h-16 flex justify-end lg:justify-around">
<p class="text-xl font-bold dark:text-white text-right my-auto pr-4 lg:pr-0">Book Manager</p> <p class="text-xl font-bold dark:text-white text-right my-auto pr-4 lg:pr-0">Book Manager</p>
</div> </div>
@ -180,73 +283,12 @@
</div> </div>
</div> </div>
<div class="h-[100dvh] px-4 pb-20 overflow-auto md:px-6 lg:ml-48"> <main
class="relative overflow-hidden"
>
<div id="container" class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48">
{{block "content" .}}{{end}} {{block "content" .}}{{end}}
</div> </div>
</main> </main>
<!-- Custom Animation CSS -->
<style>
/* ----------------------------- */
/* ------- User Dropdown ------- */
/* ----------------------------- */
#user-dropdown-button:checked + #user-dropdown {
visibility: visible;
opacity: 1;
}
#user-dropdown {
visibility: hidden;
opacity: 0;
}
/* ----------------------------- */
/* ----- Mobile Navigation ----- */
/* ----------------------------- */
#mobile-nav-button span {
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#mobile-nav-button span:first-child {
transform-origin: 0% 0%;
}
#mobile-nav-button span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#mobile-nav-button input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(2px, -2px);
}
#mobile-nav-button input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#mobile-nav-button input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, 6px);
}
#mobile-nav-button input:checked ~ div {
transform: none;
}
@media (min-width: 1024px) {
#mobile-nav-button input ~ div {
transform: none;
}
}
#menu {
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
</style>
</body> </body>
</html> </html>

31
templates/reader-base.html
View File

@ -1,14 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="manifest" href="{{ .RelBase }}./manifest.json" />
<meta name="theme-color" content="#D2B48C" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta
id="viewport" id="viewport"
name="viewport" name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/> />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<link rel="manifest" href="{{ .RelBase }}./manifest.json" />
<meta name="theme-color" content="#D2B48C" />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<title>Book Manager - {{block "title" .}}{{end}}</title> <title>Book Manager - {{block "title" .}}{{end}}</title>
<style> <style>
@ -18,6 +23,14 @@
margin: 0px; margin: 0px;
} }
html {
min-height: calc(100% + env(safe-area-inset-top));
}
#viewer {
padding-top: env(safe-area-inset-top);
}
/* For Webkit-based browsers (Chrome, Safari and Opera) */ /* For Webkit-based browsers (Chrome, Safari and Opera) */
.no-scrollbar::-webkit-scrollbar { .no-scrollbar::-webkit-scrollbar {
display: none; display: none;
@ -32,14 +45,23 @@
#bottom-bar { #bottom-bar {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
#top-bar {
padding-top: env(safe-area-inset-top);
}
#top-bar:not(.top-0) {
top: calc((8em + env(safe-area-inset-top)) * -1);
}
</style> </style>
</head> </head>
<body class="bg-gray-100 dark:bg-gray-800 h-[100dvh]"> <body class="bg-gray-100 dark:bg-gray-800">
<main class="relative overflow-hidden"> <main class="relative overflow-hidden">
<div <div
id="top-bar" id="top-bar"
class="-top-32 transition-all duration-200 absolute z-10 bg-gray-100 dark:bg-gray-800 flex items-center justify-around w-full h-32 px-2" class="transition-all duration-200 absolute z-10 bg-gray-100 dark:bg-gray-800 w-full px-2"
> >
<div class="w-full h-32 flex items-center justify-around relative">
<div class="text-gray-500 absolute top-6 left-4 flex flex-col gap-4"> <div class="text-gray-500 absolute top-6 left-4 flex flex-col gap-4">
<a href="../{{ .Data.ID }}"> <a href="../{{ .Data.ID }}">
<svg <svg
@ -106,6 +128,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
id="bottom-bar" id="bottom-bar"