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 @@
View
-
-
-
+
Sizes
-
-
+
+
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() {