TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-02 17:12:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: mobile menu

Browse source
This commit is contained in:
Filipe Medeiros 2021-10-12 18:27:52 +01:00
parent 660788c78e
commit e40dbe02a7
3 changed files with 27 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/MenuDesktop.vue
View file

@ -2,7 +2,7 @@
<div
id="menu-desktop"
class="uk-height-viewport uk-flex uk-flex-column uk-flex-middle"
:class="{ 'collapse-text': collapseText }"
:class="{ 'collapse-text': collapseText, 'enable-animations': enableAnimations }"
style="padding: 32px 24px; height: 100vh;"
:style="{
width: collapsed ? '78px' : '291px',
@ -47,7 +47,6 @@
<router-link
to="/"
class="highlight sidebar-link uk-flex"
:class="{ 'enable-animations': enableAnimations }"
:style="collapseText ? 'padding: 6px 8px;' : {}"
>
<font-awesome-icon icon="fire" />
@ -55,21 +54,13 @@
</router-link>
</li>
<li>
<router-link
to="/feed"
class="highlight sidebar-link uk-flex"
:class="{ 'enable-animations': enableAnimations }"
>
<router-link to="/feed" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="rss" />
<span v-if="!hideText" v-t="'titles.feed'" />
</router-link>
</li>
<li>
<router-link
to="/subscriptions"
class="highlight sidebar-link uk-flex"
:class="{ 'enable-animations': enableAnimations }"
>
<router-link to="/subscriptions" class="highlight sidebar-link uk-flex">
<font-awesome-icon icon="heart" />
<span v-if="!hideText" v-t="'titles.subscriptions'" />
</router-link>
@ -80,7 +71,6 @@
<router-link
to="/preferences"
class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
:class="{ 'enable-animations': enableAnimations }"
style="text-decoration: none;"
>
<font-awesome-icon icon="cog" />
@ -89,7 +79,6 @@
<button
class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
:class="{ 'enable-animations': enableAnimations }"
:style="{ backgroundColor: backgroundColor }"
style="border-radius: 9999px; border: none; margin-top: 20px;"
@click="logout()"
@ -184,7 +173,7 @@ export default {
}
}
#menu-desktop .piped-play.enable-animations {
#menu-desktop.enable-animations .piped-play {
animation: bump 300ms ease-in-out;
animation-delay: 700ms !important;
}
@ -211,7 +200,7 @@ export default {
padding: 10px 12px;
border-radius: 12px;
}
#menu-desktop .sidebar-link.enable-animations {
#menu-desktop.enable-animations .sidebar-link {
transition: padding 400ms, gap 400ms;
}
@ -220,7 +209,7 @@ export default {
gap: 0px !important;
}
#menu-desktop .sidebar-link.enable-animations span {
#menu-desktop.enable-animations .sidebar-link span {
transition: font-size 400ms;
}
.collapse-text .sidebar-link span {

45
src/components/MenuMobile.vue
View file

@ -2,14 +2,21 @@
<div
id="menu-mobile"
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' }"
:class="{ 'uk-height-viewport': !collapsed, 'enable-animations': enableAnimations }"
style="padding: 24px 12px; width: 100vw; box-sizing: border-box; z-index: 9999; overflow: hidden;"
:style="{
backgroundColor: secondaryBackgroundColor,
minHeight: 0,
height: !collapsed ? '70px' : '100vh',
transition: enableAnimations ? 'min-height 40ms, height 400ms' : 'none',
}"
>
<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, transform 500ms;"
:style="collapsed ? 'transform: rotate(90deg)' : {}"
:style="{
transform: collapsed ? 'rotate(90deg)' : 'none',
transition: enableAnimations ? 'padding 500ms, transform 500ms' : 'none',
}"
>
<font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
</div>
@ -57,7 +64,7 @@
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"
@click="logout()"
>
<span v-t="'actions.logout'" />
<font-awesome-icon icon="sign-out-alt" />
@ -69,32 +76,18 @@
import { useMenuCollapsed } from "../store";
export default {
data() {
return {
collapseText: false,
hideText: false,
};
},
setup() {
const { menuCollapsed, toggleCollapsed } = useMenuCollapsed();
return { collapsed: menuCollapsed, toggleCollapsed };
},
props: {
searchText: String,
onKeyUp: Function,
onInputFocus: Function,
onInputBlur: Function,
onSearchTextChange: Function,
},
methods: {
logout() {
alert("logging out");
},
},
computed: {
disableAnimations(_this) {
return _this.getPreferenceBoolean("disableAnimations", false);
enableAnimations(_this) {
return !_this.getPreferenceBoolean("disableAnimations", true);
},
},
};
@ -137,11 +130,11 @@ export default {
}
}
#menu-mobile .piped-play {
#menu-mobile.enable-animations .piped-play {
animation: bump 300ms ease-in-out 500ms;
}
@media (prefers-reduced-motion) {
.piped-play {
#menu-mobile .piped-play {
animation: none;
}
}
@ -163,11 +156,11 @@ export default {
padding: 10px 12px;
border-radius: 12px;
}
#menu-mobile .sidebar-link.enable-animations {
#menu-mobile.enable-animations .sidebar-link {
transition: padding 400ms, gap 400ms;
}
#menu-mobile .sidebar-link span {
#menu-mobile.enable-animations .sidebar-link span {
transition: font-size 500ms, padding 500ms;
}
#menu-mobile.collapse-text .sidebar-link span {

4
src/components/Preferences.vue
View file

@ -283,7 +283,7 @@ export default {
enabledCodecs: ["av1", "vp9", "avc"],
disableLBRY: false,
proxyLBRY: false,
disableAnimations: false,
disableAnimations: true,
};
},
activated() {
@ -372,7 +372,7 @@ export default {
this.enabledCodecs = this.getPreferenceString("enabledCodecs", "av1,vp9,avc").split(",");
this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
this.disableAnimations = this.getPreferenceBoolean("disableAnimations", false);
this.disableAnimations = this.getPreferenceBoolean("disableAnimations", true);
if (this.selectedLanguage != "en") {
try {
this.CountryMap = await import("@/utils/CountryMaps/" + this.selectedLanguage + ".json").then(