more mobile ui tweaks

This commit is contained in:
Trevor Squillario 2014-12-07 18:43:31 -05:00
parent fa7b4e076a
commit fa551f270d
4 changed files with 45 additions and 17 deletions

View file

@ -109,7 +109,7 @@
}
};
$rootScope.showQueue = function () {
$('#SideBar').css('display', '');
$('#SideBar').css('display', 'block');
$('#right-component').removeClass('lgcolumn_expanded');
};
$rootScope.hideQueue = function () {

View file

@ -1,12 +1,33 @@
/*@media only screen and (max-device-width: 680px) {*/
@media only screen and (max-width: 500px) {
}
@media only screen and (max-width: 600px) {
.smcolumn {
width: 75%;
background: rgba(255, 255, 255, 0.94);
background: rgba(255, 255, 255, 0.8);
border-bottom; none;
min-width: 292px;
}
#nav {
border-bottom: 1px solid #D5D5D5;
height: 39px;
box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2);
}
.smcolumn {
top: 80px;
margin-bottom: -82px;
}
.lgsection {
top: 80px;
margin-bottom: -82px;
}
.subactions {
margin: 11px 5px 0 0;
float: left;
}
}
@media only screen and (max-width: 840px) {
.lgcolumn {
margin-left: 0;
}
@ -26,6 +47,7 @@
ul.songlist .albumgrid {
padding: 0px 0px 22px 0px;
width: 150px;
height: 160px;
}
ul.songlist .albumgrid .itemactions {
width: auto;
@ -34,9 +56,12 @@
padding: 5px;
background-position: center center;
}
ul.songlist .albumgrid .itemactions a:hover {
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
ul.songlist .albumgrid .albumart img {
width: 100px;
height: 100px;
width: 125px;
height: 125px;
margin-right: 5px;
}
ul.songlist .albumgrid .albuminfo {
@ -58,11 +83,7 @@
#songdetails_controls {
display: none;
}
.actions {
margin-left: 184px;
}
#globalactions {
display: none;
}
#SettingsForm {
}
@ -70,6 +91,9 @@
@media only screen and (max-width: 1200px) {
#SideBar {
display: none;
top: 80px;
margin-bottom: -82px;
width: 100%;
}
.lgcolumn {
margin-right: 0 !important;

View file

@ -230,10 +230,11 @@ span.apiversion
margin-left: -100%;
*/
border-right: 1px solid #ddd;
border-top: 1px solid #cbcbcb;
position: absolute;
top: 40px;
left: 0;
margin-bottom: -40px;
margin-bottom: -42px;
background: #fff;
}
.smcolumn .leftactions {
@ -285,10 +286,11 @@ span.apiversion
height: 100%;
overflow-y: auto;
width: 350px;
background: rgba(255, 255, 255, 0.94);
background: rgba(255, 255, 255, 0.98);
border-top: 1px solid #cbcbcb;
border-left: 1px solid #ddd;
position: absolute;
top: 41px;
top: 40px;
right: 0;
margin-bottom: -42px;
}
@ -809,7 +811,7 @@ ul.songlist .albumgrid .albumart img {
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)));
}
ul.songlist li:hover .albumgrid .albumart img {
ul.songlist li:hover .albumgrid .albumart img {
border: 4px solid #ccc;
position: relative;
top: -4px;
@ -836,7 +838,9 @@ ul.songlist .albumgrid .itemactions a
{
height: 20px
}
ul.songlist .albumgrid .itemactions a:hover {
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
ul.songlist .row
{
cursor: pointer;
@ -1076,7 +1080,7 @@ ul.songlist li:hover
.actions
{
height: 30px;
margin: 6px 5px 0 320px;
margin: 6px 5px 0 184px;
padding: 0 0 0 5px;
}
.subactions
@ -1694,7 +1698,7 @@ a.hoverSelected { opacity: .6; }
background: #fcfcfc;
overflow: auto;
float: left;
margin: 5px;
margin: 5px 5px 0 5px;
}
input
{

View file

@ -21,7 +21,7 @@
<div id="submenu_AddToPlaylist" class="submenu shadow" style="display: none;">
<a href="" ng-repeat="o in playlistMenu" ng-click="addToPlaylist(o.id)">{{o.name}}</a>
</div>
<a href="" class="button" id="action_NewPlaylist" title="New Playlist" ng-click="newPlaylist()">+ New</a>
<a href="" class="button" id="action_NewPlaylist" title="New Playlist" ng-click="newPlaylist()">+</a>
</div>
<div id="SubsonicAlbums" class="lgsection" split>
<!-- Album -->