secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Delicious buttons

Browse Source
This commit is contained in:
James Barnsley
2017-06-19 07:38:23 +12:00
parent 6cd9e4deed
commit b52b8e18d2
14 changed files with 112 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/components/ContextMenuTrigger.js
View File

@ -14,11 +14,9 @@ export default class ContextMenuTrigger extends React.Component{
className += ' '+this.props.className
}
return (
<button
className={className}
onClick={e => this.props.onTrigger(e)}>
<FontAwesome name="ellipsis-v" />
</button>
<span className={className} onClick={e => this.props.onTrigger(e)}>
<FontAwesome name="ellipsis-h" />
</span>
);
}
}

3
src/js/views/Artist.js
View File

@ -131,7 +131,6 @@ class Artist extends React.Component{
case 'related-artists':
return (
<div className="body related-artists">
<h4 className="left-padding">Related artists</h4>
<section className="grid-wrapper no-top-padding">
<ArtistGrid artists={related_artists} />
</section>
@ -172,7 +171,7 @@ class Artist extends React.Component{
<div className="col w5"></div>
{related_artists.length > 0 ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={related_artists.slice(0,6)} /></div></div> : null}
{related_artists.length > 0 ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+this.props.params.uri+'/related-artists'} className="button">All related artists</Link></div> : null}
<div className="cf"></div>

4
src/js/views/discover/DiscoverRecommendations.js
View File

@ -200,7 +200,7 @@ class Discover extends React.Component{
}
return (
<div className="recommendations-results">
<div className="content-wrapper recommendations-results">
<section className="grid-wrapper">
<h4>Artists</h4>
<ArtistGrid artists={artists} />
@ -210,7 +210,7 @@ class Discover extends React.Component{
<AlbumGrid albums={albums} />
</section>
<section className="list-wrapper">
<h4 className="left-padding">Tracks</h4>
<h4>Tracks</h4>
{this.props.recommendations.tracks ? <TrackList className="discover-track-list" uri="iris:discover" tracks={this.props.recommendations.tracks} /> : null}
</section>
</div>

12
src/scss/components/_context-menu.scss
View File

@ -248,6 +248,18 @@
}
}
.context-menu-trigger {
padding: 8px 12px;
font-size: 18px;
cursor: pointer;
vertical-align: middle;
margin-left: 10px;
&:hover {
color: $turquoise;
}
}
.list {
&.track-list {

25
src/scss/components/_dropdown-field.scss
View File

@ -1,8 +1,8 @@
.dropdown-field {
font-size: 14px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
font-family: "Overpass";
position: relative;
display: inline-block;
@ -13,8 +13,7 @@
&.expanded {
.label {
background: $dark_grey;
color: #FFFFFF;
color: $blue;
}
.options {
display: block;
@ -22,29 +21,29 @@
}
.options {
color: #FFFFFF;
color: $mid_grey;
position: absolute;
top: 52px;
top: 46px;
right: 0px;
z-index: 97;
background: $dark_grey;
background: $white;
border-top: 1px solid $mid_grey;
display: none;
.option {
position: relative;
padding: 6px 14px 6px 30px;
border-top: 1px solid lighten($dark_grey, 10%);
padding: 6px 14px 6px 18px;
cursor: pointer;
.fa {
position: absolute;
top: 12px;
left: 10px;
font-size: 12px;
top: 7px;
left: 5px;
font-size: 10px;
}
&:hover {
background: lighten($dark_grey, 10%);
color: $black;
}
}
}

14
src/scss/components/_header.scss
View File

@ -18,7 +18,7 @@ main {
.options {
position: absolute;
top: 0;
top: 10px;
right: 10px;
.context-menu-trigger {
@ -30,18 +30,18 @@ main {
.button,
button {
background: transparent;
font-size: 14px;
font-weight: 600;
text-transform: none;
padding: 13px 10px;
margin: 0;
line-height: 24px;
text-transform: uppercase;
min-width: 0;
border: 0;
color: #000000;
color: $black;
font-size: 13px;
font-weight: 600;
font-family: "Overpass";
&:active {
background: rgba(0,0,0,0.15);
color: $blue;
}
}
}

11
src/scss/components/_notifications.scss
View File

@ -17,6 +17,7 @@
margin: 10px 0 0 0;
color: $white;
pointer-events: all;
border-radius: 3px;
h4 {
padding-top: 0;
@ -64,17 +65,19 @@
}
&:after {
pointer-events: none;
position: absolute;
display: block;
content: '';
background: $blue;
opacity: 1;
background: $white;
opacity: 0.1;
animation: slideloader 1s infinite;
top: 0;
right: 0;
bottom: 0;
left: 0;
right: 0;
height: 4px;
z-index: 1;
border-radius: 0 0 3px 3px;
}
}
}

2
src/scss/components/_playback-controls.scss
View File

@ -62,7 +62,7 @@
}
&.active {
color: $turquoise;
color: $turquoise !important;
}
&:hover {

132
src/scss/global/_forms.scss
View File

@ -45,90 +45,75 @@ input[type="button"],
input[type="submit"] {
@include animate();
display: inline-block;
padding: 6px 20px;
min-width: 160px;
border: 0;
padding: 9px 20px 7px;
margin: 0 20px 10px 0;
text-align: center;
border: 2px solid $mid_grey;
color: $mid_grey;
background: transparent;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
color: $white;
background: $dark_grey;
font-size: 14px;
font-weight: 700;
box-sizing: border-box;
font-family: "Overpass";
border-radius: 3px;
vertical-align: middle;
position: relative;
border: 0 !important;
&.wide {
min-width: 200px;
&:before {
@include animate();
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
}
&:hover{
cursor: pointer;
border-color: darken( $mid_grey, 10%);
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
&:before {
opacity: 0.15;
}
}
&:active {
@include noanimate();
background: $mid_grey;
color: #FFFFFF;
border-color: $mid_grey;
background: $black;
color: $white;
margin-top: 1px;
margin-bottom: 9px;
}
&.primary {
border-color: $turquoise;
color: $turquoise;
&:hover {
color: darken( $turquoise, 10% );
border-color: darken( $turquoise, 10% );
}
background: $turquoise;
color: $white;
&:active {
color: #FFFFFF;
background: $turquoise;
border-color: $turquoise;
}
}
&.secondary {
color: $black;
border-color: $black;
&:hover {
color: lighten( $black, 40% );
border-color: lighten( $black, 40% );
}
&:active {
color: $white;
background: $black;
border-color: $black;
}
}
&.alternative {
color: $blue;
border-color: $blue;
&:hover {
color: darken($blue, 10%);
border-color: darken($blue, 10%);
}
&:active {
color: $white;
background: $blue;
border-color: $blue;
}
&.white {
color: $black;
background: $white;
}
&.confirming,
&.destructive {
border-color: $red;
color: $red;
&:hover {
color: darken( $red, 6% );
border-color: darken( $red, 6% );
}
&:active {
color: #FFFFFF;
background: $red;
border-color: $red;
}
background: $red;
color: $white;
}
&.alternative {
background: $blue;
color: $white;
}
&.timing-out {
@ -145,20 +130,6 @@ input[type="submit"] {
}
}
&.white {
color: #FFFFFF;
border-color: #FFFFFF;
&:hover {
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.8);
}
&:active {
color: #000000;
background: #FFFFFF;
border-color: #FFFFFF;
}
}
&.discrete {
border: transparent;
@ -172,16 +143,17 @@ input[type="submit"] {
position: relative;
&:after {
pointer-events: none;
position: absolute;
display: block;
content: '';
background: $mid_grey;
opacity: 1;
animation: slideloader 1s infinite;
right: 0;
bottom: 0;
background: $white;
opacity: 0.5;
top: 0;
left: 0;
height: 3px;
bottom: 0;
right: 0;
z-index: 1;
}

1
src/scss/global/_variables.scss
View File

@ -4,6 +4,7 @@ $off_white: #F5F5F5;
$faint_grey: #EEEEEE;
$light_grey: #DDDDDD;
$mid_grey: #AAAAAA;
$grey: #888888;
$dark_grey: #333333;
$darkest_grey: #111111;
$secondary_grey: #888888;

6
src/scss/views/_album.scss
View File

@ -1,7 +1,7 @@
.album-view {
.title {
padding: 30px 40px;
padding: 0 40px 30px;
h3 {
color: $mid_grey;
@ -26,13 +26,13 @@
.thumbnail {
float: left;
max-width: 230px;
max-width: 200px;
margin: 0 30px 30px 0;
}
@include responsive( $bp_medium ){
.title {
padding: 20px 20px;
padding: 0 20px 20px;
}
.thumbnail {

4
src/scss/views/_artist.scss
View File

@ -38,6 +38,10 @@
.actions {
padding-bottom: 15px;
.context-menu-trigger {
color: $white;
}
}
.sub-views {

4
src/scss/views/_playlist.scss
View File

@ -2,7 +2,7 @@
.playlist-view {
.title {
padding: 30px 40px;
padding: 0 40px 30px;
h3 {
color: $mid_grey;
@ -27,7 +27,7 @@
.thumbnail {
float: left;
max-width: 230px;
max-width: 200px;
margin: 0 30px 30px 0;
}

5
src/scss/views/_queue.scss
View File

@ -8,9 +8,14 @@
.artwork {
position: relative;
margin: 0 auto;
width: 60%;
max-width: 400px;
display: block;
border: 0 !important;
.thumbnail {
margin: 0 auto;
max-width: 100%;
}
&.radio-enabled {