CodeSpace/Synergy
2
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

UI improvements & responsivity

Browse source
This commit is contained in:
Filip Znachor 2024-05-02 18:02:48 +02:00
parent e563cb4fd6
commit b830194366
3 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/App.vue
View file

@ -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=" ">

34
web/components/Settings.vue
View file

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

12
web/css/demo.css
View file

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