Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling fixes

Browse Source
This commit is contained in:
Michael Freno
2025-12-25 01:15:21 -05:00
parent aa66fae1b7
commit 55446541fb
9 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.css
View File

@@ -209,6 +209,7 @@
transition-duration: 500ms;
syntax: "*";
inherits: false;
scrollbar-gutter: stable;
}
::selection {

2
src/app.tsx
View File

@@ -164,7 +164,7 @@ function AppLayout(props: { children: any }) {
<>
<div class="flex max-w-screen flex-row">
<LeftBar />
<div class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-scroll md:ml-62.5 md:w-[calc(100vw-500px)]">
<div class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-auto md:ml-62.5 md:w-[calc(100vw-500px)]">
<noscript>
<div class="bg-yellow text-crust border-text fixed top-0 z-150 border-b-2 p-4 text-center font-semibold md:w-[calc(100vw-500px)]">
JavaScript is disabled. Features will be limited.

10
src/components/Bars.tsx
View File

@@ -171,7 +171,7 @@ export function RightBarContent() {
}
export function LeftBar() {
const { leftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
const { leftBarVisible, setLeftBarVisible } = useBars();
let ref: HTMLDivElement | undefined;
const [recentPosts, setRecentPosts] = createSignal<any[] | undefined>(
@@ -293,14 +293,14 @@ export function LeftBar() {
tabindex="-1"
ref={ref}
aria-label="Main navigation"
class="border-r-overlay2 bg-base fixed z-50 h-dvh w-min border-r-2 transition-transform duration-500 ease-out"
class="border-r-overlay2 bg-base fixed z-50 h-dvh border-r-2 transition-transform duration-500 ease-out"
classList={{
"-translate-x-full": !leftBarVisible(),
"translate-x-0": leftBarVisible()
}}
style={{
"transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
"min-width": "250px",
width: "250px",
"box-shadow": "inset -6px 0 16px -6px rgba(0, 0, 0, 0.1)",
"padding-top": "env(safe-area-inset-top)",
"padding-bottom": "env(safe-area-inset-bottom)"
@@ -477,14 +477,14 @@ export function RightBar() {
<aside
ref={ref}
aria-label="Links and activity"
class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-dvh w-fit border-l-2 transition-transform duration-500 ease-out md:block md:max-w-[20%]"
class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-dvh w-fit border-l-2 transition-transform duration-500 ease-out md:block"
classList={{
"translate-x-full": !rightBarVisible(),
"translate-x-0": rightBarVisible()
}}
style={{
"transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
"min-width": "250px",
width: "250px",
"box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)",
"padding-top": "env(safe-area-inset-top)",
"padding-bottom": "env(safe-area-inset-bottom)"

16
src/components/blog/CommentBlock.tsx
View File

@@ -1,12 +1,4 @@
import {
createSignal,
createEffect,
For,
Show,
onMount,
onCleanup
} from "solid-js";
import { useLocation } from "@solidjs/router";
import { createSignal, createEffect, For, Show } from "solid-js";
import type {
CommentBlockProps,
CommentReaction,
@@ -23,8 +15,6 @@ import CommentInputBlock from "./CommentInputBlock";
import ReactionBar from "./ReactionBar";
export default function CommentBlock(props: CommentBlockProps) {
const location = useLocation();
const [commentCollapsed, setCommentCollapsed] = createSignal(false);
const [showingReactionOptions, setShowingReactionOptions] =
createSignal(false);
@@ -92,6 +82,8 @@ export default function CommentBlock(props: CommentBlockProps) {
const deleteCommentTrigger = async (e: MouseEvent) => {
e.stopPropagation();
console.log("Delete comment");
setDeletionLoading(true);
const user = userData();
props.toggleModification(
@@ -270,7 +262,7 @@ export default function CommentBlock(props: CommentBlockProps) {
{/* Delete button */}
<Show when={canDelete()}>
<button onClick={deleteCommentTrigger}>
<button class="z-100" onClick={deleteCommentTrigger}>
<Show
when={!deletionLoading()}
fallback={<LoadingSpinner height={24} width={24} />}

7
src/components/blog/CommentDeletionPrompt.tsx
View File

@@ -37,11 +37,6 @@ export default function CommentDeletionPrompt(
} else if (fullDeleteChecked()) {
deleteType = "database";
}
console.log("[CommentDeletionPrompt] Calling deleteComment:", {
commentID: props.commentID,
commenterID: props.commenterID,
deleteType
});
props.deleteComment(props.commentID, props.commenterID, deleteType);
};
@@ -55,7 +50,7 @@ export default function CommentDeletionPrompt(
id="delete_prompt"
class="fade-in bg-red rounded-md px-8 py-4 shadow-lg brightness-110"
>
<button class="absolute right-4" onClick={() => {}}>
<button class="fixed right-4" onClick={() => props.onClose()}>
<Xmark strokeWidth={0.5} color="white" height={50} width={50} />
</button>
<div class="py-4 text-center text-3xl tracking-wide">

8
src/components/blog/CommentSectionWrapper.tsx
View File

@@ -645,6 +645,10 @@ export default function CommentSectionWrapper(
privilegeLevel={props.privilegeLevel}
commentDeletionLoading={commentDeletionLoading()}
deleteComment={deleteComment}
onClose={() => {
setShowingDeletionPrompt(false);
clearModificationPrompt();
}}
/>
</div>
</Show>
@@ -659,6 +663,10 @@ export default function CommentSectionWrapper(
commenterDisplayName={commenterDisplayNameForModification()}
editCommentLoading={editCommentLoading()}
editComment={editComment}
onClose={() => {
setShowingCommentEdit(false);
clearModificationPrompt();
}}
/>
</div>
</Show>

2
src/components/blog/EditCommentModal.tsx
View File

@@ -27,7 +27,7 @@ export default function EditCommentModal(props: EditCommentModalProps) {
id="edit_prompt"
class="fade-in bg-surface1 z-50 rounded-md px-8 py-4 shadow-lg"
>
<button class="absolute right-4" onClick={() => {}}>
<button class="absolute right-4" onClick={() => props.onClose()}>
<Xmark
strokeWidth={0.5}
color="var(--color-text)"

2
src/routes/blog/[title]/index.tsx
View File

@@ -321,7 +321,7 @@ export default function PostPage() {
return tagValue ? (
<A
href={`/blog?include=${encodeURIComponent(tagValue.split("#")[1])}`}
class="group bg-rosewater relative m-1 h-fit w-fit rounded-xl px-2 py-1 text-sm transition-all duration-200 hover:brightness-110 active:scale-95"
class="group bg-teal relative m-1 h-fit w-fit rounded-xl px-2 py-1 text-sm transition-all duration-200 hover:brightness-110 active:scale-95"
>
<div class="text-white">{tagValue}</div>
</A>

2
src/types/comment.ts
View File

@@ -210,6 +210,7 @@ export interface CommentDeletionPromptProps {
deletionType: DeletionType
) => void;
commentDeletionLoading: boolean;
onClose: () => void;
commenterImage?: string;
commenterEmail?: string;
commenterDisplayName?: string;
@@ -220,6 +221,7 @@ export interface EditCommentModalProps {
commentBody: string;
editComment: (body: string, comment_id: number) => Promise<void>;
editCommentLoading: boolean;
onClose: () => void;
commenterImage?: string;
commenterEmail?: string;
commenterDisplayName?: string;