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

Merge branch 'feature/bigger-icons-for-mobile' into 'develop' 

Feature/bigger icons for mobile / #211

See merge request pleroma/pleroma-fe!423
This commit is contained in:
Shpuld Shpludson 2018-12-18 18:26:14 +00:00
parent 2f28bf95fd 67c2a607aa
commit f62ff2d894
12 changed files with 76 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/App.scss
View File

@ -237,13 +237,11 @@ i[class*=icon-] {
flex-wrap: wrap; flex-wrap: wrap;
.nav-icon { .nav-icon {
font-size: 1.1em;
margin-left: 0.4em; margin-left: 0.4em;
} }
&.right { &.right {
justify-content: flex-end; justify-content: flex-end;
padding-right: 20px;
} }
} }
@ -251,7 +249,8 @@ i[class*=icon-] {
flex: 1 flex: 1
} }
nav { .nav-bar {
padding: 0;
width: 100%; width: 100%;
align-items: center; align-items: center;
position: fixed; position: fixed;
@ -295,10 +294,13 @@ nav {
} }
.inner-nav { .inner-nav {
margin: auto;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-basis: 970px; flex-basis: 970px;
margin: auto;
height: 50px; height: 50px;
a, a i { a, a i {
@ -466,7 +468,7 @@ nav {
&.hidden { &.hidden {
opacity: 0; opacity: 0;
max-width: 20px; max-width: 5px;
} }
} }
} }
@ -606,22 +608,8 @@ nav {
} }
} }
@media all and (max-width: 959px) { .item.right {
.mobile-hidden { text-align: right;
display: none;
}
.panel-switcher {
display: flex;
}
.container {
padding: 0 0 0 0;
}
.panel {
margin: 0.5em 0 0.5em 0;
}
} }
.visibility-tray { .visibility-tray {
@ -650,3 +638,31 @@ nav {
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
} }
@media all and (max-width: 959px) {
.mobile-hidden {
display: none;
}
.panel-switcher {
display: flex;
}
.container {
padding: 0;
}
.panel {
margin: 0.5em 0 0.5em 0;
}
.button-icon {
font-size: 1.2em;
}
.status .status-actions {
div {
max-width: 4em;
}
}
}

8
src/App.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="app" v-bind:style="style"> <div id="app" v-bind:style="style">
<nav class='container' @click="scrollToTop()" id="nav"> <nav class='nav-bar container' @click="scrollToTop()" id="nav">
<div class='logo' :style='logoBgStyle'> <div class='logo' :style='logoBgStyle'>
<div class='mask' :style='logoMaskStyle'></div> <div class='mask' :style='logoMaskStyle'></div>
<img :src='logo' :style='logoStyle'> <img :src='logo' :style='logoStyle'>
@ -13,9 +13,9 @@
<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
</div> </div>
<div class='item right'> <div class='item right'>
<user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder> <user-finder class="button-icon nav-icon" @toggled="onFinderToggled"></user-finder>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link> <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
<a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a> <a href="#" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
</div> </div>
</div> </div>
</nav> </nav>

7
src/boot/after_store.js
View File

@ -13,11 +13,16 @@ const afterStoreSetup = ({ store, i18n }) => {
store.dispatch('setInstanceOption', { name: 'name', value: name }) store.dispatch('setInstanceOption', { name: 'name', value: name })
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') }) store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) }) store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
store.dispatch('setInstanceOption', { name: 'server', value: server })
// TODO: default values for this stuff, added if to not make it break on
// my dev config out of the box.
if (uploadlimit) {
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) }) store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) }) store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) }) store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) }) store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
store.dispatch('setInstanceOption', { name: 'server', value: server }) }
if (data.nsfwCensorImage) { if (data.nsfwCensorImage) {
store.dispatch('setInstanceOption', { name: 'nsfwCensorImage', value: data.nsfwCensorImage }) store.dispatch('setInstanceOption', { name: 'nsfwCensorImage', value: data.nsfwCensorImage })

2
src/components/delete_button/delete_button.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div v-if="canDelete"> <div v-if="canDelete">
<a href="#" v-on:click.prevent="deleteStatus()"> <a href="#" v-on:click.prevent="deleteStatus()">
<i class='icon-cancel delete-status'></i> <i class='button-icon icon-cancel delete-status'></i>
</a> </a>
</div> </div>
</template> </template>

4
src/components/favorite_button/favorite_button.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div v-if="loggedIn"> <div v-if="loggedIn">
<i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/> <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
<span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span> <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
</div> </div>
<div v-else> <div v-else>
<i :class='classes' class='favorite-button' :title="$t('tool_tip.favorite')"/> <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
<span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span> <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
</div> </div>
</template> </template>

4
src/components/post_status_form/post_status_form.vue
View File

@ -75,11 +75,11 @@
</div> </div>
<div class='alert error' v-if="error"> <div class='alert error' v-if="error">
Error: {{ error }} Error: {{ error }}
<i class="icon-cancel" @click="clearError"></i> <i class="button-icon icon-cancel" @click="clearError"></i>
</div> </div>
<div class="attachments"> <div class="attachments">
<div class="media-upload-wrapper" v-for="file in newStatus.files"> <div class="media-upload-wrapper" v-for="file in newStatus.files">
<i class="fa icon-cancel" @click="removeMediaFile(file)"></i> <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
<div class="media-upload-container attachment"> <div class="media-upload-container attachment">
<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
<video v-if="type(file) === 'video'" :src="file.image" controls></video> <video v-if="type(file) === 'video'" :src="file.image" controls></video>

6
src/components/retweet_button/retweet_button.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div v-if="loggedIn"> <div v-if="loggedIn">
<template v-if="visibility !== 'private' && visibility !== 'direct'"> <template v-if="visibility !== 'private' && visibility !== 'direct'">
<i :class='classes' class='retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i> <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
<span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span> <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
</template> </template>
<template v-else> <template v-else>
<i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i> <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
</template> </template>
</div> </div>
<div v-else-if="!loggedIn"> <div v-else-if="!loggedIn">
<i :class='classes' class='icon-retweet' :title="$t('tool_tip.repeat')"></i> <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
<span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span> <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
</div> </div>
</template> </template>

14
src/components/status/status.vue
View File

@ -8,7 +8,7 @@
</router-link> </router-link>
</small> </small>
<small class="muteWords">{{muteWordHits.join(', ')}}</small> <small class="muteWords">{{muteWordHits.join(', ')}}</small>
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a> <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -48,7 +48,7 @@
</router-link> </router-link>
</span> </span>
<a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')"> <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
<i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i> <i class="button-icon icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
</a> </a>
</span> </span>
</div> </div>
@ -63,18 +63,18 @@
<router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }"> <router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
<timeago :since="status.created_at" :auto-update="60"></timeago> <timeago :since="status.created_at" :auto-update="60"></timeago>
</router-link> </router-link>
<div class="visibility-icon" v-if="status.visibility"> <div class="button-icon visibility-icon" v-if="status.visibility">
<i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i> <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
</div> </div>
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source"> <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
<i class="icon-link-ext-alt"></i> <i class="button-icon icon-link-ext-alt"></i>
</a> </a>
<template v-if="expandable"> <template v-if="expandable">
<a href="#" @click.prevent="toggleExpanded" title="Expand"> <a href="#" @click.prevent="toggleExpanded" title="Expand">
<i class="icon-plus-squared"></i> <i class="button-icon icon-plus-squared"></i>
</a> </a>
</template> </template>
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a> <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
</div> </div>
</div> </div>
@ -101,7 +101,7 @@
<div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'> <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
<div v-if="loggedIn"> <div v-if="loggedIn">
<a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')"> <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
<i class="icon-reply" :class="{'icon-reply-active': replying}"></i> <i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
</a> </a>
</div> </div>
<retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button> <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>

8
src/components/style_switcher/preview.vue
View File

@ -37,10 +37,10 @@
</i18n> </i18n>
<div class="icons"> <div class="icons">
<i style="color: var(--cBlue)" class="icon-reply"/> <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
<i style="color: var(--cGreen)" class="icon-retweet"/> <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
<i style="color: var(--cOrange)" class="icon-star"/> <i style="color: var(--cOrange)" class="button-icon icon-star"/>
<i style="color: var(--cRed)" class="icon-cancel"/> <i style="color: var(--cRed)" class="button-icon icon-cancel"/>
</div> </div>
</div> </div>
</div> </div>

2
src/components/user_card_content/user_card_content.vue
View File

@ -3,7 +3,7 @@
<div class="panel-heading text-center"> <div class="panel-heading text-center">
<div class='user-info'> <div class='user-info'>
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser"> <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i> <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
</router-link> </router-link>
<a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser"> <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
<i class="icon-link-ext usersettings"></i> <i class="icon-link-ext usersettings"></i>

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

@ -7,7 +7,7 @@
<button class="btn search-button" @click="findUser(username)"> <button class="btn search-button" @click="findUser(username)">
<i class="icon-search"/> <i class="icon-search"/>
</button> </button>
<i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
</template> </template>
</div> </div>
</template> </template>
@ -29,7 +29,8 @@
height: 29px; height: 29px;
} }
.user-finder-input { .user-finder-input {
max-width: 80%; // TODO: do this properly without a rough guesstimate of 2 icons + paddings
max-width: calc(100% - 30px - 30px - 20px);
} }
.search-button { .search-button {

6
src/components/user_settings/user_settings.vue
View File

@ -49,7 +49,7 @@
<button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button> <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
<div class='alert error' v-if="avatarUploadError"> <div class='alert error' v-if="avatarUploadError">
Error: {{ avatarUploadError }} Error: {{ avatarUploadError }}
<i class="icon-cancel" @click="clearUploadError('avatar')"></i> <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -66,7 +66,7 @@
<button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button> <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
<div class='alert error' v-if="bannerUploadError"> <div class='alert error' v-if="bannerUploadError">
Error: {{ bannerUploadError }} Error: {{ bannerUploadError }}
<i class="icon-cancel" @click="clearUploadError('banner')"></i> <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -81,7 +81,7 @@
<button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button> <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
<div class='alert error' v-if="backgroundUploadError"> <div class='alert error' v-if="backgroundUploadError">
Error: {{ backgroundUploadError }} Error: {{ backgroundUploadError }}
<i class="icon-cancel" @click="clearUploadError('background')"></i> <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
</div> </div>
</div> </div>
</div> </div>