diff options
Diffstat (limited to 'views/album.erb')
| -rw-r--r-- | views/album.erb | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/views/album.erb b/views/album.erb new file mode 100644 index 0000000..077e119 --- /dev/null +++ b/views/album.erb @@ -0,0 +1,99 @@ +<div class="album-header"> + <% unless @crumbs.empty? %> + <nav class="breadcrumbs"> + <a href="/browse/">Home</a> + <% @crumbs.each do |c| %> + <span class="sep">›</span> + <a href="/browse/<%= c[:path] %>"><%= c[:name] %></a> + <% end %> + </nav> + <% end %> + <h1><%= @title %></h1> + <% if @desc %><p class="album-desc"><%= @desc %></p><% end %> + <div class="album-actions"> + <% if @entries.any? { |e| %i[image video].include?(e[:type]) } %> + <a href="/slideshow/<%= @rel %>" class="btn">Slideshow</a> + <% end %> + </div> +</div> + +<% unless @albums.empty? %> +<section class="grid-section"> + <% if @entries.any? %><h2 class="section-label">Albums</h2><% end %> + <div class="grid"> + <% @albums.each do |a| %> + <% href = @rel.empty? ? "/browse/#{a[:name]}" : "/browse/#{@rel}/#{a[:name]}" %> + <a href="<%= href %>" class="card album-card"> + <div class="thumb-wrap"> + <% cover_rel = @rel.empty? ? "#{a[:name]}/#{a[:cover]}" : "#{@rel}/#{a[:name]}/#{a[:cover]}" %> + <% if a[:cover] %> + <img src="/thumb/<%= cover_rel %>" alt="<%= a[:title] %>" loading="lazy"> + <% else %> + <div class="thumb-placeholder">📁</div> + <% end %> + </div> + <div class="album-label"><%= a[:title] %></div> + </a> + <% end %> + </div> +</section> +<% end %> + +<% unless @entries.empty? %> +<section class="grid-section"> + <% if @albums.any? %><h2 class="section-label">Photos & Videos</h2><% end %> + <div class="grid" id="photo-grid"> + <% @entries.each_with_index do |e, i| %> + <% file_rel = @rel.empty? ? e[:name] : "#{@rel}/#{e[:name]}" %> + <div class="card media-card<%= ' hidden-item' unless e[:visible] %>" + data-index="<%= i %>" + data-type="<%= e[:type] %>" + data-src="/media/<%= file_rel %>" + data-title="<%= ERB::Util.html_escape(e[:title]) %>" + data-caption="<%= ERB::Util.html_escape(e[:caption].to_s) %>" + onclick="openLightbox(<%= i %>)"> + <div class="thumb-wrap"> + <img src="/thumb/<%= file_rel %>" alt="<%= ERB::Util.html_escape(e[:title]) %>" loading="lazy"> + <% if e[:type] == :video %><span class="type-badge video-badge">▶</span><% end %> + <% if e[:type] == :audio %><span class="type-badge audio-badge">♪</span><% end %> + </div> + <% if e[:caption] %> + <div class="card-meta"><p class="card-caption"><%= e[:caption] %></p></div> + <% end %> + </div> + <% end %> + </div> +</section> +<% end %> + +<% if @albums.empty? && @entries.empty? %> + <p class="empty-album">This album is empty.</p> +<% end %> + +<div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true"> + <button class="lb-btn lb-close" onclick="closeLightbox()" aria-label="Close">✕</button> + <div class="lb-stage" onclick="closeLightbox()"> + <div class="lb-media" onclick="event.stopPropagation()"> + <img id="lb-img" src="" alt="" class="hidden"> + <video id="lb-video" controls class="hidden"></video> + <audio id="lb-audio" controls class="hidden"></audio> + <button class="lb-btn lb-prev" onclick="lbNav(-1)" aria-label="Previous">‹</button> + <button class="lb-btn lb-next" onclick="lbNav(1)" aria-label="Next">›</button> + </div> + </div> + <div class="lb-caption-bar"> + <span id="lb-title"></span> + <span id="lb-caption"></span> + <a id="lb-download" href="" download class="btn btn-sm lb-action">↓ Original</a> + <button id="lb-copylink" onclick="lbCopyLink()" class="btn btn-sm lb-action">⧉ Copy link</button> + <span id="lb-counter"></span> + </div> +</div> + +<script> +const ENTRIES = <%= @entries.map { |e| + file_rel = @rel.empty? ? e[:name] : "#{@rel}/#{e[:name]}" + e.merge(src: "/media/#{file_rel}") +}.to_json %>; +</script> +<script src="/js/album.js"></script> |