header improvement

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

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/lib/singleview/SingleView.svelte b/src/lib/singleview/SingleView.svelte
@@ -46,9 +46,6 @@
 
 {#if isCSAF}
   {#if $appStore.doc}
-    <div class="csaf-document-title">
-      <h2>{$appStore.doc["id"]}: {$appStore.doc["title"]}</h2>
-    </div>
     <Collapsible header="General" open={$appStore.ui.isGeneralSectionVisible}>
       <General />
     </Collapsible>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -11,7 +11,11 @@
   let switchToRoute = "";
   let headerText = "Advisory";
   $: if (mode === MODE.SINGLE) {
-    headerText = "Advisory";
+    if ($appStore.doc && $appStore.doc.title) {
+      headerText = `${$appStore.doc["id"]}: ${$appStore.doc["title"]}`;
+    } else {
+      headerText = "Advisory";
+    }
   } else {
     if ($appStore.currentFeed) {
       headerText = "ROLIE-Feed";
@@ -69,13 +73,13 @@
   <div class="header">
     <div class="programname">
       <div>
-        <h1 role="heading">CSAF Webview</h1>
+        <h4 role="heading">CSAF Webview</h4>
       </div>
       <div>
-        <h4>v{version}</h4>
+        <small class="versionstring">v{version}</small>
       </div>
     </div>
-    <div class="title"><h3>{headerText}</h3></div>
+    <div class="title">{headerText}</div>
     <div class="switchbtn">
       <a
         title={mode !== MODE.SINGLE ? "Switch to Advisory" : "Switch to Overview"}

diff --git a/static/css/main.css b/static/css/main.css
@@ -74,6 +74,7 @@ hr {
 .content {
   margin-left: 2rem;
   margin-right: 2rem;
+  margin-top: 1rem;
 }
 
 .header {
@@ -86,10 +87,17 @@ hr {
 .programname {
   display: flex;
   align-items: baseline;
+  white-space: nowrap;
+}
+
+.versionstring {
+  margin-left: 0.25rem;
 }
 
 .title {
+  margin-top: 0.5rem;
   margin-bottom: 1rem;
+  font-size: large;
 }
 
 .btn {
@@ -130,7 +138,7 @@ hr {
 }
 
 .url-input {
-  width: 85%;
+  flex-grow: 1;
   margin-left: 1rem;
 }
 
@@ -150,6 +158,7 @@ hr {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  margin-bottom: 1rem;
 }
 .file-upload-container {
   border: 1px solid lightgrey;
@@ -188,7 +197,6 @@ hr {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 2em;
 }
 
 .droparea-error {
@@ -438,15 +446,16 @@ hr {
     margin-bottom: 1rem;
   }
   .programname {
-    min-width: clamp(330px, 25vw, 25vw);
+    white-space: nowrap;
   }
   .title {
+    margin-top: 0rem;
     width: 100%;
     text-align: center;
     margin-bottom: 0;
   }
   .switchbtn {
-    min-width: clamp(130px, 25vw, 25vw);
+    min-width: fit-content;
     text-align: right;
   }
   .upload {