Merge pull request #622 from AmericanWhitewater/feature/restore-corre…

…lation-comments move gauge correlation comment above graph and add helper text to form
AmericanWhitewater · Jan 9, 2025 · 09f9d86 · 09f9d86
2 parents 40162f1 + 54a3c29
commit 09f9d86
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue b/src/app/views/river-detail/components/edit-flows/components/correlation-details.vue
@@ -72,9 +72,9 @@
         </div>
 
         <div class="mb-spacing-sm">
-          <cv-text-input v-if="editing" v-model="comment" label="Correlation comment:" class="correlation-comment" />
+          <cv-text-input v-if="editing" v-model="comment" label="Correlation details (optional):" :helperText="commentHelperText" class="correlation-comment" />
           <template v-else-if="comment">
-            <label for="comment" class="bx--label">Correlation comment:</label>
+            <label for="comment" class="bx--label">Correlation details:</label>
             <p v-text="comment" />
           </template>
         </div>
@@ -261,7 +261,8 @@ export default {
           adjustedDifficultyField: null,
           description: "The river in this range is below the recommended flow, indicating that even a majority of paddlers seeking a technical low-water paddling trip would not enjoy the river, would have difficulty navigating the river, and would be unlikely to return at this flow. Flows in this category are below the minimum acceptable flow for most people."
         },
-      ]
+      ],
+      commentHelperText: "This comment will appear above the graph on the flow tab. Comments might include location of the gauge relative to the reach, time delays, tributary inputs, or other factors that affect the accuracy of the gage for this reach."
   }),
   computed: {
     correlationDetails() {

diff --git a/src/app/views/river-detail/components/flow-tab/flow-tab.vue b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
@@ -48,6 +48,11 @@
                 <div v-if="adjustedReachDifficulty(gauge)" class="gauge-class">
                   <cv-tag kind="cool-gray" :label="adjustedReachDifficulty(gauge)" />
                 </div>
+                <div v-if="gauge.comment" class="gauge-comment bx--tile bx--type-caption">
+                  <label class="bx--label">Correlation details: </label>
+                  <br>
+                  <span v-text="gauge.comment" />
+                </div>
                 <div v-if="activeGaugeIndex === index" class="gauge-chart-container background">
                   <layout
                       name="layout-two-thirds"
@@ -97,11 +102,6 @@
                         <cv-skeleton-text headline/>
                       </template>
                       <template v-else>
-                        <div v-if="gauge.comment" class="gauge-comment bx--tile bx--type-caption">
-                          <label class="bx--label">Correlation comment</label>
-                          <br>
-                          <span v-text="gauge.comment" />
-                        </div>
                         <div v-if="gauge.gaugeInfo.externalSourceLinks" class="gauge-links">
                           <h6 class="mb-spacing-sm">View at source:</h6>
                           <cv-link v-if="gauge.gaugeInfo.externalSourceLinks.sourceLink" 
@@ -177,6 +177,7 @@
 
                       </template>
                     </template>
+
                   </layout>
                 </div>
               </div>
@@ -380,6 +381,7 @@ export default {
   .gauge-name,
   .gauge-meta,
   .gauge-chart-container,
+  .gauge-comment,
   .range-comment {
     grid-column: 1/4;
   }