#281 Design - Refactoring Themes

Author: Farzin

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

@@ -12,10 +12,7 @@
     <div class="section-content">
         <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 -->
+                <img src="@CurrentTheme.Cover" class="themes-thumbnail" alt="@CurrentTheme.Title"> <!-- 4:5 -->
                 <div class="themes-info">
                     <h3 class="themes-title">@CurrentTheme.Title (@_localizer["current"])</h3>
                     <ul class="themes-meta d-flex">
@@ -31,18 +28,18 @@
                 <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>
+                        <h3 class="themes-title">@item.Title</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>
                         <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"]">
+                            <button type="button" class="btn btn-default me-2" data-bs-toggle="tooltip" 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" />
+                                    <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 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                 </svg>
                             </button>
                         </div>
@@ -53,33 +50,6 @@
     </div>
 }
 
-<div class="modal fade" id="themeInfo" tabindex="-1" aria-labelledby="themeInfoLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="themeInfoLabel">@_localizer["info"]</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="themes-modal">
-                    <div class="themes-modal-title">Theme Name</div>
-                    <p class="themes-modal-desc">
-                        This is a test description, one paragraph long description for you guys, there should not be a break line in this description, otherwise, it doesn't look good, and it gets messy. Also, we have 3 links.
-                    </p>
-                    <ul class="themes-modal-info">
-                        <li>@_localizer["developer"] John Doe</li>
-                        <li>@_localizer["version"] 2.1</li>
-                        <li><a href="#">Website</a></li>
-                        <li><a href="#">GitHub</a></li>
-                        <li><a href="#">Other Link</a></li>
-                    </ul>
-                    <img src="themes/standard/screenshot.png" class="themes-modal-img" alt="Theme Name">
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 <ToasterComponent @ref="Toaster" />
 
 @code {

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

@@ -3,30 +3,41 @@
     margin-bottom: 3rem;
   }
   &-thumbnail {
-    border-radius: 0.325rem;
+    border-radius: 0.5rem;
     display: block;
     // 4:5
     width: 12.5rem;
     height: 15.625rem;
     object-fit: cover;
     object-position: center;
+    border: 1px solid $gray-200;
   }
 
   &-info {
     margin-left: 2rem;
-    padding-top: 1rem;
+    padding-top: 1.5rem;
   }
 
   &-title {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.25rem;
   }
 
   &-meta {
     list-style: none;
     padding: 0;
-    margin: 0 0 1.5rem;
+    margin: 0 0 1.25rem;
     color: $gray-600;
 
+    a[href] {
+      color: $gray-600;
+      border-bottom: 1px solid $gray-500;
+
+      &:hover {
+        color: $blogifier;
+        border-color: $blogifier;
+      }
+    }
+
     &-item {
       margin-right: 1.5rem;
     }

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

@@ -756,4 +756,7 @@
     <data name="blog-settings" xml:space="preserve">
         <value>Blog settings</value>
     </data>
+    <data name="set-current-theme" xml:space="preserve">
+        <value>Set as current theme</value>
+    </data>
 </root>