Merge pull request #247 from devmount/bugs/228-two-digit-verses

Two digit song parts

Author: devmount

frontend/src/elements/Modal.vue

@@ -22,7 +22,7 @@
 				'max-w-5xl! h-screen md:h-3/4v': size === sizes.xl5,
 				'max-w-6xl! h-screen lg:h-4/5v': size === sizes.xl6,
 				'max-w-7xl! h-screen lg:h-4/5v': size === sizes.xl7,
-				'max-w-none! w-screen h-screen': size === sizes.full,
+				'max-w-none! w-screen h-screen px-0': size === sizes.full,
 			}"
 			@click.stop="null"
 		>

frontend/src/modals/SetlistPresent.vue

@@ -17,7 +17,7 @@
 					class="w-full! h-full bg-transparent"
 					v-model="currentPosition"
 				>
-					<slide v-for="(song, i) in songs" :key="i" :index="i" class="items-start! text-left">
+					<slide v-for="(song, i) in songs" :key="i" :index="i" class="items-start! text-left px-4">
 						<song-content
 							:content="song.content"
 							:chords="chords"

frontend/src/modals/SongPresent.vue

@@ -8,7 +8,7 @@
 		@closed="emit('closed')"
 	>
 		<template #close><i></i></template>
-		<div class="h-full overflow-y-auto pb-12 xs:pb-0">
+		<div class="h-full overflow-y-auto px-4 pb-12 xs:pb-0">
 			<!-- song contnt -->
 			<song-content
 				:content="song.content"

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