diff --git a/public/css/styles.css b/public/css/styles.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..cd9397d234ac39bcf3e061f5d04e3d20ee2f90b8 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +.spotify-image { + display: inline-block; + text-align: center; + justify-content: center; + align-items: center; + height: 1rem; + width: 1rem; + max-height: 1rem; + max-width: 1rem; +} + +.spotify-image>img { + border: solid 1px #888; + text-align: center; + max-height: 1rem; + max-width: 1rem; + margin: auto; +} diff --git a/template.php b/template.php index d3f46878eaa53402e3dfdee57e28538956bde2ff..11cb5dbe5e2bc235f5d21670078a6deaa29871ef 100644 --- a/template.php +++ b/template.php @@ -18,7 +18,7 @@ <div class="container-fluid"> <a class="navbar-brand" href="playlist-generator"> <?php if (count($templateData['user']->images)) { ?> - <img src="<?php echo $templateData['user']->images[0]->url; ?>" alt="" class="rounded border" alt="<?php echo $templateData['user']->display_name; ?>" style="max-height: 2rem;"> + <img src="<?php echo $templateData['user']->images[0]->url; ?>" class="rounded border" alt="<?php echo $templateData['user']->display_name; ?>" style="max-height: 2rem;"> <?php } ?> <?php echo $templateData['user']->display_name; ?> </a> @@ -68,7 +68,7 @@ > <label class="custom-control-label" for="check-top-artist-<?php echo $artist->id; ?>"> <?php if (count($artist->images)) { ?> - <img src="<?php echo $artist->images[count($artist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" /> + <span class="spotify-image"><img src="<?php echo $artist->images[count($artist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" /></span> <?php } ?> <?php echo $artist->name; ?> </label> @@ -116,7 +116,7 @@ > <label class="custom-control-label" for="check-playlist-<?php echo $playlist->id; ?>"> <?php if (count($playlist->images)) { ?> - <img src="<?php echo $playlist->images[count($playlist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" /> + <span class="spotify-image"><img src="<?php echo $playlist->images[count($playlist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" /></span> <?php } ?> <?php echo $playlist->name; ?> </label>