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();
$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';
template.php
+ 120
− 114
View file @ f015f0dd
......@@ -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,28 +13,33 @@
<script src="js/scripts.js"></script>
</head>
<body class="container mt-2">
<body>
<div class="row">
<div class="col-2">
<div class="card">
<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; ?>" 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 } ?>
<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>
<?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>
</nav>
</div>
<div class="col-10">
<div class="container-fluid mb-5">
<?php if (count($templateData['errors'])) { ?>
<?php foreach ($templateData['errors'] as $message) { ?>
......@@ -49,7 +56,7 @@
<?php if (count($templateData['topArtists'])) { ?>
<form class="clearfix">
<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) { ?>
<li class="col">
<div class="custom-control custom-checkbox">
......@@ -62,7 +69,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;" />
<img src="<?php echo $artist->images[count($artist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" />
<?php } ?>
<?php echo $artist->name; ?>
</label>
......@@ -71,7 +78,7 @@
<?php } ?>
</ul>
<div class="row">
<div class="col-8">
<div class="col-md-8 col-sm-12">
<input
type="checkbox"
class="custom-control-input"
......@@ -84,7 +91,7 @@
Allow only selected artists in recommendations
</label>
</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>
</div>
</div>
......@@ -94,7 +101,7 @@
<?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">
<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">
......@@ -107,7 +114,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;" />
<img src="<?php echo $playlist->images[count($playlist->images) - 1]->url; ?>" style="max-height: 1rem; max-width: 1rem;" />
<?php } ?>
<?php echo $playlist->name; ?>
</label>
......@@ -116,7 +123,7 @@
<?php } ?>
</ul>
<div class="row">
<div class="col-8">
<div class="col-md-8 col-sm-12">
<input
type="checkbox"
class="custom-control-input"
......@@ -129,7 +136,7 @@
Allow only artists in selected playlists in recommendations
</label>
</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>
</div>
</div>
......@@ -137,7 +144,6 @@
<?php } ?>
</div>
</div>
</body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment