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

Parallax looking good, z-index issues

Browse Source
This commit is contained in:
James Barnsley
2018-12-19 16:27:40 +13:00
parent 23ef3c411c
commit 483b6dd91f
12 changed files with 110 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
mopidy_iris/static/app.css
View File

@ -2732,7 +2732,12 @@ main {
.light-theme main {
background: #FFFFFF; }
main .content-wrapper {
position: relative;
padding: 40px 40px 20px 40px; }
main .content-wrapper::after {
content: '';
clear: both;
display: block; }
main a {
color: inherit;
text-decoration: none;
@ -3232,15 +3237,19 @@ input[type="radio"]:checked + .label:after {
left: 6px;
background: #FFFFFF; }
input[type="radio"]:focus + .label:before,
input[type="radio"]:active + .label:before {
background: #a3a19f; }
.light-theme input[type="radio"] + .label:before {
background: #f4f2f0; }
.light-theme input[type="radio"]:checked + .label:after {
background: #121212; }
input[type="radio"]:focus + .label:before,
input[type="radio"]:active + .label:before {
background: #08d58f !important; }
.light-theme input[type="radio"]:focus + .label:before,
.light-theme input[type="radio"]:active + .label:before {
background: #383734; }
input[type="checkbox"] + .label:before {
font-family: "Material Icons";
@ -3261,13 +3270,18 @@ input[type="checkbox"] + .label:before {
input[type="checkbox"]:checked + .label:before {
content: '\E5CA'; }
input[type="checkbox"]:focus + .label:before,
input[type="checkbox"]:active + .label:before {
background: #a3a19f; }
.light-theme input[type="checkbox"] + .label:before {
background: #f4f2f0;
color: #121212; }
input[type="checkbox"]:focus + .label:before,
input[type="checkbox"]:active + .label:before {
background: #08d58f !important; }
.light-theme input[type="checkbox"]:focus + .label:before,
.light-theme input[type="checkbox"]:active + .label:before {
color: #FFFFFF;
background: #383734; }
select {
max-width: 100%; }
@ -3873,10 +3887,8 @@ select {
.light-theme .list__item:not(:first-child) {
border-top-color: rgba(128, 128, 128, 0.1); }
:root .notouch:not(.dragging) .list__item:not(.no-click):hover {
background: rgba(255, 255, 255, 0.03);
cursor: pointer; }
.light-theme :root .notouch:not(.dragging) .list__item:not(.no-click):hover {
background: rgba(0, 0, 0, 0.03); }
cursor: pointer;
background: rgba(255, 255, 255, 0.03); }
:root .notouch:not(.dragging) .list__item:not(.no-click):active, :root .notouch:not(.dragging) .list__item:not(.no-click):focus {
-webkit-transition: none !important;
-moz-transition: none !important;
@ -3885,6 +3897,8 @@ select {
-moz-transform: scale(0.997);
-webkit-transform: scale(0.997);
transform: scale(0.997); }
:root .light-theme.notouch:not(.dragging) .list__item:not(.no-click):hover {
background: rgba(0, 0, 0, 0.03); }
.list__item .select-zone,
.list__item .drag-zone {
display: none; }
@ -4227,6 +4241,12 @@ select {
height: 100%;
max-height: 60vh;
z-index: -1; }
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.parallax__image {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
@ -6633,8 +6653,7 @@ main .track-view {
padding: 0; } }
.queue-view .parallax {
opacity: 0.5;
margin-bottom: -45vh; }
opacity: 0.5; }
.queue-view .current-track {
text-align: center;
@ -6774,11 +6793,19 @@ main .track-view {
.discover-view .intro {
position: relative;
padding: 90px 40px 70px;
z-index: 1; }
z-index: -1; }
.discover-view .intro h1 {
font-size: 3rem;
line-height: 3rem;
padding-bottom: 10px; }
.discover-view .intro .parallax {
position: absolute;
max-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1; }
.discover-view .intro__liner {
z-index: 2;
position: relative;
@ -6903,6 +6930,12 @@ main .track-view {
.discover-view section.tracks .pull-right button {
margin-right: 0; }
.discover-view .content-wrapper {
position: relative;
background: #181818; }
.light-theme .discover-view .content-wrapper {
background: #FFFFFF; }
@media (max-width: 800px) {
.discover-view .intro {
padding: 40px 20px; }

7
mopidy_iris/static/app.js
View File

@ -19820,7 +19820,7 @@ var Parallax = function (_React$Component) {
{ className: class_name },
_react2.default.createElement(
"div",
{ className: "parallax__layer" },
{ className: "parallax__layer preserve-3d" },
_react2.default.createElement("div", { className: "parallax__image", style: style }),
_react2.default.createElement("div", { className: "parallax__overlay" })
)
@ -78279,7 +78279,7 @@ var Discover = function (_React$Component) {
// Results not in
if (!this.props.recommendations || this.props.recommendations.albums_uris === undefined || this.props.recommendations.artists_uris === undefined) {
return null;
return _react2.default.createElement('div', { className: 'content-wrapper recommendations-results' });
}
var tracks = [];
@ -78413,7 +78413,7 @@ var Discover = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'intro preserve-3d' },
_react2.default.createElement(_Parallax2.default, { image: 'assets/backgrounds/discover.jpg' }),
_react2.default.createElement(_Parallax2.default, { image: 'assets/backgrounds/discover.jpg', fixedHeight: true }),
_react2.default.createElement(
'div',
{ className: 'intro__liner' },
@ -78474,7 +78474,6 @@ var Discover = function (_React$Component) {
var mapStateToProps = function mapStateToProps(state, ownProps) {
return {
disable_parallax: state.ui.disable_parallax,
theme: state.ui.theme,
albums: state.core.albums,
artists: state.core.artists,

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1545160558";
var build = "1545179099";
var version = "3.31.6";
// Construct the script tag

2
src/js/components/Parallax.js
View File

@ -69,7 +69,7 @@ export default class Parallax extends React.Component{
return (
<div className={class_name}>
<div className="parallax__layer">
<div className="parallax__layer preserve-3d">
<div className="parallax__image" style={style}></div>
<div className="parallax__overlay"></div>
</div>

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

@ -405,7 +405,7 @@ class Discover extends React.Component{
// Results not in
if (!this.props.recommendations || this.props.recommendations.albums_uris === undefined || this.props.recommendations.artists_uris === undefined){
return null;
return <div className="content-wrapper recommendations-results"></div>;
}
var tracks = [];
@ -514,7 +514,7 @@ class Discover extends React.Component{
<div className="view discover-view preserve-3d">
<div className="intro preserve-3d">
<Parallax image="assets/backgrounds/discover.jpg" />
<Parallax image="assets/backgrounds/discover.jpg" fixedHeight />
<div className="intro__liner">
<h1>Explore new music</h1>
@ -558,7 +558,6 @@ class Discover extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
disable_parallax: state.ui.disable_parallax,
theme: state.ui.theme,
albums: state.core.albums,
artists: state.core.artists,

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

@ -44,12 +44,8 @@
:root .notouch:not(.dragging) &:not(.no-click) {
&:hover {
background: rgba(255,255,255,0.03);
cursor: pointer;
.light-theme & {
background: rgba(0,0,0,0.03);
}
background: rgba(255,255,255,0.03);
}
&:active,
@ -61,6 +57,12 @@
}
}
:root .light-theme.notouch:not(.dragging) &:not(.no-click) {
&:hover {
background: rgba(0,0,0,0.03);
}
}
.select-zone,
.drag-zone {
display: none;

8
src/scss/components/_parallax.scss
View File

@ -9,6 +9,14 @@ $parallax: 'parallax';
max-height: 60vh;
z-index: -1;
&__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&__image {
@include animate(0.5s);
position: absolute;

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

@ -125,6 +125,8 @@ main {
}
.content-wrapper {
@include clearfix();
position: relative;
padding: 40px 40px 20px 40px;
}

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

@ -98,6 +98,11 @@ input[type="radio"]{
background: colour(white);
}
&:focus + .label:before,
&:active + .label:before {
background: colour(mid_grey);
}
.light-theme & {
& + .label:before {
background: colour(faint_grey);
@ -106,11 +111,11 @@ input[type="radio"]{
&:checked + .label:after {
background: colour(darkest_grey);
}
}
&:focus + .label:before,
&:active + .label:before {
background: colour(turquoise) !important;
background: colour(grey);
}
}
}
@ -136,16 +141,22 @@ input[type="checkbox"]{
content: '\e5ca';
}
&:focus + .label:before,
&:active + .label:before {
background: colour(mid_grey);
}
.light-theme & {
& + .label:before {
background: colour(faint_grey);
color: colour(darkest_grey);
}
}
&:focus + .label:before,
&:active + .label:before {
background: colour(turquoise) !important;
color: colour(white);
background: colour(grey);
}
}
}

22
src/scss/views/_discover.scss
View File

@ -4,7 +4,7 @@
.intro {
position: relative;
padding: 90px 40px 70px;
z-index: 1;
z-index: -1;
h1 {
font-size: 3rem;
@ -12,6 +12,16 @@
padding-bottom: 10px;
}
.parallax {
position: absolute;
max-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
&__liner {
z-index: 2;
position: relative;
@ -177,7 +187,6 @@
}
}
section {
.grid {
padding-bottom: 20px;
@ -197,6 +206,15 @@
}
}
.content-wrapper {
position: relative;
background: colour(dark_grey);
.light-theme & {
background: colour(white);
}
}
@include responsive($bp_medium){
.intro {

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

@ -1,9 +1,7 @@
.queue-view {
.parallax {
opacity: 0.5;
margin-bottom: -45vh;
}
.current-track {