formatting changes

adlius · Aug 27, 2024 · 3e6c270 · 3e6c270
1 parent df7bde5
commit 3e6c270
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 154 deletions.
diff --git a/app/preprints/-components/preprint-card/component.ts b/app/preprints/-components/preprint-card/component.ts
@@ -13,7 +13,6 @@ import Toast from 'ember-toastr/services/toast';
 
 import RouterService from '@ember/routing/router-service';
 import Intl from 'ember-intl/services/intl';
-import Media from 'ember-responsive';
 import template from './template';
 import styles from './styles';
 
@@ -27,7 +26,6 @@ export default class PreprintCard extends Component {
     @service store!: Store;
     @service toast!: Toast;
     @service intl!: Intl;
-    @service media!: Media;
 
     preprint?: Preprint;
     delete?: (preprint: Preprint) => void;
@@ -36,10 +34,6 @@ export default class PreprintCard extends Component {
 
     searchUrl = pathJoin(baseURL, 'search');
 
-    get isMobile() {
-        return this.media.isMobile;
-    }
-
     get shouldShowUpdateButton() {
         return this.preprint && this.preprint.currentUserPermissions.includes(Permission.Admin);
     }

diff --git a/app/preprints/-components/preprint-card/styles.scss b/app/preprints/-components/preprint-card/styles.scss
@@ -1,29 +1,37 @@
-.preprint-card {
-    width: 100%;
-    margin: 10px 0;
-}
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
 
-.card-contents {
-    display: block;
-    flex-direction: row;
-}
-
-.heading {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
+.preprint-card {
     width: 100%;
-}
-
-.ember-content-placeholders-heading__title {
-    height: 1em;
-    margin-top: 5px;
-    margin-bottom: 5px;
-
-    &:first-child {
-        width: 100%;
+    margin: 1px 0;
+
+    .card-contents {
+        display: block;
+        flex-direction: row;
+        position: relative;
+        display: block;
+        padding: 10px 15px;
+        margin-bottom: -1px;
+        background-color: #fff;
+        border: 1px solid #ddd;
+
+        .heading {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: flex-start;
+            width: 100%;
+
+            :global .ember-content-placeholders-heading__title {
+                height: 1em;
+                margin-top: 5px;
+                margin-bottom: 5px;
+
+                &:first-child {
+                    width: 100%;
+                }
+            }
+        }
     }
 }
 
@@ -85,32 +93,25 @@
 
 dl {
     margin-bottom: 10px;
-}
 
-dl div {
-    display: flex;
-}
+    div {
+        display: flex;
 
-dl dt {
-    width: 100px;
-    margin-right: 5px;
-}
+        dt {
+            width: 110px; // Preserved as originally
+            margin-right: 5px;
+        }
 
-dl dd {
-    flex: 1;
+        dd {
+            flex: 1;
+        }
+    }
 }
 
 .tags {
     margin-top: 2px;
 }
 
-.description {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: calc(100% - 100px);
-}
-
 .link {
     composes: Button from 'osf-components/components/button/styles.scss';
     composes: SecondaryButton from 'osf-components/components/button/styles.scss';
@@ -134,45 +135,6 @@ dl dd {
     padding-left: 0;
 }
 
-.dropdown {
-    padding-left: 5px;
-}
-
-.dropdown-button {
-    padding: 4px 12px;
-    line-height: 0;
-}
-
-.dropdown-list {
-    background-color: $color-bg-gray-light;
-    min-width: 180px;
-}
-
-.dropdown-list ul {
-    list-style: none;
-    padding-inline-start: 0;
-}
-
-.dropdown-list li {
-    margin: 10px 0;
-}
-
-.dropdown-link {
-    color: $color-link-black;
-    border-color: transparent;
-    background-color: $color-bg-gray-light;
-    min-width: 180px;
-    text-align: left;
-    padding: 3px 20px;
-}
-
-.dropdown-link:hover,
-.dropdown-link:focus {
-    cursor: pointer;
-    background-image: none;
-    background-color: $color-bg-gray-dark;
-}
-
 .list-group-item-heading {
     margin-top: 0;
     margin-bottom: 5px;

diff --git a/app/preprints/-components/preprint-card/template.hbs b/app/preprints/-components/preprint-card/template.hbs
@@ -5,7 +5,7 @@
 >
     <div local-class='card-contents'>
         <div
-            local-class='card-body {{if this.isMobile 'mobile'}}'
+            local-class='card-body {{if (is-mobile) 'mobile'}}'
         >
             <h4 local-class='list-group-item-heading heading' data-test-preprint-card-heading>
                 {{#if @preprint}}
@@ -18,7 +18,7 @@
                         </span> |
                     {{/unless}}
                     <OsfLink
-                        local-class='osf-link {{if this.isMobile 'mobile'}}'
+                        local-class='osf-link {{if (is-mobile) 'mobile'}}'
                         data-analytics-name='Title'
                         data-test-preprint-title='{{@preprint.id}}'
                         @route='resolve-guid'

diff --git a/app/preprints/my-preprints/styles.scss b/app/preprints/my-preprints/styles.scss
@@ -15,7 +15,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background-image: url('img/bg-light.jpg');
+        background-image: url('images/preprints/bg-light.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         filter: grayscale(1);
@@ -30,63 +30,34 @@
     :global(.media-mobile) {
         margin-top: -38px;
     }
-}
 
-.Title {
-    min-height: 150px;
 }
 
-.NavTabs {
-    ul {
-        margin-left: 15px;
-        margin-bottom: 10px;
-        line-height: 20px;
-        list-style-image: none;
-        list-style-position: outside;
-        list-style-type: none;
-        padding: 0 0 41px;
-        box-sizing: border-box;
-    }
-
-    .NavItem {
-        border: none;
-        color: #fff;
-        background: none;
-        padding: 10px 15px;
-        float: left;
-
-        &:hover {
-            border: none;
-            color: #333;
-            background-color: #e4e4e4;
-        }
-    }
-
-    :global(.ember-tabs__tab--selected) {
-        border: none;
-        color: #333;
-        background-color: #e4e4e4;
-
-        &:focus {
-            border: none;
-            background-color: #e4e4e4;
-        }
-
-        &:hover {
-            border: none;
-            background-color: #e4e4e4;
-        }
-    }
-
-    .TabPane {
-        &:global(.active) {
-            display: block;
+.Hero {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    position: relative;
+    background: url('images/default-brand/bg-dark.jpg');
+    background-size: cover;
+
+    .Title {
+        min-height: 150px;
+
+        h1 {
+            color: $color-text-white;
+            font-weight: 400;
+            margin-top: 0;
+            margin-bottom: 0;
+            padding: 1em 2em;
         }
     }
 }
 
-.SortDescription {
-    text-align: right;
-    margin-top: 10px;
-    margin-right: 15px;
+.GutterBody {
+    padding-top: 85px;
+    padding-bottom: 85px;
 }
diff --git a/app/preprints/my-preprints/template.hbs b/app/preprints/my-preprints/template.hbs
@@ -1,18 +1,20 @@
 {{page-title (t 'preprints.my_preprints.header')}}
 
-<OsfLayout @backgroundClass={{local-class 'ContentBackground'}} as |layout|>
-    <layout.heading>
+<OsfLayout @backgroundClass='{{local-class 'ContentBackground'}}' as |layout|>
+    <layout.heading local-class = 'Hero'>
         <div local-class='Title'>
             <h1>
                 {{t 'preprints.my_preprints.header'}}
             </h1>
         </div>
     </layout.heading>
     <layout.main>
-        {{#if this.preprints.length}}
-            {{#each this.preprints as |preprint|}}
-                <Preprints::-Components::PreprintCard @preprint={{preprint}} />
-            {{/each}}
-        {{/if}}
+        <div local-class='GutterBody'>
+            {{#if this.preprints.length}}
+                {{#each this.preprints as |preprint|}}
+                    <Preprints::-Components::PreprintCard @preprint={{preprint}} />
+                {{/each}}
+            {{/if}}
+        </div>
     </layout.main>
 </OsfLayout>
diff --git a/public/assets/images/preprints/bg-light.jpg b/public/assets/images/preprints/bg-light.jpg
diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -1439,9 +1439,7 @@ preprints:
             pending: 'Pending'
             accepted: 'Accepted'
             rejected: 'Rejected'
-        timestamp_label: 'Date Created'
-        last_updated: 'Last Updated'
-        contributors: 'Contributors'
+        contributors: 'Contributors:'
         description: 'Description'
         private_tooltip: 'This preprint is private'
         options: 'Options'
@@ -1450,9 +1448,9 @@ preprints:
         update_button: 'Edit'
         settings: 'Settings'
         delete: 'Delete'
-        provider: 'Provider'
-        date_created: 'Date Created'
-        date_modified: 'Date Modified'
+        provider: 'Provider:'
+        date_created: 'Date Created:'
+        date_modified: 'Date Modified:'
 registries:
     header:
         osf_registrations: 'OSF Registrations'