Added more styling for mobile

app/preprints/index/controller.ts

@@ -4,11 +4,17 @@ import { action } from '@ember/object';
 import RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
 import Theme from 'ember-osf-web/services/theme';
+import Media from 'ember-responsive';
 
 export default class Preprints extends Controller {
     @service store!: Store;
     @service theme!: Theme;
     @service router!: RouterService;
+    @service media!: Media;
+
+    get isMobile(): boolean {
+        return this.media.isMobile;
+    }
 
     get isOsf(): boolean {
         return this.theme?.provider?.id === 'osf';

app/preprints/index/styles.scss

@@ -13,7 +13,7 @@
         background-color: var(--secondary-color);
         color: var(--primary-color) !important;
 
-        a:not(:global(.btn)) {
+        a:not(.btn) {
             color: var(--primary-color);
             text-decoration: underline;
         }
@@ -22,10 +22,6 @@
             color: var(--primary-color);
         }
 
-        .btn-info {
-            color: $color-text-white;
-        }
-
         .submit-container {
             width: 100%;
             display: flex;
@@ -62,8 +58,7 @@
     .preprint-subjects-container {
         background-color: $color-bg-gray-lighter;
         border-bottom: 1px solid #6d8a98;
-        padding-top: 15px;
-        padding-bottom: 15px;
+        padding: 15px 0;
         width: 100%;
         flex-direction: column;
         display: flex;
@@ -72,8 +67,7 @@
 
         .preprint-subjects-inner-container {
             background-color: $color-bg-gray-lighter;
-            padding-right: 30px;
-            padding-left: 30px;
+            padding: 0 30px;
             width: calc(100% - 60px);
             flex-direction: column;
             display: flex;
@@ -97,8 +91,7 @@
         color: $color-text-white;
         text-shadow: 0 0 5px #506069;
         background-size: cover;
-        padding-top: 15px;
-        padding-bottom: 15px;
+        padding: 15px 0;
         min-width: 100%;
         min-height: 100%;
         width: 100%;
@@ -148,6 +141,8 @@
                     font-size: 21px;
                     line-height: 1.4;
                     font-weight: 300;
+                    padding-bottom: 10px;
+                    text-align: center;
 
                     .links {
                         color: $color-text-white;
@@ -160,13 +155,59 @@
                 }
             }
         }
+    }
 
-        h2 {
-            text-transform: capitalize;
+    .osf-preprint-advisory-container {
+        background-image: none;
+    }
+
+    &.mobile {
+        .preprint-subjects-inner-container {
+            padding: 0;
+            background-color: $color-bg-gray-lighter;
+            padding: 0, 10px;
+            width: calc(100% - 20px);
+
+            .subject-list-container {
+                padding: 25px 0;
+                width: 100%;
+                flex-direction: column;
+            }
+        }
+
+        .preprint-tool-inner-container {
+            padding: 15px 10px;
+            width: calc(100% - 20px);
         }
     }
 
-    .osf-preprint-advisory-container {
+    .btn {
+        display: inline-block;
+        margin-bottom: 0;
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        touch-action: manipulation;
+        cursor: pointer;
         background-image: none;
+        border: 1px solid transparent;
+        border-radius: 2px;
+        padding: 6px 12px;
+        font-size: 14px;
+        line-height: 1.42857;
+        user-select: none;
+        vertical-align: middle;
+        color: $color-text-white;
+    }
+
+    .btn-success {
+        background-color: #357935;
+        border-color: #2d672d;
+    }
+
+    .btn-lg {
+        padding: 10px 16px;
+        font-size: 18px;
+        line-height: 1.33333;
     }
 }

app/preprints/index/template.hbs

@@ -1,6 +1,6 @@
 {{page-title (t 'preprints.title')}}
 
-<div local-class='preprints-page-container'
+<div local-class='preprints-page-container {{if this.isMobile 'mobile'}}'
     {{with-branding this.model.brand}}
     data-analytics-scope='preprints landing page'
 >
@@ -33,8 +33,7 @@
                         <OsfLink
                             data-test-submit-button
                             data-analytics-name='submit button'
-                            local-class='btn-info'
-                            class='btn btn-success btn-lg preprint-submit-button'
+                            local-class='btn btn-success btn-lg'
                             @href={{concat this.theme.pathPrefix 'submit'}}
                         >
                             {{t 'preprints.header.submit_label' documentType=this.theme.provider.content.documentType}}
@@ -138,7 +137,8 @@
                         <OsfLink
                             data-test-contact-link
                             data-analytics-name='Contact Email'
-                            class='btn btn-info btn-lg'
+                            local-class='btn btn-lg'
+                            class='btn-info'
                             @href='mailto:[email protected]'
                         >
                             {{t 'preprints.services.bottom.contact'}}
@@ -153,7 +153,7 @@
     {{!ADVISORY GROUP}}
     {{#if this.theme.provider.advisoryBoard.length}}
         <div
-            class='preprint-advisory-container'
+            class='preprint-advisory-container {{if this.isMobile 'mobile'}}'
             local-class='{{if this.isOsf 'osf-preprint-advisory-container'}}'
         >
             <div class='preprint-advisory-inner-container'>

app/styles/_preprint.scss

@@ -4,17 +4,15 @@
     background: var(--hero-background-img-url);
     background-color: $color-bg-gray-lighter;
     border-bottom: 1px solid #6d8a98;
-    padding-top: 15px;
-    padding-bottom: 15px;
+    padding: 15px 0;
     width: 100%;
     flex-direction: column;
     display: flex;
     justify-content: center;
     align-items: center;
 
     .preprint-advisory-inner-container {
-        padding-right: 30px;
-        padding-left: 30px;
+        padding: 0 30px;
         width: calc(100% - 60px);
         flex-direction: column;
         display: flex;
@@ -47,4 +45,23 @@
             }
         }
     }
+
+    &.mobile {
+        .preprint-advisory-inner-container {
+            padding: 0 10px;
+            width: calc(100% - 20px);
+
+            .preprint-advisory-list {
+                flex-direction: column;
+
+                .preprint-advisory-list-column {
+                    width: 100%;
+
+                    ul {
+                        padding: 0;
+                    }
+                }
+            }
+        }
+    }
 }

lib/osf-components/addon/components/branded-header/component.ts

@@ -33,6 +33,10 @@ export default class BrandedHeader extends Component<InputArgs> {
         return this.args.showHelp;
     }
 
+    get isMobile(): boolean {
+        return this.media.isMobile;
+    }
+
     @computed('providerModel.name', 'args.translationParent')
     get headerAriaLabel() {
         return this.providerModel ?

lib/osf-components/addon/components/branded-header/styles.scss

@@ -101,9 +101,6 @@
         }
     }
 
-    .search-container.mobile {
-        width: 100%;
-    }
 
     .provider-description {
         justify-content: center;
@@ -117,4 +114,16 @@
         padding-top: 10px;
         padding-bottom: 10px;
     }
+
+    &.mobile {
+        padding: 30px 10px;
+
+        .search-container {
+            width: 100%;
+
+            .form {
+                margin: 0;
+            }
+        }
+    }
 }

lib/osf-components/addon/components/branded-header/template.hbs

@@ -1,4 +1,4 @@
-<div local-class='header-container'>
+<div local-class='header-container {{if this.isMobile 'mobile'}}'>
     <div local-class='brand-container'>
         <div
             local-class='brand brand-logo'
@@ -11,7 +11,7 @@
         {{yield (hash lead=(element ''))}}
     </p>
 
-    <div local-class='search-container {{if this.media.isMobile 'mobile'}}'>
+    <div local-class='search-container {{if this.isMobile 'mobile'}}'>
         <form
             local-class='form'
             data-test-search-form

lib/osf-components/addon/components/preprints/taxonomy-top-list/component.ts

@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 import SubjectModel from 'ember-osf-web/models/subject';
+import Media from 'ember-responsive';
+import { inject as service } from '@ember/service';
 
 interface InputArgs {
     list: SubjectModel[];
@@ -11,33 +13,52 @@ interface PairModel {
 }
 
 export default class TaxonomyTopList extends Component<InputArgs> {
-    routerPrefix = 'http://localhost:4200';
+    @service media!: Media;
+
+    get isMobile(): boolean {
+        return this.media.isMobile;
+    }
 
     get sortedList() {
         if (!this.args.list) {
             return;
         }
         const sortedList = this.args.list.sortBy('text');
         const pairedList = [] as  PairModel[][];
-        for (let i = 0; i < sortedList.get('length'); i += 2) {
-            const pair: PairModel[] = [];
-            // path in pair needs to be a list because that's what the
-            // subject param in the discover controller is expecting
-            const subjectOdd = sortedList.objectAt(i) as SubjectModel;
-            pair.pushObject({
-                path: [subjectOdd?.taxonomyName],
-                text: subjectOdd?.text,
-            } as PairModel);
-
-            if (sortedList.objectAt(i + 1)) {
-                const subjectEven = sortedList.objectAt(i + 1) as SubjectModel;
+
+        if (this.isMobile) {
+            for (let i = 0; i < sortedList.get('length'); i += 1) {
+                const pair: PairModel[] = [];
+                const subject= sortedList.objectAt(i) as SubjectModel;
+                pair.pushObject({
+                    path: [subject?.taxonomyName],
+                    text: subject?.text,
+                } as PairModel);
+                pairedList.pushObject(pair);
+            }
+        } else {
+            for (let i = 0; i < sortedList.get('length'); i += 2) {
+                const pair: PairModel[] = [];
+                // path in pair needs to be a list because that's what the
+                // subject param in the discover controller is expecting
+                const subjectOdd = sortedList.objectAt(i) as SubjectModel;
                 pair.pushObject({
-                    path: [subjectEven?.taxonomyName],
-                    text: subjectEven?.text,
-                });
+                    path: [subjectOdd?.taxonomyName],
+                    text: subjectOdd?.text,
+                } as PairModel);
+
+                if (sortedList.objectAt(i + 1)) {
+                    const subjectEven = sortedList.objectAt(i + 1) as SubjectModel;
+                    pair.pushObject({
+                        path: [subjectEven?.taxonomyName],
+                        text: subjectEven?.text,
+                    });
+                }
+                pairedList.pushObject(pair);
             }
-            pairedList.pushObject(pair);
+
         }
+
         return pairedList;
     }
 }

lib/osf-components/addon/components/preprints/taxonomy-top-list/styles.scss

@@ -11,18 +11,47 @@
     .subject-item {
         width: calc(50% - 20px);
 
+        .btn {
+            display: inline-block;
+            margin-bottom: 0;
+            font-weight: 400;
+            text-align: center;
+            white-space: nowrap;
+            touch-action: manipulation;
+            cursor: pointer;
+            background-image: none;
+            border: 1px solid transparent;
+            border-radius: 2px;
+            padding: 6px 12px;
+            font-size: 14px;
+            line-height: 1.42857;
+            user-select: none;
+            vertical-align: middle;
+            color: $color-text-white;
+        }
+
         .subject-button {
             width: 100%;
             font-size: 17px;
             overflow: hidden;
             text-overflow: ellipsis;
             background-color: var(--primary-color);
+            color: var(--secondary-color);
             border: 1px solid var(--secondary-color);
 
             &:hover {
+                color: var(--primary-color);
                 background-color: var(--secondary-color);
                 border: 1px solid var(--primary-color);
             }
         }
     }
+
+    &.mobile {
+        flex-direction: column;
+
+        .subject-item {
+            width: 100%;
+        }
+    }
 }