mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2025-02-17 02:24:22 +01:00
New top bar design
This commit is contained in:
Josef Citrine
parent
63562f9338
commit
6aad5271c9
8 changed files with 175 additions and 101 deletions
|
|
@ -21,9 +21,9 @@ window.handleResize = () ->
|
|||
$siteBody = $ '.site-body'
|
||||
|
||||
if isMobile
|
||||
$siteBody.height windowHeight - $('.now-playing').height() * 2
|
||||
$siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height() + $('.search').height())
|
||||
else
|
||||
$siteBody.height windowHeight - $('header').height()
|
||||
$siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height())
|
||||
|
||||
$('.dropdown-menu').each () ->
|
||||
$this = $ this
|
||||
|
|
|
|||
55
resources/assets/styles/components/search.less
vendored
55
resources/assets/styles/components/search.less
vendored
|
|
@ -21,24 +21,47 @@
|
|||
@import '../variables';
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
input.search-input {
|
||||
background: lighten(@pfm-logo-purple, 10%);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
padding: 15px 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 0;
|
||||
height: @pfm-top-bar-size - 20px;
|
||||
border-radius: 2px;
|
||||
.light-material-shadow(1);
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
&::-moz-input-placeholder {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
&:ms-input-placeholder {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
width: 600px;
|
||||
padding: 10px;
|
||||
|
||||
width: 1200px;
|
||||
padding: 5px 15px;
|
||||
background: #fff;
|
||||
.material-shadow(3);
|
||||
|
||||
.-column1, .-column2 {
|
||||
width: 48%;
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.-column1 {
|
||||
|
|
@ -62,7 +85,7 @@ input.search-input {
|
|||
.-section-header {
|
||||
background: transparent;
|
||||
color: @pfm-purple;
|
||||
|
||||
margin-top: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -72,3 +95,23 @@ input.search-input {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1580px) {
|
||||
.search {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1170px) {
|
||||
.search {
|
||||
width: 430px;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
width: 430px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
resources/assets/styles/content.less
vendored
11
resources/assets/styles/content.less
vendored
|
|
@ -166,7 +166,7 @@
|
|||
margin-bottom: 5px;
|
||||
display: table;
|
||||
}
|
||||
|
||||
|
||||
> .follower-count {
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
|
@ -549,12 +549,15 @@ html {
|
|||
margin-top: 15px;
|
||||
margin-right: 14px;
|
||||
font-size: 20pt;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 60px;
|
||||
|
||||
a {
|
||||
color: #5A5A5A;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -613,7 +616,7 @@ html {
|
|||
right: -410px;
|
||||
width: 400px;
|
||||
height: ~"calc(100% - 64px)";
|
||||
z-index: 1000;
|
||||
z-index: 500;
|
||||
background: #eee;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
|
|||
90
resources/assets/styles/layout.less
vendored
90
resources/assets/styles/layout.less
vendored
|
|
@ -36,27 +36,26 @@ header {
|
|||
|
||||
.user-details {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
margin-right: 20px;
|
||||
margin-top: 9px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
.avatar {
|
||||
.img-thumbnail();
|
||||
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
transition: box-shadow 0.3s @swift-ease-out;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: #ddd;
|
||||
color: darken(@pfm-purple, 20%);
|
||||
&:hover {
|
||||
.light-material-shadow(1);
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 0px 3px;
|
||||
&:focus {
|
||||
.light-material-shadow(2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,18 +64,10 @@ header {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.name {
|
||||
float: left;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding-right: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,9 +76,12 @@ header {
|
|||
margin-left: @pfm-sidebar-size;
|
||||
height: 64px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 500;
|
||||
border-bottom: 1px solid #bcbcbc;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 1010;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -97,7 +91,7 @@ header {
|
|||
width: (@pfm-sidebar-size);
|
||||
height: 64px;
|
||||
line-height: 42px;
|
||||
background: #84528A;
|
||||
background: @pfm-logo-purple;
|
||||
color: #fff;
|
||||
font-size: 24pt;
|
||||
font-weight: lighter;
|
||||
|
|
@ -107,7 +101,7 @@ header {
|
|||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: darken(#84528A, 25%);
|
||||
background: darken(@pfm-logo-purple, 15%);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -130,6 +124,7 @@ header {
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.material-shadow(3);
|
||||
|
||||
li {
|
||||
margin: 0px;
|
||||
|
|
@ -242,15 +237,19 @@ header {
|
|||
}
|
||||
|
||||
.site-content {
|
||||
overflow: hidden;
|
||||
margin-left: @pfm-sidebar-size;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
margin-left: @pfm-sidebar-size;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.site-body {
|
||||
margin-top: @pfm-top-bar-size;
|
||||
}
|
||||
|
||||
.file-over-notice {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
|
|
@ -261,14 +260,25 @@ header {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.burger-wrapper {
|
||||
top:20px;
|
||||
left: 20px;
|
||||
.top-bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 599;
|
||||
background: @pfm-logo-purple;
|
||||
height: @pfm-top-bar-size;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
|
||||
.burger-wrapper {
|
||||
top:20px;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.burger {
|
||||
|
|
|
|||
23
resources/assets/styles/mixins.less
vendored
23
resources/assets/styles/mixins.less
vendored
|
|
@ -119,3 +119,26 @@
|
|||
-moz-animation-name: @string;
|
||||
-webkit-animation-name: @string;
|
||||
}
|
||||
|
||||
.material-shadow(@size) when (@size = 1) {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
|
||||
}
|
||||
.material-shadow(@size) when (@size = 2) {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
|
||||
}
|
||||
.material-shadow(@size) when (@size = 3) {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
|
||||
}
|
||||
.material-shadow(@size) when (@size = 4) {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
|
||||
}
|
||||
.material-shadow(@size) when (@size = 5) {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, .30), 0 15px 12px rgba(0, 0, 0, .22);
|
||||
}
|
||||
|
||||
.light-material-shadow(@size) when (@size = 1) {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
|
||||
}
|
||||
.light-material-shadow(@size) when (@size = 2) {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 3px 6px rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
|
|
|||
61
resources/assets/styles/mobile.less
vendored
61
resources/assets/styles/mobile.less
vendored
|
|
@ -19,34 +19,28 @@
|
|||
|
||||
.site-body {
|
||||
overflow-x: hidden;
|
||||
margin-top: 64px + 44px;
|
||||
}
|
||||
|
||||
.now-playing {
|
||||
margin-left: 0px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 1010;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.5);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
right: 0 !important;
|
||||
z-index: 1002;
|
||||
margin-right: 10px;
|
||||
margin-right: 10px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
background: #84528A;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
.top-bar {
|
||||
margin-left: 0;
|
||||
|
||||
.burger-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
|
|
@ -65,7 +59,7 @@
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
left: -170px;
|
||||
left: -(@pfm-sidebar-size + 10);
|
||||
transform: translateX(0px) translateZ(0);
|
||||
perspective: 1000;
|
||||
backface-visibility: hidden;
|
||||
|
|
@ -94,22 +88,21 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
transform: translateX(170px) translateZ(0);
|
||||
transform: translateX(@pfm-sidebar-size + 10) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.user-details > .avatar {
|
||||
border: 0 !important;
|
||||
box-shadow: initial !important;
|
||||
background: transparent !important;
|
||||
.search {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
> img {
|
||||
border-radius: 20px;
|
||||
}
|
||||
input.search-input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none !important;
|
||||
}
|
||||
.search-results {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.track-player {
|
||||
|
|
@ -145,10 +138,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
input.search-input {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dropdowns {
|
||||
margin-bottom: 0px;
|
||||
> li {
|
||||
|
|
@ -299,9 +288,9 @@
|
|||
.notification-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 54px;
|
||||
right: 54px !important;
|
||||
margin-top: 13px;
|
||||
margin-right: 10px;
|
||||
margin-right: 10px !important;
|
||||
|
||||
a, a:active, a:hover, a:focus {
|
||||
color: #fff;
|
||||
|
|
@ -405,7 +394,7 @@
|
|||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.mobile-header .logo {
|
||||
.top-bar .logo {
|
||||
margin-left: 55px;
|
||||
height: 52px;
|
||||
width: 122px;
|
||||
|
|
@ -417,4 +406,4 @@
|
|||
.x-attribution {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
9
resources/assets/styles/variables.less
vendored
9
resources/assets/styles/variables.less
vendored
|
|
@ -20,4 +20,11 @@
|
|||
@pfm-dark-grey: #646464;
|
||||
@pfm-light-grey: #969696;
|
||||
@pfm-light-purple: #dac5db;
|
||||
@pfm-sidebar-size: 160px;
|
||||
@pfm-logo-purple: #84528A;
|
||||
@pfm-sidebar-size: 180px;
|
||||
@pfm-top-bar-size: 64px;
|
||||
|
||||
// Material animation timings
|
||||
@swift-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
@swift-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
@swift-ease-in-out: cubic-bezier(0.35, 0, 0.25, 1);
|
||||
|
|
|
|||
|
|
@ -42,22 +42,20 @@
|
|||
</script>
|
||||
|
||||
<header>
|
||||
<div class="mobile-header">
|
||||
<div class="burger-wrapper" ng-click="menuToggle()">
|
||||
<div class="burger">
|
||||
<div class="bun-top"></div>
|
||||
<div class="meat"></div>
|
||||
<div class="bun-bottom"></div>
|
||||
<div class="top-bar">
|
||||
<div class="burger-wrapper" ng-click="menuToggle()">
|
||||
<div class="burger">
|
||||
<div class="bun-top"></div>
|
||||
<div class="meat"></div>
|
||||
<div class="bun-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/" class="logo"><img class="default-logo" src="/images/ponyfm-logo-white.svg"><img class="small-logo" src="/images/ponyfm-logo-white-nodisc.svg"></a>
|
||||
</div>
|
||||
<div class="now-playing">
|
||||
<a href="/" class="logo"><img class="default-logo" src="/images/ponyfm-logo-white.svg"><img class="small-logo" src="/images/ponyfm-logo-white-nodisc.svg"></a>
|
||||
<pfm-search></pfm-search>
|
||||
@if (Auth::check())
|
||||
<div class="user-details dropdown">
|
||||
<a class="avatar dropdown-toggle" bs-dropdown href="#">
|
||||
<img src="{{Auth::user()->getAvatarUrl(\Poniverse\Ponyfm\Models\Image::THUMBNAIL)}}" />
|
||||
<span><i class="fa fa-chevron-down"></i></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ui-sref-active="active"><a ui-sref="content.artist.profile({slug: auth.user.slug})">Your Profile</a></li>
|
||||
|
|
@ -71,6 +69,8 @@
|
|||
<div class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="now-playing">
|
||||
<pfm-player></pfm-player>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -80,7 +80,6 @@
|
|||
<a href="/">
|
||||
<img src="/images/ponyfm-logo-white.svg" class="logo">
|
||||
</a>
|
||||
<li><pfm-search class="hidden-xs"></pfm-search></li>
|
||||
<li ng-class="{selected: stateIncludes('content.tracks') || stateIncludes('content.track')}"><a ui-sref="content.tracks.list">Tracks</a></li>
|
||||
<li ng-class="{selected: stateIncludes('content.albums') || stateIncludes('content.album')}"><a ui-sref="content.albums.list">Albums</a></li>
|
||||
<li ng-class="{selected: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a ui-sref="content.playlists.list">Playlists</a></li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue