moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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;
line-height: 21px;
height: 21px;
overflow: hidden;
.nav-icon {
font-size: 1.1em;
margin-left: 0.4em;
}
}
.gaps > .item {

6
src/App.vue
View File

@ -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>

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

@ -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;
}