restore table based layout

Author: johndoh

_config.yml

@@ -18,7 +18,7 @@ libs: {
         url: 'https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.js',
         sri: 'sha384-SlYTcCEsC10TwMfcpGjqd+bWfA2QdB0CInBtPX6erDT3NnEkhX2X3gJ83UyHtXs3'
     },
-    css: '/styles/styles.min.css?v=2026030800',
+    css: '/styles/styles.min.css?v=2026032500',
     bootstrap: {
         css: {
             url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',

_data/downloads.json

@@ -1,6 +1,7 @@
 {
     "stable": {
-        "title": "Stable",
+        "title": "Stable version",
+        "titleVersion": true,
         "packages": [
             {
                 "package": "Dependent",
@@ -26,12 +27,14 @@
         ]
     },
     "old-stable": {
-        "title": "Old Stable",
+        "title": "Old stable",
+        "titleVersion": true,
         "packages": [
         ]
     },
     "lts": {
-        "title": "LTS",
+        "title": "LTS versions",
+        "titleVersion": false,
         "description": "Long Term Support with low maintenance mode. This means only security updates and rare fixes of serious issues will go into these release branches.",
         "packages": [
             {
@@ -44,13 +47,15 @@
         ]
     },
     "beta": {
-        "title": "Beta",
+        "title": "Beta version",
+        "titleVersion": true,
         "description": "We recommend to test pre-release versions on a separate environment, and don't forget to backup your data before installing.",
         "packages": [
         ]
     },
     "rc": {
-        "title": "Release Candidate",
+        "title": "Release candidate",
+        "titleVersion": true,
         "description": "We recommend to test pre-release versions on a separate environment, and don't forget to backup your data before installing.",
         "packages": [
             {

_includes/footer.html

@@ -78,7 +78,7 @@
 
     document.querySelectorAll('a.copy-popover-link').forEach((sumbtn) => {
         var popover = new bootstrap.Popover(sumbtn, {
-            content: sumbtn.closest('div').querySelector('.copy-popover-target').innerHTML,
+            content: sumbtn.closest('td').querySelector('.copy-popover-target').innerHTML,
             html: true,
             customClass: 'copy-popover'
         });

download/index.html

@@ -12,33 +12,37 @@ <h1>Download your version of Roundcube</h1>
     {% if params.packages.size == 0 %}
         {% continue %}
     {% endif %}
-    <h2 id="{{ id }}">{{ params.title }} <a class="anchor" href="#{{ id }}" aria-label="Link to this section: {{ params.title }}"></a></h2>
+    <h2 id="{{ id }}">{{ params.title }}{% if params.titleVersion %} - {{ params.packages[0].version }}{% endif %} <a class="anchor" href="#{{ id }}" aria-label="Link to this section: {{ params.title }}"></a></h2>
 
     {% if params.description %}
         <p class="text-body-secondary mb-1">{{ params.description }}</p>
     {% endif %}
 
-    <div class="download-grid grid-striped" role="table">
-        <div class="item-header fw-bold"role="row">
-            <div class="col-package" role="columnheader">Package</div>
-            <div class="col-link" role="columnheader"></div>
-            <div class="col-size" role="columnheader">Size</div>
-            <div class="col-checksum" role="columnheader"><span class="d-none d-lg-inline">SHA-256 checksum</span></div>
-        </div>
+    <table class="table table-striped download-table">
+    <thead>
+        <tr>
+            <th class="package" scope="col">Package</th>
+            <td class="link"></td>
+            <th class="size text-nowrap" scope="col">Size</th>
+            <th class="checksum" scope="col"><span class="d-none d-lg-inline">SHA-256 checksum</span></th>
+        </tr>
+    </thead>
+    <tbody>
         {% for package in params.packages %}
-            <div class="item-content" role="row">
-                <div class="col-package" role="rowheader">{{ package.version }} - {{ package.package }}{% if package.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</div>
-                <div class="col-link" role="cell"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span class="d-none d-sm-inline ms-0 ms-sm-1">Download</span></a></div>
-                <div class="col-size" role="cell">{{ package.size }}</div>
-                <div class="col-checksum" role="cell">
+            <tr>
+                <th class="package fw-normal" scope="row">{% unless params.titleVersion %}{{ package.version }} - {% endunless %}{{ package.package }}{% if package.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</th>
+                <td class="link text-center text-lg-start"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
+                <td class="size text-nowrap">{{ package.size }}</td>
+                <td class="checksum font-monospace text-nowrap text-center text-lg-start pe-3">
                     <span class="d-none d-lg-inline copy-popover-target">
-                        <span class="copy-target d-block d-md-inline-block overflow-hidden text-nowrap text-truncate py-3 py-lg-0">{{ package.checksum }}</span><span class="py-3 py-lg-0 ps-1"><a class="copy-link align-top" href="#" aria-label="Copy text"></a></span>
+                        <span class="copy-target d-block d-lg-inline text-nowrap overflow-auto py-3 py-lg-0">{{ package.checksum }}</span><span class="py-3 py-lg-0"><a class="copy-link" href="#" aria-label="Copy text"></a></span>
                     </span>
                     <a class="d-inline d-lg-none copy-popover-link checksum" href="#" aria-label="SHA-256 checksum" onclick="return false;" data-bs-title="SHA-256 checksum" data-bs-placement="left"></a>
-                </div>
-            </div>
+                </td>
+            </tr>
         {% endfor %}
-    </div>
+    </tbody>
+    </table>
 {% endfor %}
 
 <p id="fn1" class="text-body-secondary mt-4">1. Dependent packages only contain sources which are licensed under the GPL but they require some third-party

index.html

@@ -15,7 +15,7 @@
                 <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png?g={{ generated }}" {% if site.data.screenshots[skin]['banner-dark'] %}data-rc-dark="/screens/skins/{{ skin }}/banner_dark.png?g={{ generated }}"{% endif %} width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
             </div>
             <div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
-                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!"><span class="ms-1">Download</span></a>
+                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!"><span>Download</span></a>
                 <span class="version text-body-secondary">Version {{ site.data.downloads.stable.packages[0].version }}</span>
             </div>
         </div>

styles/styles.less

@@ -2,6 +2,7 @@
 @nav-height: 66px;
 @nav-offset: 6rem;
 @thumbnail-width: 140px;
+@btn-icon-margin: .25rem;
 
 @min-width-sm: 576px;
 @min-width-md: 768px;
@@ -54,6 +55,10 @@ html[data-bs-theme="dark"] {
   --bs-navbar-toggler-padding-x: 0;
 }
 
+.table {
+  --bs-table-striped-bg: var(--rc-color-background-alt);
+}
+
 .bg-quote,
 .bg-badge {
   background-color: var(--rc-color-background-alt) !important;
@@ -291,11 +296,11 @@ footer {
 }
 
 .rc-icon::before {
-  margin-right: .25rem;
+  margin-right: @btn-icon-margin;
 }
 
 .rc-icon::after {
-  margin-left: .25rem;
+  margin-left: @btn-icon-margin;
 }
 
 a.back-link::before {
@@ -356,6 +361,23 @@ a.current-theme::after {
 
   &::before {
     content: @fa-var-download;
+    margin-right: 0;
+  }
+
+  > span {
+    margin-left: @btn-icon-margin * 2;
+  }
+
+  &.btn-sm {
+    > span {
+      display: none;
+    }
+
+    @media (min-width: @min-width-sm) {
+      > span {
+        display: inline;
+      }
+    }
   }
 }
 
@@ -434,41 +456,47 @@ div.color-modes > ul.dropdown-menu {
   }
 }
 
-div.download-grid {
-  display: grid;
-  grid-template-columns: 57% 13% 21% 9%;
+table.download-table {
+  th.package {
+    width: 55%;
+  }
 
-  div.item-header,
-  div.item-content {
-    display: contents;
+  td.link,
+  td.size {
+    width: 20%;
+  }
 
-    > div {
-      padding: .5rem;
-      border-bottom: var(--bs-border-width) solid var(--bs-border-color);
-    }
+  td.checksum {
+    font-size: 0.9em;
   }
 
-  &.grid-striped > div:nth-of-type(even) > div {
-    background-color: var(--rc-color-background-alt);
+  tbody th,
+  tbody td {
+    vertical-align: middle;
   }
 
   @media (min-width: @min-width-sm) {
-    grid-template-columns: 50% 25% 15% 10%;
-  }
+    th.package {
+      width: 40%;
+    }
 
-  @media (min-width: @min-width-lg) {
-    grid-template-columns: 30% 15% 10% 43%;
+    td.link {
+      width: 35%;
+    }
 
-    div.col-checksum span.copy-target {
-      max-width: 90%;
+    td.size {
+      width: 20%;
     }
   }
 
-  @media (min-width: @min-width-xxl) {
-    grid-template-columns: 30% 12% 10% 48%;
+  @media (min-width: @min-width-lg) {
+    th.package {
+      width: 20%;
+    }
 
-    div.col-checksum span.copy-target {
-      max-width: none;
+    td.link,
+    td.size {
+      width: 15%;
     }
   }
 }