inspector styling, dropdown fixes

4 files changed, 60 insertions, 39 deletions

diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index 6bbd5fd..f654074 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -98,10 +98,12 @@ class Browser
             current = @facet\get!
             current = current and current.name
             with select :onchange, disabled: not fileder
+              has_main = fileder\find current.name, '.*'
+              \append option '(main)', value: '', disabled: not has_main, selected: current == ''
               if fileder
                 for i, value in ipairs fileder\get_facets!
-                  label = if value == '' then '(main)' else value
-                  \append option label, :value, selected: value == current
+                  continue if value == ''
+                  \append option value, :value, selected: value == current
         \append @inspect\map (enabled) ->
           if not enabled
             button 'inspect', onclick: (_, e) -> @inspect\set true
@@ -160,10 +162,12 @@ class Browser
           fileder = @active\get!
 
           onchange = (_, e) ->
+            return if e.target.value == ''
             { :name } = @facet\get!
             @inspect_prop\set Key e.target.value
 
           with select :onchange
+            \append option '(none)', value: '', disabled: true, selected: not value
             if fileder
               for key, _ in pairs fileder.facets
                 value = key\tostring!
diff --git a/root/text$moonscript -> fn -> mmm$dom.moon b/root/text$moonscript -> fn -> mmm$dom.moon
index 158bc48..7e346d8 100644
--- a/root/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/text$moonscript -> fn -> mmm$dom.moon
@@ -19,10 +19,7 @@ import opairs from require 'mmm.ordered'
 
   -- menu
   append h1 {
-    style: {
-      position: 'relative',
-      'border-bottom': '1px solid #000'
-    },
+    style: { 'border-bottom': '1px solid #000' },
     'mmm',
     div {
       class: 'icons',
diff --git a/scss/browser.scss b/scss/browser.scss
index 524fc62..ab03d59 100644
--- a/scss/browser.scss
+++ b/scss/browser.scss
@@ -1,10 +1,5 @@
 .browser {
-  position: absolute;
   display: flex;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
 
   .view {
     display: flex;
@@ -13,24 +8,41 @@
     flex: 1 1 0;
     min-width: 0;
 
-    &.inspector .content {
-      margin: 0;
-      padding: 0;
-      display: flex;
+    &.inspector {
+      top: 0;
+      position: sticky;
+      height: 100vh;
+      color: #c5c8c6;
 
-      > * {
-        display: block;
-        margin: 2em;
+      @include left-border;
+      border-color: $gray-dark;
+      background: $gray-dark;
+
+      nav {
+        background: inherit;
       }
 
-      > code.hljs {
+      .content {
         margin: 0;
-        border-radius: 0;
-        flex: 1;
+        padding: 0;
+        display: flex;
+        background: $gray-darker;
+
+        > * {
+          display: block;
+          margin: 0;
+          padding: 1em;
+          border-radius: 0;
+          border: 0;
+          flex: 1;
+        }
       }
     }
 
     nav {
+      position: sticky;
+      top: 0;
+
       display: flex;
       flex: 0 0 3.2em;
       justify-content: space-between;
diff --git a/scss/main.scss b/scss/main.scss
index fa9901a..070eac0 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,9 +1,35 @@
 @import 'hljs';
 
+$gray-bright:   #eeeeee;
+$gray-dark:     #303336;
+$gray-darker:   #1d1f21;
+$gray-neutral:  #b9bdc1;
+$gray-success:  #bdddc1;
+$gray-fail:     #ddbdc1;
+
+@mixin left-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 0 0 $w;
+  border-radius: 0 6px 6px 0;
+}
+
+@mixin right-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 $w 0 0;
+  border-radius: 6px 0 0 6px;
+}
+
 @import 'browser';
 
 body {
   font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  margin: 0;
+  padding: 0;
 }
 
 a {
@@ -58,24 +84,6 @@ h1 .icons {
   }
 }
 
-$gray-bright: #eeeeee;
-$gray-dark: #303336;
-$gray-neutral: #b9bdc1;
-$gray-success: #bdddc1;
-$gray-fail: #ddbdc1;
-
-@mixin left-border($w: 0.6rem) {
-  border-style: solid;
-  border-width: 0 0 0 $w;
-  border-radius: 0 6px 6px 0;
-}
-
-@mixin right-border($w: 0.6rem) {
-  border-style: solid;
-  border-width: 0 $w 0 0;
-  border-radius: 6px 0 0 6px;
-}
-
 pre > code.hljs {
   @include left-border;
   border-color: $gray-dark;