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

Experimentation

Browse Source
This commit is contained in:
James Barnsley
2017-06-16 20:05:32 +12:00
parent ffe790a33b
commit 5d0c365943
7 changed files with 32 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -14,7 +14,7 @@
<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" />
<link rel="shortcut-icon" href="/iris/assets/favicon.ico" />
<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:300,300i,400,400i,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Montserrat:500,700" rel="stylesheet">
<link href="/iris/app.css" rel="stylesheet" />
<link rel="manifest" href="/iris/assets/manifest.json">

22
src/js/components/Sidebar.js
View File

@ -32,7 +32,7 @@ class Sidebar extends React.Component{
<section>
<Link activeClassName="active" to={global.baseURL+"queue"}>
<Icon name="play" className="white" />
<Icon name="play" />
Now playing
</Link>
</section>
@ -40,19 +40,19 @@ class Sidebar extends React.Component{
<section>
<title>Discover</title>
<Link activeClassName="active" to={global.baseURL+"discover/recommendations"}>
<Icon name="compass" className="white" />
<Icon name="compass" />
Discover
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/categories"}>
<Icon name="grid" className="white" />
<Icon name="grid" />
Genre / Mood
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/featured"}>
<Icon name="star" className="white" />
<Icon name="star" />
Featured playlists
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/new-releases"}>
<Icon name="leaf" className="white" />
<Icon name="leaf" />
New releases
</Link>
</section>
@ -60,30 +60,30 @@ class Sidebar extends React.Component{
<section>
<title>My Music</title>
<Link activeClassName="active" to={global.baseURL+"library/playlists"}>
<Icon name="playlist" className="white" />
<Icon name="playlist" />
Playlists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
<Icon name="mic" className="white" />
<Icon name="mic" />
Artists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
<Icon name="cd" className="white" />
<Icon name="cd" />
Albums
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
<Icon name="music" className="white" />
<Icon name="music" />
Tracks
</Link>
<Link activeClassName="active" to={global.baseURL+"library/local"}>
<Icon name="folder" className="white" />
<Icon name="folder" />
Local
</Link>
</section>
<section>
<Link activeClassName="active" to={global.baseURL+"settings"}>
<Icon name="cog" className="white" />
<Icon name="cog" />
Settings
{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
</Link>

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

@ -2,20 +2,19 @@
main {
header {
padding: 14px 20px;
background: #EEEEEE;
line-height: 24px;
box-sizing: border-box;
h1 {
font-size: 22px;
font-weight: 100;
display: inline-block;
}
.icon {
display: inline-block;
padding-right: 14px;
height: 16px;
height: 2.5rem;
vertical-align: bottom;
margin-bottom: -5px;
}
.options {

4
src/scss/components/_lists.scss
View File

@ -13,8 +13,8 @@
display: block;
position: relative;
padding: 12px 10px 12px 20px;
border-top: 1px solid $faint_grey;
border-bottom: 1px solid $faint_grey;
border-top: 1px solid $light_grey;
border-bottom: 1px solid $light_grey;
margin-bottom: -1px;
cursor: pointer;

4
src/scss/components/_search-form.scss
View File

@ -5,10 +5,10 @@
input {
background: transparent;
border-bottom: 1px solid #FFFFFF;
border-bottom: 1px solid $light_grey;
padding: 16px 0 8px;
width: 100%;
color: #FFFFFF;
color: $black;
&:focus,
&:active {

35
src/scss/components/_sidebar.scss
View File

@ -5,10 +5,9 @@ aside{
left: 0;
bottom: 0;
z-index: 96;
background: $darkest_grey;
width: 220px;
overflow: hidden;
box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
border-right: 2px solid $light_grey;
.liner {
overflow-y: auto;
@ -45,25 +44,6 @@ aside{
bottom: 60px;
}
}
.thumbnail {
position: absolute;
top: -30px;
right: -30px;
bottom: -30px;
left: -30px;
height: auto;
width: auto;
max-width: none;
z-index: 1;
opacity: 0.2;
.image {
@include blur();
padding-bottom: 0;
height: 100%;
}
}
nav {
z-index: 2;
@ -72,10 +52,10 @@ aside{
a {
font-size: 16px;
color: #FFFFFF;
color: $black;
text-decoration: none;
display: block;
padding: 6px 18px 6px 14px;
padding: 6px 18px 6px 6px;
border-left: 4px solid transparent;
.icon {
@ -86,8 +66,7 @@ aside{
}
&.active {
border-color: $turquoise;
background: rgba( 0, 0, 0, 0.5 );
color: $turquoise;
}
&[disabled] {
@ -96,7 +75,7 @@ aside{
}
&:hover:not([disabled]) {
background: rgba( 255, 255, 255, 0.1 );
color: $secondary_grey;
}
}
@ -105,11 +84,11 @@ aside{
title {
display: block;
padding: 0 18px 2px;
padding: 0 18px 2px 6px;
font-size: 11px;
text-transform: uppercase;
opacity: 0.5;
color: #FFFFFF;
color: $mid_grey;
}
}

10
src/scss/global/_core.scss
View File

@ -4,7 +4,7 @@ body,
html {
background: $off_white;
color: #000000;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
touch-action: manipulation;
}
@ -88,13 +88,15 @@ main {
}
h1 {
font-weight: 500;
font-size: 40px;
font-weight: 700;
font-size: 3rem;
font-family: "Montserrat";
}
h2 {
font-size: 2.5rem;
font-weight: 500;
font-size: 30px;
font-family: "Montserrat";
}
h3 {