UI improvements & responsivity
This commit is contained in:
parent
e563cb4fd6
commit
b830194366
3 changed files with 31 additions and 17 deletions
|
@ -19,7 +19,7 @@ import Settings from "./components/Settings.vue";
|
|||
|
||||
<div class="preview">
|
||||
|
||||
<form class="form">
|
||||
<form class="form" @submit.prevent>
|
||||
|
||||
<div class="inp">
|
||||
<input type="text" placeholder=" ">
|
||||
|
|
|
@ -21,27 +21,31 @@ function update() {
|
|||
|
||||
<div class="settings">
|
||||
|
||||
<div class="variables">
|
||||
<template v-for="v in variables">
|
||||
<label :for="v.name">
|
||||
<Icon :icon="variableTypeIcon[v.type]" />
|
||||
{{ v.name }}
|
||||
</label>
|
||||
<div v-if="v.type == 'color'">
|
||||
<div class="inp inp-small color">
|
||||
<input v-model="variableValues[v.name]" type="color" :id="v.name" @change="update">
|
||||
<div>
|
||||
<h2>Variables</h2>
|
||||
<div class="variables">
|
||||
<template v-for="v in variables">
|
||||
<label :for="v.name">
|
||||
<Icon :icon="variableTypeIcon[v.type]" />
|
||||
{{ v.name }}
|
||||
</label>
|
||||
<div v-if="v.type == 'color'">
|
||||
<div class="inp inp-small color">
|
||||
<input v-model="variableValues[v.name]" type="color" :id="v.name" @change="update">
|
||||
</div>
|
||||
<div class="inp inp-small">
|
||||
<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
|
||||
</div>
|
||||
</div>
|
||||
<div class="inp inp-small">
|
||||
<div v-else class="inp inp-small">
|
||||
<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="inp inp-small">
|
||||
<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Presets</h2>
|
||||
<div class="presets">
|
||||
<div v-for="preset in Preset.presets" @click="applyVariables(preset.getVariables())">
|
||||
<div :style="`background-color: ${c?.hexFormat()}`" v-for="c in preset.colors"></div>
|
||||
|
|
|
@ -10,13 +10,23 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou
|
|||
|
||||
|
||||
.settings {margin: 70px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 25px;}
|
||||
.settings h2 {text-align: center;}
|
||||
.settings .variables {display: grid; gap: 10px 20px; align-items: center; grid-template-columns: max-content 1fr;}
|
||||
.settings .variables > * {display: flex; gap: 10px; align-items: center;}
|
||||
|
||||
.settings .presets {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;}
|
||||
.settings .presets {display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;}
|
||||
.settings .presets > * {display: flex; border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);}
|
||||
.settings .presets > * > * {height: 100px; flex: 1;}
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
.settings {display: flex; flex-direction: column-reverse;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.settings .variables {display: block;}
|
||||
.settings .variables label {margin: 20px 0 10px;}
|
||||
}
|
||||
|
||||
.content {padding: 0 20px; margin: auto; max-width: 1000px;}
|
||||
|
||||
.preview {margin: 70px 0;}
|
||||
|
|
Loading…
Reference in a new issue