mirror/wavelovers
1
0
Fork 0
mirror of https://github.com/eugene-serb/wavelovers.git synced 2023-09-09 23:41:16 +03:00
Code Issues Projects Releases Wiki Activity

- Updated manual-form styles

Browse Source
This commit is contained in:
Eugene Serb 2022-08-07 23:10:17 +03:00
parent 512afa553b
commit 6a1ad071fc
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/AppManual.vue
View File

@ -1,32 +1,34 @@
<template> <template>
<div class="content-item app-manual"> <div class="content-item app-manual">
<fieldset class="manual-form"> <fieldset class="manual-form">
<label class="manual-form__inputs"> <label class="manual-form__input">
<span>Start Delay (ms)</span> <span>Start Delay (ms)</span>
<input v-model="startDelay" <input v-model="startDelay"
type="number" placeholder="Start Delay" type="number" placeholder="Start Delay"
min="0" max="1000" step="25" required /> min="0" max="1000" step="25" required />
</label> </label>
<label class="manual-form__inputs"> <label class="manual-form__input">
<span>Duration (ms)</span> <span>Duration (ms)</span>
<input v-model="duration" <input v-model="duration"
type="number" placeholder="Duration" type="number" placeholder="Duration"
min="0" max="1000" step="25" required /> min="0" max="1000" step="25" required />
</label> </label>
<label class="manual-form__inputs"> <label class="manual-form__input">
<span>Weak Magnitude</span> <span>Weak Magnitude</span>
<input v-model="weakMagnitude" <input v-model="weakMagnitude"
type="range" placeholder="Weak Magnitude" type="range" placeholder="Weak Magnitude"
min="0.0" max="1.0" step="0.01" required /> min="0.0" max="1.0" step="0.01" required />
</label> </label>
<label class="manual-form__inputs"> <label class="manual-form__input">
<span>Strong Magnitude</span> <span>Strong Magnitude</span>
<input v-model="strongMagnitude" <input v-model="strongMagnitude"
type="range" placeholder="Strong Magnitude" type="range" placeholder="Strong Magnitude"
min="0.0" max="1.0" step="0.01" required /> min="0.0" max="1.0" step="0.01" required />
</label> </label>
<button @click="start">Start</button> <div class="manual-form__buttons">
<button @click="stop">Stop</button> <button @click="start">Start</button>
<button @click="stop">Stop</button>
</div>
</fieldset> </fieldset>
</div> </div>
</template> </template>
@ -70,16 +72,35 @@
<style lang="scss"> <style lang="scss">
.manual-form { .manual-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column-reverse;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 32px;
} }
.manual-form__inputs { .manual-form__input {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr;
gap: 8px;
align-items: center; align-items: center;
} }
.manual-form__buttons {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
}
@media only screen and (min-width: 540px) {
.manual-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.manual-form__input {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
</style> </style>