Merge pull request #533 from nih-sparc/Fix-event-details-page-css

Fixed CSS for event and event details pages
nih-sparc · Sep 21, 2022 · c105ddd · c105ddd
2 parents c733ea8 + bfe9e85
commit c105ddd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/components/NewsEventsResourcesPage/NewsEventsResourcesPage.vue b/components/NewsEventsResourcesPage/NewsEventsResourcesPage.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="page">
     <breadcrumb :breadcrumb="breadcrumb" :title="heroTitle" />
     <page-hero>
       <h1>{{ heroTitle }}</h1>
-      <p>
+      <div class="body2">
         {{ heroSummary }}
-      </p>
+      </div>
     </page-hero>
     <div class="page-wrap container">
       <div class="subpage">
@@ -148,15 +148,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/_variables.scss';
+@import '@nih-sparc/sparc-design-system-components/src/assets/_variables.scss';
 
 .content {
-  & ::v-deep {
-    color: $vestibular;
-  }
-  & ::v-deep p {
-    margin-bottom: 1em;
-  }
   & ::v-deep img,
   & ::v-deep video {
     height: auto;
@@ -185,7 +179,11 @@ export default {
   }
 }
 .back-link {
-  color: $navy;
+  color: $darkBlue;
   font-weight: 700;
 }
+.page {
+  background-color: $background;
+  padding-bottom: 2rem;
+}
 </style>
diff --git a/pages/news-and-events/events/_eventId/event-details/index.vue b/pages/news-and-events/events/_eventId/event-details/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
+  <div class="page pb-32">
     <breadcrumb :breadcrumb="breadcrumb" title="Event Details" />
     <page-hero>
       <h1>{{ heroTitle }}</h1>
-      <p>
+      <div class="body2">
         {{ heroSummary }}
-      </p>
+      </div>
     </page-hero>
-    <div class="page-wrap container">
+    <div class="page-wrap container pt-32">
       <div class="subpage">
         <div class="header mb-32">
           <h2>Event Details</h2>
@@ -17,7 +17,7 @@
         </div>
         <!-- eslint-disable vue/no-v-html -->
         <!-- marked will sanitize the HTML injected -->
-        <div v-html="parseMarkdown(htmlDetails)" />
+        <div class="content" v-html="parseMarkdown(htmlDetails)" />
       </div>
     </div>
   </div>
@@ -148,3 +148,19 @@ export default {
 }
 
 </script>
+<style lang="scss" scoped>
+@import '@nih-sparc/sparc-design-system-components/src/assets/_variables.scss';
+.page {
+  background-color: $background;
+}
+.content {
+  ::v-deep img {
+    height: auto;
+    margin: 0.5em 0;
+    max-width: 100%;
+  }
+}
+.subpage {
+  margin: 0;
+}
+</style>
diff --git a/pages/news-and-events/events/_id.vue b/pages/news-and-events/events/_id.vue
@@ -22,8 +22,8 @@
     <h3>Location</h3>
     <p>{{ page.fields.location }}</p>
 
-    <h3>External Link</h3>
-    <p>
+    <h3 v-if="page.fields.url">External Link</h3>
+    <p v-if="page.fields.url">
       <a :href="page.fields.url" target="_blank">{{ page.fields.url }}</a>
     </p>
   </news-events-resources-page>