style updates to dashboard and banner; link banner to dashboard

PREreview · Jul 30, 2020 · 2e5b0ef · 2e5b0ef
1 parent c15d952
commit 2e5b0ef
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 52 deletions.
diff --git a/src/components/banner.css b/src/components/banner.css
@@ -15,6 +15,10 @@
 
   @media (--mobile) {
     height: var(--announcement-bar-height--mobile);
+    padding-bottom: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 95vw;
   }
 }
 

diff --git a/src/components/banner.js b/src/components/banner.js
@@ -7,7 +7,7 @@ export default function Banner() {
   return (
   <React.Fragment>
     <div className='announcement'>
-      <p>Click <a className='announcement-link' href={`${process.env.API_URL}/?q=COVID-19`}>here</a> to find preprints on COVID-19 with reviews or requests for reviews.</p>
+      <p>Click <a className='announcement-link' href={`${process.env.API_URL}/dashboard`}>here</a> to find preprints on COVID-19 with reviews or requests for reviews.</p>
       <p>Click <a className='announcement-link' href="https://oaspa.org/covid-19-publishers-open-letter-of-intent-rapid-review/?highlight=covid-19" target="_blank">here</a> to read OASPA's open letter of intent to ensure rapid review of key work related to COVID-19.</p>
     </div>
   </React.Fragment>

diff --git a/src/components/dashboard.css b/src/components/dashboard.css
@@ -1,6 +1,61 @@
 .dashboard {
+  margin-bottom: 2em;
   width: 96vw;
 
+  & .dashboard__activity {
+    align-items: flex-start;
+    display: flex;
+    margin-left: -10px;
+    margin-top: 30px;
+
+    & .dashboard__activity_item {
+      border: 1px solid var(--light-grey);
+      border-radius: 8px;
+      padding: 10px;
+      margin-left: 10px;
+
+      &:first-child {
+        width: 60%;
+
+        @media (--mid) {
+          margin-left: 0;
+          width: 90%;
+        }
+      }
+
+      &:last-child {
+        width: 40%;
+
+        @media (--mid) {
+          margin-left: 0;
+          margin-top: 20px;
+          width: 90%;
+        }
+      }
+
+      & .dashboard__activity_item_list {
+        padding-left: 16px;
+
+        & li {
+          &:not(:last-child) {
+            margin-bottom: 5px;
+          }
+        }
+      }
+
+      & .dashboard__activity_item_text {
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    @media (--mid) {
+      display: block;
+      margin-left: 0;
+    }
+  }
+
   & .dashboard__checkbox {
     position: relative;
   }
@@ -21,6 +76,10 @@
       display: block;
       margin-left: 0;
     }
+
+    @media (--mobile) {
+      margin-top: 0;
+    }
   }
 
   & .dashboard__flex_item {
@@ -81,7 +140,7 @@
     }
   }
 
-  & .dashboard__tags {
+  & .dashboard__pagination {
     display: flex;
     justify-content: center;
   }
@@ -110,67 +169,30 @@
       & .preprint-card__tag-list {
         list-style: none;
       }
+
+      @media (--mobile) {
+        width: 88vw;
+      }
     }
   }
 
-  & .dashboard__activity {
-    align-items: flex-start;
+  & .dashboard__tags {
     display: flex;
-    margin-left: -10px;
-    margin-top: 30px;
-
-    & .dashboard__activity_item {
-      border: 1px solid var(--light-grey);
-      border-radius: 8px;
-      padding: 10px;
-      margin-left: 10px;
-
-      &:first-child {
-        width: 60%;
-
-        @media (--mid) {
-          margin-left: 0;
-          width: 90%;
-        }
-      }
-
-      &:last-child {
-        width: 40%;
-
-        @media (--mid) {
-          margin-left: 0;
-          margin-top: 20px;
-          width: 90%;
-        }
-      }
-
-      & .dashboard__activity_item_list {
-        padding-left: 16px;
-
-        & li {
-          &:not(:last-child) {
-            margin-bottom: 5px;
-          }
-        }
-      }
-
-      & .dashboard__activity_item_text {
-        &:not(:last-child) {
-          margin-bottom: 10px;
-        }
-      }
-    }
+    justify-content: center;
+  }
 
-    @media (--mid) {
-      display: block;
-      margin-left: 0;
+  .preprint-card__server-id {
+    a {
+      word-wrap: break-word;
+      word-wrap: anywhere;
     }
   }
 
   .search-bar {
     border-top: unset;
     box-shadow: unset;
     position: relative;
+    margin-top: 0;
     top: unset;
     width: unset;
     z-index: unset;
@@ -182,6 +204,18 @@
 
   .sort-options {
     justify-content: space-between;
+
+    @media (--mobile) {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+  }
+
+  .sort-options__item {
+    @media (--mobile) {
+      margin-top: 10px;
+      width: 34%;
+    }
   }
 
   .sort-options__item:last-of-type {
@@ -191,6 +225,10 @@
   @media (--mid) {
     width: 92vw;
   }
+
+  @media (--mobile) {
+    margin-top: 30px;
+  }
 }
 
 #Dashboard {

diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -374,7 +374,7 @@ export default function Dashboard() {
                   </ul>
                 )}
                 <br/>
-                <div className="home__pagination">
+                <div className="home__pagination dashboard__pagination">
                   {!!(location.state && location.state.bookmark) && (
                     <Button
                       onClick={() => {