Merge pull request #1653 from pom2ter/better-spacing

fix(frontend): better spacing for sidebar and messages

Author: kroky

modules/core/site.css

@@ -15,7 +15,7 @@ body {
   display: grid;
   width: 100%;
   grid-template-areas: "nav main";
-  grid-template-columns: var(--nav-size) 1fr;
+  grid-template-columns: calc(var(--nav-size) - 40px) 1fr;
   grid-template-rows: auto;
   transition: all 0.1s linear;
 }
@@ -404,7 +404,7 @@ button {
   background-color: #fff;
   padding-right: 15px;
   padding-bottom: 40px;
-  width: calc(var(--nav-size) - 20px);
+  width: calc(var(--nav-size) - 60px);
   min-height: 100vh;
   height: 100%;
   padding-top: 20px;
@@ -424,6 +424,7 @@ button {
   border-radius: var(--bs-border-radius);
   transition: all linear 0.3s;
   position: relative;
+  white-space: nowrap;
 }
 .inner_list li {
   margin: 2px;
@@ -1032,22 +1033,21 @@ div.unseen,
 .mobile .msg_text {
   white-space: nowrap !important;
   width: 100%;
-  max-width: 480px !important;
+  max-width: 768px !important;
   word-break: break-all;
   word-wrap: break-word;
   font-size: 100%;
 }
 .mobile .msg_controls {
-  background: linear-gradient(180deg, #fff, #fff, #f7f2ef) !important;
   z-index: 1000;
   position: fixed;
-  right: -10px;
+  right: 0px;
   height: 54px;
   font-size: 115%;
   padding-left: 5px;
   padding-top: 5px;
   top: 1px;
-  left: 70px !important;
+  left: 60px !important;
 }
 @media (orientation: landscape) {
   .mobile .msg_controls {
@@ -1140,10 +1140,11 @@ div.unseen,
 }
 .mobile .checkbox_cell {
   width: 35px;
+  padding-top: 15px !important;
 }
 .mobile .checkbox_cell label {
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
 }
 .mobile .github_para {
   white-space: normal !important;

modules/core/site.js

@@ -976,15 +976,15 @@ function Message_List() {
                 prevUrl = new URL(prevSubject.prop('href'));
                 prevUrl.searchParams.set('list_parent', listPath);
                 const subject = prevSubject.text().substring(0, 50) + (prevSubject.text().length > 50 ? '...' : '');
-                const plink = '<a class="plink" href="'+prevUrl.href+'"><i class="prevnext bi bi-arrow-left-square-fill"></i> '+subject+'</a>';
+                const plink = '<a class="plink" href="'+prevUrl.href+'"><i class="prevnext bi bi-arrow-up-square-fill"></i> '+subject+'</a>';
                 $('<tr class="prev"><th colspan="2">'+plink+'</th></tr>').insertAfter(target);
             }
             if (next) {
                 const nextSubject = $(next['0']).find('.subject a');
                 nextUrl = new URL(nextSubject.prop('href'));
                 nextUrl.searchParams.set('list_parent', listPath);
                 const subject = nextSubject.text().substring(0, 50) + (nextSubject.text().length > 50 ? '...' : '');
-                const nlink = '<a class="nlink" href="'+nextUrl.href+'"><i class="prevnext bi bi-arrow-right-square-fill"></i> '+subject+'</a>';
+                const nlink = '<a class="nlink" href="'+nextUrl.href+'"><i class="prevnext bi bi-arrow-down-square-fill"></i> '+subject+'</a>';
                 $('<tr class="next"><th colspan="2">'+nlink+'</th></tr>').insertAfter(target.siblings('.prev')[0] || target);
             }
             if (cb) {