feat: menu for mobile and improvements

This commit is contained in:
Filipe Medeiros 2021-10-10 13:37:01 +01:00
parent 14976bad88
commit 328ecd43b6
7 changed files with 292 additions and 44 deletions

View File

@ -1,6 +1,10 @@
<template>
<div class="uk-flex">
<Sidebar style="flexShrink: 0" />
<Menu
style="flexShrink: 0"
:collapsed="menuCollapsed"
:toggleCollapsed="() => (menuCollapsed = !menuCollapsed)"
/>
<main
class="uk-container uk-container-expand"
style="height: 100vh; overflow: scroll;"
@ -9,7 +13,7 @@
>
<router-view v-slot="{ Component }">
<keep-alive :max="5">
<component :is="Component" :key="$route.fullPath" />
<component :is="Component" :key="$route.fullPath" :menuCollapsed="menuCollapsed" />
</keep-alive>
</router-view>
@ -28,10 +32,13 @@
</template>
<script>
import Sidebar from "@/components/Sidebar";
import Menu from "@/components/Menu";
export default {
components: {
Sidebar,
Menu,
},
data() {
return { menuCollapsed: false };
},
mounted() {
if (window.location.pathname === "/" || window.location.pathname.length == 0)

28
src/components/Menu.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<MenuDesktop v-if="!isMobile" />
<MenuMobile v-else />
</template>
<script>
import MenuDesktop from "./MenuDesktop.vue";
import MenuMobile from "./MenuMobile.vue";
export default {
components: {
MenuDesktop,
MenuMobile,
},
data() {
return { isMobile: false };
},
mounted() {
this.updateMenu();
window.addEventListener("resize", this.updateMenu);
},
methods: {
updateMenu() {
this.isMobile = window.matchMedia("screen and (max-width: 800px)").matches;
},
},
};
</script>

View File

@ -1,62 +1,74 @@
<template>
<div
class="uk-height-viewport uk-flex uk-flex-column uk-flex-middle"
:class="{ collapsed, 'narrow-sidebar': narrowSidebar }"
style="transition: width 0.5s; padding: 48px 24px; height: 100vh;"
:class="{ 'collapse-text': collapseText }"
style="transition: width 400ms; padding: 32px 24px; height: 100vh;"
:style="{ width: collapsed ? '78px' : '291px', backgroundColor: secondaryBackgroundColor }"
>
<div
class="uk-width-1-1 uk-flex uk-flex-middle"
style="margin-bottom: 100px; height: 50px;"
:style="{ padding: narrowSidebar ? '0' : '0 14px' }"
class="uk-width-1-1 uk-flex uk-flex-middle uk-flex-between"
style="margin-bottom: 100px; height: 50px; transition: padding 400ms; padding: 0 14px;"
:style="collapseText ? 'padding: 0;' : {}"
:class="{ 'uk-flex uk-flex-center': collapsed }"
>
<div style="flex: 0.50 0 0%;">
<font-awesome-icon class="button highlight" @click="collapsed = !collapsed" icon="bars" />
<div style="transition: padding 400ms; flex: 1 0 30px;" :style="collapseText ? 'padding: 0 8px;' : {}">
<font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
</div>
<div class="uk-flex uk-flex-middle" style="gap: 16px; flex: 1;" v-if="!narrowSidebar">
<img src="/img/pipedPlay.svg" :class="{ 'piped-play': !narrowSidebar }" />
<div
class="uk-flex uk-flex-middle"
style="gap: 16px; transition: transform 300ms, gap 300ms;"
:style="collapseText ? 'transform: scale(0); gap: 0;' : 'transition-delay: 150ms'"
v-if="!hideText"
>
<img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" />
<img src="/img/piped.svg" />
</div>
</div>
<nav class="uk-nav uk-flex-1 uk-width-1-1">
<ul class="uk-flex uk-flex-column" :class="{ 'uk-flex-middle': narrowSidebar }" style="gap: 20px;">
<ul class="uk-flex uk-flex-column" style="gap: 20px;">
<li>
<router-link to="/" class="highlight sidebar-link uk-flex">
<router-link
to="/"
class="highlight sidebar-link uk-flex"
:style="collapseText ? 'padding: 6px 8px;' : {}"
>
<font-awesome-icon icon="fire" />
<span v-if="!narrowSidebar">Trending</span>
<span v-if="!hideText" v-t="'titles.trending'" />
</router-link>
</li>
<li>
<router-link to="/feed" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="rss" />
<span v-if="!narrowSidebar">My feed</span>
<span v-if="!hideText" v-t="'titles.feed'" />
</router-link>
</li>
<li>
<router-link to="/subscriptions" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="heart" />
<span v-if="!narrowSidebar">Subscriptions</span>
<span v-if="!hideText" v-t="'titles.subscriptions'" />
</router-link>
</li>
</ul>
</nav>
<router-link to="/preferences" class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle">
<router-link
to="/preferences"
class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
style="text-decoration: none;"
>
<font-awesome-icon icon="cog" />
<span v-if="!narrowSidebar">Settings</span>
<span v-if="!hideText" v-t="'titles.preferences'" />
</router-link>
<button
class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
:class="{ 'uk-flex-center': collapsed }"
:style="{ backgroundColor: backgroundColor }"
style="border-radius: 9999px; border: none; margin-top: 20px;"
@click="logout"
>
<span v-if="!narrowSidebar">Log out</span>
<span v-if="!hideText">Log out</span>
<font-awesome-icon icon="sign-out-alt" />
</button>
</div>
@ -66,10 +78,14 @@
export default {
data() {
return {
collapsed: false,
narrowSidebar: false,
collapseText: this.collapsed,
hideText: this.collapsed,
};
},
props: {
collapsed: Boolean,
toggleCollapsed: Function,
},
methods: {
logout() {
alert("logging out");
@ -77,11 +93,17 @@ export default {
},
watch: {
collapsed(collapsed) {
if (collapsed)
if (collapsed) {
this.collapseText = true;
setTimeout(() => {
this.narrowSidebar = collapsed;
}, 350);
else this.narrowSidebar = collapsed;
this.hideText = true;
}, 450);
} else {
this.hideText = false;
setTimeout(() => {
this.collapseText = false;
}, 0);
}
},
},
};
@ -147,22 +169,20 @@ export default {
.sidebar-link {
gap: 14px !important;
padding: 10px 14px;
padding: 10px 12px;
border-radius: 12px;
transition: padding 0.5s;
transition: padding 400ms, gap 400ms;
}
.collapsed .sidebar-link {
.collapse-text .sidebar-link {
padding: 6px;
}
.narrow-sidebar .sidebar-link {
width: fit-content;
gap: 0px !important;
}
.sidebar-link span {
transition: font-size 500ms;
transition: font-size 400ms, padding 400ms;
}
.collapsed .sidebar-link span {
.collapse-text .sidebar-link span {
font-size: 0;
}

View File

@ -0,0 +1,163 @@
<template>
<div
class="uk-flex uk-flex-column uk-flex-middle uk-position-fixed uk-position-top"
:class="{ 'uk-height-viewport': collapsed }"
style="padding: 24px 12px; width: 100vw; box-sizing: border-box; z-index: 9999; transition: min-height 40ms, height 400ms; overflow: hidden;"
:style="{ backgroundColor: secondaryBackgroundColor, minHeight: 0, height: collapsed ? '70px' : '100vh' }"
>
<div class="uk-width-1-1 uk-flex uk-flex-middle" style="margin-bottom: 100px; padding: 0 14px; gap: 32px;">
<div style="transition: padding 500ms;">
<font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
</div>
<div class="uk-flex uk-flex-middle" style="gap: 12px;" v-if="!hideText">
<img src="/img/pipedPlay.svg" style="height: 26px;" />
<img src="/img/piped.svg" style="height: 22px;" />
</div>
</div>
<nav class="uk-nav uk-flex-1 uk-width-1-1">
<ul class="uk-flex uk-flex-column" style="gap: 20px;">
<li>
<router-link to="/" @click="toggleCollapsed()" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="fire" />
<span v-t="'titles.trending'" />
</router-link>
</li>
<li>
<router-link to="/feed" @click="toggleCollapsed()" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="rss" />
<span v-t="'titles.feed'" />
</router-link>
</li>
<li>
<router-link to="/subscriptions" @click="toggleCollapsed()" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="heart" />
<span v-t="'titles.subscriptions'" />
</router-link>
</li>
</ul>
</nav>
<router-link
to="/preferences"
@click="toggleCollapsed()"
class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
style="text-decoration: none;"
>
<font-awesome-icon icon="cog" />
<span v-t="'titles.preferences'" />
</router-link>
<button
class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
:style="{ backgroundColor: backgroundColor }"
style="border-radius: 9999px; border: none; margin-top: 20px;"
@click="logout"
>
<span v-t="'actions.logout'">Log out</span>
<font-awesome-icon icon="sign-out-alt" />
</button>
</div>
</template>
<script>
export default {
data() {
return {
collapseText: false,
hideText: false,
};
},
props: {
collapsed: Boolean,
toggleCollapsed: Function,
},
methods: {
logout() {
alert("logging out");
},
},
};
</script>
<style>
@keyframes bump {
/* heartbeat */
/* 0% {
transform: scale(1);
}
20% {
transform: scale(1.25);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.25);
}
70% {
transform: scale(1.25);
}
90% {
transform: scale(1);
} */
/* right bump */
0% {
transform: translate3d(0, 0, 0);
}
45% {
transform: translate3d(8px, 0, 0);
}
55% {
transform: translate3d(8px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.piped-play {
animation: bump 300ms ease-in-out 500ms;
}
@media (prefers-reduced-motion) {
.piped-play {
animation: none;
}
}
.logout-button {
white-space: nowrap;
}
.button:hover {
cursor: pointer;
}
.highlight {
color: #abb2c6;
}
.sidebar-link {
gap: 14px !important;
padding: 10px 12px;
border-radius: 12px;
transition: padding 500ms, gap 500ms;
}
.sidebar-link span {
transition: font-size 500ms, padding 500ms;
}
.collapse-text .sidebar-link span {
font-size: 0;
}
.highlight:hover,
.router-link-active {
color: #fff;
}
.router-link-active {
background: linear-gradient(#da22ff, #9733ee);
}
</style>

View File

@ -1,7 +1,31 @@
<template>
<h1 v-t="'titles.trending'" class="uk-text-bold uk-text-center" />
<div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
<form class="uk-search">
<div class="uk-position-relative">
<input
class="uk-search-input"
style="border-radius: 9999px; padding: 12px 18px 12px 40px; width: 35ch;"
:style="{ backgroundColor: secondaryBackgroundColor }"
type="search"
:placeholder="$t('actions.search')"
/>
<font-awesome-icon
icon="search"
style="position: absolute; x: 0px; y: 0px;"
class="uk-position-center-left uk-position-small"
/>
</div>
</form>
<hr />
<div
class="uk-flex uk-flex-middle"
style="gap: 16px; transition: transform 400ms; transform-origin: left;"
:style="!menuCollapsed ? 'transform: scale(0);' : {}"
>
<img src="/img/pipedPlay.svg" style="height: 36px;" />
<img src="/img/piped.svg" />
</div>
</div>
<div class="uk-grid-xl" uk-grid="parallax: 0">
<div
@ -22,6 +46,9 @@ export default {
components: {
VideoItem,
},
props: {
menuCollapsed: Boolean,
},
data() {
return {
videos: [],

View File

@ -12,6 +12,7 @@
"watch_on": "Watch on"
},
"actions": {
"logout": "Log out",
"subscribe": "Subscribe",
"unsubscribe": "Unsubscribe",
"view_subscriptions": "View Subscriptions",
@ -70,14 +71,14 @@
"pinned_by": "Pinned by"
},
"preferences": {
"instance_name":"Instance Name",
"instance_locations":"Instance Locations",
"has_cdn":"Has CDN?",
"ssl_score":"SSL Score"
"instance_name": "Instance Name",
"instance_locations": "Instance Locations",
"has_cdn": "Has CDN?",
"ssl_score": "SSL Score"
},
"login": {
"username":"Username",
"password":"Password"
"username": "Username",
"password": "Password"
},
"video": {
"videos": "Videos",

View File

@ -14,6 +14,7 @@ import {
faFire,
faCog,
faSignOutAlt,
faSearch,
} from "@fortawesome/free-solid-svg-icons";
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@ -34,6 +35,7 @@ library.add(
faFire,
faCog,
faSignOutAlt,
faSearch,
);
import("uikit/dist/css/uikit-core.css");