melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: extend neo-brutalist principles across all pages and fix jikan API limits

Browse Source
This commit is contained in:
mkelvers
2026-04-09 12:56:57 +02:00
parent 3f1b5e1d0a
commit 8965dc5441
2 changed files with 61 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
internal/jikan/seasons.go
View File

@@ -13,7 +13,7 @@ type ScheduleResult struct {
func (c *Client) GetSchedule(day string) (ScheduleResult, error) {
day = strings.ToLower(day)
cacheKey := fmt.Sprintf("schedule_%s", day)
cacheKey := fmt.Sprintf("schedule_limit24_%s", day)
var cached ScheduleResult
if c.getCache(cacheKey, &cached) {
@@ -21,7 +21,7 @@ func (c *Client) GetSchedule(day string) (ScheduleResult, error) {
}
var result TopAnimeResponse
reqURL := fmt.Sprintf("%s/schedules?filter=%s&sfw=true", c.baseURL, day)
reqURL := fmt.Sprintf("%s/schedules?filter=%s&sfw=true&limit=24", c.baseURL, day)
if err := c.fetchWithRetry(reqURL, &result); err != nil {
return ScheduleResult{}, err
}
@@ -54,14 +54,14 @@ func (c *Client) GetSeasonsNow(page int) (TopAnimeResult, error) {
if page < 1 {
page = 1
}
cacheKey := fmt.Sprintf("seasons_now:%d", page)
cacheKey := fmt.Sprintf("seasons_now_limit24:%d", page)
var cached TopAnimeResult
if c.getCache(cacheKey, &cached) {
return cached, nil
}
var result TopAnimeResponse
reqURL := fmt.Sprintf("%s/seasons/now?page=%d", c.baseURL, page)
reqURL := fmt.Sprintf("%s/seasons/now?limit=24&page=%d", c.baseURL, page)
if err := c.fetchWithRetry(reqURL, &result); err != nil {
return TopAnimeResult{}, err
}
@@ -79,14 +79,14 @@ func (c *Client) GetSeasonsUpcoming(page int) (TopAnimeResult, error) {
if page < 1 {
page = 1
}
cacheKey := fmt.Sprintf("seasons_upcoming:%d", page)
cacheKey := fmt.Sprintf("seasons_upcoming_limit24:%d", page)
var cached TopAnimeResult
if c.getCache(cacheKey, &cached) {
return cached, nil
}
var result TopAnimeResponse
reqURL := fmt.Sprintf("%s/seasons/upcoming?page=%d", c.baseURL, page)
reqURL := fmt.Sprintf("%s/seasons/upcoming?limit=24&page=%d", c.baseURL, page)
if err := c.fetchWithRetry(reqURL, &result); err != nil {
return TopAnimeResult{}, err
}

98
static/css/style.css
View File

@@ -160,17 +160,18 @@ header {
.search-input {
background: var(--surface);
border: 1px solid var(--border);
border: none;
color: var(--text);
padding: var(--space-sm) var(--space-md);
padding: var(--space-md) var(--space-xl);
font-size: var(--text-md);
width: clamp(200px, 25vw + 80px, 400px);
font-family: inherit;
border-radius: 0;
}
.search-input:focus {
outline: none;
border-color: var(--text-muted);
background: var(--surface-hover);
}
.search-input:focus+.search-dropdown {
@@ -206,14 +207,14 @@ header {
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
border-bottom: 1px solid var(--border);
border-bottom: none;
}
.search-result-item {
display: flex;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border);
border-bottom: none;
text-decoration: none;
color: inherit;
transition: background 0.15s;
@@ -230,6 +231,8 @@ header {
object-fit: cover;
flex-shrink: 0;
transition: opacity 0.2s ease;
background: var(--surface);
animation: pulse-bg 2s ease-in-out infinite;
}
.search-result-item:hover .search-result-thumb {
@@ -244,7 +247,7 @@ header {
justify-content: center;
background-color: var(--surface-hover);
background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 6px);
border: 1px solid var(--border);
border: none;
font-size: 0;
color: transparent;
flex-shrink: 0;
@@ -286,13 +289,15 @@ header {
text-align: center;
color: var(--link);
font-size: var(--text-base);
border-top: 1px solid var(--border);
border-top: none;
text-decoration: none;
background: var(--surface-hover);
}
.search-result-view-all:hover {
background: var(--surface-hover);
text-decoration: underline;
background: var(--surface);
text-decoration: none;
color: var(--text);
}
/* Main */
@@ -379,7 +384,7 @@ a:visited {
font-size: 0;
background-color: var(--surface);
background-image: repeating-linear-gradient(45deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 8px);
border: 1px solid var(--border);
border: none;
user-select: none;
}
@@ -484,8 +489,8 @@ a.htmx-request {
.login-container {
max-width: clamp(260px, 20vw + 180px, 360px);
margin: var(--space-2xl) auto;
border: 1px solid var(--border);
padding: var(--space-lg);
border: none;
padding: var(--space-2xl);
background: var(--surface);
}
@@ -520,9 +525,9 @@ a.htmx-request {
}
.form-group input {
padding: var(--space-sm) var(--space-md);
background: var(--surface);
border: 1px solid var(--border);
padding: var(--space-md) var(--space-lg);
background: var(--bg);
border: none;
color: var(--text);
font-size: var(--text-md);
font-family: inherit;
@@ -530,7 +535,7 @@ a.htmx-request {
.form-group input:focus {
outline: none;
border-color: var(--link);
background: var(--surface-hover);
}
.login-button {
@@ -588,14 +593,14 @@ a.htmx-request {
.view-toggle {
display: flex;
border: 1px solid var(--border);
border: none;
}
.view-toggle a {
padding: var(--space-xs) var(--space-md);
font-size: var(--text-base);
color: var(--link);
border-right: 1px solid var(--border);
border-right: none;
text-decoration: none;
}
@@ -653,7 +658,7 @@ a.htmx-request {
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: var(--text-base);
@@ -678,22 +683,25 @@ a.htmx-request {
.watchlist-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border);
border: none;
}
.watchlist-table th {
text-align: left;
padding: var(--space-md) var(--space-lg);
font-size: var(--text-base);
font-size: var(--text-xs);
font-weight: 600;
color: var(--text);
border-bottom: 1px solid var(--border);
background: var(--surface-hover);
color: var(--text-muted);
border-bottom: none;
background: var(--surface);
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: var(--font-mono);
}
.watchlist-table td {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border);
border-bottom: 2px solid var(--bg);
vertical-align: middle;
font-size: var(--text-md);
}
@@ -706,7 +714,9 @@ a.htmx-request {
width: var(--table-thumb);
aspect-ratio: 2/3;
object-fit: cover;
border: 1px solid var(--border);
border: none;
background: var(--surface);
animation: pulse-bg 2s ease-in-out infinite;
}
.watchlist-table .title-cell {
@@ -758,7 +768,9 @@ a.htmx-request {
.anime-poster img {
width: 100%;
border: 1px solid var(--border);
border: none;
background: var(--surface);
animation: pulse-bg 2s ease-in-out infinite;
}
.anime-info {
@@ -858,6 +870,8 @@ a.htmx-request {
aspect-ratio: 2/3;
object-fit: cover;
transition: opacity 0.2s ease;
background: var(--surface);
animation: pulse-bg 2s ease-in-out infinite;
}
.relation-card:hover .relation-thumb {
@@ -887,7 +901,7 @@ a.htmx-request {
column-gap: var(--space-md);
padding: var(--space-lg);
background: var(--surface);
border: 1px solid var(--border);
border: none;
height: fit-content;
}
@@ -969,10 +983,10 @@ a.htmx-request {
right: 0;
min-width: clamp(140px, 12vw + 80px, 200px);
background: var(--surface);
border: 1px solid var(--border);
border: none;
display: none;
z-index: 50;
margin-top: -1px;
margin-top: 0;
}
.dropdown.open .dropdown-menu {
@@ -1030,7 +1044,7 @@ a.htmx-request {
margin-bottom: var(--space-lg);
padding: var(--space-lg);
background: var(--surface);
border: 1px solid var(--border);
border: none;
}
.sort-filter-group {
@@ -1047,7 +1061,7 @@ a.htmx-request {
.sort-filter-select {
background: var(--surface);
border: 1px solid var(--border);
border: none;
color: var(--text);
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
@@ -1057,7 +1071,7 @@ a.htmx-request {
.sort-filter-select:focus {
outline: none;
border-color: var(--link);
background: var(--surface-hover);
}
/* Responsive */
@@ -1248,9 +1262,10 @@ a.htmx-request {
.schedule-card-image {
aspect-ratio: 2/3;
background: var(--bg);
background: var(--surface);
overflow: hidden;
transition: opacity 0.2s ease;
animation: pulse-bg 2s ease-in-out infinite;
}
.schedule-card:hover .schedule-card-image {
@@ -1374,10 +1389,11 @@ a.htmx-request {
.notification-image {
aspect-ratio: 2/3;
background: var(--bg);
background: var(--surface);
overflow: hidden;
display: block;
transition: opacity 0.2s ease;
animation: pulse-bg 2s ease-in-out infinite;
}
.notification-card:hover .notification-image {
@@ -1385,24 +1401,20 @@ a.htmx-request {
}
.notification-card:hover {
border-color: var(--link);
transform: translateY(-2px);
text-decoration: none;
color: var(--text);
}
.notification-image {
aspect-ratio: 2/3;
background: var(--bg);
overflow: hidden;
display: block;
}
.notification-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
width: 100%;
height: 100%;
object-fit: cover;
}
.notification-content {
padding: var(--space-md);