Mirrors
/
Zelda64Recomp
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

auto 4:3 aspect for cont conf visual

This commit is contained in:
thecozies 2024-01-16 14:26:57 -06:00
parent 6ebc7256eb
commit 23f0235996
8 changed files with 117 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/config_menu.rml
View File

@ -124,11 +124,36 @@
<div class="tab__indicator"></div>
</tab>
<panel class="config" data-model="controls_model">
<form class="config__form" style="display:block">
<div id="input_row" data-for="input_bindings, i : inputs" style="display:block">
<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>
<form class="config__form">
<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>

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

1
assets/scss/styles/base.scss
View File

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

6
assets/scss/styles/components/CenteredPage.scss
View File

@ -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;

16
assets/scss/styles/components/Config.scss
View File

@ -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;
height: 16dp;
width: space(16);
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;
}

72
assets/scss/styles/components/InputConfig.scss Normal file
View File

@ -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;
}

1
assets/scss/styles/components/_components.scss
View File

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

3
assets/scss/styles/vars/_spacing.scss Normal file
View File

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