silberengel
/
aitherboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix write button

master
Silberengel 1 month ago
parent
e80639a2d9
commit
020902a928
4 changed files with 115 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 64
      src/app.css
  2. 41
      src/routes/discussions/+page.svelte
  3. 9
      src/routes/feed/+page.svelte
  4. 107
      src/routes/lists/+page.svelte

64
src/app.css
Unescape View File

@ -214,63 +214,31 @@ main {
/* Common button styles */ /* Common button styles */
.write-button { .write-button {
display: inline-flex; padding: 0.5rem 1rem;
align-items: center; border: 1px solid var(--fog-border, #cbd5e1);
justify-content: center; border-radius: 4px;
padding: 0.5rem; background: var(--fog-post, #ffffff);
border: 1px solid var(--fog-border, #e5e7eb); color: var(--fog-text, #1e293b);
border-radius: 0.375rem;
background: var(--fog-surface, #f8fafc);
color: var(--fog-text, #1f2937);
text-decoration: none; text-decoration: none;
transition: all 0.2s;
min-width: 2.5rem;
min-height: 2.5rem;
flex-shrink: 0;
cursor: pointer; cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
} }
.write-button:hover:not(:disabled) {
:global(.dark) .write-button { background: var(--fog-highlight, #f1f5f9);
border-color: var(--fog-dark-border, #374151); border-color: var(--fog-accent, #94a3b8);
background: var(--fog-dark-surface, #1e293b); /* Use surface color for contrast with page background */
color: var(--fog-dark-text, #f9fafb);
}
/* Ensure icon inherits color - the SVG's stroke="currentColor" will use this */
.write-button :global(.icon-wrapper) {
color: inherit;
}
/* Directly set stroke color on SVG paths for write-button */
/* This ensures the icon is visible even if currentColor doesn't resolve correctly */
.write-button :global(.icon-wrapper svg[stroke="currentColor"]),
.write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
stroke: currentColor;
fill: none;
}
/* Ensure write-button icon is always visible in dark mode */
:global(.dark) .write-button :global(.icon-wrapper) {
color: var(--fog-dark-text, #f9fafb);
}
/* Directly set stroke color on SVG paths for write-button in dark mode */
/* Use !important to override any conflicting rules */
:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"]),
:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
stroke: var(--fog-dark-text, #f9fafb) !important;
fill: none !important;
} }
.write-button:hover { :global(.dark) .write-button {
background: var(--fog-highlight, #f3f4f6); background: var(--fog-dark-post, #334155);
border-color: var(--fog-accent, #64748b); border-color: var(--fog-dark-border, #475569);
color: var(--fog-dark-text, #f1f5f9);
} }
:global(.dark) .write-button:hover { :global(.dark) .write-button:hover:not(:disabled) {
background: var(--fog-dark-highlight, #475569); background: var(--fog-dark-highlight, #475569);
border-color: var(--fog-dark-accent, #94a3b8); border-color: var(--fog-dark-accent, #64748b);
} }
/* Action buttons (accent background) */ /* Action buttons (accent background) */

41
src/routes/discussions/+page.svelte
Unescape View File

@ -9,7 +9,6 @@
import type { NostrEvent } from '../../lib/types/nostr.js'; import type { NostrEvent } from '../../lib/types/nostr.js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
import Icon from '../../lib/components/ui/Icon.svelte';
import Pagination from '../../lib/components/ui/Pagination.svelte'; import Pagination from '../../lib/components/ui/Pagination.svelte';
import { getPaginatedItems, getCurrentPage, ITEMS_PER_PAGE } from '../../lib/utils/pagination.js'; import { getPaginatedItems, getCurrentPage, ITEMS_PER_PAGE } from '../../lib/utils/pagination.js';
@ -57,9 +56,6 @@
<h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Discussions</h1> <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Discussions</h1>
<p class="text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p> <p class="text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p>
</div> </div>
<a href="/write?kind=11" class="write-button" title="Write a new thread">
<Icon name="edit" size={20} />
</a>
</div> </div>
<div class="discussions-controls"> <div class="discussions-controls">
@ -77,6 +73,9 @@
{#if discussionListComponent && !searchResults.events.length && !searchResults.profiles.length} {#if discussionListComponent && !searchResults.events.length && !searchResults.profiles.length}
<div class="discussions-controls-row"> <div class="discussions-controls-row">
<a href="/write?kind=11" class="see-more-events-btn-header" title="Write a new thread">
Write
</a>
<select <select
bind:value={discussionListComponent.sortBy} bind:value={discussionListComponent.sortBy}
class="sort-select" class="sort-select"
@ -208,6 +207,40 @@
color: var(--fog-dark-text, #f1f5f9); color: var(--fog-dark-text, #f1f5f9);
} }
.see-more-events-btn-header {
padding: 0.5rem 1rem;
border: 1px solid var(--fog-border, #cbd5e1);
border-radius: 4px;
background: var(--fog-post, #ffffff);
color: var(--fog-text, #1e293b);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
text-decoration: none;
display: inline-block;
}
.see-more-events-btn-header:hover:not(:disabled) {
background: var(--fog-highlight, #f1f5f9);
border-color: var(--fog-accent, #94a3b8);
}
.see-more-events-btn-header:disabled {
opacity: 0.5;
cursor: not-allowed;
}
:global(.dark) .see-more-events-btn-header {
background: var(--fog-dark-post, #334155);
border-color: var(--fog-dark-border, #475569);
color: var(--fog-dark-text, #f1f5f9);
}
:global(.dark) .see-more-events-btn-header:hover:not(:disabled) {
background: var(--fog-dark-highlight, #475569);
border-color: var(--fog-dark-accent, #64748b);
}
.search-section :global(.unified-search-container) { .search-section :global(.unified-search-container) {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;

9
src/routes/feed/+page.svelte
Unescape View File

@ -3,7 +3,6 @@
import FeedPage from '../../lib/modules/feed/FeedPage.svelte'; import FeedPage from '../../lib/modules/feed/FeedPage.svelte';
import { nostrClient } from '../../lib/services/nostr/nostr-client.js'; import { nostrClient } from '../../lib/services/nostr/nostr-client.js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Icon from '../../lib/components/ui/Icon.svelte';
import type { NostrEvent } from '../../lib/types/nostr.js'; import type { NostrEvent } from '../../lib/types/nostr.js';
let feedPageComponent: { let feedPageComponent: {
@ -26,12 +25,12 @@
<div class="feed-header mb-6"> <div class="feed-header mb-6">
<div class="feed-header-top"> <div class="feed-header-top">
<h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Feed</h1> <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Feed</h1>
<a href="/write?kind=1" class="write-button" title="Write a new post">
<Icon name="edit" size={20} />
</a>
</div> </div>
<div class="feed-controls"> <div class="feed-controls">
<div class="feed-header-buttons"> <div class="feed-header-buttons">
<a href="/write?kind=1" class="see-more-events-btn-header" title="Write a new post">
Write
</a>
{#if feedPageComponent && feedPageComponent.waitingRoomEvents.length > 0} {#if feedPageComponent && feedPageComponent.waitingRoomEvents.length > 0}
<button <button
onclick={() => feedPageComponent?.loadWaitingRoomEvents()} onclick={() => feedPageComponent?.loadWaitingRoomEvents()}
@ -143,6 +142,8 @@
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
white-space: nowrap; white-space: nowrap;
text-decoration: none;
display: inline-block;
} }
.see-more-events-btn-header:hover:not(:disabled) { .see-more-events-btn-header:hover:not(:disabled) {

107
src/routes/lists/+page.svelte
Unescape View File

@ -339,67 +339,74 @@
<Header /> <Header />
<main class="container mx-auto px-4 py-8"> <main class="container mx-auto px-4 py-8">
{#if !isLoggedIn} <div class="lists-content">
<div class="text-center py-8"> {#if !isLoggedIn}
<p>Please log in to view your lists.</p> <div class="text-center py-8">
<a href="/login" class="text-fog-accent dark:text-fog-dark-accent hover:underline">Go to login</a> <p>Please log in to view your lists.</p>
</div> <a href="/login" class="text-fog-accent dark:text-fog-dark-accent hover:underline">Go to login</a>
{:else if loading}
<div class="text-center py-8">
<p>Loading lists...</p>
</div>
{:else if !hasLists}
<div class="text-center py-8">
<h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
<p>You don't have any lists yet.</p>
<p class="text-sm text-fog-text-light dark:text-fog-dark-text-light mt-2">
Create a kind 3 (contacts) or kind 30000 (follow_set) event to get started.
</p>
</div>
{:else}
<div class="lists-header mb-6">
<h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
<div class="list-selector mb-4">
<label for="list-select" class="block text-sm font-medium text-fog-text dark:text-fog-dark-text mb-2">
Select a list:
</label>
<select
id="list-select"
onchange={handleListChange}
class="w-full max-w-md px-4 py-2 border border-fog-border dark:border-fog-dark-border rounded bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text"
>
{#each lists as list, index}
<option value={index} selected={selectedList === list}>
Kind {list.kind}: {list.name} ({list.pubkeys.length} {list.pubkeys.length === 1 ? 'person' : 'people'})
</option>
{/each}
</select>
</div> </div>
</div> {:else if loading}
{#if loadingEvents}
<div class="text-center py-8"> <div class="text-center py-8">
<p>Loading events...</p> <p>Loading lists...</p>
</div> </div>
{:else if selectedList && events.length === 0} {:else if !hasLists}
<div class="text-center py-8"> <div class="text-center py-8">
<p>No events found for this list.</p> <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
<p>You don't have any lists yet.</p>
<p class="text-sm text-fog-text-light dark:text-fog-dark-text-light mt-2">
Create a kind 3 (contacts) or kind 30000 (follow_set) event to get started.
</p>
</div> </div>
{:else if selectedList} {:else}
<div class="events-list"> <div class="lists-header mb-6">
{#each paginatedEvents as event (event.id)} <h1 class="font-bold text-fog-text dark:text-fog-dark-text font-mono mb-4" style="font-size: 1.5em;">/Lists</h1>
<FeedPost post={event} fullView={false} />
{/each} <div class="list-selector mb-4">
<label for="list-select" class="block text-sm font-medium text-fog-text dark:text-fog-dark-text mb-2">
Select a list:
</label>
<select
id="list-select"
onchange={handleListChange}
class="w-full max-w-md px-4 py-2 border border-fog-border dark:border-fog-dark-border rounded bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text"
>
{#each lists as list, index}
<option value={index} selected={selectedList === list}>
Kind {list.kind}: {list.name} ({list.pubkeys.length} {list.pubkeys.length === 1 ? 'person' : 'people'})
</option>
{/each}
</select>
</div>
</div> </div>
{#if events.length > ITEMS_PER_PAGE}
<Pagination totalItems={events.length} itemsPerPage={ITEMS_PER_PAGE} /> {#if loadingEvents}
<div class="text-center py-8">
<p>Loading events...</p>
</div>
{:else if selectedList && events.length === 0}
<div class="text-center py-8">
<p>No events found for this list.</p>
</div>
{:else if selectedList}
<div class="events-list">
{#each paginatedEvents as event (event.id)}
<FeedPost post={event} fullView={false} />
{/each}
</div>
{#if events.length > ITEMS_PER_PAGE}
<Pagination totalItems={events.length} itemsPerPage={ITEMS_PER_PAGE} />
{/if}
{/if} {/if}
{/if} {/if}
{/if} </div>
</main> </main>
<style> <style>
.lists-content {
max-width: var(--content-width);
margin: 0 auto;
}
.lists-header { .lists-header {
border-bottom: 1px solid var(--fog-border, #e5e7eb); border-bottom: 1px solid var(--fog-border, #e5e7eb);
padding-bottom: 1rem; padding-bottom: 1rem;

Write Preview
Loading…
Cancel
Save