diff --git a/public/index.php b/public/index.php
index 85f873125968d25fdceceadbb0af35bf5cb9b2f6..b39ae21e988e3419831547411ad8818bc1e034a6 100644
--- a/public/index.php
+++ b/public/index.php
@@ -40,6 +40,9 @@ $_SESSION['refreshToken'] = $session->getRefreshToken();
$user = $api->me();
+$topArtistsCount = 48;
+$playlistsCount = 24;
+
$templateData = [
'user' => $user,
'playlists' => [],
@@ -165,8 +168,8 @@ if ($generatePlaylistFromPlaylist) {
$playlistLink = '<a href="'.$newPlaylist->external_urls->spotify.'">'.$newPlaylistName.'</a>';
$templateData['infos'][] = 'Ok created new playlist with '.count($pickedTrackIds).' tracks: '.$playlistLink;
} else {
- $templateData['topArtists'] = $api->getMyTop('artists', ['limit' => 24, 'time_range' => 'short_term'])->items;
- $templateData['playlists'] = $api->getUserPlaylists($user->id, ['limit' => 24])->items;
+ $templateData['topArtists'] = $api->getMyTop('artists', ['limit' => $topArtistsCount, 'time_range' => 'short_term'])->items;
+ $templateData['playlists'] = $api->getUserPlaylists($user->id, ['limit' => $playlistsCount])->items;
}
require '../template.php';
diff --git a/template.php b/template.php
index 4f85a201cadece4bf93aee3a5eef5d4fbedf1ad1..ed653758c31a73701de856a33833a6adc2e11ab1 100644
--- a/template.php
+++ b/template.php
@@ -2,6 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<title>Spotify playlist generator</title>
<link rel="icon" type="image/png" href="img/favicon.png"/>
@@ -11,132 +13,136 @@
<script src="js/scripts.js"></script>
</head>
-<body class="container mt-2">
+<body>
- <div class="row">
- <div class="col-2">
-
- <div class="card">
- <?php if (count($templateData['user']->images)) { ?>
- <img src="<?php echo $templateData['user']->images[0]->url; ?>" class="card-img-top" alt="<?php echo $templateData['user']->display_name; ?>">
- <?php } ?>
- <div class="card-body">
- <h5 class="card-title"><?php echo $templateData['user']->display_name; ?></h5>
- <a href="<?php echo $templateData['user']->external_urls->spotify; ?>" class="btn btn-primary">View profile</a>
- </div>
- <div class="card-footer">
- <a href="playlist-generator" class="card-link">refresh</a>
- <br/>
- <a href="?logout" class="card-link">disconnect</a>
- </div>
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+ <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;">
+ <?php } ?>
+ <?php echo $templateData['user']->display_name; ?>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="<?php echo $templateData['user']->external_urls->spotify; ?>">Profile</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="?logout">Logout</a>
+ </li>
+ </ul>
</div>
-
</div>
- <div class="col-10">
+ </nav>
+
+ <div class="container-fluid mb-5">
- <?php if (count($templateData['errors'])) { ?>
- <?php foreach ($templateData['errors'] as $message) { ?>
- <div class="alert alert-warning" role="alert"><?php echo $message; ?></div>
- <?php } ?>
+ <?php if (count($templateData['errors'])) { ?>
+ <?php foreach ($templateData['errors'] as $message) { ?>
+ <div class="alert alert-warning" role="alert"><?php echo $message; ?></div>
<?php } ?>
+ <?php } ?>
- <?php if (count($templateData['infos'])) { ?>
- <?php foreach ($templateData['infos'] as $message) { ?>
- <div class="alert alert-primary" role="alert"><?php echo $message; ?></div>
- <?php } ?>
+ <?php if (count($templateData['infos'])) { ?>
+ <?php foreach ($templateData['infos'] as $message) { ?>
+ <div class="alert alert-primary" role="alert"><?php echo $message; ?></div>
<?php } ?>
+ <?php } ?>
- <?php if (count($templateData['topArtists'])) { ?>
- <form class="clearfix">
- <legend>Generate playlist from artists:</legend>
- <ul class="list-unstyled row row-cols-4">
- <?php foreach ($templateData['topArtists'] as $artist) { ?>
- <li class="col">
- <div class="custom-control custom-checkbox">
- <input
- type="checkbox"
- class="custom-control-input"
- id="check-top-artist-<?php echo $artist->id; ?>"
- name="selected-artist[]"
- value="<?php echo $artist->id; ?>"
- >
- <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;" />
- <?php } ?>
- <?php echo $artist->name; ?>
- </label>
- </div>
- </li>
- <?php } ?>
- </ul>
- <div class="row">
- <div class="col-8">
- <input
- type="checkbox"
- class="custom-control-input"
- id="check-top-artist-filter-artists"
- name="check-top-artist-filter-artists"
- value="filter-artists"
- checked
- >
- <label class="custom-control-label" for="check-top-artist-filter-artists">
- Allow only selected artists in recommendations
- </label>
- </div>
- <div class="col-4">
- <button name="generate-playlist-top-artists" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
- </div>
+ <?php if (count($templateData['topArtists'])) { ?>
+ <form class="clearfix">
+ <legend>Generate playlist from artists:</legend>
+ <ul class="list-unstyled row row-cols-md-4 row-cols-2">
+ <?php foreach ($templateData['topArtists'] as $artist) { ?>
+ <li class="col">
+ <div class="custom-control custom-checkbox">
+ <input
+ type="checkbox"
+ class="custom-control-input"
+ id="check-top-artist-<?php echo $artist->id; ?>"
+ name="selected-artist[]"
+ value="<?php echo $artist->id; ?>"
+ >
+ <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;" />
+ <?php } ?>
+ <?php echo $artist->name; ?>
+ </label>
+ </div>
+ </li>
+ <?php } ?>
+ </ul>
+ <div class="row">
+ <div class="col-md-8 col-sm-12">
+ <input
+ type="checkbox"
+ class="custom-control-input"
+ id="check-top-artist-filter-artists"
+ name="check-top-artist-filter-artists"
+ value="filter-artists"
+ checked
+ >
+ <label class="custom-control-label" for="check-top-artist-filter-artists">
+ Allow only selected artists in recommendations
+ </label>
</div>
- </form>
- <?php } ?>
+ <div class="col-md-4 col-sm-12">
+ <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'])) { ?>
- <form class="clearfix">
- <legend>Generate playlist from tracks in existing playlist:</legend>
- <ul class="list-unstyled row row-cols-2">
- <?php foreach ($templateData['playlists'] as $playlist) { ?>
- <li class="col">
- <div class="custom-control custom-checkbox">
- <input
- type="checkbox"
- class="custom-control-input"
- id="check-playlist-<?php echo $playlist->id; ?>"
- name="selected-playlist[]"
- value="<?php echo $playlist->id; ?>"
- >
- <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;" />
- <?php } ?>
- <?php echo $playlist->name; ?>
- </label>
- </div>
- </li>
- <?php } ?>
- </ul>
- <div class="row">
- <div class="col-8">
- <input
- type="checkbox"
- class="custom-control-input"
- id="check-playlist-filter-artists"
- name="check-playlist-filter-artists"
- value="filter-artists"
- checked
- >
- <label class="custom-control-label" for="check-playlist-filter-artists">
- Allow only artists in selected playlists in recommendations
- </label>
- </div>
- <div class="col-4">
- <button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
- </div>
+ <?php if (count($templateData['playlists'])) { ?>
+ <form class="clearfix">
+ <legend>Generate playlist from tracks in existing playlist:</legend>
+ <ul class="list-unstyled row row-cols-md-2 row-cols-1">
+ <?php foreach ($templateData['playlists'] as $playlist) { ?>
+ <li class="col">
+ <div class="custom-control custom-checkbox">
+ <input
+ type="checkbox"
+ class="custom-control-input"
+ id="check-playlist-<?php echo $playlist->id; ?>"
+ name="selected-playlist[]"
+ value="<?php echo $playlist->id; ?>"
+ >
+ <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;" />
+ <?php } ?>
+ <?php echo $playlist->name; ?>
+ </label>
+ </div>
+ </li>
+ <?php } ?>
+ </ul>
+ <div class="row">
+ <div class="col-md-8 col-sm-12">
+ <input
+ type="checkbox"
+ class="custom-control-input"
+ id="check-playlist-filter-artists"
+ name="check-playlist-filter-artists"
+ value="filter-artists"
+ checked
+ >
+ <label class="custom-control-label" for="check-playlist-filter-artists">
+ Allow only artists in selected playlists in recommendations
+ </label>
</div>
- </form>
- <?php } ?>
+ <div class="col-md-4 col-sm-12">
+ <button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
+ </div>
+ </div>
+ </form>
+ <?php } ?>
- </div>
</div>
</body>