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

Improve layout, add navbar

parent 8a753580
No related branches found
No related tags found
1 merge request!12Resolve "Improve layout"
Show whitespace changes
Inline Side-by-side
public/index.php
+ 5
− 2
View file @ f015f0dd
...@@ -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 @ f015f0dd
...@@ -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,28 +13,33 @@ ...@@ -11,28 +13,33 @@
<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; ?>" class="card-img-top" alt="<?php echo $templateData['user']->display_name; ?>"> <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 } ?>
<div class="card-body"> <?php echo $templateData['user']->display_name; ?>
<h5 class="card-title"><?php echo $templateData['user']->display_name; ?></h5> </a>
<a href="<?php echo $templateData['user']->external_urls->spotify; ?>" class="btn btn-primary">View profile</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">
</div> <span class="navbar-toggler-icon"></span>
<div class="card-footer"> </button>
<a href="playlist-generator" class="card-link">refresh</a> <div class="collapse navbar-collapse" id="navbarNav">
<br/> <ul class="navbar-nav">
<a href="?logout" class="card-link">disconnect</a> <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> </div>
</nav>
</div> <div class="container-fluid mb-5">
<div class="col-10">
<?php if (count($templateData['errors'])) { ?> <?php if (count($templateData['errors'])) { ?>
<?php foreach ($templateData['errors'] as $message) { ?> <?php foreach ($templateData['errors'] as $message) { ?>
...@@ -49,7 +56,7 @@ ...@@ -49,7 +56,7 @@
<?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">
...@@ -62,7 +69,7 @@ ...@@ -62,7 +69,7 @@
> >
<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>
...@@ -71,7 +78,7 @@ ...@@ -71,7 +78,7 @@
<?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"
...@@ -84,7 +91,7 @@ ...@@ -84,7 +91,7 @@
Allow only selected artists in recommendations Allow only selected artists in recommendations
</label> </label>
</div> </div>
<div class="col-4"> <div class="col-md-4 col-sm-12">
<button name="generate-playlist-top-artists" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button> <button name="generate-playlist-top-artists" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
</div> </div>
</div> </div>
...@@ -94,7 +101,7 @@ ...@@ -94,7 +101,7 @@
<?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">
...@@ -107,7 +114,7 @@ ...@@ -107,7 +114,7 @@
> >
<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>
...@@ -116,7 +123,7 @@ ...@@ -116,7 +123,7 @@
<?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"
...@@ -129,7 +136,7 @@ ...@@ -129,7 +136,7 @@
Allow only artists in selected playlists in recommendations Allow only artists in selected playlists in recommendations
</label> </label>
</div> </div>
<div class="col-4"> <div class="col-md-4 col-sm-12">
<button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button> <button name="generate-playlist-from-playlist" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
</div> </div>
</div> </div>
...@@ -137,7 +144,6 @@ ...@@ -137,7 +144,6 @@
<?php } ?> <?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