Skip to content

Commit

Permalink
section blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelson
michelson committed Oct 19, 2023
1 parent 7ec045c commit 5b0278e
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 57 deletions.
8 changes: 4 additions & 4 deletions app/models/track.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,16 @@ class Track < ApplicationRecord
def cover_url(size = nil)
url = case size
when :medium
cover.variant(resize_to_limit: [200, 200])&.processed&.url
Rails.application.routes.url_helpers.rails_storage_proxy_url cover.variant(resize_to_limit: [200, 200])

when :large
cover.variant(resize_to_limit: [500, 500])&.processed&.url
Rails.application.routes.url_helpers.rails_storage_proxy_url cover.variant(resize_to_limit: [500, 500])

when :small
cover.variant(resize_to_limit: [50, 50])&.processed&.url
Rails.application.routes.url_helpers.rails_storage_proxy_url cover.variant(resize_to_limit: [50, 50])

else
cover.variant(resize_to_limit: [200, 200])&.processed&.url
Rails.application.routes.url_helpers.rails_storage_proxy_url cover.variant(resize_to_limit: [200, 200])
end

url || "daniel-schludi-mbGxz7pt0jM-unsplash-sqr-s-bn.png"
Expand Down
54 changes: 54 additions & 0 deletions app/views/home/_playlist_section.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<section aria-labelledby="collections-heading" class="bg-gray-100 dark:bg-gray-900">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-2xl mx-auto py-16 sm:py-24 lg:py-32 lg:max-w-none">
<div data-controller="scroll">
<div class="flex justify-between">
<h2 id="collections-playlists" class="text-2xl font-extrabold text-gray-900 dark:text-gray-100">
<%= title %>
</h2>
<div class="flex items-center space-x-2">
<button data-action="click->scroll#scrollBackward" class="text-sm font-medium text-brand-600 hover:text-brand-500 md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"></path>
</svg>
</button>
<button data-action="click->scroll#scrollForward" class="text-sm font-medium text-brand-600 hover:text-brand-500 md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</button>
</div>
</div>
<div class="relative">
<div class="overflow-auto no-scrollbar relative" data-scroll-target="scrollContainer">
<div class="grid grid-cols-1- grid-flow-col grid-rows-1- sm:gap-x-2 md:grid-cols-4- md:gap-y-0- lg:gap-x-8">
<% Playlist.published.latests.where(playlist_type: playlist_type).limit(limit).each do |playlist| %>
<div class="w-64 m-4">
<%= link_to playlist_path(playlist) do %>
<div class="group group-hover relative">
<div class="relative w-full h-80 bg-white dark:bg-black rounded-lg overflow-hidden group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1">
<%= image_tag(playlist.cover_url,
class: "w-full h-full object-center object-cover"
) %>
</div>
<div class="space-y-1 text-sm text-left mt-2">
<h3 class="font-medium leading-none">
<%= playlist.title %>
</h3>
<p class="text-xs text-slate-500 dark:text-slate-400">
<%= t(:by, name: playlist.user.username) %>
</p>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>

</section>
65 changes: 12 additions & 53 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,60 +96,19 @@

</section>

<section aria-labelledby="collections-heading" class="bg-gray-100 dark:bg-gray-900">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-2xl mx-auto py-16 sm:py-24 lg:py-32 lg:max-w-none">
<div data-controller="scroll">
<div class="flex justify-between">
<h2 id="collections-playlists" class="text-2xl font-extrabold text-gray-900 dark:text-gray-100">
Playlists
</h2>
<div class="flex items-center space-x-2">
<button data-action="click->scroll#scrollBackward" class="text-sm font-medium text-brand-600 hover:text-brand-500 md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"></path>
</svg>
</button>
<button data-action="click->scroll#scrollForward" class="text-sm font-medium text-brand-600 hover:text-brand-500 md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</button>
</div>
</div>
<div class="relative">
<div class="overflow-auto no-scrollbar relative" data-scroll-target="scrollContainer">
<div class="grid grid-cols-1- grid-flow-col grid-rows-1- sm:gap-x-2 md:grid-cols-4- md:gap-y-0- lg:gap-x-8">
<% Playlist.published.latests.limit(12).each do |playlist| %>
<div class="w-64 m-4">
<%= link_to playlist_path(playlist) do %>
<div class="group group-hover relative">
<div class="relative w-full h-80 bg-white dark:bg-black rounded-lg overflow-hidden group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1">
<%= image_tag(playlist.cover_url,
class: "w-full h-full object-center object-cover"
) %>
</div>
<div class="space-y-1 text-sm text-left mt-2">
<h3 class="font-medium leading-none">
<%= playlist.title %>
</h3>
<p class="text-xs text-slate-500 dark:text-slate-400">
<%= t(:by, name: playlist.user.username) %>
</p>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>

</section>
<%= render "home/playlist_section",
playlist_type: ["ep", "album"],
limit: 10,
title: "EP & Album Releases"
%>
<%= render "home/playlist_section",
playlist_type: ["playlist"],
limit: 10,
title: "Playlists"
%>


<section aria-labelledby="collections-heading" class="bg-gray-100 dark:bg-black">
Expand Down

0 comments on commit 5b0278e

Please sign in to comment.