Skip to content

Commit

Permalink
Changed Home Page to new flow layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@miawinter98
miawinter98 committed Feb 25, 2024
1 parent 78baade commit 7be7cee
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 60 deletions.
7 changes: 3 additions & 4 deletions Wave/Components/ArticleTile.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@

<ArticleLink Article="Article">
<article class="card card-compact min-h-56 bg-base-200 text-base-content rounded-sm h-full">
<div class="card-body">
<div class="card-body max-h-full">
<h3 class="card-title line-clamp-2">@Article.Title</h3>
<small class="text-sm">@Article.PublishDate.ToString("d")</small>
<p class="flex-none line-clamp-5">
<p class="flex-1 overflow-hidden">
@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
</p>
<div class="flex-1 flex items-end">

<div class="flex items-end">
<small>@Article.Author.Name</small>
</div>
</div>
Expand Down
114 changes: 59 additions & 55 deletions Wave/Components/Pages/Home.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<meta property="og:image" content="@Navigation.ToAbsoluteUri("/img/logo.png")">
}
@if (!string.IsNullOrWhiteSpace(Customizations.Value.AppDescription)) {
<meta property="description" content="@Customizations.Value.AppDescription">
<meta name="description" content="@Customizations.Value.AppDescription">
<meta property="og:description" content="@Customizations.Value.AppDescription">
}
@if (Features.Value.Rss) {
Expand All @@ -33,72 +33,76 @@

<PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle>

<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"]</h1>

<section class="flex gap-2 flex-wrap mb-3">
@if (Features.Value.Rss) {
<a class="btn btn-sm bg-orange-500 text-slate-50" title="RSS Feed on @Customizations.Value.AppName" href="/rss/rss.xml">
RSS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
</svg>
</a>
<a class="btn btn-sm bg-orange-500 text-slate-50" title="Atom RSS Feed on @Customizations.Value.AppName" href="/rss/atom.xml">
Atom RSS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
</svg>
</a>
}
@if (Features.Value.EmailSubscriptions) {
<a class="btn btn-sm btn-primary" title="E-Mail Newsletter" href="/Email/Subscribe">
E-Mail
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
</svg>
</a>
}
</section>

@if (Featured is {} featured) {
<article class="mb-6">
<ArticleLink Article="featured">
<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
<div class="hero-content">
<div class="flex flex-col space-y-6 my-3">
<h2 class="text-2xl lg:text-4xl">
@featured.Title
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 xl:grid-rows-4 gap-4">
<div class="sm:col-span-2 flex flex-col ">
<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Customizations.Value.AppName</h1>
<p class="flex-1">@Customizations.Value.AppDescription</p>
<section class="flex gap-2 justify-between sm:justify-start flex-wrap mb-3">
@if (Features.Value.Rss) {
<a class="btn btn-sm bg-orange-500 text-slate-50" title="RSS Feed on @Customizations.Value.AppName" href="/rss/rss.xml">
RSS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
</svg>
</a>
<a class="btn btn-sm bg-orange-500 text-slate-50" title="Atom RSS Feed on @Customizations.Value.AppName" href="/rss/atom.xml">
Atom RSS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
</svg>
</a>
}
@if (Features.Value.EmailSubscriptions) {
<a class="btn btn-sm btn-primary" title="E-Mail Newsletter" href="/Email/Subscribe">
E-Mail
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
</svg>
</a>
}
</section>
</div>
@if (Featured is {} featured) {
<div class="sm:col-span-2 row-span-2 aspect-square xl:order-first">
<ArticleLink Article="featured" class="">
<article class="relative h-full bg-secondary text-secondary-content border-l-8 border-current shadow rounded-sm">
<div class="absolute inset-8 overflow-hidden">
<div class="mb-3">
<h2 class="text-2xl lg:text-4xl line-clamp-2 hyphens-auto">
@featured.Title
</h2>
<p class="flex flex-wrap gap-2">
@foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
<span class="badge [email protected](category.Color)">
@category.Name
</span>
}
</p>
</h2>
<p class="line-clamp-6">
<small class="text-sm">@featured.PublishDate.ToString("g")</small><br/>
@featured.BodyPlain[..Math.Min(1000, featured.BodyPlain.Length)]
</p>
<div class="flex">
<ProfilePill Profile="featured.Author" DisableProfileLink="true" />
</div>
<div class="hidden sm:block w-1/3 float-left mr-2">
<ProfilePictureComponent ProfileId="@featured.Author.Id" Size="400" />
</div>
<p class="font-bold">@featured.Author.FullName</p>
<small class="text-sm">@featured.PublishDate.ToString("g")</small>
<p class="hyphens-auto text-justify">
@featured.BodyPlain
</p>
</div>
</div>
</div>
</ArticleLink>
</article>
} else {
<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
<p>@Localizer["NoArticles_Message"]</p>
}
</article>
</ArticleLink>
</div>
} else {
<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
<p>@Localizer["NoArticles_Message"]</p>
}

<ArticleTileArray>
<PageComponent LoadCallback="LoadArticles">
<ArticleTile Article="context" />
<div class="aspect-square">
<ArticleTile Article="context" />
</div>
</PageComponent>
</ArticleTileArray>
</div>

<div class="grid place-content-center my-3">
<div class="join">
Expand Down
5 changes: 5 additions & 0 deletions Wave/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ module.exports = {
'6xl': "2560px",
'8xl': "3072px"
}
},
lineClamp: {
8: '8',
10: '10',
12: '12'
}
},
fontSize: {
Expand Down
2 changes: 1 addition & 1 deletion Wave/wwwroot/css/main.min.css
View file

Large diffs are not rendered by default.

0 comments on commit 7be7cee

Please sign in to comment.