feat: Focus rings & ui improvs

Author: slmgkck

src/lib/component/Footer.svelte

@@ -1,12 +1,43 @@
+<div class="container">
+  <div class="col-4 mx-auto">
+  <div class="card mt-5 ratio ratio-1x1">
+    <div class="card-body">
+      <div class="row">
+        <div class="col-4">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut,
+            accusantium cum itaque, est nisi labore, quia temporibus pariatur
+            fuga necessitatibus. Quia modi labore atque dicta eligendi tempore
+            molestiae itaque!
+          </p>
+        </div>
+        <div class="col-8">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut,
+            accusantium cum itaque, est nisi labore, quia temporibus pariatur
+            fuga necessitatibus. Quia modi labore atque dicta eligendi tempore
+            molestiae itaque!
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+
+</div>
+
 <!-- Footer -->
-<div class="container text-center my-3">
-  <small>
-    {@html themeSettings.footerContent || $_("footer.been-created-with", {
-      values: {
-        pano: `<a href="${PANO_WEBSITE_URL}" target="_blank" rel="noreferrer">Pano</a>`,
-      },
-    })}
-  </small>
+<div class="container my-3">
+  <div class="text-center">
+    <small>
+      {@html themeSettings.footerContent ||
+        $_("footer.been-created-with", {
+          values: {
+            pano: `<a href="${PANO_WEBSITE_URL}" class="rounded focus-ring" target="_blank" rel="noreferrer">Pano</a>`,
+          },
+        })}
+    </small>
+  </div>
 </div>
 
 <!-- Footer End -->

src/lib/component/Header.svelte

@@ -5,7 +5,7 @@
 <!-- Header -->
 <div class:container={headerWidthOption !== "FULL_SIZE"}>
   <div
-    class="rounded-bottom position-relative p-0 bg-gradient"
+    class="rounded-bottom position-relative p-0 bg-gradient border"
     class:bg-white={!themeSettings.headerBgColor}
     id="header"
     style="background-position: center; height: {themeSettings.headerHeight || '256'}px;">

src/lib/component/Navbar.svelte

@@ -22,12 +22,13 @@
         {#if $session.user && $session.user.panelAccess}
           <li class="nav-item">
             <a
-              class="btn btn-secondary rounded-pill"
+              class="nav-link"
               href={PANEL_URL}
               target="_blank"
               rel="noreferrer">
-              <i class="fa-solid fa-up-right-from-square me-1"></i>
-              {$_("nav-links.panel")}
+              <i class="fa-solid fa-user-tie"></i>
+              <span class="d-none d-lg-inline ms-2">
+                {$_("nav-links.panel")}</span>
             </a>
           </li>
         {/if}
@@ -65,7 +66,7 @@
               <div class="list-group list-group-flush">
                 {#each $quickNotifications as notification, index (notification)}
                   <button
-                    class="list-group-item list-group-item-action"
+                    class="list-group-item list-group-item-action focus-ring"
                     type="button"
                     title={$_("buttons.view")}
                     on:click={() => onNotificationClick(notification)}
@@ -113,7 +114,7 @@
               </div>
             {/if}
 
-            <a class="dropdown-item bg-transparent" href="/notifications">
+            <a class="dropdown-item bg-transparent focus-ring" href="/notifications">
               <button class="btn btn-sm btn-primary w-100">
                 {$_("buttons.show-all")}</button>
             </a>
@@ -142,16 +143,13 @@
               <li>
                 <a
                   class:active={matching($page.url.pathname, "/profile")}
-                  class="dropdown-item"
+                  class="dropdown-item focus-ring"
                   href="/profile">{$_("buttons.profile")}</a>
               </li>
               <li>
                 <a
-                  class:active={matching(
-                    $page.url.pathname,
-                    "/tickets",
-                  )}
-                  class="dropdown-item"
+                  class:active={matching($page.url.pathname, "/tickets")}
+                  class="dropdown-item focus-ring"
                   href="/tickets">{$_("buttons.tickets")}</a>
               </li>
               <li>
@@ -160,13 +158,13 @@
                     $page.url.pathname,
                     "/profile/settings",
                   )}
-                  class="dropdown-item"
+                  class="dropdown-item focus-ring"
                   href="/profile/settings">{$_("buttons.settings")}</a>
               </li>
               <li>
                 <button
                   type="button"
-                  class="dropdown-item link-danger"
+                  class="dropdown-item focus-ring link-danger"
                   on:click={logout}>{$_("buttons.logout")}</button>
               </li>
             </ul>

src/lib/component/OnlineAdmins.svelte

@@ -1,17 +1,15 @@
 <!-- Online Admins Card -->
 <div
-  class="card"
-  hidden={onlineAdmins.length === 0
-    ? true
-    : typeof themeSettings.sidebarCarts?.onlineAdmins === "undefined"
-      ? false
-      : !themeSettings.sidebarCarts.onlineAdmins}>
+  class="card h-100"
+  hidden={typeof themeSettings.sidebarCarts?.onlineAdmins === "undefined"
+    ? false
+    : !themeSettings.sidebarCarts.onlineAdmins}>
   <div class="card-header">{$_("components.online-admins.online-admins")}</div>
   <div class="card-body">
     <div class="row">
       {#each onlineAdmins as onlineAdmin, index (onlineAdmin)}
         <div class="col-3">
-          <a href="/player/{onlineAdmin}">
+          <a href="/player/{onlineAdmin}" class="d-inline-block focus-ring rounded">
             <img
               alt={onlineAdmin}
               class="rounded"
@@ -21,6 +19,8 @@
               height="48" />
           </a>
         </div>
+        {:else}
+        <NoContent />
       {/each}
     </div>
   </div>
@@ -31,6 +31,7 @@
   import { _ } from "svelte-i18n";
   import tooltip from "$lib/tooltip.util";
   import { getContext } from "svelte";
+    import NoContent from "./NoContent.svelte";
 
   export let onlineAdmins;
 

src/lib/component/Post.svelte

@@ -1,5 +1,5 @@
 <div class="card rounded-4 mb-3">
-  {#if (typeof themeSettings.postCoverImageEnabled === 'undefined' ? true : themeSettings.postCoverImageEnabled) && post.thumbnailUrl}
+  {#if (typeof themeSettings.postCoverImageEnabled === "undefined" ? true : themeSettings.postCoverImageEnabled) && post.thumbnailUrl}
     <a href="/post/{post.url}">
       <div
         style="
@@ -19,7 +19,7 @@
   <div class="card-body">
     <div class="row mb-3 justify-content-center">
       <div class="col">
-        <a class="card-title text-black" href="/post/{post.url}">
+        <a class="card-title text-black focus-ring rounded" href="/post/{post.url}">
           <h3 class="mb-0 d-inline-block text-break">
             {truncate(post.title, 100)}{@html post.title.length > 100
               ? "&hellip;"
@@ -30,7 +30,7 @@
       <div class="col-auto">
         {#if post.category.title !== "-"}
           <a
-            class="badge bg-secondary text-dark rounded-pill"
+            class="badge text-bg-secondary text-decoration-none rounded-pill focus-ring"
             href="/?category={post.category.url}"
             use:tooltip={[$_("buttons.filter"), { placement: "bottom" }]}>
             {post.category.title}
@@ -43,15 +43,17 @@
       {@html post.text}
     </div>
   </div>
-  <div
-    class="card-footer d-flex align-items-center justify-content-between">
+  <div class="card-footer d-flex align-items-center justify-content-between">
     {#if detail}
-      {#if typeof themeSettings.postViewCountEnabled === 'undefined' ? true : themeSettings.postViewCountEnabled}
+      {#if typeof themeSettings.postViewCountEnabled === "undefined" ? true : themeSettings.postViewCountEnabled}
         <ul class="m-0 p-0 text-muted">
           <li class="list-inline">
             <div
               class="list-inline-item px-1"
-              use:tooltip={[$_("components.post.view"), { placement: "bottom" }]}>
+              use:tooltip={[
+                $_("components.post.view"),
+                { placement: "bottom" },
+              ]}>
               <i class="fas fa-eye me-2"></i>
               {post.views}
             </div>
@@ -63,37 +65,46 @@
 
       <div>
         <Date time={post.date} />
-        <a href="/player/{post.writer.username}"
-           hidden="{typeof themeSettings.postAuthorImageEnabled === 'undefined' ? false : !themeSettings.postAuthorImageEnabled}">
+        <a
+          href="/player/{post.writer.username}"
+          class="d-inline-block rounded focus-ring rounded-circle ms-2"
+          hidden={typeof themeSettings.postAuthorImageEnabled === "undefined"
+            ? false
+            : !themeSettings.postAuthorImageEnabled}>
           <img
             src="https://minotar.net/avatar/{post.writer.username}"
             alt={post.writer.username}
             width="32"
             height="32"
             use:tooltip={[post.writer.username, { placement: "bottom" }]}
-            class="rounded-circle ms-2" />
+            class="rounded-circle" />
         </a>
       </div>
     {:else}
-      {#if typeof themeSettings.postReadMoreButtonEnabled === 'undefined' ? true : themeSettings.postReadMoreButtonEnabled}
-        <a href="/post/{post.url}">
+      {#if typeof themeSettings.postReadMoreButtonEnabled === "undefined" ? true : themeSettings.postReadMoreButtonEnabled}
+        <a class="h6 mb-0 p-0 btn btn-link text-decoration-none focus-ring" href="/post/{post.url}">
           {$_("components.post.read-more")}
+          <i class="fas fa-caret-right ms-1"></i>
         </a>
       {:else}
         <div></div>
       {/if}
 
       <div>
         <Date time={post.date} />
-        <a href="/player/{post.writer.username}"
-           hidden="{typeof themeSettings.postAuthorImageEnabled === 'undefined' ? false : !themeSettings.postAuthorImageEnabled}">
+        <a
+          class="d-inline-block rounded focus-ring rounded-circle ms-2"
+          href="/player/{post.writer.username}"
+          hidden={typeof themeSettings.postAuthorImageEnabled === "undefined"
+            ? false
+            : !themeSettings.postAuthorImageEnabled}>
           <img
             src="https://minotar.net/avatar/{post.writer.username}"
             alt={post.writer.username}
             width="32"
             height="32"
             use:tooltip={[post.writer.username, { placement: "bottom" }]}
-            class="rounded-circle ms-2" />
+            class="rounded-circle" />
         </a>
       </div>
     {/if}

src/lib/component/TicketRow.svelte

@@ -13,6 +13,7 @@
   </th>
   <td class="align-middle text-nowrap">
     <a
+      class="rounded focus-ring"
       href="/ticket/{ticket.id}"
       title={$_("components.ticket-row.show-ticket")}
       >#{ticket.id} {ticket.title}</a>
@@ -42,7 +43,9 @@
   import { _ } from "svelte-i18n";
 
   import tooltip from "$lib/tooltip.util";
-  import TicketStatus, { TicketStatuses } from "$lib/component/TicketStatus.svelte";
+  import TicketStatus, {
+    TicketStatuses,
+  } from "$lib/component/TicketStatus.svelte";
   import Date from "$lib/component/Date.svelte";
 
   export let ticket;

src/lib/pages/PostDetailPage.svelte

@@ -1,25 +1,32 @@
-<Post post="{data.post}" detail="{true}" />
-
-<div class="row justify-content-between">
-  <div class="col-auto">
-    <a
-      href="/post/{data.previousPost === '-' ? '' : data.previousPost.url}"
-      class="btn btn-link ps-0"
-      class:disabled="{data.previousPost === '-'}"
-      hidden="{typeof themeSettings.postPreviousPageEnabled === 'undefined' ? false : !themeSettings.postPreviousPageEnabled}"
-      use:tooltip="{[data.previousPost.title, { placement: 'bottom' }]}">
-      {$_("pages.post-detail.previous-post")}
-    </a>
-  </div>
-  <div class="col-auto">
-    <a
-      href="/post/{data.nextPost === '-' ? '' : data.nextPost.url}"
-      class="btn btn-link pe-0"
-      class:disabled="{data.nextPost === '-'}"
-      hidden="{typeof themeSettings.postNextPageEnabled === 'undefined' ? false : !themeSettings.postNextPageEnabled}"
-      use:tooltip="{[data.nextPost.title, { placement: 'bottom' }]}">
-      {$_("pages.post-detail.next-post")}
-    </a>
+<div class="col-lg-8 mx-auto">
+  <Post post={data.post} detail={true} />
+  <div class="row justify-content-between">
+    <div class="col-auto">
+      <a
+        href="/post/{data.previousPost === '-' ? '' : data.previousPost.url}"
+        class="btn btn-link ps-0"
+        class:disabled={data.previousPost === "-"}
+        hidden={typeof themeSettings.postPreviousPageEnabled === "undefined"
+          ? false
+          : !themeSettings.postPreviousPageEnabled}
+        use:tooltip={[data.previousPost.title, { placement: "bottom" }]}>
+        <i class="fas fa-caret-left me-1"></i>
+        {$_("pages.post-detail.previous-post")}
+      </a>
+    </div>
+    <div class="col-auto">
+      <a
+        href="/post/{data.nextPost === '-' ? '' : data.nextPost.url}"
+        class="btn btn-link pe-0"
+        class:disabled={data.nextPost === "-"}
+        hidden={typeof themeSettings.postNextPageEnabled === "undefined"
+          ? false
+          : !themeSettings.postNextPageEnabled}
+        use:tooltip={[data.nextPost.title, { placement: "bottom" }]}>
+        {$_("pages.post-detail.next-post")}
+        <i class="fas fa-caret-right ms-1"></i>
+      </a>
+    </div>
   </div>
 </div>
 

src/lib/pages/SupportPage.svelte

@@ -4,7 +4,7 @@
   </div>
   <div class="card-body">
     <ul class="list-group list-group-horizontal text-center">
-      <a href="/ticket/create" class="list-group-item list-group-item-action">
+      <a href="/ticket/create" class="list-group-item list-group-item-action focus-ring">
         <i class="fas fa-ticket fa-2x my-3"></i>
         <h5>{$_("pages.support.options.create-ticket.title")}</h5>
         <small class="text-muted">
@@ -14,7 +14,7 @@
 
       <a
         href="mailto:{$session.siteInfo.supportEmail}"
-        class="list-group-item list-group-item-action">
+        class="list-group-item list-group-item-action focus-ring">
         <i class="fas fa-envelope fa-2x my-3"></i>
         <div class="col-auto">
           <h5>{$_("pages.support.options.send-email.title")}<i class="fas fa-external-link-alt ms-2"></i></h5>

src/lib/ui-logics/page-logics/PostDetailPageLogics.js

@@ -2,8 +2,6 @@ import { error } from "@sveltejs/kit";
 
 import { getPostDetail } from "$lib/services/posts";
 
-import HomeSidebar, { load as loadSidebar } from "$lib/component/sidebars/HomeSidebar.svelte";
-
 /**
  * @type {import("@sveltejs/kit").Load}
  */
@@ -30,8 +28,6 @@ export async function processLoad(event) {
     nextPost: "-"
   };
 
-  await loadSidebar(event);
-
   await getPostDetail({ url: event.params.url, request: event }).then(
     (body) => {
       if (body.error) {
@@ -46,5 +42,5 @@ export async function processLoad(event) {
     }
   );
 
-  return { ...data, sidebar: HomeSidebar };
+  return { ...data };
 }