novenary/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Hide overflowing elements when userfinder is active. Don't scroll on button presses. Make buttons slightly bigger and more spaced out.

Browse source
This commit is contained in:
shpuld 2017-11-08 11:26:42 +02:00
parent e74e725750
commit bfa04bfb11
3 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.scss
View file

@ -69,6 +69,12 @@ button{
flex: 1; flex: 1;
line-height: 21px; line-height: 21px;
height: 21px; height: 21px;
overflow: hidden;
.nav-icon {
font-size: 1.1em;
margin-left: 0.4em;
}
} }
.gaps > .item { .gaps > .item {

6
src/App.vue
View file

@ -6,9 +6,9 @@
<router-link :to="{ name: 'root'}">{{sitename}}</router-link> <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
</div> </div>
<div class='item right'> <div class='item right'>
<user-finder></user-finder> <user-finder class="nav-icon"></user-finder>
<router-link :to="{ name: 'settings'}"><i class="icon-cog"></i></router-link> <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" title="Logout" ></i></a> <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" title="Logout" ></i></a>
</div> </div>
</div> </div>
</nav> </nav>

13
src/components/user_finder/user_finder.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<span> <span class="user-finder-container">
<span class="finder-error base05" v-if="error"> <span class="finder-error base05" v-if="error">
<i class="icon-cancel user-finder-icon" @click="dismissError"/> <i class="icon-cancel user-finder-icon" @click="dismissError"/>
Error fetching user Error fetching user
</span> </span>
<i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> <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> <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"/> <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>
</span> </span>
</template> </template>
@ -16,8 +16,12 @@
<script src="./user_finder.js"></script> <script src="./user_finder.js"></script>
<style lang="scss"> <style lang="scss">
.user-finder-container {
height: 21px;
max-width: 100%;
}
.user-finder-icon { .user-finder-icon {
margin-right: 0.25em;
} }
.user-finder-input { .user-finder-input {
@ -25,6 +29,7 @@
border-style: solid; border-style: solid;
border-color: inherit; border-color: inherit;
border-radius: 5px; border-radius: 5px;
max-width: 80%;
padding: 0.1em 0.2em 0.2em 0.2em; padding: 0.1em 0.2em 0.2em 0.2em;
} }