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

Mobile friendly service tabs

Browse Source
This commit is contained in:
James Barnsley
2018-09-21 17:00:52 +12:00
parent 40a3361d67
commit ed51873baf
6 changed files with 305 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
mopidy_iris/static/app.css
View File

@ -5949,81 +5949,74 @@ main header {
white-space: wrap;
max-width: 200px; }
.services .menu {
margin: 0 -5px;
display: flex;
flex-wrap: wrap; }
.services .menu::after {
content: '';
clear: both;
display: block; }
.services .menu .menu-item-wrapper {
width: 25%;
min-width: 140px;
.services .menu__inner {
display: flex;
flex-wrap: wrap;
margin: 0 -5px; }
.services .menu .menu-item {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
width: 20%;
min-width: 120px;
max-width: 200px;
padding: 5px 5px 10px 5px;
padding: 0 5px;
display: block;
box-sizing: border-box; }
.services .menu .menu-item-wrapper .menu-item {
-webkit-transition: all 0.1 ease-in-out;
-moz-transition: all 0.1 ease-in-out;
-o-transition: all 0.1 ease-in-out;
transition: all 0.1 ease-in-out;
box-sizing: border-box;
border: 0; }
.services .menu .menu-item__inner {
position: relative;
padding: 30px 10px;
margin-bottom: 10px;
border-radius: 3px;
background: #121212;
display: block;
text-align: center;
box-sizing: border-box;
border: 0; }
.services .menu .menu-item-wrapper .menu-item:hover {
background: #222222; }
.services .menu .menu-item-wrapper .menu-item:active {
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98); }
.services .menu .menu-item-wrapper .menu-item.active {
background: #222222;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.services .menu .menu-item-wrapper .menu-item.active:after {
height: 14px;
bottom: -14px; }
.services .menu .menu-item-wrapper .menu-item:after {
content: '';
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #222222; }
.services .menu .menu-item-wrapper .menu-item .thumbnail {
box-sizing: border-box; }
.services .menu .menu-item__thumbnail {
margin-bottom: 15px;
display: inline-block; }
.services .menu .menu-item-wrapper .menu-item .icon {
.services .menu .menu-item__icon {
font-size: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 15px; }
.services .menu .menu-item-wrapper .menu-item .icon--svg {
.services .menu .menu-item__icon.icon--svg {
opacity: 0.8; }
.light-theme .services .menu .menu-item-wrapper .menu-item .icon--svg {
.light-theme .services .menu .menu-item__icon.icon--svg {
-webkit-filter: invert(1);
filter: invert(1); }
.services .menu .menu-item-wrapper .menu-item .title {
.services .menu .menu-item__title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 16px; }
.light-theme .services .menu .menu-item-wrapper .menu-item {
.services .menu .menu-item:hover .menu-item__inner {
background: #222222; }
.services .menu .menu-item:active {
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98); }
.services .menu .menu-item--active .menu-item__inner {
background: #222222;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-bottom: 40px;
margin-bottom: 0; }
.light-theme .services .menu .menu-item .menu-item__inner {
background: #f4f2f0; }
.light-theme .services .menu .menu-item-wrapper .menu-item:hover {
.light-theme .services .menu .menu-item .menu-item__inner:hover {
background: #ebe8e4; }
.light-theme .services .menu .menu-item-wrapper .menu-item.active {
.light-theme .services .menu .menu-item .menu-item__inner:after {
background: #ebe8e4; }
.light-theme .services .menu .menu-item-wrapper .menu-item:after {
.light-theme .services .menu .menu-item--active .menu-item__inner {
background: #ebe8e4; }
.services .service {
@ -6036,18 +6029,24 @@ main header {
background: #ebe8e4; }
@media (max-width: 800px) {
.services .menu .menu-item-wrapper {
width: 50%;
max-width: none;
min-width: none;
padding-bottom: 5px; }
.services .menu .menu-item-wrapper .menu-item {
.services .menu {
overflow-x: auto;
margin: 0 -20px; }
.services .menu::-webkit-scrollbar {
width: 0px;
height: 0px; }
.services .menu__inner {
width: 700px;
padding: 0 20px; }
.services .menu .menu-item {
width: 140px; }
.services .menu .menu-item__inner {
padding-top: 10px;
padding-bottom: 10px; }
.services .menu .menu-item-wrapper .menu-item:after {
display: none; }
.services .menu .menu-item--active .menu-item__inner {
padding-bottom: 20px; }
.services .service {
margin-top: 5px; } }
margin-top: 0; } }
.popularity-bars {
display: inline-block;

64
mopidy_iris/static/app.js
View File

@ -74825,21 +74825,21 @@ var Services = function (_React$Component) {
value: function renderMenu() {
if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]) {
var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.core.users[this.props.spotify.me.uri].images });
var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small', images: this.props.core.users[this.props.spotify.me.uri].images });
} else {
var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small' });
var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small' });
}
if (this.props.lastfm.me && this.props.core.users[this.props.lastfm.me.uri]) {
var lastfm_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.core.users[this.props.lastfm.me.uri].images });
var lastfm_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small', images: this.props.core.users[this.props.lastfm.me.uri].images });
} else {
var lastfm_icon = _react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'lastfm' });
var lastfm_icon = _react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'lastfm', className: 'menu-item__icon' });
}
if (this.props.genius.me && this.props.core.users[this.props.genius.me.uri]) {
var genius_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.core.users[this.props.genius.me.uri].images });
var genius_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small', images: this.props.core.users[this.props.genius.me.uri].images });
} else {
var genius_icon = _react2.default.createElement(_Icon2.default, { name: 'genius', type: 'svg' });
var genius_icon = _react2.default.createElement(_Icon2.default, { name: 'genius', type: 'svg', className: 'menu-item__icon' });
}
return _react2.default.createElement(
@ -74847,14 +74847,17 @@ var Services = function (_React$Component) {
{ className: 'menu' },
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
{ className: 'menu__inner' },
_react2.default.createElement(
_reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'spotify' ? ' active' : ''), to: this.props.active == 'spotify' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/spotify' },
{ className: "menu-item" + (this.props.active == 'spotify' ? ' menu-item--active' : ''), to: this.props.active == 'spotify' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/spotify' },
_react2.default.createElement(
'div',
{ className: 'menu-item__inner' },
spotify_icon,
_react2.default.createElement(
'div',
{ className: 'title' },
{ className: 'menu-item__title' },
'Spotify'
),
this.props.spotify.authorization ? _react2.default.createElement(
@ -74868,16 +74871,16 @@ var Services = function (_React$Component) {
)
)
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement(
_reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'lastfm' ? ' active' : ''), to: this.props.active == 'lastfm' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/lastfm' },
{ className: "menu-item" + (this.props.active == 'lastfm' ? ' menu-item--active' : ''), to: this.props.active == 'lastfm' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/lastfm' },
_react2.default.createElement(
'div',
{ className: 'menu-item__inner' },
lastfm_icon,
_react2.default.createElement(
'div',
{ className: 'title' },
{ className: 'menu-item__title' },
'LastFM'
),
this.props.lastfm.session ? _react2.default.createElement(
@ -74891,16 +74894,16 @@ var Services = function (_React$Component) {
)
)
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement(
_reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'genius' ? ' active' : ''), to: this.props.active == 'genius' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/genius' },
{ className: "menu-item" + (this.props.active == 'genius' ? ' menu-item--active' : ''), to: this.props.active == 'genius' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/genius' },
_react2.default.createElement(
'div',
{ className: 'menu-item__inner' },
genius_icon,
_react2.default.createElement(
'div',
{ className: 'title' },
{ className: 'menu-item__title' },
'Genius'
),
this.props.genius.authorization ? _react2.default.createElement(
@ -74914,13 +74917,13 @@ var Services = function (_React$Component) {
)
)
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement(
_reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'snapcast' ? ' active' : ''), to: this.props.active == 'snapcast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/snapcast' },
_react2.default.createElement(_Icon2.default, { name: 'devices' }),
{ className: "menu-item" + (this.props.active == 'snapcast' ? ' menu-item--active' : ''), to: this.props.active == 'snapcast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/snapcast' },
_react2.default.createElement(
'div',
{ className: 'menu-item__inner' },
_react2.default.createElement(_Icon2.default, { className: 'menu-item__icon', name: 'devices' }),
_react2.default.createElement(
'div',
{ className: 'title' },
@ -74937,16 +74940,16 @@ var Services = function (_React$Component) {
)
)
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement(
_reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'icecast' ? ' active' : ''), to: this.props.active == 'icecast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/icecast' },
_react2.default.createElement(_Icon2.default, { name: 'wifi_tethering' }),
{ className: "menu-item" + (this.props.active == 'icecast' ? ' menu-item--active' : ''), to: this.props.active == 'icecast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/icecast' },
_react2.default.createElement(
'div',
{ className: 'title' },
{ className: 'menu-item__inner' },
_react2.default.createElement(_Icon2.default, { className: 'menu-item__icon', name: 'wifi_tethering' }),
_react2.default.createElement(
'div',
{ className: 'menu-item__title' },
'Icecast'
),
this.props.core.http_streaming_enabled ? _react2.default.createElement(
@ -74960,6 +74963,7 @@ var Services = function (_React$Component) {
)
)
)
)
);
}
}, {

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 = "1537487995";
var build = "1537495549";
var version = "3.26.1";
// Construct the script tag

54
src/js/components/Services.js
View File

@ -287,68 +287,70 @@ class Services extends React.Component{
renderMenu(){
if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]){
var spotify_icon = <Thumbnail circle={true} size="small" images={this.props.core.users[this.props.spotify.me.uri].images} />
var spotify_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" images={this.props.core.users[this.props.spotify.me.uri].images} />
} else {
var spotify_icon = <Thumbnail circle={true} size="small" />
var spotify_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" />
}
if (this.props.lastfm.me && this.props.core.users[this.props.lastfm.me.uri]){
var lastfm_icon = <Thumbnail circle={true} size="small" images={this.props.core.users[this.props.lastfm.me.uri].images} />
var lastfm_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" images={this.props.core.users[this.props.lastfm.me.uri].images} />
} else {
var lastfm_icon = <Icon type="fontawesome" name="lastfm" />
var lastfm_icon = <Icon type="fontawesome" name="lastfm" className="menu-item__icon" />
}
if (this.props.genius.me && this.props.core.users[this.props.genius.me.uri]){
var genius_icon = <Thumbnail circle={true} size="small" images={this.props.core.users[this.props.genius.me.uri].images} />
var genius_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" images={this.props.core.users[this.props.genius.me.uri].images} />
} else {
var genius_icon = <Icon name="genius" type="svg" />
var genius_icon = <Icon name="genius" type="svg" className="menu-item__icon" />
}
return (
<div className="menu">
<div className="menu-item-wrapper">
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'}>
<div className="menu__inner">
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' menu-item--active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'}>
<div className="menu-item__inner">
{spotify_icon}
<div className="title">
<div className="menu-item__title">
Spotify
</div>
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
</Link>
</div>
<div className="menu-item-wrapper">
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}>
</Link>
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}>
<div className="menu-item__inner">
{lastfm_icon}
<div className="title">
<div className="menu-item__title">
LastFM
</div>
{this.props.lastfm.session ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
</Link>
</div>
<div className="menu-item-wrapper">
<Link className={"menu-item"+(this.props.active == 'genius' ? ' active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}>
</Link>
<Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}>
<div className="menu-item__inner">
{genius_icon}
<div className="title">
<div className="menu-item__title">
Genius
</div>
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Unauthorized</span>}
</Link>
</div>
<div className="menu-item-wrapper">
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
<Icon name="devices" />
</Link>
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
<div className="menu-item__inner">
<Icon className="menu-item__icon" name="devices" />
<div className="title">
Snapcast
</div>
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
</Link>
</div>
<div className="menu-item-wrapper">
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
<Icon name="wifi_tethering" />
<div className="title">
</Link>
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
<div className="menu-item__inner">
<Icon className="menu-item__icon" name="wifi_tethering" />
<div className="menu-item__title">
Icecast
</div>
{this.props.core.http_streaming_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
</div>
</Link>
</div>
</div>

122
src/scss/components/_services.scss
View File

@ -3,73 +3,46 @@
.menu {
@include clearfix();
margin: 0 -5px;
&__inner {
display: flex;
flex-wrap: wrap;
.menu-item-wrapper {
width: 25%;
min-width: 140px;
max-width: 200px;
padding: 5px 5px 10px 5px;
display: block;
box-sizing: border-box;
margin: 0 -5px;
}
.menu-item {
@include animate(0.1);
@include noanimate();
width: 20%;
min-width: 120px;
max-width: 200px;
padding: 0 5px;
display: block;
box-sizing: border-box;
border: 0;
&__inner {
position: relative;
padding: 30px 10px;
margin-bottom: 10px;
border-radius: 3px;
background: $darkest_grey;
display: block;
text-align: center;
box-sizing: border-box;
border: 0;
&:hover {
background: lighten($dark_grey, 4%);
}
&:active {
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
&.active {
background: lighten($dark_grey, 4%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:after {
height: 14px;
bottom: -14px;
}
}
&:after {
content: '';
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: lighten($dark_grey, 4%);
}
.thumbnail {
&__thumbnail {
margin-bottom: 15px;
display: inline-block;
}
.icon {
&__icon {
font-size: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 15px;
&--svg {
&.icon--svg {
opacity: 0.8;
.light-theme & {
@ -78,25 +51,50 @@
}
}
.title {
&__title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 16px;
}
&:hover {
.menu-item__inner {
background: lighten($dark_grey, 4%);
}
}
&:active {
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
&--active {
.menu-item__inner {
background: lighten($dark_grey, 4%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-bottom: 40px;
margin-bottom: 0;
}
}
.light-theme & {
.menu-item__inner {
background: $faint_grey;
&:hover{
background: darken($faint_grey, 4%);
}
&.active {
&:after {
background: darken($faint_grey, 4%);
}
}
&:after {
&--active {
.menu-item__inner {
background: darken($faint_grey, 4%);
}
}
@ -120,25 +118,37 @@
@include responsive($bp_medium){
.menu {
.menu-item-wrapper {
width: 50%;
max-width: none;
min-width: none;
padding-bottom: 5px;
overflow-x: auto;
margin: 0 -20px;
&::-webkit-scrollbar{
width: 0px;
height: 0px;
}
&__inner {
width: 700px;
padding: 0 20px;
}
.menu-item {
width: 140px;
&__inner {
padding-top: 10px;
padding-bottom: 10px;
}
&:after {
display: none;
&--active {
.menu-item__inner {
padding-bottom: 20px;
}
}
}
}
.service {
margin-top: 5px;
margin-top: 0;
}
}
}