feat: menu for mobile and improvements
This commit is contained in:
Filipe Medeiros
parent
14976bad88
commit
328ecd43b6
15
src/App.vue
15
src/App.vue
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: [],
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
Loading…
Reference in New Issue