sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Move user-finder into navbar and hide it behind a toggle button, update fontello icons with user-plus and menu.

This commit is contained in:
Shpuld Shpuldson 2017-06-03 23:42:54 +03:00
parent c0b08d508c
commit bac1d3bd57
16 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.scss
View File

@ -52,6 +52,8 @@ button{
.item {
flex: 1;
line-height: 21px;
height: 21px;
}
.gaps > .item {

3
src/App.vue
View File

@ -6,6 +6,7 @@
<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>
</div>
</div>
@ -19,7 +20,7 @@
<div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
<div class="sidebar-container">
<user-panel></user-panel>
<user-finder></user-finder>
<nav-panel></nav-panel>
<notifications v-if="currentUser"></notifications>
</div>

6
src/components/user_finder/user_finder.js
View File

@ -1,6 +1,7 @@
const UserFinder = {
data: () => ({
username: undefined
username: undefined,
hidden: true
}),
methods: {
findUser (username) {
@ -11,6 +12,9 @@ const UserFinder = {
this.$router.push({name: 'user-profile', params: {id: user.id}})
}
})
},
toggleHidden () {
this.hidden = !this.hidden
}
}
}

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

@ -1,13 +1,23 @@
<template>
<div class="user-finder-panel panel panel-default base00-background">
<input @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text" />
</div>
<a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="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"/>
</span>
</template>
<script src="./user_finder.js"></script>
<style lang="scss">
.user-finder-panel {
padding: 10px;
.user-finder-icon {
margin-right: 0.25em;
}
.user-finder-input {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 5px;
padding: 0.1em 0.2em 0.2em 0.2em;
}
</style>

12
static/font/config.json
View File

@ -77,6 +77,18 @@
"css": "cog",
"code": 59399,
"src": "fontawesome"
},
{
"uid": "1bafeeb1808a5fe24484c7890096901a",
"css": "user-plus",
"code": 62004,
"src": "fontawesome"
},
{
"uid": "559647a6f430b3aeadbecd67194451dd",
"css": "menu",
"code": 61641,
"src": "fontawesome"
}
]
}

4
static/font/css/fontello-codes.css vendored
View File

@ -9,5 +9,7 @@
.icon-cog:before { content: '\e807'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */
.icon-binoculars:before { content: '\f1e5'; } /* '' */
.icon-binoculars:before { content: '\f1e5'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */

16
static/font/css/fontello-embedded.css vendored
View File

File diff suppressed because one or more lines are too long

4
static/font/css/fontello-ie7-codes.css vendored
View File

@ -9,5 +9,7 @@
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }
.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1e5;&nbsp;'); }
.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1e5;&nbsp;'); }
.icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf234;&nbsp;'); }

4
static/font/css/fontello-ie7.css vendored
View File

@ -20,5 +20,7 @@
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }
.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1e5;&nbsp;'); }
.icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf1e5;&nbsp;'); }
.icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf234;&nbsp;'); }

18
static/font/css/fontello.css vendored
View File

@ -1,11 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?90538621');
src: url('../font/fontello.eot?90538621#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?90538621') format('woff2'),
url('../font/fontello.woff?90538621') format('woff'),
url('../font/fontello.ttf?90538621') format('truetype'),
url('../font/fontello.svg?90538621#fontello') format('svg');
src: url('../font/fontello.eot?79576261');
src: url('../font/fontello.eot?79576261#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?79576261') format('woff2'),
url('../font/fontello.woff?79576261') format('woff'),
url('../font/fontello.ttf?79576261') format('truetype'),
url('../font/fontello.svg?79576261#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?90538621#fontello') format('svg');
src: url('../font/fontello.svg?79576261#fontello') format('svg');
}
}
*/
@ -65,5 +65,7 @@
.icon-cog:before { content: '\e807'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */
.icon-binoculars:before { content: '\f1e5'; } /* '' */
.icon-binoculars:before { content: '\f1e5'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */

14
static/font/demo.html
View File

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?15442171');
src: url('./font/fontello.eot?15442171#iefix') format('embedded-opentype'),
url('./font/fontello.woff?15442171') format('woff'),
url('./font/fontello.ttf?15442171') format('truetype'),
url('./font/fontello.svg?15442171#fontello') format('svg');
src: url('./font/fontello.eot?13861244');
src: url('./font/fontello.eot?13861244#iefix') format('embedded-opentype'),
url('./font/fontello.woff?13861244') format('woff'),
url('./font/fontello.ttf?13861244') format('truetype'),
url('./font/fontello.svg?13861244#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -315,8 +315,12 @@ body {
<div class="row">
<div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
<div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
<div title="Code: 0xf0c9" class="the-icons span3"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
<div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
</div>
<div class="row">
<div title="Code: 0xf1e5" class="the-icons span3"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
<div title="Code: 0xf234" class="the-icons span3"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
</div>
</div>
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>

BIN
static/font/font/fontello.eot
View File

Binary file not shown.

4
static/font/font/fontello.svg
View File

@ -26,9 +26,13 @@
<glyph glyph-name="spin4" unicode="&#xe834;" d="M498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />
<glyph glyph-name="menu" unicode="&#xf0c9;" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
<glyph glyph-name="reply" unicode="&#xf112;" d="M1000 225q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
<glyph glyph-name="binoculars" unicode="&#xf1e5;" d="M393 671v-428q0-15-11-25t-25-11v-321q0-15-10-25t-26-11h-285q-15 0-25 11t-11 25v285l139 488q4 12 17 12h237z m178 0v-392h-142v392h142z m429-500v-285q0-15-11-25t-25-11h-285q-15 0-25 11t-11 25v321q-15 0-25 11t-11 25v428h237q13 0 17-12z m-589 661v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z m375 0v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z" horiz-adv-x="1000" />
<glyph glyph-name="user-plus" unicode="&#xf234;" d="M393 350q-89 0-152 63t-62 151 62 152 152 63 151-63 63-152-63-151-151-63z m536-71h196q7 0 13-6t5-12v-107q0-8-5-13t-13-5h-196v-197q0-7-6-12t-12-6h-107q-8 0-13 6t-5 12v197h-197q-7 0-12 5t-6 13v107q0 7 6 12t12 6h197v196q0 7 5 13t13 5h107q7 0 12-5t6-13v-196z m-411-125q0-29 21-51t50-21h143v-133q-38-28-95-28h-488q-67 0-108 39t-41 106q0 30 2 58t8 61 15 60 24 55 34 45 48 30 62 11q11 0 22-10 44-34 86-51t92-17 92 17 86 51q11 10 22 10 73 0 121-54h-125q-29 0-50-21t-21-50v-107z" horiz-adv-x="1142.9" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
static/font/font/fontello.ttf
View File

Binary file not shown.

BIN
static/font/font/fontello.woff
View File

Binary file not shown.

BIN
static/font/font/fontello.woff2
View File

Binary file not shown.