restructure Dock html

rasmusmerzin · Apr 29, 2020 · 869a66e · 869a66e
1 parent 87b51aa
commit 869a66e
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 73 deletions.
diff --git a/src/components/Dock.scss b/src/components/Dock.scss
@@ -4,72 +4,57 @@ $transition-time: .05s;
 
 #dock {
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
+  max-width: 80vw;
+  width: $ctrl-width;
   height: 100%;
-  width: 0;
-
-  .ctrl {
-    position: absolute;
-    top: 0;
-    left: 0;
-    max-width: 80vw;
-    width: $ctrl-width;
-    height: 100%;
-    background: var(--bg-ha1);
-    box-sizing: border-box;
-    padding: 1rem;
-    padding-top: 2rem +$door-size;
-
-    .settings {
-      display: grid;
-      grid-template-columns: minmax(10rem, auto) 1fr;
-      align-content: start;
-      grid-gap: 1rem;
-      transition: all $transition-time;
-
-      label {
-        text-transform: capitalize;
-        span.value {
-          font-style: italic;
-          opacity: .7;
-          float: right;
-        }
+  background: var(--bg-ha1);
+  box-sizing: border-box;
+  transition: all $transition-time;
+
+  .settings {
+    margin: 2rem 1rem;
+    display: grid;
+    grid-template-columns: minmax(10rem, auto) 1fr;
+    align-items: center;
+    grid-gap: 1rem;
+
+    label {
+      text-transform: capitalize;
+      span.value {
+        font-style: italic;
+        opacity: .7;
+        float: right;
       }
     }
+  }
 
-    .source {
-      width: 100%;
-      text-align: center;
-      margin: 4rem 0;
+  .source {
+    width: 100%;
+    text-align: center;
+    margin: 4rem 0;
 
-      a {
-        opacity: .5;
-        &:hover { opacity: 1; }
+    a {
+      opacity: .5;
+      &:hover { opacity: 1; }
 
-        img { height: 3rem; }
-      }
+      img { height: 3rem; }
     }
+  }
 
-    &.closed {
-      background: var(--bg-ha2);
-      width: $door-size;
+  &.closed {
+    background: var(--bg-ha2);
+    width: $door-size;
 
-      * { display: none; }
-    }
+    .source, .settings { display: none; }
   }
 
   .door {
-    position: absolute;
-    top: 0;
-    left: 0;
     font-size: 2rem;
     max-width: 80vw;
-    width: $door-size;
+    width: 100%;
     height: $door-size;
     background: var(--bg-h);
-    transition: all $transition-time;
-
-    &.open { width: $ctrl-width; }
   }
 }
diff --git a/src/components/Dock.tsx b/src/components/Dock.tsx
@@ -18,33 +18,32 @@ interface Props {
 const Dock: React.FC<Props> = ({ fields, update }) => {
   const [visible, setVisibility] = useState(false);
 
-  return <div id='dock'>
-    <div
-      className={'ctrl' +(visible ? ' open' : ' closed')}
-    >
-      <div className='settings'>
-        {fields.map((obj, i) => <Fragment key={i}>
-          <label>{obj.label || obj.key} <span className='value'>{obj.value}</span></label>
-          <input
-            type='range'
-            value={obj.value}
-            min={obj.min}
-            max={obj.max}
-            step={obj.step}
-            onChange={e => update(obj.key, Number(e.target.value))}
-          />
-        </Fragment>)}
-      </div>
-      <div className='source'>
-        <a href='https://github.com/rasmusmerzin/ants'>
-          <img src={githubIcon} alt='source' />
-        </a>
-      </div>
-    </div>
+  return <div
+    id='dock'
+    className={visible ? 'open' : 'closed'}
+  >
     <button
       className={'door' +(visible ? ' open' : ' closed')}
       onClick={() => setVisibility(v => !v)}
     >≡</button>
+    <div className='settings'>
+      {fields.map((obj, i) => <Fragment key={i}>
+        <label>{obj.label || obj.key} <span className='value'>{obj.value}</span></label>
+        <input
+          type='range'
+          value={obj.value}
+          min={obj.min}
+          max={obj.max}
+          step={obj.step}
+          onChange={e => update(obj.key, Number(e.target.value))}
+        />
+      </Fragment>)}
+    </div>
+    <div className='source'>
+      <a href='https://github.com/rasmusmerzin/ants'>
+        <img src={githubIcon} alt='source' />
+      </a>
+    </div>
   </div>;
 };