PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2025-02-19 19:34:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

New top bar design

Browse source
This commit is contained in:
Josef Citrine 2016-07-11 00:41:32 +01:00
parent 63562f9338
commit 6aad5271c9
8 changed files with 175 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/scripts/shared/layout.coffee
View file

@ -21,9 +21,9 @@ window.handleResize = () ->
$siteBody = $ '.site-body' $siteBody = $ '.site-body'
if isMobile if isMobile
$siteBody.height windowHeight - $('.now-playing').height() * 2 $siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height() + $('.search').height())
else else
$siteBody.height windowHeight - $('header').height() $siteBody.height windowHeight - ($('.top-bar').height() + $('.now-playing').height())
$('.dropdown-menu').each () -> $('.dropdown-menu').each () ->
$this = $ this $this = $ this

55
resources/assets/styles/components/search.less vendored
View file

@ -21,24 +21,47 @@
@import '../variables'; @import '../variables';
.search { .search {
position: relative; width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
} }
input.search-input { input.search-input {
background: lighten(@pfm-logo-purple, 10%);
color: #fff;
border: 0;
font-size: 13px; font-size: 13px;
padding: 15px 10px; padding: 15px;
margin-bottom: 0; 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 { .search-results {
width: 600px; width: 1200px;
padding: 10px; padding: 5px 15px;
background: #fff; background: #fff;
.material-shadow(3);
.-column1, .-column2 { .-column1, .-column2 {
width: 48%; width: 48%;
float: left; float: left;
margin-bottom: 10px;
} }
.-column1 { .-column1 {
@ -62,7 +85,7 @@ input.search-input {
.-section-header { .-section-header {
background: transparent; background: transparent;
color: @pfm-purple; color: @pfm-purple;
margin-top: 10px;
padding-left: 0; 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
View file

@ -166,7 +166,7 @@
margin-bottom: 5px; margin-bottom: 5px;
display: table; display: table;
} }
> .follower-count { > .follower-count {
font-size: 14pt; font-size: 14pt;
} }
@ -549,12 +549,15 @@ html {
margin-top: 15px; margin-top: 15px;
margin-right: 14px; margin-right: 14px;
font-size: 20pt; font-size: 20pt;
position: absolute;
top: 0;
right: 60px;
a { a {
color: #5A5A5A; color: #fff;
&:hover { &:hover {
color: #000; color: #eee;
} }
} }
@ -613,7 +616,7 @@ html {
right: -410px; right: -410px;
width: 400px; width: 400px;
height: ~"calc(100% - 64px)"; height: ~"calc(100% - 64px)";
z-index: 1000; z-index: 500;
background: #eee; background: #eee;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 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); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

90
resources/assets/styles/layout.less vendored
View file

@ -36,27 +36,26 @@ header {
.user-details { .user-details {
float: right; float: right;
margin-right: 10px; margin-right: 20px;
margin-top: 9px; margin-top: 9px;
position: absolute;
top: 0;
right: 0;
.avatar { .avatar {
.img-thumbnail();
display: block; display: block;
float: right; float: right;
padding: 2px;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
border-radius: 22px;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.3s @swift-ease-out;
&:hover, &:focus { &:hover {
background: #ddd; .light-material-shadow(1);
color: darken(@pfm-purple, 20%);
} }
&:focus {
span { .light-material-shadow(2);
font-weight: bold;
display: inline-block;
padding: 0px 3px;
} }
} }
@ -65,18 +64,10 @@ header {
right: 0px; right: 0px;
} }
.name {
float: left;
height: 44px;
line-height: 44px;
padding-right: 10px;
font-weight: bold;
font-size: 12pt;
}
img { img {
height: 40px; height: 44px;
width: 40px; width: 44px;
border-radius: 22px;
} }
} }
} }
@ -85,9 +76,12 @@ header {
margin-left: @pfm-sidebar-size; margin-left: @pfm-sidebar-size;
height: 64px; height: 64px;
background: #fff; background: #fff;
position: relative;
z-index: 500;
border-bottom: 1px solid #bcbcbc; 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 { .sidebar {
@ -97,7 +91,7 @@ header {
width: (@pfm-sidebar-size); width: (@pfm-sidebar-size);
height: 64px; height: 64px;
line-height: 42px; line-height: 42px;
background: #84528A; background: @pfm-logo-purple;
color: #fff; color: #fff;
font-size: 24pt; font-size: 24pt;
font-weight: lighter; font-weight: lighter;
@ -107,7 +101,7 @@ header {
position: relative; position: relative;
&:hover { &:hover {
background: darken(#84528A, 25%); background: darken(@pfm-logo-purple, 15%);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -130,6 +124,7 @@ header {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
.material-shadow(3);
li { li {
margin: 0px; margin: 0px;
@ -242,15 +237,19 @@ header {
} }
.site-content { .site-content {
overflow: hidden; overflow: hidden;
margin-left: @pfm-sidebar-size; margin-left: @pfm-sidebar-size;
background: #fff; background: #fff;
height: 100%; height: 100%;
z-index: 100; z-index: 100;
}
.site-body {
margin-top: @pfm-top-bar-size;
} }
.file-over-notice { .file-over-notice {
display: none; display: none;
} }
.chart-container { .chart-container {
@ -261,14 +260,25 @@ header {
margin-bottom: 10px; margin-bottom: 10px;
} }
.mobile-header { .top-bar {
display: none; display: block;
}
.burger-wrapper {
top:20px;
left: 20px;
position: absolute; 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 { .burger {

23
resources/assets/styles/mixins.less vendored
View file

@ -119,3 +119,26 @@
-moz-animation-name: @string; -moz-animation-name: @string;
-webkit-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
View file

@ -19,34 +19,28 @@
.site-body { .site-body {
overflow-x: hidden; overflow-x: hidden;
margin-top: 64px + 44px;
} }
.now-playing { .now-playing {
margin-left: 0px; margin-left: 0;
position: fixed;
width: 100%;
bottom: 0;
z-index: 1010;
box-shadow: 0 0 8px rgba(0,0,0,0.5);
} }
.user-details { .user-details {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0 !important;
z-index: 1002; z-index: 1002;
margin-right: 10px; margin-right: 10px !important;
margin-top: 10px; margin-top: 10px;
} }
.mobile-header { .top-bar {
display: block !important; margin-left: 0;
position: absolute;
z-index: 1001; .burger-wrapper {
background: #84528A; display: block;
height: 64px; }
width: 100%;
top: 0;
.logo { .logo {
text-align: center; text-align: center;
@ -65,7 +59,7 @@
} }
.sidebar { .sidebar {
left: -170px; left: -(@pfm-sidebar-size + 10);
transform: translateX(0px) translateZ(0); transform: translateX(0px) translateZ(0);
perspective: 1000; perspective: 1000;
backface-visibility: hidden; backface-visibility: hidden;
@ -94,22 +88,21 @@
} }
&.active { &.active {
transform: translateX(170px) translateZ(0); transform: translateX(@pfm-sidebar-size + 10) translateZ(0);
} }
} }
.user-details > .avatar { .search {
border: 0 !important; width: 100%;
box-shadow: initial !important; margin-top: 14px;
background: transparent !important; }
> img { input.search-input {
border-radius: 20px; border-radius: 0;
} }
> span { .search-results {
display: none !important; width: 100%;
}
} }
.track-player { .track-player {
@ -145,10 +138,6 @@
} }
} }
input.search-input {
border: 0;
}
.dropdowns { .dropdowns {
margin-bottom: 0px; margin-bottom: 0px;
> li { > li {
@ -299,9 +288,9 @@
.notification-menu { .notification-menu {
position: fixed; position: fixed;
top: 0; top: 0;
right: 54px; right: 54px !important;
margin-top: 13px; margin-top: 13px;
margin-right: 10px; margin-right: 10px !important;
a, a:active, a:hover, a:focus { a, a:active, a:hover, a:focus {
color: #fff; color: #fff;
@ -405,7 +394,7 @@
margin-top: 13px; margin-top: 13px;
} }
.mobile-header .logo { .top-bar .logo {
margin-left: 55px; margin-left: 55px;
height: 52px; height: 52px;
width: 122px; width: 122px;
@ -417,4 +406,4 @@
.x-attribution { .x-attribution {
position: static !important; position: static !important;
} }
} }

9
resources/assets/styles/variables.less vendored
View file

@ -20,4 +20,11 @@
@pfm-dark-grey: #646464; @pfm-dark-grey: #646464;
@pfm-light-grey: #969696; @pfm-light-grey: #969696;
@pfm-light-purple: #dac5db; @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);

23
resources/views/shared/_app_layout.blade.php
View file

@ -42,22 +42,20 @@
</script> </script>
<header> <header>
<div class="mobile-header"> <div class="top-bar">
<div class="burger-wrapper" ng-click="menuToggle()"> <div class="burger-wrapper" ng-click="menuToggle()">
<div class="burger"> <div class="burger">
<div class="bun-top"></div> <div class="bun-top"></div>
<div class="meat"></div> <div class="meat"></div>
<div class="bun-bottom"></div> <div class="bun-bottom"></div>
</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>
<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>
</div>
<div class="now-playing">
@if (Auth::check()) @if (Auth::check())
<div class="user-details dropdown"> <div class="user-details dropdown">
<a class="avatar dropdown-toggle" bs-dropdown href="#"> <a class="avatar dropdown-toggle" bs-dropdown href="#">
<img src="{{Auth::user()->getAvatarUrl(\Poniverse\Ponyfm\Models\Image::THUMBNAIL)}}" /> <img src="{{Auth::user()->getAvatarUrl(\Poniverse\Ponyfm\Models\Image::THUMBNAIL)}}" />
<span><i class="fa fa-chevron-down"></i></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li ui-sref-active="active"><a ui-sref="content.artist.profile({slug: auth.user.slug})">Your Profile</a></li> <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 class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
</div> </div>
@endif @endif
</div>
<div class="now-playing">
<pfm-player></pfm-player> <pfm-player></pfm-player>
</div> </div>
</header> </header>
@ -80,7 +80,6 @@
<a href="/"> <a href="/">
<img src="/images/ponyfm-logo-white.svg" class="logo"> <img src="/images/ponyfm-logo-white.svg" class="logo">
</a> </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.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.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> <li ng-class="{selected: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a ui-sref="content.playlists.list">Playlists</a></li>