Highlight chorus with line

woshibiantai · Jul 21, 2024 · bf4004a · bf4004a
1 parent 6d7676b
commit bf4004a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/assets/sample-chart.js b/src/assets/sample-chart.js
@@ -20,9 +20,12 @@ export const sampleChordProChart =
 [F]Gotta make you [G]understand
 
 {comment: Chorus}
+{start_of_chorus}
 Never gonna [F]give you [G]up
 Never gonna [Em]let you [Am]down
 Never gonna [F]run [G]around and [E]desert [Am]you
 Never gonna [F]make you [G]cry
 Never gonna [Em]say good [Am]bye
-Never gonna [F]tell a [G]lie and [E]hurt [Am]you`;
+Never gonna [F]tell a [G]lie and [E]hurt [Am]you
+{end_of_chorus}
+`;
diff --git a/src/components/ChordChartLine.vue b/src/components/ChordChartLine.vue
@@ -1,5 +1,10 @@
 <template>
-  <p class="chordchart-body-paragraph-line">
+  <p
+    class="chordchart-body-paragraph-line"
+    :class="{
+      'chordchart-body-paragraph-line-chorus': line.type === 'chorus',
+    }"
+  >
     <ChordChartLineItem
       v-for="(item, index) in line.items"
       :key="index"
@@ -26,7 +31,11 @@ defineProps({
   flex-wrap: wrap;
 }
 
-.chordchart-body-paragraph-line-verse {
-  margin-left: 2em;
+.chordchart-body-paragraph-line-chorus {
+  border-left: 1px solid #000;
+  
+  &:last-child {
+    padding-bottom: 1.1em;
+  }
 }
 </style>