andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Linter cleanup of css and html files.

Browse Source
This commit is contained in:
jcass 2016-02-29 18:28:02 +02:00
parent 70818dce65
commit 37f844ecf5
5 changed files with 92 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
mopidy_musicbox_webclient/static/css/webclient.css
View File

@ -14,18 +14,6 @@
****************************/ ****************************/
@media all and (min-width: 961px) { @media all and (min-width: 961px) {
/*header*/
.header-breakpoint.ui-grid-b .ui-block-a {
width: 30%;
}
.header-breakpoint.ui-grid-b .ui-block-b {
width: 30%;
}
.header-breakpoint.ui-grid-b .ui-block-c {
width: 30.1%;
}
/*playlists*/ /*playlists*/
.pl-breakpoint.ui-grid-a .ui-block-a { .pl-breakpoint.ui-grid-a .ui-block-a {
@ -49,15 +37,15 @@
} }
#playlisttracksback { #playlisttracksback {
display:none; display: none;
} }
#playlisttracksdiv { #playlisttracksdiv {
display:block; display: block;
} }
#playlistslistdiv { #playlistslistdiv {
display:block; display: block;
} }
/*search*/ /*search*/
@ -65,81 +53,60 @@
margin-left: .5em; margin-left: .5em;
} }
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b { .srch-breakpoint.ui-grid-a .ui-block-a,
.srch-breakpoint.ui-grid-a .ui-block-b {
width: 49%; width: 49%;
} }
} }
/* phone landscape */ /* phone landscape */
@media all and (max-width: 960px) { @media all and (max-width: 960px) {
/*header*/
.header-breakpoint.ui-grid-b .ui-block-a {
width: 35%;
clear: left;
}
.header-breakpoint.ui-grid-b .ui-block-b {
display: none;
}
.header-breakpoint.ui-grid-b .ui-block-c {
width: 33%;
}
/*playlists*/ /*playlists*/
.pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b { .pl-breakpoint .ui-block-a,
.pl-breakpoint .ui-block-b {
width: 100%; width: 100%;
} }
/*search*/ /*search*/
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b { .srch-breakpoint.ui-grid-a .ui-block-a,
.srch-breakpoint.ui-grid-a .ui-block-b {
width: 100%; width: 100%;
} }
#playlisttracksback { #playlisttracksback {
display:block; display: block;
} }
#playlisttracksdiv { #playlisttracksdiv {
display:none; display: none;
} }
#playlistslistdiv { #playlistslistdiv {
display:block; display: block;
} }
} }
/***************************** /*****************************
* Side Panel and Navigation * * Side Panel and Navigation *
*****************************/ *****************************/
.mainNav .fa{ .mainNav .fa {
float: right; float: right;
} }
.mainNav .navtxt{ .mainNav .navtxt {
float: left; float: left;
} }
.mainNav .navtxt:after{ .mainNav .navtxt:after {
clear: left; clear: left;
} }
.bottom{
width: 100%;
margin: -15px;
margin-top: 30px;
}
/**headers and controls**/
#nextimg, #previmg, #backimg, #controlsimg {
margin-top: 6px;
}
#contentHeadline a { #contentHeadline a {
color:white; color:white;
} }
/**headers and controls**/
#headermenubtn { #headermenubtn {
padding-top: 2px; padding-top: 2px;
} }
@ -170,9 +137,9 @@
/* Increase slider handle by 30%. */ /* Increase slider handle by 30%. */
.ui-slider-track.ui-mini .ui-slider-handle { .ui-slider-track.ui-mini .ui-slider-handle {
height: 22px; height: 22px;
width: 22px; width: 22px;
margin: -12px 0 0 -12px; margin: -12px 0 0 -12px;
} }
.ui-slider-input { .ui-slider-input {
@ -196,7 +163,7 @@
/******************** /********************
* Pages, content * * Pages, content *
********************/ ********************/
#page{ #page {
background-color: #fff; background-color: #fff;
} }
@ -212,11 +179,16 @@
display: none; display: none;
} }
#currentpane, #searchpane, #albumspane, #artistspane, #streampane { #currentpane,
display: none; #searchpane,
#albumspane,
#artistspane,
#streampane {
display: none;
} }
#artistviewimage, #albumviewcover { #artistviewimage,
#albumviewcover {
float: right; float: right;
height: 90px; height: 90px;
max-width: 90%; max-width: 90%;
@ -224,7 +196,7 @@
/*** home ***/ /*** home ***/
#homerows div { #homerows div {
text-align:center; text-align: center;
background-color: #2C3E50; background-color: #2C3E50;
padding: 2px; padding: 2px;
padding-top: 20px; padding-top: 20px;
@ -256,7 +228,7 @@
.table { .table {
padding: 0; padding: 0;
list-style-type:none; list-style-type: none;
} }
.table li:last-child { .table li:last-child {
@ -308,7 +280,7 @@
background-position: 4px 51%; background-position: 4px 51%;
} }
.currenttrack { .currenttrack {
background-image: url('../images/icons/play_alt_16x16.png'); background-image: url('../images/icons/play_alt_16x16.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #eee; background-color: #eee;
background-position: 4px 50%; background-position: 4px 50%;
@ -333,7 +305,7 @@
* Now Playing area * * Now Playing area *
**********************/ **********************/
#nowPlayingFooter{ #nowPlayingFooter {
height: 50px; height: 50px;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
@ -348,8 +320,8 @@
.footerControls div span { .footerControls div span {
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
} }
.footerControls #btplayNowPlaying { .footerControls #btplayNowPlaying {
@ -366,11 +338,15 @@
text-decoration: none; text-decoration: none;
} }
.popupArtistName, .popupTrackName, .popupAlbumName, .popupArtistName { .popupArtistName,
.popupTrackName,
.popupAlbumName,
.popupArtistName {
font-style: oblique; font-style: oblique;
} }
#controlspopup, #artistpopup, #coverpopup { #artistpopup,
#coverpopup {
max-width: 90%; max-width: 90%;
background: white; background: white;
padding: 5px; padding: 5px;
@ -381,50 +357,44 @@
margin-top: 10px; margin-top: 10px;
} }
#buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage { #controlspopupimage,
#coverpopupimage,
#artistpopupimage {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 10px; margin-bottom: 10px;
max-width:90%; max-width: 90%;
max-height:90%; max-height: 90%;
} }
#buttons { #popupTracksLv li,
font-size: 24px; #popupQueueLv li {
padding-right: 15px;
margin-bottom: 15px;
}
#popupTracksLv li, #popupQueueLv li {
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
#popupTracksLv, #popupQueueLv { #popupTracksLv,
#popupQueueLv {
border: 1px solid #aaa; border: 1px solid #aaa;
} }
/*dont hide clear buttons in text input */ /*dont hide clear buttons in text input */
.ui-input-clear-hidden { .ui-input-clear-hidden {
display:block !important; display: block !important;
} }
/**************** /****************
* Common use * * Common use *
****************/ ****************/
#playlistspane { #playlistspane {
margin: 0px !important; margin: 0 !important;
} }
a { a {
text-decoration: none !important; text-decoration: none !important;
} }
.nobreak, .btsquare {
display: inline !important;
}
.pull-right { .pull-right {
float: right; float: right;
font-size: 10px; font-size: 10px;
@ -437,27 +407,14 @@ a {
margin-top: 12px; margin-top: 12px;
} }
.hidden, #allresultloader, .loader {
display: none;
}
.breakafter {
margin-right: 15px;
}
.pright {
display: inline;
margin-top: 4px;
float: right;
}
/********************** /**********************
* Song information * * Song information *
**********************/ **********************/
.ui-footer{ .ui-footer {
border: 0px; border: 0px;
} }
#normalFooter{ #normalFooter {
height: 50px; height: 50px;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
@ -508,22 +465,14 @@ a {
padding: 3px; padding: 3px;
} }
#nowPlayingpane{ #nowPlayingpane {
text-align: center; text-align: center;
} }
/*helper*/ /*helper*/
.hidden{
display: none;
}
.ui-loader h1{
color: #efefef;
}
.settingscoll label { .ui-loader h1 {
font-size: 120%; color: #efefef;
font-weight: bold;
padding-top: 30px;
} }
/* panel workaround to make it responsive wrap push on wide viewports once open */ /* panel workaround to make it responsive wrap push on wide viewports once open */
@ -547,32 +496,26 @@ a {
} }
} }
/*smartphones*/ /*smartphones*/
@media (max-width: 35em){ @media (max-width: 35em) {
#nowPlayingpane{ #nowPlayingpane {
padding: 15px 25px 0px 25px; padding: 15px 25px 0 25px;
max-width:90%; max-width: 90%;
max-height:90%; max-height: 90%;
} }
.nowPlaying-artistInfo { .nowPlaying-artistInfo {
font-size: 12px; font-size: 12px;
} }
.nowPlaying-artistInfo h4{ .nowPlaying-artistInfo h3 {
margin: 0px; margin: 0 0 3px 0;
font-weight: normal;
font-size: 12px;
}
.nowPlaying-artistInfo h3{
margin: 0px 0px 3px 00px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
#controlspopupimage{ #controlspopupimage {
max-width:90%; max-width: 90%;
max-height:90%; max-height: 90%;
margin-bottom: 3px; margin-bottom: 3px;
} }
@ -605,7 +548,3 @@ input[type=text] {
-o-user-select: text; -o-user-select: text;
user-select: text; user-select: text;
} }
.mediaicon {
float: right;
}

1
mopidy_musicbox_webclient/static/dialog-success.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Success dialog</title>
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script>

39
mopidy_musicbox_webclient/static/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html manifest="mb.appcache"> <html manifest="mb.appcache">
<head> <head>
<title>Musicbox</title>
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendors/jquery_mobile_flat_ui_theme/jquery.mobile.flatui.min.css"/> <link rel="stylesheet" type="text/css" href="vendors/jquery_mobile_flat_ui_theme/jquery.mobile.flatui.min.css"/>
@ -99,9 +100,9 @@
</li> </li>
<li id="navshutdown" data-icon="false"> <li id="navshutdown" data-icon="false">
<a href="system.html"> <a href="system.html">
<span class="navtxt">System </span><i class="fa fa-power-off"></i></a> <span class="navtxt">System </span><i class="fa fa-power-off"></i></a>
</li> </li>
<li id="" data-icon="false"> <li data-icon="false">
<div><!-- slider for volume --> <div><!-- slider for volume -->
<a href="#" onclick="doMute(); return false;"><span title="Toggle mute"><i id="mutebt" class="fa fa-volume-up"></i></span></a> <a href="#" onclick="doMute(); return false;"><span title="Toggle mute"><i id="mutebt" class="fa fa-volume-up"></i></span></a>
<label for="volumeslider" class="ui-hidden-accessible">Volume</label> <label for="volumeslider" class="ui-hidden-accessible">Volume</label>
@ -118,14 +119,14 @@
<h3 id="coverpopupalbumname"></h3> <h3 id="coverpopupalbumname"></h3>
<h4 id="coverpopupartist"></h4> <h4 id="coverpopupartist"></h4>
<a href="#" onclick="closePopups();"><img id="coverpopupimage" src=""/></a> <a href="#" onclick="closePopups();"><img id="coverpopupimage" src="" alt="Album cover"/></a>
</div> </div>
<div id="artistpopup" data-role="popup" data-theme="c"> <div id="artistpopup" data-role="popup" data-theme="c">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a> class="ui-btn-right">Close</a>
<h4 id="artistpopupname">&nbsp;</h4> <h4 id="artistpopupname">&nbsp;</h4>
<a href="#" onclick="closePopups();"><img id="artistpopupimage" src=""/></a> <a href="#" onclick="closePopups();"><img id="artistpopupimage" src="" alt="Album artist"/></a>
</div> </div>
<div data-role="popup" data-transition="none" data-theme="c" id="popupBrowse"> <div data-role="popup" data-transition="none" data-theme="c" id="popupBrowse">
@ -170,8 +171,7 @@
<a href="#" onclick="showAlbumPopup('#popupTracks')">Show Album <span class="popupAlbumName"></span></a> <a href="#" onclick="showAlbumPopup('#popupTracks')">Show Album <span class="popupAlbumName"></span></a>
</li> </li>
<li id="popupArtistsLi"> <li id="popupArtistsLi">
<a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span <a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span class="popupArtistName"></span>
class="popupArtistName"></span>
</a> </a>
</li> </li>
<div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv"> <div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv">
@ -195,8 +195,7 @@
<a href="#" onclick="showAlbumPopup('#popupQueue')">Show Album <span class="popupAlbumName"></span></a> <a href="#" onclick="showAlbumPopup('#popupQueue')">Show Album <span class="popupAlbumName"></span></a>
</li> </li>
<li id="popupArtistsLi"> <li id="popupArtistsLi">
<a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span <a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span class="popupArtistName"></span>
class="popupArtistName"></span>
</a> </a>
</li> </li>
<div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv"> <div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv">
@ -280,7 +279,7 @@
<div id="nowPlayingpane" data-role="content" class="pane"> <div id="nowPlayingpane" data-role="content" class="pane">
<img id="controlspopupimage" src="images/default_cover.png" /> <img id="controlspopupimage" src="images/default_cover.png" alt="Album cover"/>
<div class="nowPlaying-artistInfo"> <div class="nowPlaying-artistInfo">
@ -305,8 +304,10 @@
<ul id="playlistslist" class="table"></ul> <ul id="playlistslist" class="table"></ul>
</div> </div>
<div class="ui-block-b scroll" id="playlisttracksdiv"> <div class="ui-block-b scroll" id="playlisttracksdiv">
<div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;"><a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a></div> <div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;">
<ul class="table" id="playlisttracks"></ul> <a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a>
</div>
<ul class="table" id="playlisttracks"></ul>
</div> </div>
</div> </div>
</div> </div>
@ -328,7 +329,7 @@
</div> </div>
<div data-role="content" class="pane" id="albumspane"> <div data-role="content" class="pane" id="albumspane">
<a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover"/></a> <a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover" alt="Album cover"/></a>
<h3 id="h_albumname"></h3> <h3 id="h_albumname"></h3>
<h5 id="h_albumartist"></h5> <h5 id="h_albumartist"></h5>
@ -337,7 +338,7 @@
</div> </div>
<div data-role="content" class="pane" id="artistspane"> <div data-role="content" class="pane" id="artistspane">
<a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage"/></a> <a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" alt="Album artist"/></a>
<h3 id="h_artistname"></h3> <h3 id="h_artistname"></h3>
<ul class="table" id="artiststable"></ul> <ul class="table" id="artiststable"></ul>
@ -350,11 +351,13 @@
<div class="ui-block"> <div class="ui-block">
<form> <form>
<p>Search for artists, albums, or specific tracks. <p>Search for artists, albums, or specific tracks.
<select id="selectSearchService"> <!-- data-native-menu="false"> <!-- multiple="multiple" data-native-menu="false"> <select id="selectSearchService">
<!-- data-native-menu="false">
multiple="multiple" data-native-menu="false">
<option data-placeholder="true">Choose services</option> --> <option data-placeholder="true">Choose services</option> -->
</select> </select>
<input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true" <input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true"
onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return searchPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return initSearch(event.value);"> <button class="btn" type="button" onclick="return initSearch(event.value);">
Search! Search!
</button> </button>
@ -403,13 +406,13 @@
Get currently playing Get currently playing
</button> </button>
<input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true" <input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return streamPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return playStreamUri();"> <button class="btn" type="button" onclick="return playStreamUri();">
Play Play
</button> </button>
<input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true" <input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return streamPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return addFavourite();"> <button class="btn" type="button" onclick="return addFavourite();">
Save Save
</button> </button>
@ -426,7 +429,7 @@
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter"> <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
<div class="footerControls"> <div class="footerControls">
<div class="songinfo" id="songinfo"> <div class="songinfo" id="songinfo">
<a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png"/></div></a> <a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png" alt="Album cover"/></div></a>
<div class="songinfo-text"> <div class="songinfo-text">
<div id="infoname"></div> <div id="infoname"></div>
<div id="infoartist"></div> <div id="infoartist"></div>

2
mopidy_musicbox_webclient/static/mb.appcache
View File

@ -1,6 +1,6 @@
CACHE MANIFEST CACHE MANIFEST
# 2016-02-28:v1 # 2016-02-29:v1
NETWORK: NETWORK:
* *

1
mopidy_musicbox_webclient/static/system.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>System</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">