From 6a008680a924d7e58ec410432e27bf30557a2cb8 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sat, 28 Mar 2020 12:24:12 -0400
Subject: [PATCH] Revert "Make the sidebar move to the top in portrait mode"

This reverts commit 4c58eb9b948bef5c06ad4a2a832cbbf4716c080f.
---
 macrovision.css  | 72 ++++++------------------------------------------
 macrovision.html | 12 ++++----
 macrovision.js   | 26 ++---------------
 3 files changed, 16 insertions(+), 94 deletions(-)

diff --git a/macrovision.css b/macrovision.css
index 4d40f4a3..202d518f 100644
--- a/macrovision.css
+++ b/macrovision.css
@@ -78,36 +78,19 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     display: flex;
     flex: 1 1 90vh;
     width: 100%;
-}
-
-@media (max-aspect-ratio: 1/1) {
-    #main-area {
-        flex-direction: column;    
-    }
-
-    #options {
-        flex: 1 1 25vh;
-        flex-direction: row;
-        overflow-x: auto;
-        overflow-y: auto;
-    }
-}
-
-@media (min-aspect-ratio: 1/1) {
-    #options {
-        flex: 1 1 15vw;
-        flex-direction: column;
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
+    flex-direction: row;
 }
 
 #options {
     position: relative;
+    flex: 1 1 15vw;
     min-width: 140pt;
     display: flex;
     justify-content: start;
+    flex-direction: column;
     background: #444;
+    overflow-x: hidden;
+    overflow-y: auto;
     height: 100%;
     scrollbar-color: #e1e1e1 #888;
 }
@@ -160,38 +143,8 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 
 .options-category {
     position: relative;
-    flex: 1 1 15vw;
-    display: inline-flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    max-height: 100%;
-    align-content: flex-start;
-}
-
-/* options-view needs this for..some reason */
-
-@media (min-aspect-ratio: 1/1) {
-
-#options-entity,
-#options-view {
-    width: 100%;
-}
-
-}
-/* column-order flexboxes don't grow to contain their contents,
-so we have to do this and set the width via JS */
-
-@media (max-aspect-ratio: 1/1) {
-    .options-category {
-        min-width: var(--calc-width);
-    }
-    .options-category  * {
-        max-width: 250px !important;
-    }
 }
 
-
-
 .options-row {
     position: relative;
     flex-direction: column;
@@ -202,12 +155,13 @@ so we have to do this and set the width via JS */
     margin-right: auto;
     margin-top: 8px;
     margin-bottom: 8px;
-    max-width: 200px;
+    max-width: 90%;
 }
 
 .options-block {
     display: flex;
     text-align: center;
+    min-width: 90%;
     width: 90%;
     margin: auto;
     flex-direction: column;
@@ -265,19 +219,9 @@ body.show-extra-options .options-block.options-block-optional {
     height: 100%;
 }
 
-@media (max-aspect-ratio: 1/1) {
-    #world {
-        flex: 1 1 85vh;
-    }
-}
-
-@media (min-aspect-ratio: 1/1) {
-    #world {
-        flex: 1 1 85vw;
-    }
-}
 #world {
     position: relative;
+    flex: 1 1 85vw;
     height: 100%;
     overflow: hidden;
 }
diff --git a/macrovision.html b/macrovision.html
index ae343c12..bba09a86 100644
--- a/macrovision.html
+++ b/macrovision.html
@@ -158,21 +158,19 @@
         <div class="options-label">
           View
         </div>
-        <div class="options-row">
-          <select class="options-selector" id="entity-view"></select>
-        </div>
+        <select class="options-selector" id="entity-view"></select>
         <div class="options-label">
           Sizes
         </div>
         <div class="options-block" id="options-entity-defaults">
         </div>
-        <div id="options-entity">
-        </div>
+        <span id="options-entity">
+        </span>
       </div>
       <h3 class="options-header" id="view-category-header">View options</h3>
       <div class="options-category" id="view-category">
-        <div id="options-view">
-        </div>
+        <span id="options-view">
+        </span>
       </div>
       <h3 class="options-header" id="attribution-category-header" >Attribution</h3>
       <span id="options-attribution">
diff --git a/macrovision.js b/macrovision.js
index 290d19c0..8cbd6587 100644
--- a/macrovision.js
+++ b/macrovision.js
@@ -473,7 +473,7 @@ function configEntityOptions(entity, view) {
     const holder = document.querySelector("#options-entity");
     
     document.querySelector("#entity-category-header").style.display = "block";
-    document.querySelector("#entity-category").style.display = "inline-flex";
+    document.querySelector("#entity-category").style.display = "block";
 
     holder.innerHTML = "";
 
@@ -555,9 +555,7 @@ function configEntityOptions(entity, view) {
     });
 
     document.querySelector("#options-order-display").innerText = entity.priority;
-    document.querySelector("#options-ordering").style.display = "inline-flex";
-    
-    updateOptionsBoxes();
+    document.querySelector("#options-ordering").style.display = "flex";
 }
 
 function updateEntityOptions(entity, view) {
@@ -565,8 +563,6 @@ function updateEntityOptions(entity, view) {
     setNumericInput(scaleInput, entity.scale);
 
     document.querySelector("#options-order-display").innerText = entity.priority;
-
-    updateOptionsBoxes();
 }
 
 function clearEntityOptions() {
@@ -586,7 +582,7 @@ function configViewOptions(entity, view) {
     const holder = document.querySelector("#options-view");
     
     document.querySelector("#view-category-header").style.display = "block";
-    document.querySelector("#view-category").style.display = "inline-flex";
+    document.querySelector("#view-category").style.display = "block";
 
     holder.innerHTML = "";
 
@@ -660,8 +656,6 @@ function configViewOptions(entity, view) {
         row.appendChild(select);
     });
 
-    updateOptionsBoxes();
-
 }
 
 function updateViewOptions(entity, view, changed) {
@@ -676,8 +670,6 @@ function updateViewOptions(entity, view, changed) {
         }
 
     });
-
-    updateOptionsBoxes();
 }
 
 function setNumericInput(input, value, round=3) {
@@ -1048,23 +1040,11 @@ function toggleFullScreen() {
     }
   }
 
-function updateOptionsBoxes() {
-    document.querySelectorAll(".options-category").forEach(category => {
-        console.log(category)
-        console.log(category.lastElementChild)
-        console.log(category.getBoundingClientRect().x)
-        console.log(category.lastElementChild.getBoundingClientRect().x)
-        
-        category.style.setProperty("--calc-width", category.lastElementChild.getBoundingClientRect().x + category.lastElementChild.getBoundingClientRect().width - category.getBoundingClientRect().x + "px");
-        console.log(category.style.minWidth)
-    })
-}
 function handleResize() {
     entityX = document.querySelector("#entities").getBoundingClientRect().x;
     canvasWidth = document.querySelector("#display").clientWidth - 100;
     canvasHeight = document.querySelector("#display").clientHeight - 50;
     updateSizes();
-    updateOptionsBoxes();
 }
 
 function prepareMenu() {