adam/weddingplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Decompose into partials

Browse Source
This commit is contained in:
Adam Mohammed
2025-05-15 22:23:12 -04:00
parent b492c4e111
commit 3985b9c93c
7 changed files with 209 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/views/home/_wedding-party.html.erb Normal file
View File

@@ -0,0 +1,43 @@
<div id="wedding-party" class="w-screen text-slate-900 lg:my-8 bg-[<%= color %>] lg:bg-[#fdfefe]">
<div class="container mx-auto bg-[<%= color %>] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
<div class="w-fit mx-auto">
<h1 class="text-5xl rogue-script lg:text-7xl">Wedding Party</h1>
</div>
<!--- Wedding party for large screens --->
<% @wedding_party.each_slice(3) do |r| %>
<div class="max-lg:hidden flex flex-row py-4 px-4">
<% r.each do |person| %>
<div id="wp-card" class="w-1/3">
<% if person.image %>
<img src="<%= image_path(person.name.downcase + '.jpg') %>" class="w-80 h-80 mx-auto rounded-full aspect-square object-cover shadow-xl <%= person.extra_attrs || '' %>">
<% else %>
<div class="bg-red-500 w-80 h-80 mx-auto rounded-full aspect-square object-cover"></div>
<% end %>
<div id="wp-name" class="w-fit mx-auto text-xl pt-2"><%= person.name %></div>
<div id="wp-role" class="w-fit mx-auto text-md text-slate-600"><%= person.role %></div>
<div id="wp-relation" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.relationship %></div>
</div>
<% end %>
</div>
<% end %>
<!--- End wedding party for large screens ---->
<!--- Wedding party for small screens --->
<% @wedding_party.each_slice(1) do |r| %>
<div class="lg:hidden flex py-4 px-2">
<% r.each do |person| %>
<div id="wp-card" class="w-fit px-2 mx-auto">
<% if person.image %>
<img src="<%= image_path(person.name.downcase + '.jpg') %>" class="mx-auto w-60 h-60 md:w-80 md:h-80 rounded-full aspect-square object-cover shadow-xl <%= person.extra_attrs || '' %>">
<% else %>
<div class="bg-red-500 w-60 h-60 md:w-80 md:h-80 mx-auto rounded-full aspect-square object-cover"></div>
<% end %>
<div id="wp-name" class="w-fit mx-auto text-xl pt-2"><%= person.name %></div>
<div id="wp-role" class="w-fit mx-auto text-md text-slate-600"><%= person.role %></div>
<div id="wp-relation" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.relationship %></div>
</div>
<% end %>
</div>
<% end %>
<!---------End WP for small screens --->
</div>
</div>