mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-05-15 06:58:50 +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:
+7
-8
@@ -2,7 +2,6 @@
|
|||||||
layout: layouts/base.njk
|
layout: layouts/base.njk
|
||||||
title: Podroll
|
title: Podroll
|
||||||
permalink: /podroll/
|
permalink: /podroll/
|
||||||
withSidebar: true
|
|
||||||
---
|
---
|
||||||
<div class="podroll-page" x-data="podrollApp()" x-init="init()">
|
<div class="podroll-page" x-data="podrollApp()" x-init="init()">
|
||||||
<header class="mb-6 sm:mb-8">
|
<header class="mb-6 sm:mb-8">
|
||||||
@@ -28,9 +27,9 @@ withSidebar: true
|
|||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="flex flex-col lg:flex-row gap-8">
|
<div class="layout-with-sidebar">
|
||||||
{# Main Content - Episodes #}
|
{# Main Content - Episodes #}
|
||||||
<div class="flex-1 min-w-0">
|
<div class="main-content">
|
||||||
{# Loading State #}
|
{# Loading State #}
|
||||||
<div x-show="loading && episodes.length === 0" class="text-center py-12">
|
<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">
|
<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>
|
</div>
|
||||||
|
|
||||||
{# Sidebar - Podcast Sources (OPML) #}
|
{# Sidebar - Podcast Sources (OPML) #}
|
||||||
<aside class="lg:w-80 flex-shrink-0">
|
<aside class="sidebar">
|
||||||
<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">
|
<div class="widget">
|
||||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4 flex items-center gap-2">
|
<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">
|
<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"/>
|
<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"/>
|
<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>
|
</svg>
|
||||||
Subscriptions
|
Subscriptions
|
||||||
<span class="text-sm font-normal text-surface-500" x-text="'(' + sources.length + ')'"></span>
|
<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">
|
<div x-show="sources.length === 0 && !loading" class="text-sm text-surface-500 text-center py-4">
|
||||||
No subscriptions loaded yet.
|
No subscriptions loaded yet.
|
||||||
</div>
|
</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">
|
<template x-for="source in sources" :key="source.xmlUrl">
|
||||||
<li class="group">
|
<li class="group">
|
||||||
<a
|
<a
|
||||||
|
|||||||
Reference in New Issue
Block a user