Improved formatting for mobile download menu

MESH-Research · Nov 14, 2023 · d1940d1 · d1940d1
1 parent 3ec44ee
commit d1940d1
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/assets/less/site/globals/site.overrides b/assets/less/site/globals/site.overrides
@@ -646,13 +646,16 @@
           }
           table tbody {
             tr {
-              td:nth-child(3) .ui.button {
-                width: 7rem;
-                &:first-child {
-                  margin-bottom: 0.25rem;
+              td:nth-child(3) {
+                padding-right: 0;
+                .ui.button {
+                  width: 7rem;
+                  &:first-child {
+                    margin-bottom: 0.25rem;
+                  }
                 }
               }
-              &:first-child {
+              &.total-files {
                 td .ui.button:first-child {
                   width: auto;
                   margin-bottom: 0;
@@ -841,26 +844,44 @@
     // FIXME: dropdown submenu breaks this: position: sticky;
     position: fixed;
     bottom: 0;
+    left: 0;
     width: 100%;
     justify-content: center;
     background-color: transparent;
     .item {
-      background-color: rgba(0, 0, 0, 0.7);
+      background-color: rgba(0, 0, 0, 0.8);
       backdrop-filter: blur(2px);
+      border-top: 2px solid @white;
       &.active {
-        background-color: rgba(0, 0, 0, 0.8);
+        background-color: rgba(0, 0, 0, 1);
       }
       &:first-child {
         border-radius: @defaultBorderRadius 0 0 0;
+        border-left: 2px solid @white;
       }
       &:last-child {
         border-radius: 0 @defaultBorderRadius 0 0;
+        border-right: 2px solid @white;
       }
       &#record-details-export.ui.dropdown {
         .menu {
           left: -75%;
         }
       }
+      &#record-details-download.ui.dropdown {
+        .menu {
+          left: -250%;
+          .description.filesize {
+            display: block;
+            float: none;
+            margin-left: 0;
+            margin-top: 0.5rem;
+          }
+          &::after {
+            left: 81%;
+          }
+        }
+      }
       &.ui.dropdown {
         .menu {
           left: -200%;

diff --git a/.../assets/semantic-ui/js/knowledge_commons_repository/custom_detail/components/FileList.jsx b/.../assets/semantic-ui/js/knowledge_commons_repository/custom_detail/components/FileList.jsx
@@ -56,8 +56,10 @@ const FileListTableRow = ({
           </small>
         )}
       </td>
-      {!stackedRows && <td>{formatBytes(file.size)}</td>}
-      <td className="right aligned">
+      {!stackedRows && (
+        <td className="single line">{formatBytes(file.size)}</td>
+      )}
+      <td className="right aligned collapsing">
         <span>
           {/* FIXME: restrict to previewable file types */}
           {withPreview && (
@@ -121,8 +123,11 @@ const FileListTable = ({
           </thead>
         )}
         <tbody>
-          {!!showTotalSize && (
-            <tr className={`title ${record.ui.access_status.id}`} tabIndex="0">
+          {!!showTotalSize && files.length > 1 && (
+            <tr
+              className={`title ${record.ui.access_status.id} total-files`}
+              tabIndex="0"
+            >
               <td>{i18next.t(`All ${files.length} files (as zip archive)`)}</td>
               <td>{totalFileSize} in total</td>
               <td>
@@ -183,6 +188,7 @@ const FileListDropdownMenu = ({
   files,
   fileTabIndex,
   icon = "download",
+  id,
   previewFileUrl,
   previewUrlFlag,
   record,
@@ -192,6 +198,7 @@ const FileListDropdownMenu = ({
 }) => {
   return (
     <Dropdown
+      id={id}
       text={text}
       button={asButton}
       icon={icon}
@@ -240,6 +247,7 @@ const FileListItemDropdown = ({
   files,
   fileTabIndex,
   handleMobileMenuClick,
+  id,
   isPreview,
   permissions,
   previewFileUrl,
@@ -255,7 +263,7 @@ const FileListItemDropdown = ({
       {!!permissions.can_read_files &&
         (files?.length < 2 ? (
           <Menu.Item
-            id="record-details-download"
+            id={id}
             as="a"
             href={`${previewFileUrl.replace("/preview/", "/files/")}/${
               defaultPreviewFile.key
@@ -273,6 +281,7 @@ const FileListItemDropdown = ({
               icon: false,
               files,
               fileTabIndex,
+              id,
               record,
               previewFileUrl,
               previewUrlFlag,
@@ -288,7 +297,7 @@ const FileListItemDropdown = ({
               asLabeled: false,
               asFluid: false,
               asItem: true,
-              classNames: "",
+              classNames: "pointing",
             }}
           />
         ))}