style: change the post panel design (#817)

Fix #816
razonyang · Nov 23, 2022 · a08856b · a08856b
1 parent e38560d
commit a08856b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 53 deletions.
diff --git a/assets/main/scss/post/_panel.scss b/assets/main/scss/post/_panel.scss
@@ -1,57 +1,23 @@
 .post-panel-wrapper {
-  opacity: 0.75;
-  top: 84px;
   z-index: 1;
 
-  &:hover,
-  &:active {
-    opacity: 1;
-  }
-
   .post-panel {
-    text-align: right;
-    right: -0.5rem;
-    top: -0.5rem;
-    margin-top: 8px;
-
-    @extend .shadow; /* stylelint-disable-line */
+    bottom: 20px;
 
     .action {
-      margin-top: 0.25rem;
-      padding: 0.125rem 0.125rem 0.25rem;
-      transition: opacity 1s ease-out;
-
-      &:not(:last-child) {
-        border-bottom: 1px #{$gray-500} solid;
-      }
-    }
-
-    .action-panel-toggler {
-      opacity: 0;
-      display: none;
-      border-bottom: none !important;
-    }
-
-    @include media-breakpoint-down(sm) {
-      opacity: 0.875;
-      right: -0.125rem;
-
-      .action {
-        opacity: 0;
-        display: none;
-      }
-
-      .action-panel-toggler {
-        opacity: 1;
-        display: block;
+      margin: 0 0.25rem;
+      padding: 0.25rem 0;
+
+      &:not(:first-child) {
+        &::before {
+          content: "|";
+          padding-right: .5rem;
+          color: var(--#{$prefix}surface-color-disabled);;
+        }
       }
 
-      &:hover,
-      &:focus {
-        .action {
-          opacity: 1;
-          display: block;
-        }
+      &:hover {
+        color: var(--#{$prefix}primary);
       }
     }
   }

diff --git a/layouts/partials/post/panel.html b/layouts/partials/post/panel.html
@@ -1,16 +1,13 @@
 {{- if default true .Site.Params.post.panel -}}
-<div class="post-panel-wrapper position-sticky">
-  <div class="d-flex flex-column component rounded post-panel position-absolute border">
+<div class="post-panel-wrapper position-relative d-flex justify-content-center">
+  <div class="d-flex flex-row justify-content-center rounded rounded-5 post-panel position-fixed px-3 py-1 surface shadow">
     {{ partial "hooks/post-panel-begin" . }}
-    <a class="action action-panel-toggler" role="button" title="Panel toggler">
-      <i class="fas fa-fw fa-chevron-circle-down"></i>
-    </a>
-    {{ partial "post/panel/sidebar-toggler" . }}
     {{ partial "post/panel/translations" . }}
     {{ partial "post/panel/reward" . }}
     {{ partial "post/panel/toc" . }}
     {{ partial "post/panel/copyright" . }}
     {{ partial "post/panel/comments" . }}
+    {{ partial "post/panel/sidebar-toggler" . }}
     {{ partial "hooks/post-panel-end" . }}
   </div>
 </div>

diff --git a/layouts/partials/post/panel/translations.html b/layouts/partials/post/panel/translations.html
@@ -1,5 +1,5 @@
 {{ if and .IsTranslated }}
-  <div class="post-translations nav-item dropdown dropstart action">
+  <div class="post-translations nav-item dropup action">
     <a class="nav-link p-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Translations dropdown menu"
       title="Translations">
       <i class="fas fa-fw fa-language"></i>