System-End/stickers
1
0
Fork 0
mirror of https://github.com/System-End/stickers.git synced 2026-04-19 20:55:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add link to event

Browse source
This commit is contained in:
EDRipper 2025-12-14 23:58:31 -05:00
parent 0fb8abed4e
commit f06b3c759e
4 changed files with 89 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
backend/api/stickers.rb
View file

@ -16,6 +16,7 @@ class Stickers < Base
image: record["CDN_URL"],
artist: record["Artist"],
event: record["Event"],
event_URL: record["event_URL"],
owned_by: owned_by,
owned: user_id && owners.include?(user_id)
}
@ -30,9 +31,10 @@ class Stickers < Base
{
id: record.id,
name: record["Sticker Name"],
image: record["CDNURL"],
image: record["CDN_URL"],
artist: record["Artist"],
event: record["Event"]
event: record["Event"],
event_URL: record["event_URL"]
}
end
end

8
backend/models/sticker.rb
View file

@ -5,11 +5,17 @@ class Sticker < ApplicationRecord
field :active, "active"
field :autonumber, "id"
field :image_attachment, "image"
field :event_URL, "event_URL"
scope :only_active, -> { where(active: true) }
def as_json(options = nil)
{ id: autonumber, name: name, image: }
{ id: autonumber, name: name, image: image, event_URL: event_url }
end
def event_url
url = event_URL
url.is_a?(String) ? url : url&.dig("url")
end
def image = image_attachment&.dig(0, "url")

43
src/routes/archive/+page.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from "svelte";
import LazyImage from "$lib/components/LazyImage.svelte";
/** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[] }} Sticker */
/** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[], event_URL?: string }} Sticker */
let selectedFilter = $state("all");
let searchQuery = $state("");
@ -120,10 +120,15 @@
<LazyImage src={selectedSticker.image} alt={selectedSticker.name} />
</div>
<div class="modal-footer">
<h2>{selectedSticker.name}</h2>
<div class="modal-header-row">
{#if selectedSticker.event_URL}
<a href={selectedSticker.event_URL.startsWith('http') ? selectedSticker.event_URL : `https://${selectedSticker.event_URL}`} target="_blank" rel="noopener noreferrer" class="event-btn">Go To Event</a>
{/if}
<h2>{selectedSticker.name}</h2>
</div>
<div class="modal-info">
{#each Object.entries(selectedSticker) as [key, value]}
{#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id"}
{#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id" && key !== "event_URL" && key !== "name"}
<div class="info-row">
<span class="info-key">{key}:</span>
<span class="info-value"
@ -474,14 +479,44 @@
.modal-footer {
padding: 1.5rem;
border-top: 2px solid #333;
text-align: left;
}
.modal-header-row {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.modal-footer h2 {
margin: 0 0 1rem 0;
margin: 0;
font-size: 1.75rem;
font-family: 'Departure Mono', monospace;
}
.modal-info {
margin-top: 1rem;
}
.event-btn {
display: inline-block;
padding: 0.5rem 1rem;
background: #ec3750;
color: white;
text-decoration: none;
border-radius: 0.5rem;
font-family: 'Departure Mono', monospace;
font-size: 0.9rem;
white-space: nowrap;
border: 2px solid #c42d42;
}
.event-btn:hover {
background: #c42d42;
}
.modal-info {
display: flex;
flex-direction: column;

43
src/routes/stickers/+page.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from "svelte";
import LazyImage from "$lib/components/LazyImage.svelte";
/** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[] }} Sticker */
/** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[], event_URL?: string }} Sticker */
let selectedFilter = $state("all");
let searchQuery = $state("");
@ -122,10 +122,15 @@
<LazyImage src={selectedSticker.image} alt={selectedSticker.name} />
</div>
<div class="modal-footer">
<h2>{selectedSticker.name}</h2>
<div class="modal-header-row">
{#if selectedSticker.event_URL}
<a href={selectedSticker.event_URL.startsWith('http') ? selectedSticker.event_URL : `https://${selectedSticker.event_URL}`} target="_blank" rel="noopener noreferrer" class="event-btn">Go To Event</a>
{/if}
<h2>{selectedSticker.name}</h2>
</div>
<div class="modal-info">
{#each Object.entries(selectedSticker) as [key, value]}
{#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id"}
{#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id" && key !== "event_URL" && key !== "name"}
<div class="info-row">
<span class="info-key">{key}:</span>
<span class="info-value"
@ -475,14 +480,44 @@
.modal-footer {
padding: 1.5rem;
border-top: 2px solid #333;
text-align: left;
}
.modal-header-row {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.modal-footer h2 {
margin: 0 0 1rem 0;
margin: 0;
font-size: 1.75rem;
font-family: 'Departure Mono', monospace;
}
.modal-info {
margin-top: 1rem;
}
.event-btn {
display: inline-block;
padding: 0.5rem 1rem;
background: #ec3750;
color: white;
text-decoration: none;
border-radius: 0.5rem;
font-family: 'Departure Mono', monospace;
font-size: 0.9rem;
white-space: nowrap;
border: 2px solid #c42d42;
}
.event-btn:hover {
background: #c42d42;
}
.modal-info {
display: flex;
flex-direction: column;