mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-25 10:58:00 +00:00
Code Issues Releases Wiki Activity

Improved alignment of icons

Browse Source
This commit is contained in:
jcorporation
2018-07-09 19:44:42 +01:00
parent 6c1cf3e745
commit b3916fa6f4
3 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
htdocs/css/mpd.css
View File

@@ -114,10 +114,8 @@ button {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */ /* Support for Safari and Chrome. */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
/* Support for Firefox. */ /* Support for Firefox. */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
/* Support for IE. */ /* Support for IE. */
font-feature-settings: 'liga'; font-feature-settings: 'liga';
} }
@@ -159,28 +157,32 @@ main {
width:160px; width:160px;
} }
.title-icon {
float:left;
margin-right:5px;
font-size:1.8rem;
}
.header-logo { .header-logo {
font-size:2rem; font-size:2rem;
float:left; float:left;
margin-right:5px; margin-right:5px;
} }
#BrowseFilesystemFilterLetters > button, .letters > button {
#BrowseDatabaseFilterLetters > button,
#BrowsePlaylistsFilterLetters > button
{
width:28px; width:28px;
height:28px;
} }
.col-md { .col-md {
min-width:260px; max-width:250px;
max-width:260px; min-width:250px;
} }
.card-img-top { a.card-img-top {
min-height:250px; height:250px;
background-repeat:no-repeat; overflow:hidden;
background-color:#eee; display:block;
} }
button.active { button.active {

20
htdocs/index.html
View File

@@ -198,7 +198,7 @@
<div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar"> <div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button> <button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsFilterLetters"> <div class="dropdown-menu bg-dark px-2 letters" id="BrowsePlaylistsFilterLetters">
</div> </div>
</div> </div>
<div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2"> <div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
@@ -256,7 +256,7 @@
</div> </div>
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button> <button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabaseFilterLetters"> <div class="dropdown-menu bg-dark px-2 letters" id="BrowseDatabaseFilterLetters">
</div> </div>
</div> </div>
<div id="BrowseDatabasePaginationTop" class="btn-group mr-2"> <div id="BrowseDatabasePaginationTop" class="btn-group mr-2">
@@ -315,7 +315,7 @@
</div> </div>
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button> <button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemFilterLetters"> <div class="dropdown-menu bg-dark px-2 letters" id="BrowseFilesystemFilterLetters">
</div> </div>
</div> </div>
<div id="BrowseFilesystemPaginationTop" class="btn-group mr-2"> <div id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
@@ -468,7 +468,7 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title"><span class="material-icons">error</span> Connection Error</h5> <h5 class="modal-title"><span class="material-icons title-icon">error</span> Connection Error</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Connection to myMPD failed. Trying to reconnect.</p> <p>Connection to myMPD failed. Trying to reconnect.</p>
@@ -482,7 +482,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5> <h5 class="modal-title" id="settingsLabel"><span class="material-icons title-icon">settings</span> Settings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
@@ -576,13 +576,13 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="aboutLabel"><span class="material-icons">play_circle_outline</span> About</h5> <h5 class="modal-title" id="aboutLabel"><span class="material-icons title-icon">play_circle_outline</span> About</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4><a class="text-success" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4> <h4><a class="text-success" href="https://github.com/jcorporation/ympd">myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
<p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a class="text-success" href="http://www.ympd.org">ympd</a>.</p> <p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a class="text-success" href="http://www.ympd.org">ympd</a>.</p>
<ul> <ul>
<li>Version: <span id="mympdVersion"></span></li> <li>Version: <span id="mympdVersion"></span></li>
@@ -619,7 +619,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5> <h5 class="modal-title" id="addstreamLabel"><span class="material-icons title-icon">view_stream</span> Add Stream</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
@@ -646,7 +646,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5> <h5 class="modal-title" id="savequeueLabel"><span class="material-icons title-icon">save</span> Save Queue</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
@@ -673,7 +673,7 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="savequeueLabel"><span class="material-icons">music_note</span> Song Details</h5> <h5 class="modal-title" id="savequeueLabel"><span class="material-icons title-icon">music_note</span> Song Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>

2
htdocs/js/mpd.js
View File

@@ -977,7 +977,7 @@ function parseListDBtags(obj) {
card.classList.add('mr-0'); card.classList.add('mr-0');
card.setAttribute('id', id); card.setAttribute('id', id);
card.innerHTML = '<div class="card mb-4" id="card' + id + '">' + card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
' <a href="#"><img class="card-img-top" src="" ></a>' + ' <a href="#" class="card-img-top"><img class="card-img-top" src="" ></a>' +
' <div class="card-body">' + ' <div class="card-body">' +
' <h5 class="card-title">' + obj.searchstr + '</h5>' + ' <h5 class="card-title">' + obj.searchstr + '</h5>' +
' <h4 class="card-title">' + obj.data[i].value + '</h4>' + ' <h4 class="card-title">' + obj.data[i].value + '</h4>' +