Merge pull request #11 from cmu-delphi/sgratzl/sidepanel

fix: #10 better side panel style

Author: sgratzl

src/components/LeftMenu.svelte

@@ -33,6 +33,7 @@
     border-right: 1px solid grey;
     display: flex;
     flex-direction: column;
+    max-width: 20em;
   }
   .tree {
     margin-top: 1em;

src/components/tree/TreeInnerNode.svelte

@@ -20,8 +20,10 @@
 
 <div class="tv_node">
   <span on:click={toggleExpanded}>
-    <Fa icon={expanded ? faChevronDown : faChevronRight} style="width: 0.9em" />
-    {node.title}
+    <Fa icon={expanded ? faChevronDown : faChevronRight} style="width: 0.9em; margin-right: 0.5em" />
+    <span>
+      {node.title}
+    </span>
   </span>
   {#if expanded}
     {#each node.datasets as child (child.title)}
@@ -40,5 +42,7 @@
   }
   div.tv_node > span {
     cursor: pointer;
+    display: flex;
+    align-items: center;
   }
 </style>

src/components/tree/TreeLeafNode.svelte

@@ -24,8 +24,10 @@
   title="click to toggle the visibility of this dataset"
   uk-tooltip="pos: right"
 >
-  <Fa icon={selected ? faEye : faEyeSlash} {color} style="width: 1em" />
-  {node.title}
+  <Fa icon={selected ? faEye : faEyeSlash} {color} style="width: 1em; margin-right: 0.5em" />
+  <span>
+    {node.title}
+  </span>
 </div>
 
 <style>
@@ -34,6 +36,8 @@
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 0.125s ease-in-out;
+    display: flex;
+    align-items: center;
   }
   div.tv_node.selected {
     opacity: 1;