From bfa04bfb11909c9e4af108973b5f34eaae6b9472 Mon Sep 17 00:00:00 2001 From: shpuld <shp@cock.li> Date: Wed, 8 Nov 2017 11:26:42 +0200 Subject: [PATCH] Hide overflowing elements when userfinder is active. Don't scroll on button presses. Make buttons slightly bigger and more spaced out. --- src/App.scss | 6 ++++++ src/App.vue | 6 +++--- src/components/user_finder/user_finder.vue | 13 +++++++++---- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/App.scss b/src/App.scss index fd44dfb8..0e89a429 100644 --- a/src/App.scss +++ b/src/App.scss @@ -69,6 +69,12 @@ button{ flex: 1; line-height: 21px; height: 21px; + overflow: hidden; + + .nav-icon { + font-size: 1.1em; + margin-left: 0.4em; + } } .gaps > .item { diff --git a/src/App.vue b/src/App.vue index 48cf9ea6..eb9bdf5d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,9 +6,9 @@ <router-link :to="{ name: 'root'}">{{sitename}}</router-link> </div> <div class='item right'> - <user-finder></user-finder> - <router-link :to="{ name: 'settings'}"><i class="icon-cog"></i></router-link> - <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout" title="Logout" ></i></a> + <user-finder class="nav-icon"></user-finder> + <router-link :to="{ name: 'settings'}"><i class="icon-cog nav-icon"></i></router-link> + <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" title="Logout" ></i></a> </div> </div> </nav> diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index 2ca476fa..8c82a95b 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,14 +1,14 @@ <template> - <span> + <span class="user-finder-container"> <span class="finder-error base05" v-if="error"> <i class="icon-cancel user-finder-icon" @click="dismissError"/> Error fetching user </span> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> - <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a> + <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a> <span v-else> <input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/> - <i class="icon-cancel user-finder-icon" @click="toggleHidden"/> + <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> </span> </span> </template> @@ -16,8 +16,12 @@ <script src="./user_finder.js"></script> <style lang="scss"> + .user-finder-container { + height: 21px; + max-width: 100%; + } + .user-finder-icon { - margin-right: 0.25em; } .user-finder-input { @@ -25,6 +29,7 @@ border-style: solid; border-color: inherit; border-radius: 5px; + max-width: 80%; padding: 0.1em 0.2em 0.2em 0.2em; }