kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Restyle inputs

Browse Source
This commit is contained in:
Kacper Donat 2020-02-09 15:56:29 +01:00
parent 92c12d1c9a
commit 4d98a8607b
4 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/components/finder.html
View File

@ -1,5 +1,5 @@
<div class="finder"> <div class="finder">
<input class="form-control" :value="filter" @input="filter = $event.target.value" placeholder="Zacznij pisać nazwę aby szukać..."/> <input class="form-control form-control--framed" :value="filter" @input="filter = $event.target.value" placeholder="Zacznij pisać nazwę aby szukać..."/>
<div v-if="filter.length < 3" class="mt-2"> <div v-if="filter.length < 3" class="mt-2">
<favourites /> <favourites />

5
resources/styles/_common.scss
View File

@ -38,7 +38,6 @@
transition: height 250ms ease; transition: height 250ms ease;
will-change: height; will-change: height;
box-sizing: padding-box;
} }
.flex { .flex {
@ -94,10 +93,6 @@
} }
} }
svg.svg-inline--fa {
//transform: rotate(360deg)
}
.btn-unstyled { .btn-unstyled {
padding: 0; padding: 0;
margin: 0; margin: 0;

32
resources/styles/_form.scss
View File

@ -1,11 +1,41 @@
label { label {
font-weight: bold; font-weight: bold;
font-size: .8rem;
margin-bottom: 0; margin-bottom: 0;
margin-top: -0.2rem; margin-top: -0.2rem;
display: block; display: block;
} }
.label-sm {
font-size: .8rem;
}
.form-group:last-child { .form-group:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.form-control, .input-group-text {
background: rgba($dark, .06);
border: none;
border-bottom: 2px solid $dark;
&:focus {
background: rgba($dark, .06);
}
}
.form-control--framed {
background: transparent;
border: 1px solid $text-muted;
&:focus {
background-color: transparent;
}
}
.input-group-append {
margin-left: 0;
}
.input-group-prepend {
margin-right: 0;
}

36
templates/app.html.twig
View File

@ -11,7 +11,7 @@
<fa :icon="['fal', 'bullhorn']" fixed-width class="mr-2"></fa> <fa :icon="['fal', 'bullhorn']" fixed-width class="mr-2"></fa>
Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span> Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span>
</h2> </h2>
<button class="btn btn-action flex-space-left" ref="settings-messages" @click="visibility.messages = true"> <button class="btn btn-action flex-space-left" ref="settings-messages" @click="visibility.messages = !visibility.messages">
<tooltip>ustawienia</tooltip> <tooltip>ustawienia</tooltip>
<fa :icon="['fal', 'cog']" fixed-width></fa> <fa :icon="['fal', 'cog']" fixed-width></fa>
</button> </button>
@ -37,10 +37,16 @@
<ui-switch id="messages-auto-refresh" v-model="autorefresh.messages.active" class="flex-space-left"></ui-switch> <ui-switch id="messages-auto-refresh" v-model="autorefresh.messages.active" class="flex-space-left"></ui-switch>
</h3> </h3>
<div class="flex" v-if="autorefresh.messages.active"> <div class="flex" v-if="autorefresh.messages.active">
<span class="text">co</span> <label for="messages-auto-refresh-interval" class="text">
<label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label> <span class="sr-only">częstotliwość odświeżania</span>
<input type="text" class="form-control form-control-sm" id="messages-auto-refresh-interval" v-model="autorefresh.messages.interval"/> co
<span class="text">s</span> </label>
<div class="input-group input-group-sm">
<input type="text" class="form-control form-control-sm form-control-simple" id="messages-auto-refresh-interval" v-model="autorefresh.messages.interval"/>
<div class="input-group-append">
<span class="input-group-text" aria-label="sekund">s</span>
</div>
</div>
</div> </div>
</popper> </popper>
</portal> </portal>
@ -57,7 +63,7 @@
<span class="text">Odjazdy</span> <span class="text">Odjazdy</span>
</h2> </h2>
<button class="btn btn-action flex-space-left" ref="settings-departures" @click="visibility.departures = true"> <button class="btn btn-action flex-space-left" ref="settings-departures" @click="visibility.departures = !visibility.departures">
<tooltip>ustawienia</tooltip> <tooltip>ustawienia</tooltip>
<fa :icon="['fal', 'cog']" fixed-width></fa> <fa :icon="['fal', 'cog']" fixed-width></fa>
</button> </button>
@ -68,17 +74,23 @@
<portal to="popups"> <portal to="popups">
<popper reference="settings-departures" v-if="visibility.departures" arrow placement="left-start" @leave="visibility.departures = false"> <popper reference="settings-departures" v-if="visibility.departures" arrow placement="left-start" @leave="visibility.departures = false">
<h3 class="popper__heading flex"> <h3 class="popper__heading flex">
<label class="text" for="messages-auto-refresh"> <label class="text" for="departures-auto-refresh">
<fa :icon="['far', 'sync']" fixed-width></fa> <fa :icon="['far', 'sync']" fixed-width></fa>
autoodświeżanie autoodświeżanie
</label> </label>
<ui-switch id="messages-auto-refresh" v-model="autorefresh.departures.active" class="flex-space-left"></ui-switch> <ui-switch id="departures-auto-refresh" v-model="autorefresh.departures.active" class="flex-space-left"></ui-switch>
</h3> </h3>
<div class="flex" v-if="autorefresh.departures.active"> <div class="flex" v-if="autorefresh.departures.active">
<span class="text">co</span> <label for="departures-auto-refresh-interval" class="text">
<label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label> <span class="sr-only">częstotliwość odświeżania</span>
<input type="text" class="form-control form-control-sm form-control-simple" id="messages-auto-refresh-interval" v-model="autorefresh.departures.interval"/> co
<span class="text">s</span> </label>
<div class="input-group input-group-sm">
<input type="text" class="form-control form-control-sm form-control-simple" id="departures-auto-refresh-interval" v-model="autorefresh.departures.interval"/>
<div class="input-group-append">
<span class="input-group-text" aria-label="sekund">s</span>
</div>
</div>
</div> </div>
</popper> </popper>
</portal> </portal>