8694rrpje: better styling on accordion on help dialog, rename concept…

… filter size label
CogStack · Jul 19, 2024 · 860d2a3 · 860d2a3
1 parent f14b89b
commit 860d2a3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/webapp/frontend/src/components/common/ConceptFilter.vue b/webapp/frontend/src/components/common/ConceptFilter.vue
@@ -8,7 +8,7 @@
     <div>
       <div class="search-bar">
         <b-input v-model="filter" type="search" placeholder="Search for concepts..."></b-input>
-        <span v-if="filter === ''">Project Concept Filter: {{(allItems || []).length}}</span>
+        <span v-if="filter === ''">Project concept filter size: {{(allItems || []).length}}</span>
         <span v-if="filter !== ''">Found {{allFilteredItems.length}} - showing first {{items.length}}</span>
       </div>
 

diff --git a/webapp/frontend/src/views/TrainAnnotations.vue b/webapp/frontend/src/views/TrainAnnotations.vue
@@ -94,23 +94,25 @@
 
       <div slot="body" class="help-modal-body">
 
-
         <div v-if="project.annotation_guideline_link">
-          <h4>Annotation Guidelines: <a :href="'' + project.annotation_guideline_link + ''">Guideline</a></h4>
+          <h4 class="help-heading" v-b-toggle.annoguide>Annotation Guidelines:</h4>
+          <b-collapse id="annoguide">
+            Link to guideline <a :href="'' + project.annotation_guideline_link + ''">here</a>
+          </b-collapse>
         </div>
 
         <br>
 
         <div>
-          <h4 v-b-toggle.concepts>Concepts Annotated</h4>
+          <h4 class="help-heading" v-b-toggle.concepts>Concepts Annotated</h4>
           <b-collapse id="concepts">
             <concept-filter :cuis="project.cuis" :cdb_id="project.concept_db"></concept-filter>
           </b-collapse>
 
         </div>
 
         <br>
-        <h4 v-b-toggle.shortcuts>Keyboard Shortcuts</h4>
+        <h4 class="help-heading" v-b-toggle.shortcuts>Keyboard Shortcuts</h4>
         <b-collapse id="shortcuts">
           <table class="table">
             <thead>
@@ -176,7 +178,7 @@
         </b-collapse>
 
         <br>
-        <h4 v-b-toggle.exp>Experimental Features</h4>
+        <h4 class="help-heading" v-b-toggle.exp>Experimental Features</h4>
         <b-collapse id="exp">
           <button class="btn btn-primary" :disabled="resubmittingAllDocs" @click="submitAll">
             <span v-if="!resubmittingAllDocs">Re-Submit All Validated Documents</span>
@@ -810,6 +812,14 @@ $app-header-height: 60px;
   display: inline-block;
 }
 
+.help-heading {
+  border-bottom: 1px solid transparent;
+
+  &:hover {
+    border-bottom: 1px solid $color-1;
+  }
+}
+
 .meta {
   flex: 1 1 auto;
   text-align: right;