mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-04-14 06:43:16 +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

26
htdocs/css/mpd.css

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

20
htdocs/index.html

@ -198,7 +198,7 @@
<div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
<div class="btn-group mr-2">
<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 id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
@ -256,7 +256,7 @@
</div>
<div class="btn-group mr-2">
<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 id="BrowseDatabasePaginationTop" class="btn-group mr-2">
@ -315,7 +315,7 @@
</div>
<div class="btn-group mr-2">
<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 id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
@ -468,7 +468,7 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<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 class="modal-body">
<p>Connection to myMPD failed. Trying to reconnect.</p>
@ -482,7 +482,7 @@
<div class="modal-dialog">
<div class="modal-content">
<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">
<span aria-hidden="true">&times;</span>
</button>
@ -576,13 +576,13 @@
<div class="modal-dialog">
<div class="modal-content">
<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">
<span aria-hidden="true">&times;</span>
</button>
</div>
<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>
<ul>
<li>Version: <span id="mympdVersion"></span></li>
@ -619,7 +619,7 @@
<div class="modal-dialog">
<div class="modal-content">
<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">
<span aria-hidden="true">&times;</span>
</button>
@ -646,7 +646,7 @@
<div class="modal-dialog">
<div class="modal-content">
<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">
<span aria-hidden="true">&times;</span>
</button>
@ -673,7 +673,7 @@
<div class="modal-dialog">
<div class="modal-content">
<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">
<span aria-hidden="true">&times;</span>
</button>

2
htdocs/js/mpd.js

@ -977,7 +977,7 @@ function parseListDBtags(obj) {
card.classList.add('mr-0');
card.setAttribute('id', 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">' +
' <h5 class="card-title">' + obj.searchstr + '</h5>' +
' <h4 class="card-title">' + obj.data[i].value + '</h4>' +