Add tooltip styles

sophiamersmann · Feb 5, 2021 · 7ec5d05 · 7ec5d05
1 parent d0882ad
commit 7ec5d05
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/public/global.css b/public/global.css
@@ -19,6 +19,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   color: #ffffff;
   overflow: hidden;
+  line-height: 1.2;
 }
 
 html, body {

diff --git a/src/Tooltip.svelte b/src/Tooltip.svelte
@@ -10,10 +10,6 @@
   const width = 250;
 
   $: authors = $selectedStar?.authors.split(",").slice(0, 5) + ' et al';
-
-  function capitalize(s) {
-    return s.charAt(0).toUpperCase() + s.slice(1);
-  }
 </script>
 
 {#if $selectedStar}
@@ -22,23 +18,49 @@
     style="width: {width}px"
     transition:fly={{ x: width, duration: $duration, easing: quadOut }}
   >
-    Cited by: {$selectedStar.citedBy}
-    <b>{$selectedStar.title}</b>
-    {authors}.
-    <i>{capitalize($selectedStar.journal)}</i> {$selectedStar.volume},
-    {$selectedStar.page.start}-{$selectedStar.page.end}
-    ({$selectedStar.year})
-    <span>doi: {$selectedStar.doi}</span>
+    <div class="content">
+      <div><b>{$selectedStar.title}</b></div>
+      <div>
+        {authors}.
+        <span class="journal">{$selectedStar.journal}</span> {$selectedStar.volume},
+        {$selectedStar.page.start}-{$selectedStar.page.end}
+        ({$selectedStar.year})
+      </div>
+      <div class="doi">DOI: {$selectedStar.doi}</div>
+    </div>
+    <div class="tag cited-by">Cited <b>{$selectedStar.citedBy}</b> times</div>
   </div>
 {/if}
 
 <style>
-  div {
+  .tooltip {
     position: absolute;
     right: var(--spacing);
     top: var(--spacing);
     padding: calc(var(--spacing) / 2);
     background-color: white;
     color: var(--background-color);
+    font-size: 0.9rem;
+    border-radius: 5px;
+  }
+
+  .journal {
+    font-style: italic;
+    text-transform: capitalize;
+  }
+
+  .cited-by {
+    display: block;
+    text-align: center;
+    padding: 4px;
+    background-color: gold;
+    border-radius: 5px;
+    margin-top: 10px;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+  }
+
+  .doi {
+    color: gray;
   }
 </style>