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

Switch instead of checkbox

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

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

4
resources/styles/_popper.scss
View File

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

2
resources/styles/main.scss
View File

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

40
templates/app.html.twig
View File

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