Skip to content

Commit

Permalink
fix: aligned controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@builder555
builder555 committed Feb 21, 2023
1 parent 1d60d6f commit 6f8d371
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 69 deletions.
12 changes: 8 additions & 4 deletions ui/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
}
.label{
font-weight: 500;
display: flex!important;
align-items: center;
}
.mfield {
display: flex;
Expand All @@ -45,6 +47,9 @@
border-bottom: 1px solid #eaeaea;
}

.label {
display:inline-block;
}

.mfield .label {
flex-grow: 1;
Expand Down Expand Up @@ -72,7 +77,6 @@
.pointer {
cursor:pointer
}

.navbar-link {
align-items: center;
display: flex;
Expand All @@ -85,9 +89,9 @@
}

.checkbox label {
--size: 4rem;
--size: 3rem;
cursor: pointer;
width: var(--size);
width: calc(var(--size) - 10px);
height: calc(var(--size) / 2);
background: grey;
display: block;
Expand All @@ -100,7 +104,7 @@
position: absolute;
top: 6%;
left: 2.5%;
width: calc(50% - 5%);
width: 55%;
height: calc(100% - 11%);
background: #fff;
border-radius: 90px;
Expand Down
147 changes: 82 additions & 65 deletions ui/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@
<meta charset="utf-8">
<title>PineSAM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main.css?v=2">
<style>
.hide-until-load {
visibility:hidden;
Expand Down Expand Up @@ -53,22 +58,26 @@ <h1 class="title">
</div>
</div>
<div class="columns">
<div class="column is-half mfield">
<label class="label has-text-left" style="flex-grow:0">Save changes to flash</label>
<div class="checkbox">
<input v-model="saveToFlash" type="checkbox" id="sw-save-toflash" />
<label for="sw-save-toflash"></label>
<div class="column is-half is-full-mobile">
<div class="is-flex">
<label class="label mx-3 mb-0 has-text-left">Save changes to flash</label>
<div class="checkbox">
<input v-model="saveToFlash" type="checkbox" id="sw-save-toflash" />
<label for="sw-save-toflash"></label>
</div>
</div>
<p v-show="isHintVisible" class="help">If this is not checked, the settings will be reset to their previous values when you turn off the soldering iron. <strong>Note that flash has limited write cycles, saving changes frequently will reduce the life of your device.</strong></p>
</div>
<p v-show="isHintVisible" class="help">If this is not checked, the settings will be reset to their previous values when you turn off the soldering iron. <strong>Note that flash has limited write cycles, saving changes frequently will reduce the life of your device.</strong></p>
</div>
<div class="column is-half mfield has-text-right">
<label class="label ml-3">Show Hints</label>
<div class="checkbox">
<input v-model="isHintVisible" type="checkbox" id="sw-show-hints" />
<label for="sw-show-hints"></label>
<div class="column is-half is-full-mobile ">
<div class="is-flex is-justify-content-end">
<label class="label mx-3 mb-0">Show Hints</label>
<div class="checkbox">
<input v-model="isHintVisible" type="checkbox" id="sw-show-hints" />
<label for="sw-show-hints"></label>
</div>
</div>
</div>
</div>
</div>
<div
v-if="Object.keys(settings).length > 0"
class="columns is-multiline hide-until-load"
Expand All @@ -93,64 +102,72 @@ <h1 class="title">
</header>
<div v-show="group.isVisible" class="card-content">
<form @submit.prevent="">
<div
v-for="name in group.items"
:key="name"
class="mfield"
:class="settings[name]?.component?.class"
>
<label class="label" @click="settings[name].showText=!settings[name].showText">{{settings[name].display}}</label>
<!-- dropdown value selection -->
<div v-if="settings[name].component?.name=='select'">
<select v-model="settings[name].value" class="input">
<option v-for="option in settings[name].component.options" :value="option.value">{{option.text}}</option>
</select>
</div>
<!-- checkbox -->
<div v-else-if="settings[name].component?.name=='checkbox'" class="checkbox">
<input v-model="settings[name].value" type="checkbox" :id="`sw-${group.name}-${name}`" />
<label :for="`sw-${group.name}-${name}`"></label>
<div
v-for="name in group.items"
:key="name"
class="mfield"
:class="settings[name]?.component?.class"
>
<div class="column is-half px-0">
<label class="label" @click="settings[name].showText=!settings[name].showText">{{settings[name].display}}</label>
</div>
<!-- range slider -->
<div v-else-if="settings[name].component?.name=='range'">
<input
type="range"
class="mr-1"
:min="settings[name].component.min"
:max="settings[name].component.max"
:step="settings[name].component.step"
v-model="settings[name].value"
@mouseup="updateSetting(name, settings[name].value)"
@touchend="updateSetting(name, settings[name].value)"
@blur="updateSetting(name, settings[name].value)"
>
<div
v-show="settings[name].showRawValue"
class="field tag px-0 m-0"
<div class="column is-half is-flex is-justify-content-end px-0">
<!-- dropdown value selection -->
<div v-if="settings[name].component?.name=='select'" class="is-flex-grow-1">
<select v-model="settings[name].value" class="input py-0" style="height: auto">
<option v-for="option in settings[name].component.options" :value="option.value">{{option.text}}</option>
</select>
</div>
<!-- checkbox -->
<div v-else-if="settings[name].component?.name=='checkbox'" class="checkbox">
<input v-model="settings[name].value" type="checkbox" :id="`sw-${group.name}-${name}`" />
<label :for="`sw-${group.name}-${name}`"></label>
</div>
<!-- range slider -->
<div
v-else-if="settings[name].component?.name=='range'"
class="is-flex is-flex-grow-1"
>
<input
class="input px-1 mx-0 is-info py-0"
type="text"
style="height:2em;"
maxlength="3"
type="range"
class="mr-1 is-flex-grow-1"
:min="settings[name].component.min"
:max="settings[name].component.max"
:step="settings[name].component.step"
v-model="settings[name].value"
@keyup.enter.prevent.stop="updateSetting(name, settings[name].value)"
@mouseup="updateSetting(name, settings[name].value)"
@touchend="updateSetting(name, settings[name].value)"
@blur="updateSetting(name, settings[name].value)"
:ref="name"
>
<div
v-show="settings[name].showRawValue"
class="field tag px-0 m-0"
>
<input
class="input px-1 mx-0 is-info py-0"
type="text"
style="height:2em;"
maxlength="3"
v-model="settings[name].value"
@keyup.enter.prevent.stop="updateSetting(name, settings[name].value)"
@blur="updateSetting(name, settings[name].value)"
:ref="name"
>
</div>
<div v-show="!settings[name].showRawValue" class="tag is-info" @click="settings[name].showRawValue=true">
{{settings[name].component.display && settings[name].component.display(settings[name].value) || settings[name].value}}
</div>
</div>
<div v-show="!settings[name].showRawValue" class="tag is-info" @click="settings[name].showRawValue=true">
{{settings[name].component.display && settings[name].component.display(settings[name].value) || settings[name].value}}
<!-- button -->
<div v-else-if="settings[name].component?.name=='confirm'" class="is-flex is-flex-grow-1">
<button class="button is-danger is-small is-flex-grow-1" @click.prevent="confirm(name)">
{{settings[name].component?.display}}
</button>
</div>
<!-- regular text input -->
<div v-else>
<input v-model="settings[name].value" class="input py-0" type="text" style="height:auto" disabled>
</div>
</div>
<div v-else-if="settings[name].component?.name=='confirm'">
<button class="button is-danger" @click.prevent="confirm(name)">
{{settings[name].component?.display}}
</button>
</div>
<!-- regular text input -->
<div v-else>
<input v-model="settings[name].value" class="input" type="text" disabled>
</div>
<p v-show="isHintVisible" class="help">{{settings[name].hint}}</p>
</div>
Expand Down

1 comment on commit 6f8d371

@builder555
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

goes for #15

Please sign in to comment.