auto 4:3 aspect for cont conf visual

assets/config_menu.rml

@@ -124,12 +124,37 @@
 						<div class="tab__indicator"></div>
 					</tab>
 					<panel class="config" data-model="controls_model">
-						<form class="config__form" style="display:block">
+						<form class="config__form">
-							<div id="input_row" data-for="input_bindings, i : inputs" style="display:block">
+							<div class="config__wrapper input-config">
+								<div class="input-config__horizontal-split">
+									<div class="input-config__mappings">
+										<div class="input-config__mappings-scroll">
+											<div class="input-config__map-row" id="input_row" data-for="input_bindings, i : inputs">
 												<label class="config-option__title" style="display:inline-block;width:250dp">{{get_input_name(i)}}</label>
 												<button data-for="cur_binding, j : input_bindings" data-event-click="set_input_binding(i,j)" class="button button--secondary label-md" style="font-family:promptfont;font-size:40dp;display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center">{{cur_binding}}</button>
 												<button data-event-click="clear_input_bindings(i)" class="button button--secondary label-md" style="display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center">Delete</button>
 											</div>
+										</div>
+									</div>
+									<div class="input-config__visual-wrapper">
+										<div class="input-config__visual-aspect">
+											<div class="input-config__visual">
+												<h3>Insert visual here</h3>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="config__footer">
+								<div>
+									<button
+										class="button button--secondary"
+										id="save_button"
+									>
+										<div class="button__label">Save</div>
+									</button>
+								</div>
+							</div>
 						</form>
 					</panel>
 					<tab class="tab">

assets/scss/styles/base.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @import "./functions/spacing";
+@import "./vars/spacing";
 @import "./vars/colors";
 @import "./vars/borders";
 @import "./vars/gradients";

assets/scss/styles/components/CenteredPage.scss

@@ -1,8 +1,5 @@
 @use 'sass:math';
 
-$page-margin: 32;
-$base-height: 1080;
-
 .centered-page {
     display: flex;
     // visibility: hidden;
@@ -22,7 +19,8 @@ $base-height: 1080;
     position: relative;
     margin: auto;
     flex: 1 1 100%;
-    max-width: space(math.div($base-height*4, 3))dp;
+    max-width: space(math.div($base-height*16, 9))dp;
+    // max-width: space(math.div($base-height*4, 3))dp;
     width: 100%;
     height: 100%;
     background: $color-modal-overlay;

assets/scss/styles/components/Config.scss

@@ -17,7 +17,7 @@
     border-radius: 0dp;
     flex: 1 1 100%;
     height: 100%;
-    padding: 16dp;
+    padding: space(16);
     text-align: left;
     background-color: $color-bg-shadow;
 }
@@ -50,15 +50,13 @@
 
 .config-option__title {
     @extend %label-md;
-    padding: 0 12dp;
+    padding: 0 space(12);
 }
 
 .config-option__list {
     display: flex;
     padding: 0;
     flex-direction: row;
-    // flex: 1 1 100%;
-    // height: auto;
     width: 100%;
     align-items: flex-start;
     justify-content: flex-start;
@@ -68,7 +66,7 @@
         display: block;
         padding: 12dp 0;
         margin: 0 12dp;
-        margin-right: 16dp;
+        margin-right: space(16);
         color: $color-text-inactive;
         tab-index: none;
         transition: color $transition-quick;
@@ -107,8 +105,8 @@
     input.range sliderbar {
         margin-left: -8dp;
         margin-right: -6dp;
-        width: 16dp;
+        width: space(16);
-        height: 16dp;
+        height: space(16);
         background-color: $color-text-dim;
         border-radius: 8dp;
         transition: background-color $transition-quick;
@@ -137,12 +135,12 @@
 
 .config-option__range-label {
     @extend %label-sm;
-    flex: 0 0 16dp;
+    flex: 0 0 space(16);
 
     display: block;
     padding: 0;
     margin: 0 12dp;
-    margin-right: 16dp;
+    margin-right: space(16);
     color: $color-text;
     tab-index: none;
 }

assets/scss/styles/components/InputConfig.scss

@@ -0,0 +1,72 @@
+@use 'sass:math';
+
+// Probably will need to adjust for other langs...
+$mapping-min-width: 720;
+// Need to figure out where the -16 comes from...
+$visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin - $mapping-min-width - 16;
+
+.input-config {
+    padding: 0;
+}
+
+.input-config__horizontal-split {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    height: 100%;
+}
+
+.input-config__mappings {
+    display: block;
+    flex: 1 1 auto;
+    height: 100%;
+    min-width: space($mapping-min-width);
+}
+
+.input-config__mappings-scroll {
+    display: block;
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+}
+
+.input-config__map-row {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 100%;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: $border-radius-sm;
+    padding: space(4);
+
+    &:hover, &:focus-visible {
+        background-color: $color-primary-a20;
+    }
+}
+
+.input-config__visual-wrapper {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: space($visual-max-width);
+    max-height: 100%;
+    margin: auto 0;
+    flex: 1 1 100%;
+}
+
+.input-config__visual-aspect {
+    position: relative;
+    width: 100%;
+    padding-bottom: 75%;
+    background-color: $color-secondary-a5;
+    margin: auto 0;
+}
+
+.input-config__visual {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

assets/scss/styles/components/_components.scss

@@ -1,6 +1,7 @@
 @import "./CenteredPage";
 @import "./Tabs";
 @import "./Config";
+@import "./InputConfig";
 @import "./Button";
 @import "./Launcher";
 @import "./MenuListItem";

assets/scss/styles/vars/_spacing.scss

@@ -0,0 +1,3 @@
+
+$page-margin: 32;
+$base-height: 1080;