➕ Add handling for two digit verse numbers

Author: devmount

frontend/src/partials/SongContent.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="w-full flex flex-wrap overflow-y-auto"
+		class="w-full flex flex-wrap "
 		:class="{
 			'flex-row gap-8': !presentation,
 			'flex-col xs:flex-row gap-7 xs:gap-0 pb-10 xs:pb-0': presentation
@@ -16,10 +16,11 @@
 				:part="part.number"
 				class="relative overflow-visible"
 				:class="{
-					'relative before:absolute before:top-1 before:font-fira before:font-light before:content-[attr(part)]': part.class === 'verse' && part.number > 0,
+					'relative before:absolute before:top-1 before:font-fira before:font-light before:content-[attr(part)] before:w-12 before:-left-6 before:text-right': part.class === 'verse' && part.number > 0,
 					'font-fira text-2xl': !chords,
-					'pl-8 before:text-4xl before:left-1': !presentation,
-					'inline-block leading-[1.4] pl-6 md:pl-8 before:left-0 md:before:left-1 before:text-3xl md:before:text-4xl before:-left-0.5': presentation,
+					'pl-8 before:text-4xl': !presentation,
+					'inline-block leading-[1.4] pl-6 md:pl-8 before:text-3xl md:before:text-4xl before:-left-8 md:before:-left-6': presentation,
+					'pl-0!': part.class === 'chorus',
 				}"
 			><div
 				v-for="(line, l) in part.content.split('\n')" :key="l"
@@ -39,7 +40,7 @@ const props = defineProps({
 	presentation: Boolean, // flag if song is displayed in presentation mode
 });
 
-// methods
+// Makes font size per song part as big as possible
 const maximizeFontsize = () => {
 	// config
 	const WIDTH_MARGIN  = 20;
@@ -91,5 +92,5 @@ const maximizeFontsize = () => {
 	}
 };
 
-defineExpose({ maximizeFontsize })
+defineExpose({ maximizeFontsize });
 </script>

frontend/src/utils.js

@@ -108,42 +108,43 @@ const parsedContent = (content, tuning, showChords, twoColumns) => {
     }
     // handle song part marker (e.g. --V1)
     else {
+			const n = line.trim().substring(3);
       // add class to part
       switch (line.charAt(2).toLowerCase()) {
         case 'v':
           types.push('v');
           classes.push('verse');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         case 'p':
           types.push('p');
           classes.push('prechorus');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         case 'c':
           types.push('c');
           classes.push('chorus');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         case 'b':
           types.push('b');
           classes.push('bridge');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         case 'i':
           types.push('i');
           classes.push('intro');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         case 'm':
           types.push('m');
           classes.push('mitro');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         case 'o':
           types.push('o');
           classes.push('outro');
-          numbers.push((!isNaN(parseInt(line.trim().charAt(3)))) ? line.trim().charAt(3) : '0');
+          numbers.push((!isNaN(parseInt(n))) ? n : '0');
           break;
         default:
           // a non existent part tag was found