brianfertig
/
Bri-Tunes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: restructure card layout to separate social actions into footer 

- Adjust `.card` to use flex column layout for proper content stacking
- Introduce `.card-footer` wrapper for creator + social buttons
- Move social buttons below creator info in playlist cards (home & listing)
This commit is contained in:
Brian Fertig 2026-04-11 09:18:14 -06:00
parent f044d98afc
commit 3143369377
3 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/css/app.css
View File

@ -212,7 +212,8 @@ button.linklike.danger:hover { color: #fff; text-shadow: 0 0 6px var(--danger);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
display: block; display: flex;
flex-direction: column;
color: var(--fg); color: var(--fg);
position: relative; position: relative;
transition: transform .15s, border-color .15s, box-shadow .15s; transition: transform .15s, border-color .15s, box-shadow .15s;
@ -238,9 +239,10 @@ button.linklike.danger:hover { color: #fff; text-shadow: 0 0 6px var(--danger);
background: linear-gradient(135deg, #1a1f3d, #0c0e1a); background: linear-gradient(135deg, #1a1f3d, #0c0e1a);
font-size: 2.5rem; color: var(--neon-violet); text-shadow: var(--glow-violet); font-size: 2.5rem; color: var(--neon-violet); text-shadow: var(--glow-violet);
} }
.card-body { padding: 0.65rem 0.85rem; } .card-body { padding: 0.65rem 0.85rem; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 0.85rem; color: var(--fg); } .card-title { font-size: 0.85rem; color: var(--fg); }
.card-creator { font-size: 0.75rem; font-style: italic; color: var(--muted); margin-top: 0.5rem; opacity: 0.75; } .card-creator { font-size: 0.75rem; font-style: italic; color: var(--muted); margin-bottom: 0.35rem; opacity: 0.75; }
.card-footer { margin-top: auto; padding-top: 0.5rem; }
/* ---------- Visibility badges ---------- */ /* ---------- Visibility badges ---------- */
.badge { .badge {
@ -507,7 +509,7 @@ button.linklike.danger:hover { color: #fff; text-shadow: 0 0 6px var(--danger);
.btn-social:disabled { opacity: 0.5; cursor: wait; } .btn-social:disabled { opacity: 0.5; cursor: wait; }
.song-social { display: flex; align-items: center; gap: 2px; } .song-social { display: flex; align-items: center; gap: 2px; }
.social-row { display: flex; gap: 4px; margin: 0.4rem 0 0.6rem; } .social-row { display: flex; gap: 4px; margin: 0.4rem 0 0.6rem; }
.card-social { display: flex; gap: 4px; margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.06); } .card-social { display: flex; gap: 4px; padding-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.06); }
.track-list { padding-left: 0; list-style: none; } .track-list { padding-left: 0; list-style: none; }
.track-list li { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.5rem; border-radius: 4px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; transition: background 0.15s; } .track-list li { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.5rem; border-radius: 4px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; transition: background 0.15s; }

30
src/views/public/home.ejs
View File

@ -22,20 +22,22 @@
<% if (p.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %> <% if (p.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %>
</div> </div>
<% if (p.description) { %><div class="muted small"><%= p.description %></div><% } %> <% if (p.description) { %><div class="muted small"><%= p.description %></div><% } %>
<% if (p.createdByName) { %><div class="card-creator">Created by:<br><%= p.createdByName %></div><% } %> <div class="card-footer">
<div class="card-social"> <% if (p.createdByName) { %><div class="card-creator">Created by:<br><%= p.createdByName %></div><% } %>
<button type="button" <div class="card-social">
class="btn-social<%= p.userLiked ? ' active' : '' %>" <button type="button"
data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>" class="btn-social<%= p.userLiked ? ' active' : '' %>"
<% if (!user) { %>data-require-login<% } %> data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>"
aria-pressed="<%= p.userLiked ? 'true' : 'false' %>" <% if (!user) { %>data-require-login<% } %>
title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button> aria-pressed="<%= p.userLiked ? 'true' : 'false' %>"
<button type="button" title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
class="btn-social<%= p.userFavorited ? ' active' : '' %>" <button type="button"
data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>" class="btn-social<%= p.userFavorited ? ' active' : '' %>"
<% if (!user) { %>data-require-login<% } %> data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>"
aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>" <% if (!user) { %>data-require-login<% } %>
title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button> aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>"
title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
</div>
</div> </div>
</div> </div>
</a> </a>

30
src/views/public/playlists.ejs
View File

@ -16,20 +16,22 @@
<% if (p.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %> <% if (p.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %>
</div> </div>
<% if (p.description) { %><div class="muted small"><%= p.description %></div><% } %> <% if (p.description) { %><div class="muted small"><%= p.description %></div><% } %>
<% if (p.createdByName) { %><div class="card-creator">Created by:<br><%= p.createdByName %></div><% } %> <div class="card-footer">
<div class="card-social"> <% if (p.createdByName) { %><div class="card-creator">Created by:<br><%= p.createdByName %></div><% } %>
<button type="button" <div class="card-social">
class="btn-social<%= p.userLiked ? ' active' : '' %>" <button type="button"
data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>" class="btn-social<%= p.userLiked ? ' active' : '' %>"
<% if (!user) { %>data-require-login<% } %> data-social-action="like" data-social-type="playlist" data-social-id="<%= p.id %>"
aria-pressed="<%= p.userLiked ? 'true' : 'false' %>" <% if (!user) { %>data-require-login<% } %>
title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button> aria-pressed="<%= p.userLiked ? 'true' : 'false' %>"
<button type="button" title="Like">👍 <span class="social-count"><%= p.likeCount || 0 %></span></button>
class="btn-social<%= p.userFavorited ? ' active' : '' %>" <button type="button"
data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>" class="btn-social<%= p.userFavorited ? ' active' : '' %>"
<% if (!user) { %>data-require-login<% } %> data-social-action="favorite" data-social-type="playlist" data-social-id="<%= p.id %>"
aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>" <% if (!user) { %>data-require-login<% } %>
title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button> aria-pressed="<%= p.userFavorited ? 'true' : 'false' %>"
title="Favorite">⭐ <span class="social-count"><%= p.favoriteCount || 0 %></span></button>
</div>
</div> </div>
</div> </div>
</a> </a>