Styling fixes

player259 · Jan 20, 2024 · 0209018 · 0209018
1 parent 2b2e9db
commit 0209018
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/src/components/AbcSheet/AbcSheet.svelte b/src/components/AbcSheet/AbcSheet.svelte
@@ -43,6 +43,7 @@
       staffStyle,
       layout,
       detectRepeats,
+      stretch: false,
     });
     svgContent = AbcRenderer.render(abcSource);
 

diff --git a/src/components/BarBlock/BarBlock.svelte b/src/components/BarBlock/BarBlock.svelte
@@ -675,6 +675,7 @@
                 'p-0 user-select-none text-nowrap',
                 'cell-' + line,
                 'cell-note',
+                'symbol',
                 ['annot', isAnnotation],
                 ['annot-long', isAnnotation && symbol !== undefined && symbol.length > 2],
                 'note-' + (note?.value ?? 'none'),
@@ -688,7 +689,7 @@
               on:contextmenu={(e) => onContextMenuNote(e, line, tick.position, note)}
             >
               {#if isAnnotation && !!symbol}
-                <div class='d-inline-block' title={symbol}>
+                <div class='d-inline-block annot-symbol' title={symbol}>
                   {@html symbol}
                 </div>
               {:else}
@@ -783,11 +784,11 @@
 <div bind:this={noteOptionsFloating} class="floating d-none">
   <ListGroup>
     {#each noteOptions as option}
-      <ListGroupItem class="text-center" tag="button" action on:click={() => {
-          replaceNotes([[option.context.note, option.note]]);
+      <button class="text-center symbol list-group-item list-group-item-action" on:click={() => {
+        replaceNotes([[option.context.note, option.note]]);
 
-          dismissFloatings();
-        }}>{@html option.label}</ListGroupItem>
+        dismissFloatings();
+      }}>{@html option.label}</button>
     {/each}
   </ListGroup>
 </div>
@@ -917,16 +918,22 @@
 
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
 
   th, td {
     padding: 0;
     vertical-align: middle;
   }
+  .symbol {
+    font-family: 'Noto Sans Symbols 2', sans-serif;
+  }
   .cell-note {
     cursor: pointer;
     font-size: 1.2em;
     vertical-align: middle;
-    font-family: 'Noto Sans Symbols 2', sans-serif;
+  }
+  .annot-symbol {
+    font-family: 'Noto Sans', sans-serif;
   }
   .label-cell {
     font-weight: normal;

diff --git a/src/components/HorizontalContainer/HorizontalContainer.svelte b/src/components/HorizontalContainer/HorizontalContainer.svelte
@@ -89,7 +89,7 @@
 </script>
 
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');
 
   .arrow {
     font-family: 'Noto Sans Symbols 2', sans-serif;
@@ -98,6 +98,8 @@
     top: 50%;
     border-radius: 50%;
     transform: translateY(-50%);
+    line-height: 1.2em;
+    padding-top: 0.5em;
   }
   .arrow-left {
     left: 0;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -381,8 +381,8 @@
 </script>
 
 <svelte:head>
-  <title>Test example</title>
-  <meta name="description" content="Test example" />
+  <title>Grooved</title>
+  <meta name="description" content="Grooved" />
 </svelte:head>
 
 <style>