#281 Design - Refactoring Themes - 1

Author: Farzin

src/Blogifier.Admin/Pages/Settings/ThemesView.razor

@@ -10,50 +10,41 @@
 {
     <h1 class="section-title">@_localizer["themes"]</h1>
     <div class="section-content">
-        <div class="row themes">
-            <div class="col-md-6 col-lg-4">
-                <div class="themes-item">
-                    <div class="themes-cover">
-                        <img src="@CurrentTheme.Cover" class="themes-img" alt="@CurrentTheme.Title">
-                    </div>
-                    <div class="themes-details">
-                        <div class="themes-title">@CurrentTheme.Title (@_localizer["current"])</div>
-                        <ul class="themes-info">
-                            <li class="themes-info-item">@_localizer["developer"] <a href="#">John Doe</a></li>
-                            <li class="themes-info-item">@_localizer["version"] 2.1</li>
-                        </ul>
-                        <a href="/admin/settings/customize/" class="btn btn-blogifier btn-block">@_localizer["customize"]</a>
-                    </div>
+        <div class="themes">
+            <div class="themes-item d-flex">
+                <img src="@CurrentTheme.Cover" class="themes-thumbnail" alt="@CurrentTheme.Title">
+                <!-- 4:5 -->
+                <!-- 1024:1280 -->
+                <!-- 1600:2000 -->
+                <div class="themes-info">
+                    <h3 class="themes-title">@CurrentTheme.Title (@_localizer["current"])</h3>
+                    <ul class="themes-meta d-flex">
+                        <li class="themes-meta-item">@_localizer["version"] 2.1</li>
+                        <li class="themes-meta-item">@_localizer["by"] <a href="#">John Doe</a></li>
+                    </ul>
+                    <p class="themes-desc">This is the default theme that comes with the Blogifier 3.0 There are some customization you might enjoy.</p>
+                    <a class="btn btn-blogifier px-4" href="/admin/settings/customize/">@_localizer["customize"]</a>
                 </div>
             </div>
             @foreach (var item in Themes)
             {
-                <div class="col-md-6 col-lg-4">
-                    <div class="themes-item">
-                        <div class="themes-cover">
-                            <img src="@item.Cover" class="themes-img" alt="@item.Title">
-                        </div>
-                        <div class="themes-details">
-                            <div class="themes-title">@item.Title</div>
-                            <ul class="themes-info">
-                                <li class="themes-info-item">@_localizer["developer"] <a href="#">John Doe</a></li>
-                                <li class="themes-info-item">@_localizer["version"] 2.1</li>
-                            </ul>
-                            <div class="d-flex">
-                                <button type="button" class="btn btn-outline-default flex-grow-1 me-2" @onclick="()=> SelectTheme(item.Title)" @onclick:preventDefault>@_localizer["select"]</button>
-                                <button type="button" class="btn btn-outline-default me-2" title="@_localizer["delete"]">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
-                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                                    </svg>
-                                </button>
-                                <button type="button" class="btn btn-outline-default" data-bs-toggle="modal" data-bs-target="#themeInfo" title="@_localizer["info"]">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
-                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                                        <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
-                                    </svg>
-                                </button>
-                            </div>
+                <div class="themes-item d-flex">
+                    <img src="@item.Cover" class="themes-thumbnail" alt="@item.Title">
+                    <div class="themes-info">
+                        <div class="themes-title">@item.Title</div>
+                        <ul class="themes-meta d-flex">
+                            <li class="themes-meta-item">@_localizer["version"] 2.1</li>
+                            <li class="themes-meta-item">@_localizer["by"] <a href="#">John Doe</a></li>
+                        </ul>
+                        <p class="themes-desc">This is the default theme that comes with the Blogifier 3.0 There are some customization you might enjoy.</p>
+                        <div class="d-flex">
+                            <button type="button" class="btn btn-default me-2" @onclick="()=> SelectTheme(item.Title)" @onclick:preventDefault>@_localizer["set-current-theme"]</button>
+                            <button type="button" class="btn btn-default me-2" title="@_localizer["delete"]">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                </svg>
+                            </button>
                         </div>
                     </div>
                 </div>

src/Blogifier.Admin/wwwroot/admin/css/app.css

@@ -1,73 +1,40 @@
 .themes {
-  margin-top: 1.5rem;
-
   &-item {
-    @include bf-shadow();
-    overflow: hidden;
-    margin-bottom: 2rem;
-  }
-
-  &-cover {
-    max-height: 15rem;
-    overflow: hidden;
-    border-bottom: 1px solid $gray-200;
+    margin-bottom: 3rem;
   }
-
-  &-img {
-    min-width: 100%;
-    max-width: 100%;
+  &-thumbnail {
+    border-radius: 0.325rem;
+    display: block;
+    // 4:5
+    width: 12.5rem;
+    height: 15.625rem;
+    object-fit: cover;
+    object-position: center;
   }
 
-  &-details {
-    padding: 1.5rem;
+  &-info {
+    margin-left: 2rem;
+    padding-top: 1rem;
   }
 
   &-title {
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.875rem;
+    margin-bottom: 1.5rem;
   }
 
-  &-info {
-    font-size: 0.75rem;
+  &-meta {
     list-style: none;
     padding: 0;
+    margin: 0 0 1.5rem;
     color: $gray-600;
-    margin-bottom: 1rem;
 
-    a {
-      color: $gray-600;
-      &:hover {
-        color: $gray-900;
-      }
+    &-item {
+      margin-right: 1.5rem;
     }
   }
 
-  &-modal {
-    padding: 1rem;
-
-    &-title {
-      font-size: 1.5rem;
-      font-weight: 500;
-      margin-bottom: 1rem;
-    }
-    &-desc {
-      margin-bottom: 1rem;
-    }
-
-    &-info {
-      list-style: none;
-      padding: 0;
-      margin: 0 0 2rem;
-      > li {
-        margin-bottom: .5rem;
-      }
-    }
-
-    &-img {
-      border-radius: 0.25rem;
-      border: 1px solid $gray-200;
-      width: 100%;
-    }
+  &-desc {
+    margin-bottom: 1.5rem;
+    width: 100%;
+    max-width: 75%;
   }
 }

src/Blogifier.Admin/wwwroot/admin/css/app.css.map

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Error 404</title>
+    <meta name="description" content="Error page">
+
+    <!-- TODO: These variables comes from customfiedls -->
+    <style>
+        :root {
+            /* accent color */
+            --bf-color: #622aff;
+            /* header */
+            --bf-header-title-size: 1.5rem;
+            --bf-header-title-weight: 700;
+            --bf-header-title-color: #000;
+            --bf-header-title-hover: #622aff;
+            /* logo */
+            --bf-header-logo-width: auto;
+            --bf-header-logo-height: 1.5rem;
+            /* post */
+            --bf-post-width: 43.75rem;
+            /* radius */
+            --bf-radius: .5rem;
+        }
+    </style>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" href="~/themes/standard/css/styles.css" asp-append-version="true">
+</head>
+
+
+<body>
+    <partial name="./components/header.cshtml" />
+    <main class="container">
+        <h1>Page Not Found</h1>
+    </main>
+    <partial name="./components/footer.cshtml" />
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+    <script src="~/themes/standard/js/highlight.js" asp-append-version="true"></script>
+    <script src="~/themes/standard/js/scripts.js" asp-append-version="true"></script>
+    <script src="~/themes/standard/js/newsletter.js" asp-append-version="true"></script>
+</body>
+
+</html>
+
+

src/Blogifier.Admin/wwwroot/admin/scss/pages/settings/_themes.scss

@@ -0,0 +1,8 @@
+@{
+    Layout = "layouts/_main.cshtml";
+}
+
+<main class="container">
+    <h1 class="h3 mb-5">CATEGORY_TITLE</h1>
+    <partial name="post/view-list.cshtml" />
+</main>

src/Blogifier/Views/Themes/spaceone/404.cshtml

@@ -0,0 +1,19 @@
+@using Blogifier.Shared
+@{
+    Layout = "layouts/_main.cshtml";
+}
+
+<main class="container">
+    <partial name="post/featured.cshtml" />
+    @*
+        TODO:
+        Custom fields:
+        - Post list style options:
+            1. view-grid (default)
+            2. view-list
+    *@
+    <partial name="post/view-grid.cshtml" />
+    @* <partial name="post/view-list.cshtml" /> *@
+
+    <partial name="components/pagination.cshtml" />
+</main>

src/Blogifier/Views/Themes/spaceone/Category.cshtml

@@ -0,0 +1,52 @@
+@using Blogifier.Shared.Resources
+@using Blogifier.Shared
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<Resource> _localizer
+@{
+   Layout = "layouts/_main.cshtml";
+   PostModel postModel = (PostModel)Model;
+   var post = postModel.Post;
+   string cover = $"{Url.Content("~/")}{postModel.Post.Cover}";
+}
+
+<main class="post-detail">
+    <article class="post">
+
+        <figure class="post-cover">
+            <img class="post-cover-img" src="@cover" alt="@post.Title">
+        </figure>
+
+        <header class="post-header post-container">
+
+            <h1 class="post-title">@post.Title</h1>
+
+            <div class="post-meta d-flex align-items-center">
+                <div class="post-meta-item post-meta-date">
+                    <span class="post-meta-label">@_localizer["published"]</span>
+                    <time class="post-meta-date-time">@post.Published.ToFriendlyShortDateString()</time>
+                </div>
+                <button class="post-meta-btn ms-auto" type="button" data-bs-toggle="modal" data-bs-target="#shareModal">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
+                        <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
+                    </svg>
+                </button>
+                @if (User.Identity.IsAuthenticated)
+                {
+                    <a class="post-meta-btn ms-2" href="~/admin/pages/editor/@post.Slug">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+                            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                        </svg>
+                    </a>
+                }
+            </div>
+        </header>
+
+        <section class="post-content post-container">
+            @Html.Raw(post.Content)
+        </section>
+
+    </article>
+
+    <partial name="post/share.cshtml" />
+
+</main>