Fixes for the file page overrunning

CenterForOpenScience · Feb 6, 2024 · 4c8746c · 4c8746c
1 parent af8fce5
commit 4c8746c
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 30 deletions.
diff --git a/app/guid-file/-components/file-detail-layout/styles.scss b/app/guid-file/-components/file-detail-layout/styles.scss
@@ -1,18 +1,29 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
 .container {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
 }
 
 .main-column {
-    flex-grow: 3;
     z-index: 1;
+    width: 70%;
+
+    &.mobile {
+        width: 100%;
+    }
+
+    &.is-closed {
+        flex: 1;
+        width: calc(100% - 72px);
+    }
 
     h3 {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        max-width: 70vw;
+        width: 70%;
     }
 }
 
@@ -22,25 +33,28 @@
     flex-basis: 300px;
     flex-direction: column;
     flex-grow: 1;
-    width: 28vw;
+    width: calc(30% - 72px);
+    min-width: 400px;
 
     &.is-closed {
         display: none;
     }
 }
 
 .right-buttons {
-    @media (max-width: 767px) {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-        border-top: 1px solid #ddd;
-    }
     flex-grow: 0;
     display: flex;
     flex-direction: column;
     border-left: 1px solid #ddd;
     z-index: 1;
+    width: 72px;
+    min-width: 72px;
+
+    &.mobile {
+        flex-direction: row;
+        width: 100%;
+        margin-bottom: 10px;
+    }
 }
 
 .slide-in {

diff --git a/app/guid-file/-components/file-detail-layout/template.hbs b/app/guid-file/-components/file-detail-layout/template.hbs
@@ -1,8 +1,8 @@
 <div local-class='container'>
     {{#if @isMobile}}
-        <div local-class='main-column'>
+        <div local-class='main-column mobile'>
             {{yield to='header'}}
-            <div local-class='right-buttons'>
+            <div local-class='right-buttons mobile'>
                 {{yield to='rightButtons'}}
             </div>
             <div>
@@ -14,7 +14,8 @@
             </div>
         </div>
     {{else}}
-        <div local-class='main-column'>
+
+        <div local-class='main-column {{if @rightColumnClosed 'is-closed'}}'>
             {{yield to='header'}}
             {{yield to='body'}}
         </div>

diff --git a/app/guid-file/-components/file-header/styles.scss b/app/guid-file/-components/file-header/styles.scss
@@ -38,6 +38,8 @@
 
 
     &.mobile {
+        padding: 0;
+
         .flex-container-row {
             padding: 0;
             flex-direction: column;

diff --git a/app/guid-file/index/styles.scss b/app/guid-file/index/styles.scss
@@ -34,6 +34,7 @@
     min-width: 330px;
 
     &.mobile {
+        margin-bottom: 10px;
         margin-top: 0;
         margin-left: 10px;
         margin-right: 10px;
@@ -51,17 +52,9 @@
     background-color: $color-bg-white;
     border: 1px transparent;
     color: $color-link-dark;
-    margin: 20px 20px 0;
-
-    @media (max-width: 767px) {
-        margin: 0;
-    }
+    margin: 0;
 
     &.active {
-        @media (max-width: 767px) {
-            background-color: $color-bg-white;
-            color: $color-bg-black;
-        }
         background-color: $color-bg-gray-light;
     }
 }

diff --git a/lib/osf-components/addon/components/metadata/metadata-tabs/component.ts b/lib/osf-components/addon/components/metadata/metadata-tabs/component.ts
@@ -10,6 +10,7 @@ interface TabArgs {
     target: NodeModel;
     cedarMetadataRecords: CedarMetadataRecordModel[];
     defaultIndex: number;
+    displayFileMetadata: boolean;
 }
 
 export default class MetadataTabs extends Component<TabArgs> {
@@ -30,13 +31,15 @@ export default class MetadataTabs extends Component<TabArgs> {
     }
 
     private replaceHistory(): void {
-        if (this.activeId < 1) {
-            window.history.replaceState( {} , '',
-                `/${this.target.id}/metadata` );
-        } else {
-            const cedarMetadataRecord = this.cedarMetadataRecords[this.activeId - 1];
-            window.history.replaceState( {} , '',
-                `/${this.target.id}/metadata/${cedarMetadataRecord.id}` );
+        if (!this.args.displayFileMetadata) {
+            if (this.activeId < 1) {
+                window.history.replaceState( {} , '',
+                    `/${this.target.id}/metadata` );
+            } else {
+                const cedarMetadataRecord = this.cedarMetadataRecords[this.activeId - 1];
+                window.history.replaceState( {} , '',
+                    `/${this.target.id}/metadata/${cedarMetadataRecord.id}` );
+            }
         }
     }
 

diff --git a/mirage/scenarios/dashboard.ts b/mirage/scenarios/dashboard.ts
@@ -102,7 +102,7 @@ function create3CedarMetadataFile(server: Server, currentUser: ModelInstance<Use
 
     const filesNode = server.create('node', {
         id: 'read-only',
-        title: 'Read-only user and non-admin',
+        title: 'Read-only user and non-admin and a super long name to see if there is overflow into the right nav area',
         boaEnabled: true,
         currentUserPermissions: [Permission.Read],
     }, 'withFiles', 'withStorage', 'withContributors', 'withAffiliatedInstitutions', 'withDoi', 'withLinkedByNodes');
@@ -113,7 +113,8 @@ function create3CedarMetadataFile(server: Server, currentUser: ModelInstance<Use
 
     const cedarFileNode = server.create('file', {
         id: '3-cedar-metadata-file',
-        name: 'cedar metadata file',
+        // eslint-disable-next-line max-len
+        name: 'Cedar Metadata File on a read-only user and non-admin with a super long name to see if there is overflow in the right nav area',
         checkout: currentUser.id,
         target: filesNode,
         parentFolder: filesNodeOsfStorage.rootFolder,