Merge pull request #327 from AmericanWhitewater/1937-see-more

Styling the river detail page

src/app/assets/scss/components/_article-card.scss

@@ -118,4 +118,15 @@
   .bx--article-card__icon--action
   svg {
   fill: $carbon--gray-70; //$disabled-02 for gray 90
+}
+
+.abstract-content {
+  p {
+    display: inline;
+  }
+}
+
+.read-more {
+  color: $ui-02;
+  font-weight: 200;
 }

src/app/assets/scss/views/river-detail/components/_side-bar-articles.scss

@@ -5,13 +5,10 @@
     align-items: center;
   }
 
-  .sidebar-article {
+  .sidebar-title {
     &:hover {
       cursor: pointer;
-      h5,
-      p {
-        text-decoration: underline;
-      }
+      text-decoration: underline;
     }
 
     .article-thumb {

src/app/views/river-detail/components/main-tab/components/rapids-section/components/rapid-item.vue

@@ -64,26 +64,20 @@
               <template
                 v-if="
                   sanitizedDescription &&
-                  sanitizedDescription.length > characterLimit
+                  sanitizedDescription.length > characterLimit &&
+                  !readMoreActive
                 "
               >
                 <div
                   class="description"
                   v-html="sanitizedDescription.slice(0, characterLimit) + '...'"
                 />
-                <div
-                  v-if="sanitizedDescription && readMoreActive"
-                  v-html="
-                    sanitizedDescription.slice(
-                      characterLimit,
-                      sanitizedDescription.length * 2
-                    )
-                  "
-                />
+
               </template>
               <template v-else>
                 <div class="description" v-html="sanitizedDescription" />
               </template>
+
             </template>
             <template v-else>
               <div class>

src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-articles.vue

@@ -24,9 +24,8 @@
       <div
         v-for="(article, i) in articles.slice(0, 1)"
         :key="i + 3 * 4"
-        class="bx--row mb-spacing-xs sidebar-article"
-        @keydown.enter="readArticle(article)"
-        @click.exact="readArticle(article)"
+        class="bx--row mb-spacing-xs"
+
       >
         <div class="bx--col-sm-12 bx--col-md-3">
           <img
@@ -38,12 +37,35 @@
         <div class="bx--col-sm-12 bx--col-md-5">
           <div class="pt-spacing-sm pb-spacing-md">
             <h5
-              class="mb-spacing-2xs"
+              class="mb-spacing-2xs sidebar-title"
+              @click.exact="readArticle(article)"
+              @keydown.enter="readArticle(article)"
               v-text="$titleCase(article.title)"
             />
-            <p v-html="article.abstract" />
+            <div
+              v-if="article.abstract.length > 200"
+              ref="abstract"
+              class="abstract-content"
+
+            >
+              <span v-html="article.abstract.slice(0, 200)"/>
+              <cv-link 
+                :href="articleUrl(article)"
+                class="read-more">
+                ... Read More
+              </cv-link>
+            </div>
+            <div
+              v-else
+              ref="abstract"
+              class="abstract-content"
+              v-html="article.abstract"
+            />
+
+
           </div>
         </div>
+
       </div>
     </template>
     <template v-else>
@@ -79,8 +101,8 @@ export default {
       }
       return null
     },
-    readArticle (article) {
-      this.goToLink(this.formatLinkUrl(`content/Article/view/article_id/${article.id}/`))
+    articleUrl (article) {
+      return `/content/Article/view/article_id/${article.id}/`
     }
   }
 }

src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-projects.vue

@@ -27,7 +27,25 @@
               </h5>
             </cv-link>
 
-            <p v-html="project.description" />
+            <div
+              v-if="project.description.length > 200"
+              ref="abstract"
+              class="abstract-content"
+
+            >
+              <span v-html="project.description.slice(0, 200)"/>
+              <cv-link 
+                :href="projectUrl(project)"
+                class="read-more">
+                ... Read More
+              </cv-link>
+            </div>
+            <div
+              v-else
+              ref="abstract"
+              class="abstract-content"
+              v-html="project.description"
+            />
           </div>
         </div>
       </div>

src/app/views/river-detail/river-detail.vue

@@ -13,20 +13,11 @@
             </header>
             <header v-else-if="reach" class="bx--tile">
               <div>
-                <h4>
+                <h1>
                   {{ reach.river }}
-                </h4>
+                </h1>
 
-                <h1 class="mb-spacing-md" v-text="reach.section" />
-
-                <cv-breadcrumb no-trailing-slash>
-                  <cv-breadcrumb-item>
-                    <cv-link to="/river-index"> River Index </cv-link>
-                  </cv-breadcrumb-item>
-                  <cv-breadcrumb-item>
-                    <cv-link href="#0"> River Id: {{ reach.id }} </cv-link>
-                  </cv-breadcrumb-item>
-                </cv-breadcrumb>
+                <h4 class="mb-spacing-md" v-text="reach.section" />
               </div>
               <div>
                 <cv-button