columnify options

This commit is contained in:
thecozies 2024-04-01 12:55:34 -05:00
parent 25eaf49dbb
commit 173a4ae687
2 changed files with 85 additions and 21 deletions

View File

@ -3,25 +3,57 @@
</head> </head>
<body> <body>
<form class="config__form"> <form class="config__form">
<div class="config__hz-wrapper">
<!-- Options -->
<div class="config__wrapper"> <div class="config__wrapper">
<div class="config__row">
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Targeting Mode</label> <label class="config-option__title">Targeting Mode</label>
<div class="config-option__list"> <div class="config-option__list">
<input type="radio" name="targeting_mode" data-checked="targeting_mode" value="Switch" id="tm_switch"/> <input
type="radio"
name="targeting_mode"
data-checked="targeting_mode"
value="Switch"
id="tm_switch"
/>
<label class="config-option__tab-label" for="tm_switch">Switch</label> <label class="config-option__tab-label" for="tm_switch">Switch</label>
<input type="radio" name="targeting_mode" data-checked="targeting_mode" value="Hold" id="tm_hold"/>
<input
type="radio"
name="targeting_mode"
data-checked="targeting_mode"
value="Hold"
id="tm_hold"
/>
<label class="config-option__tab-label" for="tm_hold">Hold</label> <label class="config-option__tab-label" for="tm_hold">Hold</label>
</div> </div>
</div> </div>
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Rumble Strength</label> <label class="config-option__title">Rumble Strength</label>
<div class="config-option__range-wrapper config-option__list"> <div class="config-option__range-wrapper config-option__list">
<label class="config-option__range-label">{{rumble_strength}}</label> <label class="config-option__range-label">{{rumble_strength}}</label>
<input class="nav-vert" id="rumble_strength_input" type="range" min="0" max="100" style="flex: 1; margin: 0dp;" data-value="rumble_strength"/> <input
class="nav-vert"
id="rumble_strength_input"
type="range"
min="0"
max="100"
style="flex: 1; margin: 0dp;"
data-value="rumble_strength"
/>
</div> </div>
</div> </div>
</div> </div>
<!-- Descriptions -->
<div class="config__wrapper">
<p data-if="0 == 0">
First.
</p>
<p data-if="1 == 1">
Second.
</p>
</div>
</div> </div>
</form> </form>
</body> </body>

View File

@ -3,25 +3,57 @@
</head> </head>
<body> <body>
<form class="config__form"> <form class="config__form">
<div class="config__hz-wrapper">
<!-- Options -->
<div class="config__wrapper"> <div class="config__wrapper">
<div class="config__row">
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Background Music Volume</label> <label class="config-option__title">Background Music Volume</label>
<div class="config-option__range-wrapper config-option__list"> <div class="config-option__range-wrapper config-option__list">
<label class="config-option__range-label">{{bgm_volume}}</label> <label class="config-option__range-label">{{bgm_volume}}</label>
<input class="nav-vert" id="bgm_volume_input" type="range" min="0" max="100" style="flex: 1; margin: 0dp;" data-value="bgm_volume"/> <input
class="nav-vert"
id="bgm_volume_input"
type="range"
min="0"
max="100"
style="flex: 1; margin: 0dp;"
data-value="bgm_volume"
/>
</div> </div>
</div> </div>
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Low Health Beeps</label> <label class="config-option__title">Low Health Beeps</label>
<div class="config-option__list"> <div class="config-option__list">
<input type="radio" name="lhb" data-checked="low_health_beeps_enabled" value="1" id="lhb_on"/> <input
type="radio"
name="lhb"
data-checked="low_health_beeps_enabled"
value="1"
id="lhb_on"
/>
<label class="config-option__tab-label" for="lhb_on">On</label> <label class="config-option__tab-label" for="lhb_on">On</label>
<input type="radio" name="lhb" data-checked="low_health_beeps_enabled" value="0" id="lhb_off"/>
<input
type="radio"
name="lhb"
data-checked="low_health_beeps_enabled"
value="0"
id="lhb_off"
/>
<label class="config-option__tab-label" for="lhb_off">Off</label> <label class="config-option__tab-label" for="lhb_off">Off</label>
</div> </div>
</div> </div>
</div> </div>
<!-- Descriptions -->
<div class="config__wrapper">
<p data-if="0 == 0">
First.
</p>
<p data-if="1 == 1">
Second.
</p>
</div>
</div> </div>
</form> </form>
</body> </body>