responsive layout design changes
This commit is contained in:
Trevor Squillario
parent
acf49e112e
commit
a0e8775b12
8 changed files with 76 additions and 63 deletions
|
|
@ -124,9 +124,11 @@
|
|||
};
|
||||
$rootScope.showArtists = function () {
|
||||
$('#left-component').css('display', '');
|
||||
$('#right-component').removeClass('lgcolumn_expandedleft');
|
||||
};
|
||||
$rootScope.hideArtists = function () {
|
||||
$('#left-component').css('display', 'none');
|
||||
$('#right-component').addClass('lgcolumn_expandedleft');
|
||||
};
|
||||
$scope.toggleArtists = function () {
|
||||
if ($('#left-component').css('display') == 'none') {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
angular.module('JamStash')
|
||||
angular.module('JamStash')
|
||||
|
||||
.service('player', ['$rootScope', '$window', 'utils', 'globals', 'model', 'notifications',
|
||||
function ($rootScope, $window, utils, globals, model, notifications) {
|
||||
|
|
@ -212,21 +212,6 @@
|
|||
$rootScope.loadjPlayer(player1, url, suffix, loadonly, position);
|
||||
}
|
||||
|
||||
if (!loadonly) {
|
||||
// Sway.fm UnityShim
|
||||
var playerState = {
|
||||
playing: true,
|
||||
title: title,
|
||||
artist: artist,
|
||||
favorite: false,
|
||||
albumArt: coverartfull
|
||||
};
|
||||
if ($rootScope.unity) {
|
||||
$rootScope.unity.sendState(playerState);
|
||||
}
|
||||
// End UnityShim
|
||||
}
|
||||
|
||||
var spechtml = '';
|
||||
var data = $(player1).data().jPlayer;
|
||||
for (var i = 0; i < data.solutions.length; i++) {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
<div class="clear"></div>
|
||||
</div><!-- end #content -->
|
||||
<div id="SideBar">
|
||||
<div id="SideBar" ng-if="queue.length > 0">
|
||||
<div class="headeractions">
|
||||
<a class="buttonimg" title="Shuffle Queue" ng-click="queueShuffle()"><img src="images/fork_gd_11x12.png"></a>
|
||||
<a class="buttonimg" id="action_Empty" title="Delete Queue" ng-click="queueEmpty()"><img src="images/trash_fill_gd_12x12.png"></a>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</div>
|
||||
<div class="header">Queue</div>
|
||||
<div id="SideQueue">
|
||||
<ul class="simplelist songlist noselect" ng-if="queue.length > 0">
|
||||
<ul class="simplelist songlist noselect">
|
||||
<div ng-repeat="song in [queue] track by $index" class="songs" ng-include src="'common/songs_lite.html'" sortable></div>
|
||||
</ul>
|
||||
<div class="colspacer"></div>
|
||||
|
|
@ -109,7 +109,6 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playeractionssmall"></div>
|
||||
<div id="playermiddle">
|
||||
<div id="audiocontainer">
|
||||
<div class="audiojs" id="audio_wrapper0">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div id="settings" class="tabcontent">
|
||||
<div class="section fullsection floatleft">
|
||||
|
||||
<form class="form" id="Settings">
|
||||
<form class="form" id="SettingsForm">
|
||||
<div class="subsection floatleft">
|
||||
<h3 class="title">Login</h3>
|
||||
<label for="Username">Username <span class="red">*</span></label><br />
|
||||
|
|
@ -11,12 +11,10 @@
|
|||
<label for="Server">Server <span class="red">*</span> (<a href="" title="Connect to Demo Subsonic Server" ng-click="setupDemo()">Demo</a>)</label><br />
|
||||
<input type="text" id="Server" name="Server" class="xlarge" title="Subsonic Server URL Ex: http://host:port" ng-model="settings.Server" /><br />
|
||||
<!--<a href="#" class="button" id="action_RequestURL" title="Request Permission for Server URL">Enable URL</a><br />-->
|
||||
<label for="SubsonicVersion">Subsonic API: <span class="apiversion" id="SubsonicVersion">{{settings.ApiVersion}}</span></label><br />
|
||||
<label for="SMStats">Audio State: <span id="SMStats"></span></label><br /><br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="subsection floatleft">
|
||||
<h3 class="title">Options</h3>
|
||||
<label for="SubsonicVersion">Subsonic API: <span class="apiversion" id="SubsonicVersion">{{settings.ApiVersion}}</span></label><br />
|
||||
<label for="SMStats">Audio State: <span id="SMStats"></span></label><br />
|
||||
<label for="Theme">Theme</label><br />
|
||||
<select id="Theme" name="Theme" class="large" ng-model="settings.Theme" ng-options="o for o in Themes"></select><br />
|
||||
<!--<label for="AutoFilter">Filter</label><br />
|
||||
|
|
@ -73,8 +71,6 @@
|
|||
<label for="SaveTrackPosition">Save Progress</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subsection floatleft">
|
||||
<div class="checkboxes">
|
||||
<fieldset>
|
||||
<legend class="aligncenter">Jukebox</legend>
|
||||
|
|
@ -142,17 +138,6 @@
|
|||
<br />Not related to a Subsonic License!</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="subsection floatleft">
|
||||
<h3 class="title">Change Log</h3>
|
||||
<ul id="ChangeLog" class="preferences">
|
||||
<li class="log" ng-repeat="o in changeLog"><span class="version">{{o.date + ' - ' + o.version}}</span>
|
||||
<span class="changes" ng-repeat="a in o.changes" ng-bind-html="a.text"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="" ng-click="changeLogShowMore()">Show More</a>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="subsection floatleft">
|
||||
<h3 class="title">Links</h3>
|
||||
<ul class="preferences">
|
||||
|
|
@ -167,6 +152,17 @@
|
|||
<li>Audio Library - <a href="http://jplayer.org" target="_blank">http://jplayer.org</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="subsection floatleft">
|
||||
<h3 class="title">Change Log</h3>
|
||||
<ul id="ChangeLog" class="preferences">
|
||||
<li class="log" ng-repeat="o in changeLog"><span class="version">{{o.date + ' - ' + o.version}}</span>
|
||||
<span class="changes" ng-repeat="a in o.changes" ng-bind-html="a.text"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="" ng-click="changeLogShowMore()">Show More</a>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
/*@media only screen and (max-device-width: 680px) {*/
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width: 500px) {
|
||||
|
||||
.smcolumn {
|
||||
width: 100%;
|
||||
width: 75%;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-bottom; none;
|
||||
min-width: 292px;
|
||||
}
|
||||
.lgcolumn {
|
||||
margin-left: 0;
|
||||
}
|
||||
#SideBar {
|
||||
display: none;
|
||||
}
|
||||
ul.songlist li {
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
|
|
@ -27,12 +27,18 @@
|
|||
width: auto;
|
||||
}
|
||||
ul.songlist .albumgrid .itemactions a {
|
||||
padding: 6px 8px;
|
||||
padding: 6px;
|
||||
background-position: center center;
|
||||
}
|
||||
ul.songlist .albumgrid {
|
||||
padding: 0px 0px 22px 0px;
|
||||
}
|
||||
ul.songlist .albumgrid .albumart img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
ul.songlist .albumgrid .albuminfo {
|
||||
width: 150px;
|
||||
}
|
||||
ul.songlist .album a:hover {
|
||||
background-position: center center;
|
||||
}
|
||||
|
|
@ -45,4 +51,23 @@
|
|||
#songdetails_controls {
|
||||
display: none;
|
||||
}
|
||||
.actions {
|
||||
margin-left: 184px;
|
||||
}
|
||||
#globalactions {
|
||||
display: none;
|
||||
}
|
||||
#SettingsForm {
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
#SideBar {
|
||||
display: none;
|
||||
}
|
||||
.lgcolumn {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
ul.songlist .albumgrid {
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
|
@ -221,7 +221,6 @@ span.apiversion
|
|||
}
|
||||
.smcolumn
|
||||
{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
outline: none;
|
||||
|
|
@ -237,6 +236,10 @@ span.apiversion
|
|||
margin-bottom: -40px;
|
||||
background: #fff;
|
||||
}
|
||||
.smcolumn .leftactions {
|
||||
margin: 0 5px 0 0;
|
||||
float: right;
|
||||
}
|
||||
.lgcolumn
|
||||
{
|
||||
height: 100%;
|
||||
|
|
@ -244,11 +247,16 @@ span.apiversion
|
|||
outline: none;
|
||||
margin-left: 312px;
|
||||
margin-right: 350px;
|
||||
min-width: 400px;
|
||||
}
|
||||
.lgcolumn_expanded
|
||||
{
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.lgcolumn_expandedleft
|
||||
{
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.colspacer {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
|
|
@ -307,7 +315,7 @@ span.apiversion
|
|||
}
|
||||
.fullsection
|
||||
{
|
||||
min-width: 450px;
|
||||
min-width: 300px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-top: 1px solid #cbcbcb;
|
||||
|
|
@ -797,7 +805,7 @@ ul.songlist .albumgrid .albumart img {
|
|||
width: 160px;
|
||||
height: 160px;
|
||||
background: url(../images/albumdefault_160.jpg) no-repeat;
|
||||
margin: 3px 18px 0 18px;
|
||||
margin: 3px 0 0 18px;
|
||||
padding: 0px;
|
||||
-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.2)));
|
||||
}
|
||||
|
|
@ -1005,7 +1013,7 @@ ul.songlist li:hover
|
|||
}
|
||||
#AZIndex
|
||||
{
|
||||
float: right;
|
||||
float: left;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
#AZIndex a
|
||||
|
|
@ -1089,7 +1097,7 @@ ul.songlist li:hover
|
|||
}
|
||||
#search
|
||||
{
|
||||
margin: 6px 0 0 0;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
}
|
||||
.submenu
|
||||
|
|
@ -1732,8 +1740,7 @@ input.chat
|
|||
input#Search
|
||||
{
|
||||
border: 1px solid #DCDCDC;
|
||||
width: 200px;
|
||||
margin: 0 0 0 5px;
|
||||
width: 140px;
|
||||
}
|
||||
select
|
||||
{
|
||||
|
|
@ -1756,8 +1763,9 @@ select#SearchType
|
|||
}
|
||||
select.folders
|
||||
{
|
||||
width: 75%;
|
||||
width: 152px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
}
|
||||
.submit
|
||||
{
|
||||
|
|
|
|||
|
|
@ -200,12 +200,6 @@ angular.module('jamstash.subsonic.service', ['jamstash.settings', 'jamstash.util
|
|||
if (SelectedAlbumSort.id != "default") {
|
||||
sortSubsonicAlbums(SelectedAlbumSort.id);
|
||||
}
|
||||
/* Find a better way to show/hide left
|
||||
var left = $('#left-component');
|
||||
if (left.css('display') != 'none') {
|
||||
$rootScope.hideArtists();
|
||||
}
|
||||
*/
|
||||
} else {
|
||||
notifications.updateMessage('No Albums Returned :(', true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,6 @@
|
|||
<a href="" class="button" id="action_RefreshArtists" title="Refresh List" ng-click="refreshArtists()"><img class="pad" src="images/reload_9x11.png" /></a>
|
||||
<a href="" class="button" id="action_RescanLibrary" title="Rescan Library" ng-click="rescanLibrary()"><img class="pad" src="images/loop_alt1_gd_12x9.png" /></a>
|
||||
</div>
|
||||
<div id="search">
|
||||
<input type="text" id="Search" name="Search" class="medium" title="Wildcards (*) supported" placeholder="Search..." ng-enter="search()"/>
|
||||
<select id="SearchType" name="SearchType" ng-model="SearchType.id" ng-options="o.id as o.name for o in SearchTypes"></select>
|
||||
<a href="" class="button" id="action_Search" title="Search" ng-click="search()"><img class="pad" src="images/magnifying_glass_alt_12x12.png" /></a>
|
||||
</div>
|
||||
<div class="subactions">
|
||||
<div class="floatleft" ng-show="selectedPlaylist">
|
||||
<label>Playlist Actions</label>
|
||||
|
|
@ -38,7 +33,7 @@
|
|||
</form>
|
||||
<div id="BreadCrumb">
|
||||
<div id="BreadCrumbs" class="floatleft">
|
||||
<div class="crumb"><a ng-click="toggleArtists()">Artists</a> ></div>
|
||||
<div class="crumb"><a ng-click="toggleArtists()" title="Toggle Artists">Artists</a> ></div>
|
||||
<div class="crumb" ng-repeat="o in BreadCrumbs | filter:{type:'artist'}"><a ng-click="getAlbums(o.id, o.name)">{{o.name}}</a> ></div>
|
||||
<div class="crumb" ng-repeat="o in BreadCrumbs | filter:{type:'album'}"><a ng-click="getSongs(o.id, '')">{{o.name}}</a> ></div>
|
||||
</div>
|
||||
|
|
@ -83,12 +78,21 @@
|
|||
<li class="" ng-click="togglePlaylist()"><a href="">Playlists</a></li>
|
||||
<li class="" ng-click="togglePodcast()"><a href="">Podcasts</a></li>
|
||||
</ul>
|
||||
<div class="leftactions">
|
||||
<a href="" class="button" id="action_ToggleArtists" ng-click="toggleArtists()" title="Toggle Artists"><img src="images/arrow_right_gl_8x8.png" /></a>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div id="IndexContainer" class="leftsubsection" ng-show="showIndex">
|
||||
<select id="MusicFolders" class="folders" ng-model="$root.SelectedMusicFolder" ng-options="o.name for o in MusicFolders"></select>
|
||||
<div id="AZIndex" ng-show="!settings.HideAZ" class="subactionsfixed">
|
||||
<a href="" ng-click="toggleAZ()" stop-event="click">A-Z</a>
|
||||
</div>
|
||||
<div id="search">
|
||||
<input type="text" id="Search" name="Search" class="medium" title="Wildcards (*) supported" placeholder="Search..." ng-enter="search()"/>
|
||||
<select id="SearchType" name="SearchType" ng-model="SearchType.id" ng-options="o.id as o.name for o in SearchTypes"></select>
|
||||
<a href="" class="button" id="action_Search" title="Search" ng-click="search()"><img class="pad" src="images/magnifying_glass_alt_12x12.png" /></a>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<ul id="AutoAlbumContainer" class="simplelist mainlist noselect">
|
||||
<li class="index" id="auto">Auto Albums</li>
|
||||
<li class="item" ng-repeat="o in AutoAlbums" id="{{o.id}}" ng-click="getAlbumListBy(o.id)" ng-class="{'selected': selectedAutoAlbum == o.id }">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue