Implemented narrow reading view

This commit is contained in:
Mia Rose Winter 2024-02-06 21:05:25 +01:00
parent cd25b02fbf
commit 89ba5812bf
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
7 changed files with 42 additions and 9 deletions

View file

@ -28,15 +28,21 @@
}
</small>
</p>
@if (Article.Categories.Count > 0) {
<p class="flex flex-wrap gap-2 my-3">
@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
<CategoryBadgeComponent Category="category" />
}
</p>
}
<div class="flex justify-between items-end my-3">
@if (Article.Categories.Count > 0) {
<p class="flex flex-wrap gap-2">
@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
<CategoryBadgeComponent Category="category" />
}
</p>
} else {
<p> </p>
}
<ReaderToggle Label="@Localizer["ToggleReader_Label"]" />
</div>
</header>
</SectionContent>
<article class="mb-6">
<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
@Content

View file

@ -26,7 +26,8 @@
</div>
<main class="flex-1">
<SectionOutlet SectionName="GlobalHeader" />
<div class="container mx-auto px-4 md:px-12 py-8">
<input id="narrow-reading-toggle" type="checkbox" class="narrow-reading-toggle" />
<div class="container mx-auto px-4 md:px-12 py-8 reading-toggle-target">
@Body
</div>
</main>

View file

@ -0,0 +1,13 @@
<label for="narrow-reading-toggle" class="narrow-reading-toggle btn btn-square btn-sm swap" title="@Label" onclick="this.classList.toggle('swap-active')">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" class="swap-on fill-current">
<path fill-rule="evenodd" d="M15 3.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V5.56l-3.97 3.97a.75.75 0 1 1-1.06-1.06l3.97-3.97h-2.69a.75.75 0 0 1-.75-.75Zm-12 0A.75.75 0 0 1 3.75 3h4.5a.75.75 0 0 1 0 1.5H5.56l3.97 3.97a.75.75 0 0 1-1.06 1.06L4.5 5.56v2.69a.75.75 0 0 1-1.5 0v-4.5Zm11.47 11.78a.75.75 0 1 1 1.06-1.06l3.97 3.97v-2.69a.75.75 0 0 1 1.5 0v4.5a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h2.69l-3.97-3.97Zm-4.94-1.06a.75.75 0 0 1 0 1.06L5.56 19.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" class="swap-off fill-current">
<path fill-rule="evenodd" d="M3.22 3.22a.75.75 0 0 1 1.06 0l3.97 3.97V4.5a.75.75 0 0 1 1.5 0V9a.75.75 0 0 1-.75.75H4.5a.75.75 0 0 1 0-1.5h2.69L3.22 4.28a.75.75 0 0 1 0-1.06Zm17.56 0a.75.75 0 0 1 0 1.06l-3.97 3.97h2.69a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75V4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0ZM3.75 15a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-2.69l-3.97 3.97a.75.75 0 0 1-1.06-1.06l3.97-3.97H4.5a.75.75 0 0 1-.75-.75Zm10.5 0a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.97 3.97a.75.75 0 1 1-1.06 1.06l-3.97-3.97v2.69a.75.75 0 0 1-1.5 0V15Z" clip-rule="evenodd"/>
</svg>
</label>
@code {
[Parameter]
public required string Label { get; set; }
}

View file

@ -131,4 +131,7 @@
<data name="AboutTheAuthor_Profile_Label" xml:space="preserve">
<value>Profil</value>
</data>
<data name="ToggleReader_Label" xml:space="preserve">
<value>Enge Leseansicht umschalten</value>
</data>
</root>

View file

@ -131,4 +131,7 @@
<data name="AboutTheAuthor_Profile_Label" xml:space="preserve">
<value>Profile</value>
</data>
<data name="ToggleReader_Label" xml:space="preserve">
<value>Toggle narrow reading view</value>
</data>
</root>

View file

@ -32,4 +32,11 @@ @layer components {
.youtube {
@apply rounded p-2 bg-base-200;
}
input.narrow-reading-toggle {
display: none;
}
input.narrow-reading-toggle:checked ~ .reading-toggle-target {
@apply max-w-3xl;
}
}

File diff suppressed because one or more lines are too long