Update (view): redesign

This commit is contained in:
2023-10-05 00:29:23 +08:00
parent f1f02bb7b6
commit 7374d66a21
14 changed files with 104 additions and 49 deletions

View File

@@ -1,4 +1,4 @@
<div class="container">
<div class="w-full shadow-sm bg-white">
<header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-center align-items-center">
@@ -10,8 +10,9 @@
</div>
</header>
<div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav nav-underline justify-content-between">
<div class="nav-scroller py-2 mb-3 border-bottom">
<nav class="container nav nav-underline justify-content-between">
@foreach ($parent_categories as $category)
<a class="fw-bold nav-item nav-link link-body-emphasis {{ active(route('front.category', ['category_slug' => $category->slug])) }}"
href="{{ route('front.category', ['category_slug' => $category->slug]) }}">{{ $category->short_name }}</a>

View File

@@ -1,7 +1,6 @@
<div class="p-4 mb-3 bg-body-tertiary rounded">
<div class="p-4 mb-3 bg-white rounded-3 shadow-sm">
<h4 class="fst-italic">About EchoScoop</h4>
<p class="mb-0">
EchoScoop is a streamlined news platform delivering concise global updates. Our goal is to keep you promptly
informed with each scoop.
EchoScoop is a streamlined news platform delivering concise global updates. We keep our news to be bite-sized within 1 to 5 minutes read. Our goal is to keep you promptly informed with each scoop.
</p>
</div>

View File

@@ -1,18 +1,29 @@
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="row g-0 border-0 rounded-3 overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative bg-white">
<div class="col p-4 d-flex flex-column position-static">
@if((isset($category)) && ($category->id != $post->category->id))
<span class="d-inline-block mb-2 text-success-emphasis"><i>Under</i> <strong class="ms-1">{{ $category->name }} <i class="bi bi-chevron-right small"></i> {{ $post->category->name }}</strong></span>
@if (isset($category) && $category->id != $post->category->id)
<span class="d-inline-block mb-2 text-success-emphasis"><i>Under</i> <strong
class="ms-1">{{ $category->name }} <i class="bi bi-chevron-right small"></i>
{{ $post->category->name }}</strong></span>
@else
<span class="d-inline-block mb-2 text-success-emphasis"><i>Under</i> <strong class="ms-1">{{ $post->category->name }}</strong></span>
@endif
<h3 class="mb-0 h4">{{ $post->title }}</h3>
@if (!is_empty($post->published_at))
<div class="mb-1 text-body-secondary">{{ $post->published_at->format('M j') }}</div>
<span class="d-inline-block mb-2 text-success-emphasis"><i>Under</i> <strong
class="ms-1">{{ $post->category->name }}</strong></span>
@endif
<h3 class="mb-1 h4">{{ $post->title }}</h3>
<div class="mb-3 text-body-secondary">
@if (!is_empty($post->published_at))
{{ $post->published_at->format('M j') }}
@endif
<i class="bi bi-dot"></i>
{{ markdown_min_read($post->body) }}
</div>
<p class="mb-3">{{ $post->excerpt }}</p>
<a href="{{ route('front.post', ['slug' => $post->slug, 'category_slug' => $post->category->slug]) }}"
class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
Continue reading...
<svg class="bi">
<use xlink:href="#chevron-right"></use>
</svg>

View File

@@ -4,7 +4,7 @@
@include('front.partials.breadcrumbs')
<div class="row g-5">
<div class="row g-4">
<div class="col-md-8">
<h1 class="pb-2 fw-normal h2">
@if (isset($category) && !is_null($category))

View File

@@ -4,10 +4,11 @@
@include('front.partials.breadcrumbs')
<div class="row g-5">
<div class="row g-4">
<div class="col-md-8">
<article class="blog-post">
<article class="blog-post bg-white rounded-3 shadow-sm px-5 py-4
">
{!! $content !!}
</article>

View File

@@ -2,18 +2,32 @@
@section('content')
<main class="container">
@if (!is_null($featured_post))
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
<div class="p-4 p-md-5 mb-4 rounded-3 text-body-emphasis bg-white shadow-sm">
<div class="col-lg-12 px-0">
<h1 class="display-4 fst-italic">{{ $featured_post->title }}</h1>
<p class="lead my-3">{{ $featured_post->excerpt }}</p>
<p class="lead mb-0"><a href="{{ route('front.post', ['slug' => $featured_post->slug, 'category_slug' => $featured_post->category->slug]) }}"
<h1 class="display-6 fw-semibold mb-1">{{ $featured_post->title }}</h1>
<div class="mb-1 text-body-secondary">
@if (!is_empty($featured_post->published_at))
{{ $featured_post->published_at->format('M j') }}
@endif
<i class="bi bi-dot"></i>
{{ markdown_min_read($featured_post->body) }}
</div>
<p class="lead my-3 mb-3">{{ $featured_post->excerpt }}</p>
<p class="lead mb-0"><a
href="{{ route('front.post', ['slug' => $featured_post->slug, 'category_slug' => $featured_post->category->slug]) }}"
class=" fw-bold">Continue reading...</a></p>
</div>
</div>
@endif
<div class="row g-5">
<div class="row g-4">
<div class="col-md-8">
@if ($latest_posts->count() > 0)
@@ -22,7 +36,7 @@ class=" fw-bold">Continue reading...</a></p>
@endforeach
<div class="w-100 d-flex justify-content-center">
<a class="btn btn-outline-primary rounded-pill px-3 text-decoration-none"
<a class="btn btn-primary shadow rounded-pill px-3 text-decoration-none"
href="{{ route('front.all') }}">View Latest News</a>
</div>
@else

View File

@@ -4,11 +4,11 @@
@if ($paginator->onFirstPage())
<div class="mx-1 page-item disabled" aria-disabled="true">
<span
class="text-decoration-none btn btn-light disabled border border-primary rounded-pill px-3">{!! __('pagination.previous') !!}</span>
class="shadow-sm text-decoration-none btn btn-light disabled border border-light rounded-pill px-3">{!! __('pagination.previous') !!}</span>
</div>
@else
<div class="mx-1 page-item">
<a class="text-decoration-none btn btn-outline-primary rounded-pill px-3"
<a class="shadow-sm text-decoration-none btn btn-primary rounded-pill px-3"
href="{{ $paginator->previousPageUrl() }}" rel="prev">
{!! __('pagination.previous') !!}
</a>
@@ -18,13 +18,13 @@ class="text-decoration-none btn btn-light disabled border border-primary rounded
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<div class="mx-1 page-item">
<a class="text-decoration-none btn btn-outline-primary rounded-pill px-3"
<a class="shadow-sm text-decoration-none btn btn-primary rounded-pill px-3"
href="{{ $paginator->nextPageUrl() }}" rel="next">{!! __('pagination.next') !!}</a>
</div>
@else
<div class="mx-1 page-item disabled" aria-disabled="true">
<span
class="text-decoration-none btn btn-light disabled border border-primary rounded-pill px-3">{!! __('pagination.next') !!}</span>
class="shadow-sm text-decoration-none btn btn-light disabled border border-light rounded-pill px-3">{!! __('pagination.next') !!}</span>
</div>
@endif
</nav>