working on vcard display

frontend/src/routes/contact/Card.svelte

@@ -11,24 +11,64 @@
     let { contact } = $props();
 
     let addresses = $derived(contact.vcard.match(/^ADR.*:.+$/gm));
+    let code = $state(false);
     let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm));
     let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm));
+
+    function toggleCode(){
+        code = !code;
+    }
 </script>
 
-<fieldset>
-    <legend>{t('contact_number',{number:contact.id})}</legend>
-    <FN vcard={contact.vcard} />
-    <Org vcard={contact.vcard} />
-    <Name vcard={contact.vcard} />
-    {#each addresses as code}
-    <Address {code} />
-    {/each}
-    {#each emails as code}
-    <Email {code} />
-    {/each}
-    {#each extra_fields as code}
-    <ExtraField {code} />
-    {/each}
-    <hr/>
-    <pre>{contact.vcard}</pre>
+<fieldset class="vcard">
+    <legend>
+        {t('contact_number',{number:contact.id})}
+        <button class="symbol" onclick={toggleCode}>C</button>
+    </legend>
+    <table>
+        <thead></thead>
+        <tbody>
+            <tr>
+                <td>
+                    <FN vcard={contact.vcard} />
+                </td>
+                {#if code}
+                <td rowspan="6">
+                    <pre>{contact.vcard}</pre>
+                </td>
+                {/if}
+            </tr>
+            <tr>
+                <td>
+                    <Org vcard={contact.vcard} />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <Name vcard={contact.vcard} />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {#each addresses as code}
+                    <Address {code} />
+                    {/each}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {#each emails as code}
+                    <Email {code} />
+                    {/each}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {#each extra_fields as code}
+                    <ExtraField {code} />
+                    {/each}
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </fieldset>

frontend/src/routes/contact/FN.svelte

@@ -8,5 +8,5 @@
 </script>
 
 {#if name}
-<span class="formatted name"><span>{t('formatted name')}:&nbsp;</span>{name}</span>
+<span class="formatted name">{name}</span>
 {/if}

frontend/src/routes/contact/Org.svelte

@@ -8,5 +8,5 @@
 </script>
 
 {#if o}
-<span class="organization"><span>{t('organization')}:&nbsp;</span>{o}</span>
+<span class="organization">{o}</span>
 {/if}

web/src/main/resources/web/css/default.css

@@ -387,4 +387,32 @@ a.wikilink{
         text-align: initial;
         padding-top: 8px;
     }
+}
+
+fieldset.vcard{
+    display: inline;
+    margin: 10px;
+    padding: 0;
+}
+
+.vcard legend{
+    margin-left: 10px;
+}
+
+.vcard .name{
+    font-weight: bold;
+}
+
+.vcard .address span {
+    display: block;
+}
+.vcard table{
+    border-collapse: collapse;
+    margin: -1px;
+}
+.vcard td{
+    border-style: solid;
+    border-width: 1px;
+    vertical-align: top;
+    padding: 2px;
 }