Switch instead of checkbox

This commit is contained in:
Kacper Donat 2020-02-09 14:05:46 +01:00
parent dd5fbc1ed8
commit 92c12d1c9a
4 changed files with 31 additions and 19 deletions

View File

@ -9,11 +9,11 @@
"@fortawesome/pro-regular-svg-icons": "^5.3.1",
"@fortawesome/pro-solid-svg-icons": "^5.3.1",
"@fortawesome/vue-fontawesome": "^0.1.1",
"@types/bootstrap": "^4.1.2",
"@types/bootstrap": "^4.3.1",
"@types/jquery": "^3.3.6",
"@types/moment": "^2.13.0",
"@types/popper.js": "^1.11.0",
"bootstrap": "^4.1.3",
"bootstrap": "^4.3.1",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"jquery": "^3.3.1",

View File

@ -88,6 +88,10 @@
font-size: $font-size-sm;
font-weight: bold;
margin-bottom: .5rem;
&:last-child {
margin-bottom: 0;
}
}
@mixin placement($placement) {

View File

@ -72,6 +72,8 @@ $grid-gutter-width: $spacer * 2;
@import "trip";
@import "dragscroll";
@import "ui/switch";
body {
min-height: 100vh;
display: flex;

View File

@ -27,19 +27,23 @@
<fa :icon="['fal', sections.messages ? 'chevron-up' : 'chevron-down']" fixed-width/>
</button>
<popper reference="settings-messages" v-if="visibility.messages" arrow placement="left-start" @leave="visibility.messages = false">
<h3 class="popper__heading flex">
<fa :icon="['far', 'cog']"></fa>
<label class="text" for="messages-auto-refresh">autoodświeżanie</label>
<input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.messages.active"/>
</h3>
<div class="flex" v-show="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>
</div>
</popper>
<portal to="popups">
<popper reference="settings-messages" v-if="visibility.messages" arrow placement="left-start" @leave="visibility.messages = false">
<h3 class="popper__heading flex">
<label class="text" for="messages-auto-refresh">
<fa :icon="['far', 'sync']" fixed-width></fa>
autoodświeżanie
</label>
<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>
</div>
</popper>
</portal>
</header>
<fold :visible="sections.messages">
<messages></messages>
@ -64,11 +68,13 @@
<portal to="popups">
<popper reference="settings-departures" v-if="visibility.departures" arrow placement="left-start" @leave="visibility.departures = false">
<h3 class="popper__heading flex">
<fa :icon="['far', 'sync']" fixed-width></fa>
<label class="text" for="messages-auto-refresh">autoodświeżanie</label>
<input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.departures.active"/>
<label class="text" for="messages-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>
</h3>
<div class="flex" v-show="autorefresh.messages.active">
<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"/>