okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styled user menu, added info for future about page

Browse source
This commit is contained in:
booploops 2021-12-09 01:47:55 -08:00
parent 9c3fe5ca61
commit 8c4f3212b5
3 changed files with 109 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

84
resources/cider-ui-tests/style.less
View file

@ -305,6 +305,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
color: #eee;
font-weight: 500;
align-items: center;
&.active {
background:rgb(200 200 200 / 15%);
animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
}
}
@keyframes usermenuBtnClick {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0px);
}
}
.app-sidebar-button>.sidebar-user-icon {
@ -355,34 +372,57 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%;
}
.search-hints-container {
position: absolute;
top: 44px;
width: 100%;
padding: 10px;
z-index: 1;
.search-hints {
#cmenu() {
.container {
position: absolute;
width: 100%;
padding: 10px;
z-index: 1;
}
.body {
background: #242424;
padding: 6px;
border-radius: 6px;
width: 100%;
box-shadow: var(--mediaItemShadow-Shadow);
}
.item {
background: transparent;
display: block;
width: 100%;
text-align: left;
color: #eee;
font-family: inherit;
font-size: 15px;
padding: 8px 12px;
border: 0px;
appearance: none;
border-radius: 6px;
margin: 2px 0px;
&:hover {
background: var(--keyColor);
}
}
}
.search-hints-container {
top: 44px;
#cmenu.container();
.search-hints {
#cmenu.body();
.search-hint {
background: transparent;
display: block;
width: 100%;
text-align: left;
color: #eee;
font-family: inherit;
font-size: 15px;
padding: 8px 12px;
border: 0px;
appearance: none;
border-radius: 6px;
margin: 2px 0px;
&:hover {
background: var(--keyColor);
}
#cmenu.item();
}
}
}
.usermenu-container {
bottom: 66px;
#cmenu.container();
.usermenu-body {
#cmenu.body();
.usermenu-item {
#cmenu.item();
}
}
}

50
resources/cider-ui-tests/views/main.ejs
View file

@ -127,16 +127,18 @@
@focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 100)"
v-on:keyup.enter="searchQuery()"
@change="showSearch();" @input="getSearchHints()" placeholder="Search..." v-model="search.term"
@change="showSearch();" @input="getSearchHints()" placeholder="Search..."
v-model="search.term"
class="search-input">
</div>
</div>
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
<div class="search-hints">
<button class="search-hint" v-for="hint in search.hints" @click="search.term = hint;search.showHints = false;searchQuery(hint)">
{{ hint }}
</button>
</div>
<div class="search-hints">
<button class="search-hint" v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
{{ hint }}
</button>
</div>
</div>
<div class="app-sidebar-content">
<div class="app-sidebar-header-text">
@ -163,22 +165,24 @@
</button>
</div>
<transition name="wpfade">
<div class="app-sidebar-content" v-if="chrome.menuOpened">
<button class="app-sidebar-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
Toggle Personal Info
</button>
<button class="app-sidebar-item">
About
</button>
<button class="app-sidebar-item">
Discord
</button>
<button class="app-sidebar-item">
Settings
</button>
<button class="app-sidebar-item">
Sign Out
</button>
<div class="usermenu-container" v-if="chrome.menuOpened">
<div class="usermenu-body">
<button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
Toggle Personal Info
</button>
<button class="usermenu-item">
About
</button>
<button class="usermenu-item">
Discord
</button>
<button class="usermenu-item">
Settings
</button>
<button class="usermenu-item">
Sign Out
</button>
</div>
</div>
</transition>
<div class="app-sidebar-footer">
@ -186,6 +190,8 @@
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
<button class="app-sidebar-button" style="width:100%"
:class="{active: chrome.menuOpened}"
@blur="chrome.menuOpened = false"
@click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes">
<img class="sidebar-user-icon" loading="lazy"

19
resources/cider-ui-tests/views/pages/about.ejs Normal file
View file

@ -0,0 +1,19 @@
Major thanks to the Cider Development Team and all of our contributors.
<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
target="_blank"
rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
All Rights
Reserved.</p>
cryptofyre - Developer - https://github.com/cryptofyre
Core - Developer - https://github.com/coredev-uk
Quacksire - Developer - https://github.com/child-duckling
booploops - Developer - https://github.com/booploops
vapormusic - Developer - https://github.com/vapormusic
Void - Social Communications Team - https://twitter.com/MoonyVoid
NoseySG - Social Communications Team - https://twitter.com/noah_grose
<img class="md-contributors"
onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
src="https://contrib.rocks/image?repo=ciderapp/Cider"/>