fix/simplify #manage-settings in compact layout

Author: tophf

src/manage.html

@@ -173,7 +173,9 @@ <h1 i18n="styleManager"></h1>
                                    .updatable:not(.can-update):not(.update-problem):not(.update-done)">
         </label>
       </div>
+    </div>
 
+    <div class="settings-column" id="wide-inputs">
       <div id="search-wrapper">
           <input id="search" type="search" i18n="placeholder:search" spellcheck="false"
                  data-filter=":not(.not-matching)"
@@ -236,7 +238,7 @@ <h1 i18n="styleManager"></h1>
           </template>
         </div>
 
-        <div id="backup" class="flex wrap">
+        <div id="backup" class="flex wrap center-items">
           <button id="sync-styles" class="icon flex center-items" i18n="title:optionsCustomizeSync">
             <img hidden>
             <i class=i-cloud></i>
@@ -251,26 +253,31 @@ <h1 i18n="styleManager"></h1>
       </main>
     </div>
 
-    <div class="settings-column" id="backup-hint">
-      <details data-pref="manage.backup.expanded">
+    <div class="settings-column" id="links">
+      <details data-pref="manage.links.expanded">
         <summary></summary>
-        <main i18n="backupReminder"></main>
+        <main><% _.forEach([
+          ['userstyles.world/explore', /*i18n*/'linkGetShareStyles'],
+          ['uso.kkx.one/browse/styles', /*i18n*/'linkGetStyles'],
+          ['github.com/openstyles/stylus/wiki', /*i18n*/'linkGetHelp'],
+          ['github.com/openstyles/stylus', , 'GitHub'],
+          ['explore.transifex.com/github-7/Stylus/', /*i18n*/'linkTranslate'],
+        ], ([url, tl, text]) => { if (tl) { %>
+          <a href="https://<%= url %>" target="_blank" class="target" i18n="<%= tl %>"></a>
+        <% } else { %>
+          <a href="https://<%= url %>" target="_blank" class="target"><%= text %></a>
+        <% }}); %>
+        </main>
       </details>
     </div>
 
-    <div class="settings-column" id="links">
-      <details data-pref="manage.links.expanded">
+    <div class="settings-column" id="backup-hint">
+      <details data-pref="manage.backup.expanded">
         <summary></summary>
-        <main>
-          <a href="https://userstyles.world/explore" target="_blank" i18n="linkGetShareStyles"></a>
-          <a href="https://uso.kkx.one/browse/styles" target="_blank" i18n="linkGetStyles"
-             style="--filter: grayscale(1) brightness(2)"></a>
-          <a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n="linkGetHelp"></a>
-          <a href="https://github.com/openstyles/stylus" target="_blank">GitHub</a>
-          <a href="https://explore.transifex.com/github-7/Stylus/" target="_blank" i18n="linkTranslate"></a>
-        </main>
+        <main i18n="backupReminder"></main>
       </details>
     </div>
+
   </div>
 
   <div id="header-resizer" i18n="title:headerResizerHint"></div>

src/manage/manage.css

@@ -1,5 +1,6 @@
 /* postcss-simple-vars */
 $pad: 16px;
+$pad05: calc(0.5 * $pad);
 $summaryX: calc($pad - 3px);
 $iconGapX: 12px;
 $iconGapY: 4px;
@@ -60,31 +61,25 @@ a, .disabled a:hover {
 }
 h1 {
   margin-top: 0;
-  margin-bottom: calc($pad/2);
+  margin-bottom: $pad05;
   .filtered & {
     visibility: hidden;
   }
 }
 #disableAll-label {
-  margin-bottom: calc($pad/2);
+  margin-bottom: $pad05;
 }
 #manage-settings {
   display: flex;
   flex-flow: column;
   flex: 1;
-}
-.settings-column {
-  width: 100%;
-  margin-bottom: $pad;
+  gap: $pad;
 }
 [id=actions] /* reducing specificity */ {
   flex: 1;
-  @media (450px < width < 700px) {
-    order: 2;
-    min-width: 240px;
-  }
   main {
-    margin: 0 calc(-$pad/2) calc(-$pad/2) 0;
+    min-width: calc(5 * 30px + $pad05);
+    margin: 0 calc(-1 * $pad05) calc(-1 * $pad05) 0;
     .compact-layout & {
       margin-right: $pad;
     }
@@ -137,6 +132,9 @@ h1 {
 #backup {
   gap: $iconGapY;
   p {
+    &:empty {
+      display: none;
+    }
     word-break: break-word;
     font-size: smaller;
     user-select: text;
@@ -145,19 +143,12 @@ h1 {
   }
 }
 #backup-hint {
-  .compact-layout & {
-    order: 99;
-    main {
-      min-width: 25vw;
-    }
-    hr {
-      display: inline-block;
-      width: .25em;
-    }
-  }
   hr {
     border: none;
   }
+  .normal-layout & details:not([open]) {
+    margin-top: calc(-1 * $pad05);
+  }
 }
 #check-all-updates-force {
   white-space: normal;
@@ -316,8 +307,10 @@ h1 {
       height: 0;
     }
     .compact-layout & {
-      padding: calc(.5*$pad) calc(.75*$pad);
-      margin-top: -$pad;
+      padding: $pad05 0;
+      width: $pad;
+      margin: -3px 0 0 0;
+      position: absolute;
     }
     h2 {
       display: inline;
@@ -375,26 +368,18 @@ h1 {
 }
 
 #links {
-  .normal-layout & {
-    margin: 0 $pad 0 0;
-  }
   details:not([open]) h2::after {
     content: "...";
   }
   main {
     display: flex;
-    flex-flow: column;
-    align-items: flex-start;
-    line-height: 1.6;
-  }
-  img {
-    width: 16px;
-    vertical-align: text-bottom;
-    padding-right: .25em;
-    transition: filter .5s;
+    flex-flow: wrap;
+    gap: $pad05;
   }
-  a:not(:hover) img {
-    filter: var(--filter, grayscale(1));
+  a {
+    width: auto;
+    min-width: 0;
+    padding-right: 0;
   }
 }
 /* no styles */
@@ -403,11 +388,14 @@ h1 {
     flex: 0;
   }
   #links {
-    padding: 1.25rem 0 0 2rem;
+    padding: calc(1.5*$pad) 0 0 calc(1.5*$pad);
     line-height: 2;
     font-size: larger;
     summary {
-      visibility: hidden;
+      display: none;
+    }
+    main {
+      flex-flow: column;
     }
   }
 }
@@ -517,22 +505,23 @@ button i {
   }
 }
 
-#search-wrapper, #sort-wrapper {
+#wide-inputs {
+  gap: $pad05;
   display: flex;
-  align-items: center;
-  flex: 1;
-}
-#search-wrapper > :first-child,
-#sort-wrapper > :first-child {
-  flex-grow: 1;
-  max-width: calc(100% - var(--action-size));
+  flex-flow: column;
+  > * {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    > :first-child {
+      flex-grow: 1;
+      max-width: calc(100% - var(--action-size));
+    }
+  }
 }
 #search + * {
   margin-left: -1px;
 }
-#search-wrapper {
-  margin: calc($pad/2) 0;
-}
 #manage\.searchMode {
   background: var(--bg);
 }
@@ -704,7 +693,7 @@ button i {
   }
 }
 
-@media screen and (max-width: 850px), compact {
+.compact-layout {
   body {
     display: block;
     height: auto;
@@ -737,36 +726,30 @@ button i {
     border-bottom: 1px dashed var(--c65);
     details + main,
     details > main {
-      margin: -$pad 0 0 $pad;
+      margin: 0 0 0 $pad;
     }
   }
   #stats {
     position: static;
   }
-  #filters {
-    flex-flow: column;
-  }
   #manage-settings {
     flex-flow: wrap;
-    padding: $pad 0 0 $pad;
-  }
-  .settings-column {
-    display: flex;
-    align-items: stretch;
-    flex-flow: wrap;
-    width: auto;
-    height: fit-content;
-    margin: -$pad $pad $pad 0;
-    padding-top: $pad;
+    align-items: flex-start;
+    padding: $pad;
   }
   #installed {
     margin-top: 0;
     padding-left: 0;
   }
-  #links {
-    flex: 0 0 2em;
-    &:has([open]) {
-      flex: 0 0 fit-content;
+  #backup-hint {
+    main {
+      min-width: 10em;
+      max-height: 10em;
+      overflow-y: auto;
+    }
+    hr {
+      display: inline-block;
+      width: .25em;
     }
   }
 }

src/manage/render.js

@@ -30,7 +30,7 @@ const partDecorations = {
 const rxIsDateVer = /^20\d{4,6}(?:\.\d\d?){2}$/;
 const rxNonCJK = /[^\u3000-\uFE00]+/g;
 
-let elLinks, elLinksParent;
+let elLinks, elLinksPrev;
 let numStyles = 0;
 export let favsBusy;
 export let partEntry;
@@ -292,12 +292,12 @@ export function updateTotal(delta) {
     return;
   }
   installed.dataset.total = numStyles;
-  elLinksParent ??= (elLinks = $id('links')).parentNode;
+  elLinksPrev ??= (elLinks = $('#links')).previousSibling;
   const det = elLinks.$('details');
   const prefId = 'manage.links.expanded';
   $toggleDataset(det, 'pref', numStyles && prefId);
   det.open = !numStyles || prefs.__values[prefId];
   if (!numStyles) installed.after(elLinks);
-  else elLinksParent.append(elLinks);
+  else elLinksPrev.after(elLinks);
   $rootCL.toggle('empty', !numStyles);
 }