Skip to content

Commit

Permalink
converting to tailwind
Browse files Browse the repository at this point in the history
  • Loading branch information
@weaverryan
weaverryan committed Jun 19, 2023
1 parent 7918514 commit 912044d
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 67 deletions.
55 changes: 22 additions & 33 deletions templates/base.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,29 @@
{% endblock %}

{% block javascripts %}
<script src="https://kit.fontawesome.com/5a377fab5b.js" crossorigin="anonymous"></script>
{% endblock %}
</head>
<body>
<div class="mb-5">
<body class="bg-gray-800 text-white font-sans">
<div class="mb-20">
<!-- Main Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #27333A;">
<div class="container-fluid">
<a class="navbar-brand" href="{{ path('app_homepage') }}">
<nav class="bg-gray-900">
<div class="container mx-auto flex items-center justify-between px-4 py-6">
<a href="{{ path('app_homepage') }}">
<i class="fas fa-record-vinyl"></i>
Mixed Vinyl
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" style="margin-top: 20px;" href="{{ path('app_browse') }}">Browse Mixes</a>
<!-- For simplicity, the collapse feature is omitted -->
<div class="flex justify-end items-center">
<ul class="flex space-x-4">
<li class="pt-4">
<a href="{{ path('app_browse') }}">Browse Mixes</a>
</li>
<!-- Not Authenticated -->
<!-- <li class="nav-item"><button href="#" class="btn btn-primary btn-sm">Login</button></li> -->
<!-- End Not Authenticated -->

<!-- If Authenticated -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user-astronaut p-2" style="border: solid 1px #fff; border-radius: 50px; font-size: 40px;"></i>
<li class="relative group">
<a href="#" class="flex items-center justify-center border-2 border-white rounded-full p-2 w-12 h-12">
<i class="fas fa-user-astronaut text-xl"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">My Mixes</a></li>
<li><a class="dropdown-item" href="#">Signout</a></li>
</ul>
</li>
<!-- End If Authenticated -->
</ul>
Expand All @@ -62,22 +53,20 @@
{% block body %}{% endblock %}

<!-- Footer -->
<div class="container mt-5">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="me-1" style="color: red;"><i class="fas fa-heart"></i></span>
<span class="text-muted me-1">The guys and gals at</span>
<a target="_blank" href="https://symfonycasts.com/" style="color: #25a1dd" class="mb-3 me-2 mb-md-0 text-decoration-none lh-1">
<div class="container mx-auto my-20">
<footer class="flex items-center justify-between py-12 border-t border-gray-600">
<div class="flex items-center space-x-2 text-red-600">
<i class="fas fa-heart"></i>
<span class="text-gray-400">The guys and gals at</span>
<a target="_blank" href="https://symfonycasts.com/" class="text-blue-500">
SymfonyCasts
</a>
</div>

<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" target="_blank" href="https://github.com/SymfonyCasts/symfony6"><i class="fab fa-github"></i></a></li>
<ul class="flex space-x-4">
<li><a class="text-gray-400" target="_blank" href="https://github.com/SymfonyCasts/symfony6"><i class="fab fa-github"></i></a></li>
</ul>
</footer>
</div>
<!-- End Footer -->

</body>
</html>
14 changes: 7 additions & 7 deletions templates/mix/show.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,27 @@
{% block title %}{{ mix.title }} Mix{% endblock %}

{% block body %}
<div class="container">
<h1 class="d-inline me-3">{{ mix.title }}</h1>
<div class="row mt-5">
<div class="col-12 col-md-4">
<div class="container mx-auto px-4">
<h1 class="inline-block mr-3">{{ mix.title }}</h1>
<div class="flex flex-wrap mt-20">
<div class="w-full md:w-1/3">
{{ include('mix/_recordSvg.html.twig') }}
</div>
<div class="col-12 col-md-8 ps-5">
<div class="w-full md:w-2/3 pl-20">
<h2 class="mb-4">{{ mix.trackCount }} songs <small>(genre: {{ mix.genre }})</small></h2>
<p>{{ mix.description }}</p>

{{ mix.votesString }} votes
<form action="{{ path('app_mix_vote', {id: mix.id }) }}" method="POST">
<button
type="submit"
class="btn btn-outline-primary"
class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-3 py-2 rounded"
name="direction"
value="up"
><span class="fa fa-thumbs-up"></span></button>
<button
type="submit"
class="btn btn-outline-primary"
class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-3 py-2 rounded ml-2"
name="direction"
value="down"
><span class="fa fa-thumbs-down"></span></button>
Expand Down
36 changes: 17 additions & 19 deletions templates/vinyl/browse.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,41 @@
{% extends 'base.html.twig' %}

{% block body %}
<div class="container">
<h1>Browse {{ genre ? genre : 'All Genres' }}</h1>

<h2 class="mt-5 mb-4">Filter by Genre</h2>
<ul class="genre-list ps-0 mt-2 mb-3">
<li class="d-inline">
<a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
<div class="container mx-auto px-4">
<h1 class="text-3xl font-bold">{{ genre ? genre : 'All Genres' }}</h1>
<ul class="list-none mt-8 mb-12">
<li class="inline">
<a class="btn bg-blue-500 text-white py-1 px-2" href="{{ path('app_browse', {
slug: 'pop'
}) }}">Pop</a>
</li>
<li class="d-inline">
<a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
<li class="inline ml-2">
<a class="btn bg-blue-500 text-white py-1 px-2" href="{{ path('app_browse', {
slug: 'rock'
}) }}">Rock</a>
</li>
<li class="d-inline">
<a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
<li class="inline ml-2">
<a class="btn bg-blue-500 text-white py-1 px-2" href="{{ path('app_browse', {
slug: 'heavy-metal'
}) }}">Heavy Metal</a>
</li>
</ul>

<div>
<h2 class="mt-5">Mixes</h2>
<h2 class="mt-10 text-2xl font-bold">Mixes</h2>
<turbo-frame id="mix-browse-list-{{ pager.currentPage }}" target="_top">
<div class="row">
<div class="flex flex-wrap -mx-2">
{% for mix in pager %}
<div class="col col-md-4">
<div class="w-full md:w-1/3 px-2">
<a href="{{ path('app_mix_show', {
slug: mix.slug
}) }}" class="mixed-vinyl-container p-3 text-center">
<img src="{{ mix.getImageUrl(300) }}" alt="Mix album cover">
<p class="mt-2"><strong>{{ mix.title }}</strong></p>
}) }}" class="mixed-vinyl-container p-6 text-center block">
<img src="{{ mix.getImageUrl(300) }}" alt="Mix album cover" class="mx-auto">
<p class="mt-8 font-bold">{{ mix.title }}</p>
<span>{{ mix.trackCount }} Tracks</span>
|
<span class="mx-1">|</span>
<span>{{ mix.genre }}</span>
|
<span class="mx-1">|</span>
<span>{{ mix.createdAt|ago }}</span>
<br>
{{ mix.votesString }} votes
Expand Down
16 changes: 8 additions & 8 deletions templates/vinyl/homepage.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
{% block title %}Create a new Record | {{ parent() }}{% endblock %}

{% block body %}
<div class="container">
<h1 class="d-inline me-3">{{ title }}</h1> <i class="fas fa-edit"></i>
<div class="row mt-5">
<div class="col-12 col-md-4">
<div class="container mx-auto px-4">
<h1 class="inline-block mr-3">{{ title }}</h1> <i class="fas fa-edit"></i>
<div class="flex flex-wrap mt-5">
<div class="w-full md:w-1/3">
{{ include('mix/_recordSvg.html.twig') }}
</div>
<div class="col-12 col-md-8 ps-5">
<div class="w-full md:w-2/3 pl-10">
<h2 class="mb-4">10 songs (30 minutes of 60 still available)</h2>
{% for track in tracks %}
<div class="song-list">
<div class="d-flex mb-3">
<div class="flex mb-3">
<a href="#">
<i class="fas fa-play me-3"></i>
<i class="fas fa-play mr-3"></i>
</a>
<span class="song-details">{{ track.song }} - {{ track.artist }}</span>
<a href="#">
Expand All @@ -27,7 +27,7 @@
</div>
</div>
{% endfor %}
<button type="button" class="btn btn-success"><i class="fas fa-plus"></i> Add a song</button>
<button type="button" class="bg-green-500 text-white py-2 px-4 rounded"><i class="fas fa-plus"></i> Add a song</button>
</div>
</div>
</div>
Expand Down

0 comments on commit 912044d

Please sign in to comment.