No OneTemporary
Actions

Size

38 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.js b/src/App.js
	index 214e0f481b..5c27a3df1d 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,106 +1,108 @@
	import UserPanel from './components/user_panel/user_panel.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	import Notifications from './components/notifications/notifications.vue'
	import UserFinder from './components/user_finder/user_finder.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import ChatPanel from './components/chat_panel/chat_panel.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	+import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
	import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils'

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications,
	UserFinder,
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ChatPanel,
	MediaModal,
	- SideDrawer
	+ SideDrawer,
	+ MobilePostStatusModal
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	finderHidden: true,
	supportsMask: window.CSS && window.CSS.supports && (
	window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')
	)
	}),
	created () {
	// Load the locale from the storage
	this.$i18n.locale = this.$store.state.config.interfaceLanguage
	},
	computed: {
	currentUser () { return this.$store.state.users.currentUser },
	background () {
	return this.currentUser.background_image \|\| this.$store.state.instance.background
	},
	enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
	logoStyle () {
	return {
	'visibility': this.enableMask ? 'hidden' : 'visible'
	}
	},
	logoMaskStyle () {
	return this.enableMask ? {
	'mask-image': `url(${this.$store.state.instance.logo})`
	} : {
	'background-color': this.enableMask ? '' : 'transparent'
	}
	},
	logoBgStyle () {
	return Object.assign({
	'margin': `${this.$store.state.instance.logoMargin} 0`,
	opacity: this.finderHidden ? 1 : 0
	}, this.enableMask ? {} : {
	'background-color': this.enableMask ? '' : 'transparent'
	})
	},
	logo () { return this.$store.state.instance.logo },
	bgStyle () {
	return {
	'background-image': `url(${this.background})`
	}
	},
	bgAppStyle () {
	return {
	'--body-background-image': `url(${this.background})`
	}
	},
	sitename () { return this.$store.state.instance.name },
	chat () { return this.$store.state.chat.channel.state === 'joined' },
	suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
	showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel },
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
	},
	methods: {
	scrollToTop () {
	window.scrollTo(0, 0)
	},
	logout () {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	},
	onFinderToggled (hidden) {
	this.finderHidden = hidden
	},
	toggleMobileSidebar () {
	this.$refs.sideDrawer.toggleDrawer()
	}
	}
	}
	diff --git a/src/App.scss b/src/App.scss
	index a0d1a804aa..598735d9ff 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,744 +1,769 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	.app-bg-wrapper {
	position: fixed;
	z-index: -1;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
	}

	i {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	background-color: rgba(0,0,0,0.15);
	align-content: flex-start;
	}

	.text-center {
	text-align: center;
	}

	body {
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	font-size: 14px;
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	max-width: 100vw;
	overflow-x: hidden;
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
	box-shadow: var(--buttonShadow);
	font-size: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	}

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}
	}

	label.select {
	padding: 0;

	}

	input, textarea, .select {
	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	padding: 8px .5em;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;

	&:disabled, &[disabled=disabled] {
	cursor: not-allowed;
	opacity: 0.5;
	}

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	line-height: 28px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	width: 100%;
	z-index: 1;
	height: 28px;
	line-height: 16px;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio],
	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}


	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	.nav-icon {
	margin-left: 0.4em;
	}

	&.right {
	justify-content: flex-end;
	}
	}

	.auto-size {
	flex: 1
	}

	.nav-bar {
	padding: 0;
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;

	.logo {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	z-index: -1;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	height: 100%;
	object-fit: contain;
	display: block;
	flex: 0;
	}
	}

	.inner-nav {
	margin: auto;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	height: 50px;

	a, a i {
	color: $fallback--link;
	color: var(--topBarLink, $fallback--link);
	}
	}
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after, & {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	button {
	flex-shrink: 0;
	}

	button, .alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .25em;
	min-width: 1px;
	align-self: stretch;
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);


	.faint {
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);

	.back-button {
	display: block;
	max-width: 99px;
	transition-property: opacity, max-width;
	transition-duration: 300ms;
	transition-timing-function: ease-out;

	i {
	margin: 0 1em;
	}

	&.hidden {
	opacity: 0;
	max-width: 5px;
	}
	}
	}

	.menu-button {
	display: none;
	position: relative;
	}

	.alert-dot {
	border-radius: 100%;
	height: 8px;
	width: 8px;
	position: absolute;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	.panel-switcher {
	display: none;
	width: 100%;
	height: 46px;

	button {
	display: block;
	flex: 1;
	max-height: 32px;
	margin: 0.5em;
	padding: 0.5em;
	}
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	nav {
	.back-button {
	display: none;
	}
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}
	.badge {
	display: inline-block;
	border-radius: 99px;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	@media all and (min-width: 800px) {
	.logo {
	opacity: 1 !important;
	}
	}

	.item.right {
	text-align: right;
	}

	.visibility-tray {
	font-size: 1.2em;
	padding: 3px;
	cursor: pointer;

	.selected {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	div {
	padding-top: 5px;
	}
	}

	.visibility-notice {
	padding: .5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	+@keyframes modal-background-fadein {
	+ from {
	+ background-color: rgba(0, 0, 0, 0);
	+ }
	+ to {
	+ background-color: rgba(0, 0, 0, 0.5);
	+ }
	+}
	+
	+.modal-view {
	+ z-index: 1000;
	+ position: fixed;
	+ top: 0;
	+ left: 0;
	+ right: 0;
	+ bottom: 0;
	+ display: flex;
	+ justify-content: center;
	+ align-items: center;
	+ overflow: auto;
	+ animation-duration: 0.2s;
	+ background-color: rgba(0, 0, 0, 0.5);
	+ animation-name: modal-background-fadein;
	+}
	+
	.button-icon {
	font-size: 1.2em;
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}
	15% {
	transform: translateX(0.375rem);
	}
	30% {
	transform: translateX(-0.375rem);
	}
	45% {
	transform: translateX(0.375rem);
	}
	60% {
	transform: translateX(-0.375rem);
	}
	75% {
	transform: translateX(0.375rem);
	}
	90% {
	transform: translateX(-0.375rem);
	}
	100% {
	transform: translateX(0);
	}
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	.menu-button {
	display: block;
	margin-right: 0.8em;
	}
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0px;
	width: 100%;
	}
	}

	.btn.btn-default {
	min-height: 28px;
	}
	diff --git a/src/App.vue b/src/App.vue
	index acbbeb7570..4fff3d1de5 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,57 +1,58 @@
	<template>
	<div id="app" v-bind:style="bgAppStyle">
	<div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
	<nav class='nav-bar container' @click="scrollToTop()" id="nav">
	<div class='logo' :style='logoBgStyle'>
	<div class='mask' :style='logoMaskStyle'></div>
	<img :src='logo' :style='logoStyle'>
	</div>
	<div class='inner-nav'>
	<div class='item'>
	<a href="#" class="menu-button" @click.stop.prevent="toggleMobileSidebar()">
	<i class="button-icon icon-menu"></i>
	<div class="alert-dot" v-if="unseenNotificationsCount"></div>
	</a>
	<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
	</div>
	<div class='item right'>
	<user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
	<router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
	<a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
	</div>
	</div>
	</nav>
	<div v-if="" class="container" id="content">
	<side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
	<div class="sidebar-flexer mobile-hidden">
	<div class="sidebar-bounds">
	<div class="sidebar-scroller">
	<div class="sidebar">
	<user-panel></user-panel>
	<nav-panel></nav-panel>
	<instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
	<features-panel v-if="!currentUser && showFeaturesPanel"></features-panel>
	<who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
	<notifications v-if="currentUser"></notifications>
	</div>
	</div>
	</div>
	</div>
	<div class="main">
	<div v-if="!currentUser" class="login-hint panel panel-default">
	<router-link :to="{ name: 'login' }" class="panel-body">
	{{ $t("login.hint") }}
	</router-link>
	</div>
	<transition name="fade">
	<router-view></router-view>
	</transition>
	</div>
	<media-modal></media-modal>
	</div>
	<chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
	+ <MobilePostStatusModal />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index cfbcb1feac..7e54a98bcb 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,55 +1,53 @@
	import PublicTimeline from 'components/public_timeline/public_timeline.vue'
	import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
	import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
	import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
	import ConversationPage from 'components/conversation-page/conversation-page.vue'
	import Mentions from 'components/mentions/mentions.vue'
	import DMs from 'components/dm_timeline/dm_timeline.vue'
	import UserProfile from 'components/user_profile/user_profile.vue'
	import Settings from 'components/settings/settings.vue'
	import Registration from 'components/registration/registration.vue'
	import UserSettings from 'components/user_settings/user_settings.vue'
	import FollowRequests from 'components/follow_requests/follow_requests.vue'
	import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
	import UserSearch from 'components/user_search/user_search.vue'
	import Notifications from 'components/notifications/notifications.vue'
	-import UserPanel from 'components/user_panel/user_panel.vue'
	import LoginForm from 'components/login_form/login_form.vue'
	import ChatPanel from 'components/chat_panel/chat_panel.vue'
	import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
	import About from 'components/about/about.vue'

	export default (store) => {
	return [
	{ name: 'root',
	path: '/',
	redirect: _to => {
	return (store.state.users.currentUser
	? store.state.instance.redirectRootLogin
	: store.state.instance.redirectRootNoLogin) \|\| '/main/all'
	}
	},
	{ name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
	{ name: 'public-timeline', path: '/main/public', component: PublicTimeline },
	{ name: 'friends', path: '/main/friends', component: FriendsTimeline },
	{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
	{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
	{ name: 'external-user-profile', path: '/users/:id', component: UserProfile },
	{ name: 'mentions', path: '/users/:username/mentions', component: Mentions },
	{ name: 'dms', path: '/users/:username/dms', component: DMs },
	{ name: 'settings', path: '/settings', component: Settings },
	{ name: 'registration', path: '/registration', component: Registration },
	{ name: 'registration-token', path: '/registration/:token', component: Registration },
	{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
	{ name: 'user-settings', path: '/user-settings', component: UserSettings },
	{ name: 'notifications', path: '/:username/notifications', component: Notifications },
	- { name: 'new-status', path: '/:username/new-status', component: UserPanel },
	{ name: 'login', path: '/login', component: LoginForm },
	{ name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
	{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
	{ name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) },
	{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow },
	{ name: 'about', path: '/about', component: About },
	{ name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
	]
	}
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 427bf12b06..7f666603c0 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,113 +1,102 @@
	<template>
	- <div class="modal-view" v-if="showing" @click.prevent="hide">
	+ <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
	<img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
	<VideoAttachment
	class="modal-image"
	v-if="type === 'video'"
	:attachment="currentMedia"
	:controls="true"
	@click.stop.native="">
	</VideoAttachment>
	<button
	:title="$t('media_modal.previous')"
	class="modal-view-button-arrow modal-view-button-arrow--prev"
	v-if="canNavigate"
	@click.stop.prevent="goPrev"
	>
	<i class="icon-left-open arrow-icon" />
	</button>
	<button
	:title="$t('media_modal.next')"
	class="modal-view-button-arrow modal-view-button-arrow--next"
	v-if="canNavigate"
	@click.stop.prevent="goNext"
	>
	<i class="icon-right-open arrow-icon" />
	</button>
	</div>
	</template>

	<script src="./media_modal.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	-.modal-view {
	- z-index: 1000;
	- position: fixed;
	- top: 0;
	- left: 0;
	- right: 0;
	- bottom: 0;
	- display: flex;
	- justify-content: center;
	- align-items: center;
	- background-color: rgba(0, 0, 0, 0.5);
	-
	+.media-modal-view {
	&:hover {
	.modal-view-button-arrow {
	opacity: 0.75;

	&:focus,
	&:hover {
	outline: none;
	box-shadow: none;
	}
	&:hover {
	opacity: 1;
	}
	}
	}
	}

	.modal-image {
	max-width: 90%;
	max-height: 90%;
	box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -50px;
	width: 70px;
	height: 100px;
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(.4,0,.22,1);

	.arrow-icon {
	position: absolute;
	top: 35px;
	height: 30px;
	width: 32px;
	font-size: 14px;
	line-height: 30px;
	color: #FFF;
	text-align: center;
	background-color: rgba(0,0,0,.3);
	}

	&--prev {
	left: 0;
	.arrow-icon {
	left: 6px;
	}
	}

	&--next {
	right: 0;
	.arrow-icon {
	right: 6px;
	}
	}
	}

	</style>
	diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
	new file mode 100644
	index 0000000000..2f24dd08da
	--- /dev/null
	+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
	@@ -0,0 +1,91 @@
	+import PostStatusForm from '../post_status_form/post_status_form.vue'
	+import { throttle } from 'lodash'
	+
	+const MobilePostStatusModal = {
	+ components: {
	+ PostStatusForm
	+ },
	+ data () {
	+ return {
	+ hidden: false,
	+ postFormOpen: false,
	+ scrollingDown: false,
	+ inputActive: false,
	+ oldScrollPos: 0,
	+ amountScrolled: 0
	+ }
	+ },
	+ created () {
	+ window.addEventListener('scroll', this.handleScroll)
	+ window.addEventListener('resize', this.handleOSK)
	+ },
	+ destroyed () {
	+ window.removeEventListener('scroll', this.handleScroll)
	+ window.removeEventListener('resize', this.handleOSK)
	+ },
	+ computed: {
	+ currentUser () {
	+ return this.$store.state.users.currentUser
	+ },
	+ isHidden () {
	+ return this.hidden \|\| this.inputActive
	+ }
	+ },
	+ methods: {
	+ openPostForm () {
	+ this.postFormOpen = true
	+ this.hidden = true
	+
	+ const el = this.$el.querySelector('textarea')
	+ this.$nextTick(function () {
	+ el.focus()
	+ })
	+ },
	+ closePostForm () {
	+ this.postFormOpen = false
	+ this.hidden = false
	+ },
	+ handleOSK () {
	+ // This is a big hack: we're guessing from changed window sizes if the
	+ // on-screen keyboard is active or not. This is only really important
	+ // for phones in portrait mode and it's more important to show the button
	+ // in normal scenarios on all phones, than it is to hide it when the
	+ // keyboard is active.
	+ // Guesswork based on https://www.mydevice.io/#compare-devices
	+
	+ // for example, iphone 4 and android phones from the same time period
	+ const smallPhone = window.innerWidth < 350
	+ const smallPhoneKbOpen = smallPhone && window.innerHeight < 345
	+
	+ const biggerPhone = !smallPhone && window.innerWidth < 450
	+ const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
	+ if (smallPhoneKbOpen \|\| biggerPhoneKbOpen) {
	+ this.inputActive = true
	+ } else {
	+ this.inputActive = false
	+ }
	+ },
	+ handleScroll: throttle(function () {
	+ const scrollAmount = window.scrollY - this.oldScrollPos
	+ const scrollingDown = scrollAmount > 0
	+
	+ if (scrollingDown !== this.scrollingDown) {
	+ this.amountScrolled = 0
	+ this.scrollingDown = scrollingDown
	+ if (!scrollingDown) {
	+ this.hidden = false
	+ }
	+ } else if (scrollingDown) {
	+ this.amountScrolled += scrollAmount
	+ if (this.amountScrolled > 100 && !this.hidden) {
	+ this.hidden = true
	+ }
	+ }
	+
	+ this.oldScrollPos = window.scrollY
	+ this.scrollingDown = scrollingDown
	+ }, 100)
	+ }
	+}
	+
	+export default MobilePostStatusModal
	diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
	new file mode 100644
	index 0000000000..0a451c2864
	--- /dev/null
	+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
	@@ -0,0 +1,76 @@
	+<template>
	+<div v-if="currentUser">
	+ <div
	+ class="post-form-modal-view modal-view"
	+ v-show="postFormOpen"
	+ @click="closePostForm"
	+ >
	+ <div class="post-form-modal-panel panel" @click.stop="">
	+ <div class="panel-heading">{{$t('post_status.new_status')}}</div>
	+ <PostStatusForm class="panel-body" @posted="closePostForm"/>
	+ </div>
	+ </div>
	+ <button
	+ class="new-status-button"
	+ :class="{ 'hidden': isHidden }"
	+ @click="openPostForm"
	+ >
	+ <i class="icon-edit" />
	+ </button>
	+</div>
	+</template>
	+
	+<script src="./mobile_post_status_modal.js"></script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.post-form-modal-view {
	+ max-height: 100%;
	+ display: block;
	+}
	+
	+.post-form-modal-panel {
	+ flex-shrink: 0;
	+ margin: 25% 0 4em 0;
	+ width: 100%;
	+}
	+
	+.new-status-button {
	+ width: 5em;
	+ height: 5em;
	+ border-radius: 100%;
	+ position: fixed;
	+ bottom: 1.5em;
	+ right: 1.5em;
	+ // TODO: this needs its own color, it has to stand out enough and link color
	+ // is not very optimal for this particular use.
	+ background-color: $fallback--fg;
	+ background-color: var(--btn, $fallback--fg);
	+ display: flex;
	+ justify-content: center;
	+ align-items: center;
	+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
	+ z-index: 10;
	+
	+ transition: 0.35s transform;
	+ transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	+
	+ &.hidden {
	+ transform: translateY(150%);
	+ }
	+
	+ i {
	+ font-size: 1.5em;
	+ color: $fallback--text;
	+ color: var(--text, $fallback--text);
	+ }
	+}
	+
	+@media all and (min-width: 801px) {
	+ .new-status-button {
	+ display: none;
	+ }
	+}
	+
	+</style>
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index b608b008dc..95ee21b449 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,214 +1,209 @@
	<template>
	<div class="side-drawer-container"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div class="side-drawer-heading" @click="toggleDrawer">
	<UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
	<div class="side-drawer-logo-wrapper" v-else>
	<img :src="logo"/>
	<span>{{sitename}}</span>
	</div>
	</div>
	<ul>
	- <li v-if="currentUser" @click="toggleDrawer">
	- <router-link :to="{ name: 'new-status', params: { username: currentUser.screen_name } }">
	- {{ $t("post_status.new_status") }}
	- </router-link>
	- </li>
	- <li v-else @click="toggleDrawer">
	+ <li v-if="!currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'login' }">
	{{ $t("login.login") }}
	</router-link>
	</li>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }">
	{{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }}
	</router-link>
	</li>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
	{{ $t("nav.dms") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'friends' }">
	{{ $t("nav.timeline") }}
	</router-link>
	</li>
	<li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
	<router-link to='/friend-requests'>
	{{ $t("nav.friend_requests") }}
	<span v-if='followRequestCount > 0' class="badge follow-request-count">
	{{followRequestCount}}
	</span>

	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link to='/main/public'>
	{{ $t("nav.public_tl") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link to='/main/all'>
	{{ $t("nav.twkn") }}
	</router-link>
	</li>
	<li v-if="currentUser && chat" @click="toggleDrawer">
	<router-link :to="{ name: 'chat' }">
	{{ $t("nav.chat") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'user-search' }">
	{{ $t("nav.user_search") }}
	</router-link>
	</li>
	<li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
	<router-link :to="{ name: 'who-to-follow' }">
	{{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'settings' }">
	{{ $t("settings.settings") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'about'}">
	{{ $t("nav.about") }}
	</router-link>
	</li>
	<li v-if="currentUser" @click="toggleDrawer">
	<a @click="doLogout" href="#">
	{{ $t("login.logout") }}
	</a>
	</li>
	</ul>
	</div>
	<div class="side-drawer-click-outside"
	@click.stop.prevent="toggleDrawer"
	:class="{'side-drawer-click-outside-closed': closed}"
	></div>
	</div>
	</template>

	<script src="./side_drawer.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.side-drawer-container {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	}

	.side-drawer-container-open {
	- transition-delay: 0.0s;
	- transition-property: left;
	+ transition: 0.35s;
	+ transition-property: background-color;
	+ background-color: rgba(0, 0, 0, 0.5);
	}

	.side-drawer-container-closed {
	left: -100%;
	- transition-delay: 0.5s;
	- transition-property: left;
	+ background-color: rgba(0, 0, 0, 0);
	}

	.side-drawer-click-outside {
	flex: 1 1 100%;
	}

	.side-drawer {
	overflow-x: hidden;
	transition: 0.35s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: var(--panelShadow);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.side-drawer-logo-wrapper {
	display: flex;
	align-items: center;
	padding: 0.85em;

	img {
	flex: none;
	height: 50px;
	margin-right: 0.85em;
	}

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.side-drawer-click-outside-closed {
	flex: 0 0 0;
	}

	.side-drawer-closed {
	transform: translate(-100%);
	}

	.side-drawer-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	display: flex;
	padding: 0;
	margin: 0;
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;

	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	margin: 0.2em 0;
	}

	.side-drawer ul:last-child {
	border: 0;
	}

	.side-drawer li {
	padding: 0;

	a {
	display: block;
	padding: 0.5em 0.85em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	}
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 9:17 AM (1 d, 20 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736975
Default Alt Text: (38 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions