From 8d5bdc061dc153bf4db936c2d1eec225b0c7d500 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Sun, 9 Feb 2020 15:56:29 +0100
Subject: [PATCH] Restyle inputs

---
 resources/components/finder.html |  2 +-
 resources/styles/_common.scss    |  5 -----
 resources/styles/_form.scss      | 32 +++++++++++++++++++++++++++-
 templates/app.html.twig          | 36 +++++++++++++++++++++-----------
 4 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/resources/components/finder.html b/resources/components/finder.html
index ac9798c..6a7d452 100644
--- a/resources/components/finder.html
+++ b/resources/components/finder.html
@@ -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 />
diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss
index e58e558..3ea5003 100644
--- a/resources/styles/_common.scss
+++ b/resources/styles/_common.scss
@@ -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;
diff --git a/resources/styles/_form.scss b/resources/styles/_form.scss
index 501fd56..1101da9 100644
--- a/resources/styles/_form.scss
+++ b/resources/styles/_form.scss
@@ -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;
+}
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 1fb8bfb..327f004 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -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>