Refactoring UI

csaf-poc · Nov 23, 2023 · e62fa73 · e62fa73
1 parent f1e72b8
commit e62fa73
Show file tree

Hide file tree

Showing 46 changed files with 588 additions and 671 deletions.
diff --git a/build/feed.html b/build/feed.html
@@ -67,15 +67,4 @@
 			</script>
 		</div>
   </body>
-  <style>
-    body {
-      font-family: Helvetica;
-    }
-    a {
-      color: revert;
-    }
-    a:visited {
-      color: revert;
-    }
-  </style>
 </html>
diff --git a/docs/used_software.md b/docs/used_software.md
@@ -7,7 +7,6 @@ Software-Engineering: 2022 Intevation GmbH <https://intevation.de>
 _CSAF Webview_ is built with the following components:
 
 - Framework: [Svelte (SvelteKit)](https://kit.svelte.dev/)
-- CSS-Miniframework: [Chota](https://jenil.github.io/chota/)
 - Icons: [Boxicons](https://boxicons.com/)
 - Markdown: [marked.js](https://github.com/markedjs/marked) and [DOMPurify] (https://github.com/cure53/DOMPurify)
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app.html b/src/app.html
@@ -12,6 +12,7 @@
   <head>
     <meta charset="utf-8" />
     <title>CSAF 2 Webview</title>
+    <link rel="stylesheet" href="%sveltekit.assets%/css/main.css" />
     <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
     <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
@@ -26,15 +27,4 @@
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
-  <style>
-    body {
-      font-family: Helvetica;
-    }
-    a {
-      color: revert;
-    }
-    a:visited {
-      color: revert;
-    }
-  </style>
 </html>
diff --git a/src/lib/Back.svelte b/src/lib/Back.svelte
@@ -34,21 +34,5 @@
 </script>
 
 {#if $appStore.ui.history.length > 0}
-  <a class="back button dark" href="#top" on:click={backPressed}
-    >Last pos. <i class="bx bx-undo" /></a
-  >
+  <a class="backbutton" href="#top" on:click={backPressed}>Last pos. <i class="bx bx-undo" /></a>
 {/if}
-
-<style>
-  .back {
-    background-color: black;
-    color: white;
-    text-align: center;
-    width: 11rem;
-    padding: 1rem;
-    position: sticky;
-    bottom: 1rem;
-    margin-left: 90vw;
-    cursor: pointer;
-  }
-</style>
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte
@@ -48,7 +48,7 @@
   }
 </script>
 
-<div class:collapsible={true} class:bg-light={highlight}>
+<div class:collapsible={true} class:highlight-section={highlight}>
   {#if level == "2"}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -74,41 +74,12 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div title={header} style="cursor:pointer" id={header} on:click={toggle} class={class_}>
-      <h6><i class="bx {icon}" />{header}</h6>
+      <h5><i class="bx {icon}" />{header}</h5>
     </div>
   {/if}
   {#if visibility === "block"}
-    <div id={uuid} class="body">
+    <div id={uuid} class="collapsible-body">
       <slot />
     </div>
   {/if}
 </div>
-
-<style>
-  .collapsible {
-    white-space: nowrap;
-    width: fit-content;
-    max-width: 95vw;
-  }
-  .body {
-    padding-left: 3rem;
-    white-space: normal;
-  }
-  h2,
-  h3,
-  h4 {
-    margin: 0;
-  }
-  h3,
-  h4 {
-    line-height: 3rem;
-  }
-  h2 {
-    font-weight: bold;
-  }
-  h6 {
-    line-height: 0.3em;
-    font-size: large;
-    margin: 0.6rem;
-  }
-</style>
diff --git a/src/lib/KeyValue.svelte b/src/lib/KeyValue.svelte
@@ -13,39 +13,26 @@
   import DOMPurify from "dompurify";
   export let keys: Array<String>;
   export let values: any;
-  export let compact = false;
-  let width = compact ? "width:10rem" : "width: 15vw;";
   marked.use({ gfm: true });
-  $: keyStyle = `padding: 0.2rem; ${width}`;
 </script>
 
 {#each keys as key, index}
   <table>
     <tbody>
       {#if key == "text" || key == "Text"}
         <tr
-          ><td style={keyStyle}>{key}</td><td class="value">
-            <small class="hint bg-light">Markdown</small>
-            <div class="bd-light display-markdown">
+          ><td class="key">{key}</td><td class="value">
+            <small class="hint">Markdown</small>
+            <div class="display-markdown">
               {@html DOMPurify.sanitize(
                 marked.parse(values[index].replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
               )}
             </div>
           </td>
         </tr>
       {:else}
-        <tr><td style={keyStyle}>{key}</td><td class="value">{values[index]}</td></tr>
+        <tr><td class="key">{key}</td><td class="value">{values[index]}</td></tr>
       {/if}
     </tbody>
   </table>
 {/each}
-
-<style>
-  .value {
-    padding: 0.2rem;
-    min-width: 50rem;
-  }
-  .display-markdown {
-    padding: 0.5rem;
-  }
-</style>
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
@@ -5,26 +5,3 @@
 {#if open}
   <i class="bx bx-loader-alt spinner" />
 {/if}
-
-<style>
-  .spinner {
-    font-size: xx-large;
-    animation-name: spin;
-    animation-duration: 750ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    /* transform: rotate(3deg); */
-    /* transform: rotate(0.3rad);/ */
-    /* transform: rotate(3grad); */
-    /* transform: rotate(.03turn);  */
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>
diff --git a/src/lib/UrlLoader.svelte b/src/lib/UrlLoader.svelte
@@ -42,76 +42,28 @@
   };
 </script>
 
-<div class="row">
-  <div class="col-12 outline">
-    <div class="urlcontainer" title={tooltiptext}>
-      <span class="prepend">
-        <i class="bx bx-file" />
-        <span class="prependtext">URL</span>
-      </span>
-      <input class="urlinput" {placeholder} type="text" bind:value={url} on:keydown={keydown} />
-      {#if url}
-        <span class="postpend" title="Discard search">
-          <button
-            on:click={() => {
-              url = "";
-            }}><i class="bx bx-x" /></button
-          >
-        </span>
-      {/if}
+<div class="url-outline">
+  <div class="url-container" title={tooltiptext}>
+    <div class="prepend">
+      <i class="bx bx-file" />
+      <span class="prependtext">URL</span>
     </div>
+    <div class="url-input">
+      <input {placeholder} type="text" bind:value={url} on:keydown={keydown} />
+    </div>
+    {#if url}
+      <div class="postpend" title="Discard search">
+        <button
+          on:click={() => {
+            url = "";
+          }}><i class="bx bx-x" /></button
+        >
+      </div>
+    {/if}
   </div>
 </div>
 {#if errormessage}
-  <div class="row">
-    <div class="col">
-      <div class="errors text-error">{errormessage}</div>
-    </div>
+  <div class="error-message">
+    {errormessage}
   </div>
 {/if}
-
-<style>
-  .errors {
-    font-size: x-large;
-    font-weight: bold;
-  }
-  .outline {
-    padding: 0.5rem;
-    border: 1px solid #d2d6dd;
-    border-radius: 5px;
-  }
-  .bx-x {
-    font-size: larger;
-  }
-  .postpend {
-    font-size: larger;
-    line-height: 1.1rem;
-  }
-  .postpend button {
-    background: #fff;
-  }
-  .prepend {
-    padding-left: 1rem;
-    width: 7rem;
-    white-space: nowrap;
-  }
-  .prependtext {
-    margin-left: 0.1rem;
-  }
-  .urlinput {
-    border: 0;
-  }
-  input:focus {
-    outline: 0 !important;
-    border: 0;
-    border-color: #fff;
-    border-radius: 0;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-  }
-  .urlcontainer {
-    display: flex;
-    align-items: center;
-    height: 40px;
-  }
-</style>
diff --git a/src/lib/ValueField.svelte b/src/lib/ValueField.svelte
@@ -17,14 +17,3 @@
   <h6>{label}</h6>
   <p>{value}</p>
 </div>
-
-<style>
-  h6 {
-    line-height: 0.3em;
-    font-size: large;
-  }
-  p {
-    margin-left: 4rem;
-    width: 80vw;
-  }
-</style>
diff --git a/src/lib/ValueList.svelte b/src/lib/ValueList.svelte
@@ -14,19 +14,8 @@
 </script>
 
 <p>{label}</p>
-<ul>
+<ul class="valuelist">
   {#each values as value}
     <li>{value}</li>
   {/each}
 </ul>
-
-<style>
-  p {
-    margin-bottom: 0;
-  }
-  ul {
-    margin-top: 0;
-    padding-left: 3rem;
-    list-style-type: none;
-  }
-</style>
diff --git a/src/lib/feedview/entries/Entry.svelte b/src/lib/feedview/entries/Entry.svelte
@@ -36,23 +36,14 @@
 </script>
 
 <KeyValue
-  compact={true}
   keys={["ID", "Published", "Title", "Updated"]}
   values={[entry.id, entry.published, entry.title, entry.updated]}
 />
 <Collapsible header="Content" level="5">
-  <KeyValue
-    compact={true}
-    keys={["Type", "Src"]}
-    values={[entry.content.type, entry.content.src]}
-  />
+  <KeyValue keys={["Type", "Src"]} values={[entry.content.type, entry.content.src]} />
 </Collapsible>
 <Collapsible header="Format" level="5">
-  <KeyValue
-    compact={true}
-    keys={["Schema", "Version"]}
-    values={[entry.format.schema, entry.format.version]}
-  />
+  <KeyValue keys={["Schema", "Version"]} values={[entry.format.schema, entry.format.version]} />
 </Collapsible>
 
 <Collapsible header="Links" level="5">
@@ -71,12 +62,3 @@
     {/each}
   </table>
 </Collapsible>
-
-<style>
-  .key {
-    width: 6vw;
-  }
-  td {
-    padding: 0.3rem;
-  }
-</style>