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">
<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">
<favourites />

5
resources/styles/_common.scss
View File

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

32
resources/styles/_form.scss
View File

@ -1,11 +1,41 @@
label {
font-weight: bold;
font-size: .8rem;
margin-bottom: 0;
margin-top: -0.2rem;
display: block;
}
.label-sm {
font-size: .8rem;
}
.form-group:last-child {
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>
Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span>
</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>
<fa :icon="['fal', 'cog']" fixed-width></fa>
</button>
@ -37,10 +37,16 @@
<ui-switch id="messages-auto-refresh" v-model="autorefresh.messages.active" class="flex-space-left"></ui-switch>
</h3>
<div class="flex" v-if="autorefresh.messages.active">
<span class="text">co</span>
<label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
<input type="text" class="form-control form-control-sm" id="messages-auto-refresh-interval" v-model="autorefresh.messages.interval"/>
<span class="text">s</span>
<label for="messages-auto-refresh-interval" class="text">
<span class="sr-only">częstotliwość odświeżania</span>
co
</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>
</popper>
</portal>
@ -57,7 +63,7 @@
<span class="text">Odjazdy</span>
</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>
<fa :icon="['fal', 'cog']" fixed-width></fa>
</button>
@ -68,17 +74,23 @@
<portal to="popups">
<popper reference="settings-departures" v-if="visibility.departures" arrow placement="left-start" @leave="visibility.departures = false">
<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>
autoodświeżanie
</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>
<div class="flex" v-if="autorefresh.departures.active">
<span class="text">co</span>
<label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
<input type="text" class="form-control form-control-sm form-control-simple" id="messages-auto-refresh-interval" v-model="autorefresh.departures.interval"/>
<span class="text">s</span>
<label for="departures-auto-refresh-interval" class="text">
<span class="sr-only">częstotliwość odświeżania</span>
co
</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>
</popper>
</portal>