]> git.r.bdr.sh - rbdr/forum/blobdiff - src/components/glyph/glyph.svelte
Add tests for header
[rbdr/forum] / src / components / glyph / glyph.svelte
index e4b9166c773ca3f98c9e454218f489b0b826ba26..60f99ebf8efb9cea546438fe2cbb57cab4e425d3 100644 (file)
@@ -1,39 +1,41 @@
 <script>
-  import { _ } from 'svelte-i18n';
-  import { getGlyphHash } from '../../utils/glyph_hash';
+       import { _ } from 'svelte-i18n';
+       import { getGlyphHash } from '$/utils/glyph_hash';
 
-  export let uuid;
+       export let uuid;
 </script>
 
-<div class="glyphicon" aria-hidden="true" title="{$_('glyph.title')}">
-  {#each getGlyphHash(uuid) as fragment}
-    <span class="{fragment.glyph}" style="color: {fragment.color} ">
-      {fragment.glyph}
-    </span>
-  {/each}
+<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
+       {#each getGlyphHash(uuid) as fragment}
+               <span class={fragment.glyph} style="color: {fragment.color} ">
+                       {fragment.glyph}
+               </span>
+       {/each}
 </div>
 
 <style>
-  .glyphicon {
-    border: 1px solid black;
-    display: inline-block;
-    font-size: 1.4rem;
-    height: 48px;
-    margin-top: 5px;
-    width: 48px;
-  }
+       .glyphicon {
+               border: 1px solid black;
+               display: inline-block;
+               font-size: 1.4rem;
+               height: 48px;
+               margin-top: 5px;
+               width: 48px;
+               background-color: white;
+               padding: 2px;
+       }
 
-  span {
-    display: block;
-    float: left;
-    width: 24px;
-    height: 24px;
-    text-align: center;
-    line-height: 24px;
-  }
+       span {
+               display: block;
+               float: left;
+               width: 24px;
+               height: 24px;
+               text-align: center;
+               line-height: 24px;
+       }
 
-  .☽ {
-    font-size: 2rem;
-    line-height: 19px;
-  }
+       .☽ {
+               font-size: 2rem;
+               line-height: 19px;
+       }
 </style>