mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
fix(podroll): move subscriptions to sidebar, use widget styling
- Remove withSidebar to avoid double sidebar - Use layout-with-sidebar and main-content classes - Style subscriptions widget like other sidebar widgets - Remove height limit so subscriptions can expand fully Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
15
podroll.njk
15
podroll.njk
@@ -2,7 +2,6 @@
|
||||
layout: layouts/base.njk
|
||||
title: Podroll
|
||||
permalink: /podroll/
|
||||
withSidebar: true
|
||||
---
|
||||
<div class="podroll-page" x-data="podrollApp()" x-init="init()">
|
||||
<header class="mb-6 sm:mb-8">
|
||||
@@ -28,9 +27,9 @@ withSidebar: true
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<div class="layout-with-sidebar">
|
||||
{# Main Content - Episodes #}
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="main-content">
|
||||
{# Loading State #}
|
||||
<div x-show="loading && episodes.length === 0" class="text-center py-12">
|
||||
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
|
||||
@@ -179,22 +178,22 @@ withSidebar: true
|
||||
</div>
|
||||
|
||||
{# Sidebar - Podcast Sources (OPML) #}
|
||||
<aside class="lg:w-80 flex-shrink-0">
|
||||
<div class="sticky top-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6">
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4 flex items-center gap-2">
|
||||
<aside class="sidebar">
|
||||
<div class="widget">
|
||||
<h3 class="widget-title flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<circle cx="6.18" cy="17.82" r="2.18"/>
|
||||
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
|
||||
</svg>
|
||||
Subscriptions
|
||||
<span class="text-sm font-normal text-surface-500" x-text="'(' + sources.length + ')'"></span>
|
||||
</h2>
|
||||
</h3>
|
||||
|
||||
<div x-show="sources.length === 0 && !loading" class="text-sm text-surface-500 text-center py-4">
|
||||
No subscriptions loaded yet.
|
||||
</div>
|
||||
|
||||
<ul x-show="sources.length > 0" class="space-y-2 max-h-[60vh] overflow-y-auto">
|
||||
<ul x-show="sources.length > 0" class="space-y-2">
|
||||
<template x-for="source in sources" :key="source.xmlUrl">
|
||||
<li class="group">
|
||||
<a
|
||||
|
||||
Reference in New Issue
Block a user