Skip to content
Snippets Groups Projects
Commit e92704f6 authored by Benoît Harrault's avatar Benoît Harrault
Browse files

Merge branch '17-improve-layout' into 'master' 

Resolve "Improve layout"

Closes #17

See merge request !12
parents 8a753580 f015f0dd
No related branches found
No related tags found
1 merge request!12Resolve "Improve layout"
Hide whitespace changes
Inline Side-by-side
public/index.php
+ 5
− 2
View file @ e92704f6
...@@ -40,6 +40,9 @@ $_SESSION['refreshToken'] = $session->getRefreshToken(); ...@@ -40,6 +40,9 @@ $_SESSION['refreshToken'] = $session->getRefreshToken();
$user = $api->me(); $user = $api->me();
$topArtistsCount = 48;
$playlistsCount = 24;
$templateData = [ $templateData = [
'user' => $user, 'user' => $user,
'playlists' => [], 'playlists' => [],
...@@ -165,8 +168,8 @@ if ($generatePlaylistFromPlaylist) { ...@@ -165,8 +168,8 @@ if ($generatePlaylistFromPlaylist) {
$playlistLink = '<a href="'.$newPlaylist->external_urls->spotify.'">'.$newPlaylistName.'</a>'; $playlistLink = '<a href="'.$newPlaylist->external_urls->spotify.'">'.$newPlaylistName.'</a>';
$templateData['infos'][] = 'Ok created new playlist with '.count($pickedTrackIds).' tracks: '.$playlistLink; $templateData['infos'][] = 'Ok created new playlist with '.count($pickedTrackIds).' tracks: '.$playlistLink;
} else { } else {
$templateData['topArtists'] = $api->getMyTop('artists', ['limit' => 24, 'time_range' => 'short_term'])->items; $templateData['topArtists'] = $api->getMyTop('artists', ['limit' => $topArtistsCount, 'time_range' => 'short_term'])->items;
$templateData['playlists'] = $api->getUserPlaylists($user->id, ['limit' => 24])->items; $templateData['playlists'] = $api->getUserPlaylists($user->id, ['limit' => $playlistsCount])->items;
} }
require '../template.php'; require '../template.php';
template.php
+ 120
− 114
View file @ e92704f6
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spotify playlist generator</title> <title>Spotify playlist generator</title>
<link rel="icon" type="image/png" href="img/favicon.png"/> <link rel="icon" type="image/png" href="img/favicon.png"/>
...@@ -11,132 +13,136 @@ ...@@ -11,132 +13,136 @@
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
</head> </head>
<body class="container mt-2"> <body>
<div class="row"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="col-2"> <div class="container-fluid">
<a class="navbar-brand" href="playlist-generator">
<div class="card"> <?php if (count($templateData['user']->images)) { ?>
<?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="card-img-top" alt="<?php echo $templateData['user']->display_name; ?>"> <?php } ?>
<?php } ?> <?php echo $templateData['user']->display_name; ?>
<div class="card-body"> </a>
<h5 class="card-title"><?php echo $templateData['user']->display_name; ?></h5> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<a href="<?php echo $templateData['user']->external_urls->spotify; ?>" class="btn btn-primary">View profile</a> <span class="navbar-toggler-icon"></span>
</div> </button>
<div class="card-footer"> <div class="collapse navbar-collapse" id="navbarNav">
<a href="playlist-generator" class="card-link">refresh</a> <ul class="navbar-nav">
<br/> <li class="nav-item">
<a href="?logout" class="card-link">disconnect</a> <a class="nav-link" href="<?php echo $templateData['user']->external_urls->spotify; ?>">Profile</a>
</div> </li>
<li class="nav-item">
<a class="nav-link" href="?logout">Logout</a>
</li>
</ul>
</div> </div>
</div> </div>
<div class="col-10"> </nav>
<div class="container-fluid mb-5">
<?php if (count($templateData['errors'])) { ?> <?php if (count($templateData['errors'])) { ?>
<?php foreach ($templateData['errors'] as $message) { ?> <?php foreach ($templateData['errors'] as $message) { ?>
<div class="alert alert-warning" role="alert"><?php echo $message; ?></div> <div class="alert alert-warning" role="alert"><?php echo $message; ?></div>
<?php } ?>
<?php } ?> <?php } ?>
<?php } ?>
<?php if (count($templateData['infos'])) { ?> <?php if (count($templateData['infos'])) { ?>
<?php foreach ($templateData['infos'] as $message) { ?> <?php foreach ($templateData['infos'] as $message) { ?>
<div class="alert alert-primary" role="alert"><?php echo $message; ?></div> <div class="alert alert-primary" role="alert"><?php echo $message; ?></div>
<?php } ?>
<?php } ?> <?php } ?>
<?php } ?>
<?php if (count($templateData['topArtists'])) { ?> <?php if (count($templateData['topArtists'])) { ?>
<form class="clearfix"> <form class="clearfix">
<legend>Generate playlist from artists:</legend> <legend>Generate playlist from artists:</legend>
<ul class="list-unstyled row row-cols-4"> <ul class="list-unstyled row row-cols-md-4 row-cols-2">
<?php foreach ($templateData['topArtists'] as $artist) { ?> <?php foreach ($templateData['topArtists'] as $artist) { ?>
<li class="col"> <li class="col">
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input <input
type="checkbox" type="checkbox"
class="custom-control-input" class="custom-control-input"
id="check-top-artist-<?php echo $artist->id; ?>" id="check-top-artist-<?php echo $artist->id; ?>"
name="selected-artist[]" name="selected-artist[]"
value="<?php echo $artist->id; ?>" value="<?php echo $artist->id; ?>"
> >
<label class="custom-control-label" for="check-top-artist-<?php echo $artist->id; ?>"> <label class="custom-control-label" for="check-top-artist-<?php echo $artist->id; ?>">
<?php if (count($artist->images)) { ?> <?php if (count($artist->images)) { ?>
<img src="<?php echo $artist->images[count($artist->images) - 1]->url; ?>" style="max-height: 1rem;" /> <img src="<?php echo $artist->images[count($artist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" />
<?php } ?> <?php } ?>
<?php echo $artist->name; ?> <?php echo $artist->name; ?>
</label> </label>
</div> </div>
</li> </li>
<?php } ?> <?php } ?>
</ul> </ul>
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-md-8 col-sm-12">
<input <input
type="checkbox" type="checkbox"
class="custom-control-input" class="custom-control-input"
id="check-top-artist-filter-artists" id="check-top-artist-filter-artists"
name="check-top-artist-filter-artists" name="check-top-artist-filter-artists"
value="filter-artists" value="filter-artists"
checked checked
> >
<label class="custom-control-label" for="check-top-artist-filter-artists"> <label class="custom-control-label" for="check-top-artist-filter-artists">
Allow only selected artists in recommendations Allow only selected artists in recommendations
</label> </label>
</div>
<div class="col-4">
<button name="generate-playlist-top-artists" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
</div>
</div> </div>
</form> <div class="col-md-4 col-sm-12">
<?php } ?> <button name="generate-playlist-top-artists" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
</div>
</div>
</form>
<?php } ?>
<?php if (count($templateData['playlists'])) { ?> <?php if (count($templateData['playlists'])) { ?>
<form class="clearfix"> <form class="clearfix">
<legend>Generate playlist from tracks in existing playlist:</legend> <legend>Generate playlist from tracks in existing playlist:</legend>
<ul class="list-unstyled row row-cols-2"> <ul class="list-unstyled row row-cols-md-2 row-cols-1">
<?php foreach ($templateData['playlists'] as $playlist) { ?> <?php foreach ($templateData['playlists'] as $playlist) { ?>
<li class="col"> <li class="col">
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input <input
type="checkbox" type="checkbox"
class="custom-control-input" class="custom-control-input"
id="check-playlist-<?php echo $playlist->id; ?>" id="check-playlist-<?php echo $playlist->id; ?>"
name="selected-playlist[]" name="selected-playlist[]"
value="<?php echo $playlist->id; ?>" value="<?php echo $playlist->id; ?>"
> >
<label class="custom-control-label" for="check-playlist-<?php echo $playlist->id; ?>"> <label class="custom-control-label" for="check-playlist-<?php echo $playlist->id; ?>">
<?php if (count($playlist->images)) { ?> <?php if (count($playlist->images)) { ?>
<img src="<?php echo $playlist->images[count($playlist->images) - 1]->url; ?>" style="max-height: 1rem;" /> <img src="<?php echo $playlist->images[count($playlist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" />
<?php } ?> <?php } ?>
<?php echo $playlist->name; ?> <?php echo $playlist->name; ?>
</label> </label>
</div> </div>
</li> </li>
<?php } ?> <?php } ?>
</ul> </ul>
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-md-8 col-sm-12">
<input <input
type="checkbox" type="checkbox"
class="custom-control-input" class="custom-control-input"
id="check-playlist-filter-artists" id="check-playlist-filter-artists"
name="check-playlist-filter-artists" name="check-playlist-filter-artists"
value="filter-artists" value="filter-artists"
checked checked
> >
<label class="custom-control-label" for="check-playlist-filter-artists"> <label class="custom-control-label" for="check-playlist-filter-artists">
Allow only artists in selected playlists in recommendations Allow only artists in selected playlists in recommendations
</label> </label>
</div>
<div class="col-4">
<button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
</div>
</div> </div>
</form> <div class="col-md-4 col-sm-12">
<?php } ?> <button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
</div>
</div>
</form>
<?php } ?>
</div>
</div> </div>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment