Brought over most of the changes from go-web-starter-kit.
This commit is contained in:
Zed A. Shaw
parent
01fcb964be
commit
8d70b57299
11 changed files with 143 additions and 57 deletions
|
|
@ -2,7 +2,7 @@
|
|||
@import "./theme.css" layer(theme);
|
||||
|
||||
body {
|
||||
@apply text-gray-950 dark:text-gray-50;
|
||||
@apply bg-gray-100 text-gray-950 dark:text-gray-50 dark:bg-gray-950;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -10,11 +10,15 @@ main {
|
|||
}
|
||||
|
||||
header {
|
||||
@apply flex flex-col justify-stretch;
|
||||
@apply flex justify-stretch;
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
|
||||
@apply flex justify-center items-center bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
@apply flex justify-center items-center pt-1;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -23,7 +27,7 @@ code {
|
|||
}
|
||||
|
||||
pre {
|
||||
@apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
|
||||
@apply bg-gray-950 border-1 border-gray-600 mb-4 p-1;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
|
@ -34,6 +38,10 @@ footer {
|
|||
@apply bg-gray-950 text-gray-50 text-lg flex p-6;
|
||||
}
|
||||
|
||||
@utility sticky-bottom {
|
||||
@apply w-full sticky bottom-0 left-0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-6xl mb-2 mt-4;
|
||||
}
|
||||
|
|
@ -118,6 +126,10 @@ button {
|
|||
@apply rounded-sm shadow-sm bg-gray-600 text-gray-50 dark:bg-gray-300 dark:text-gray-950 p-3;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply border-l-5 border-gray-800 dark:border-black bg-gray-200 text-black dark:bg-gray-700 dark:text-white p-2;
|
||||
}
|
||||
|
||||
@utility btn-hover {
|
||||
@apply !bg-gray-900 !text-gray-50;
|
||||
}
|
||||
|
|
@ -171,7 +183,7 @@ shape.video {
|
|||
}
|
||||
|
||||
block {
|
||||
@apply flex flex-col p-4 mb-10 gap-4;
|
||||
@apply flex flex-col p-4 gap-4;
|
||||
}
|
||||
|
||||
bar {
|
||||
|
|
|
|||
1
static/js/alpine-intersect.js
Normal file
1
static/js/alpine-intersect.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
(()=>{function o(e){e.directive("intersect",e.skipDuringClone((t,{value:i,expression:l,modifiers:n},{evaluateLater:r,cleanup:c})=>{let s=r(l),a={rootMargin:x(n),threshold:f(n)},u=new IntersectionObserver(d=>{d.forEach(h=>{h.isIntersecting!==(i==="leave")&&(s(),n.includes("once")&&u.disconnect())})},a);u.observe(t),c(()=>{u.disconnect()})}))}function f(e){if(e.includes("full"))return .99;if(e.includes("half"))return .5;if(!e.includes("threshold"))return 0;let t=e[e.indexOf("threshold")+1];return t==="100"?1:t==="0"?0:Number(`.${t}`)}function p(e){let t=e.match(/^(-?[0-9]+)(px|%)?$/);return t?t[1]+(t[2]||"px"):void 0}function x(e){let t="margin",i="0px 0px 0px 0px",l=e.indexOf(t);if(l===-1)return i;let n=[];for(let r=1;r<5;r++)n.push(p(e[l+r]||""));return n=n.filter(r=>r!==void 0),n.length?n.join(" ").trim():i}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(o)});})();
|
||||
|
|
@ -4,7 +4,7 @@ class PaginateTable {
|
|||
this.items = [];
|
||||
this.url = url;
|
||||
this.headers = [];
|
||||
this.search_query=""
|
||||
this.search_query="";
|
||||
}
|
||||
|
||||
async contents() {
|
||||
|
|
@ -31,19 +31,43 @@ class PaginateTable {
|
|||
}
|
||||
}
|
||||
|
||||
class GetJson {
|
||||
class ForeverScroll {
|
||||
constructor(url) {
|
||||
this.item;
|
||||
this.page = 0;
|
||||
this.items = [];
|
||||
this.url = url;
|
||||
this.end = false;
|
||||
}
|
||||
|
||||
async item() {
|
||||
const resp = await fetch(`${this.url}`);
|
||||
async init() {
|
||||
const resp = await fetch(this.url);
|
||||
console.assert(resp.status == 200, "failed to get it");
|
||||
|
||||
this.item = await resp.json();
|
||||
return this.item;
|
||||
const items = await resp.json();
|
||||
if(items) this.items = items;
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.page += 1
|
||||
let url = `${this.url}?page=${this.page}`;
|
||||
|
||||
const resp = await fetch(url);
|
||||
console.assert(resp.status == 200, "failed to get it");
|
||||
|
||||
const items = await resp.json();
|
||||
|
||||
if(items) {
|
||||
this.items.push(...items);
|
||||
} else {
|
||||
this.end = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const GetJson = async (url) => {
|
||||
const resp = await fetch(url);
|
||||
console.assert(resp.status == 200, "failed to get it");
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
const ConfirmDelete = async (table, obj_id) => {
|
||||
|
|
@ -55,3 +79,14 @@ const ConfirmDelete = async (table, obj_id) => {
|
|||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const UrlId = () => {
|
||||
let url = new URL(window.location.href);
|
||||
let parts = url.pathname.split("/");
|
||||
|
||||
if(window.location.href.endsWith("/")) {
|
||||
return parts[parts.length - 2];
|
||||
} else {
|
||||
return parts[parts.length - 1];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
--color-gray-900: oklch(21% 0.0 264.665);
|
||||
--color-gray-950: oklch(13% 0.0 261.692);
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
|
|
@ -477,9 +478,6 @@
|
|||
.\!p-4 {
|
||||
padding: calc(var(--spacing) * 4) !important;
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-0\! {
|
||||
padding: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
|
|
@ -640,7 +638,11 @@
|
|||
}
|
||||
@layer theme;
|
||||
body {
|
||||
background-color: var(--color-gray-100);
|
||||
color: var(--color-gray-950);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-950);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
|
|
@ -662,13 +664,15 @@ main {
|
|||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
background-color: var(--color-gray-950);
|
||||
padding: calc(var(--spacing) * 6);
|
||||
:is(& > *) {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -680,6 +684,12 @@ nav {
|
|||
color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
nav > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
code {
|
||||
speak-as: literal-punctuation;
|
||||
display: inline-block;
|
||||
|
|
@ -688,10 +698,9 @@ code {
|
|||
}
|
||||
pre {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
border-radius: var(--radius-lg);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
border-color: var(--color-gray-300);
|
||||
border-color: var(--color-gray-600);
|
||||
background-color: var(--color-gray-950);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
|
@ -859,6 +868,23 @@ button {
|
|||
color: var(--color-gray-950);
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
border-left-style: var(--tw-border-style);
|
||||
border-left-width: 5px;
|
||||
border-color: var(--color-gray-800);
|
||||
background-color: var(--color-gray-200);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
color: var(--color-black);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-700);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
shape {
|
||||
display: flex;
|
||||
aspect-ratio: 1 / 1;
|
||||
|
|
@ -911,7 +937,6 @@ shape.video {
|
|||
width: 100%;
|
||||
}
|
||||
block {
|
||||
margin-bottom: calc(var(--spacing) * 10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue