wip cleanup

This commit is contained in:
Andrew Brown 2023-05-09 15:37:12 -07:00
parent 718744bacd
commit 3e383ef54e
3 changed files with 84 additions and 82 deletions

View File

@ -15,7 +15,7 @@
<div class="mt-4">
<label class="text-sm text-gray-500">
<span class="<%= @content.text_color %>"><%= @content.name %></span>
<span class="<%= @content.text_color %>"><%= link_to @content.name, @content.view_path %></span>
<span class="mx-1">&rsaquo;</span>
<%= field.label %>
</label>

View File

@ -25,102 +25,102 @@
</span>
</small>
</h1>
<div class="mr-2">
<%= link_to '#edit-gallery', class: 'mr-2 block' do %>
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-notebook-blue border border-notebook-blue rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
</svg>
Edit mode
</button>
<% end %>
</div>
</div>
<div class="px-5 py-2 mx-auto pt-6">
<div class="flex flex-wrap -m-1 md:-m-2">
<%# "highlighted" images %>
<% 1.times do %>
<%# we should probably scale size/dimensions based on actual image data (which we have here) %>
<div class="flex flex-wrap w-2/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3 p-12">
<div>
<h2 class="font-bold w-full">Image title</h2>
<div class="text-sm text-gray-400">
Uploaded by
<span class="<%= User.text_color %>">@andrew</span>
</div>
</div>
<p class="text-gray-700">
Image description that's provided and might be kind of long so it might have to wrap, so we might as well write this long description here to see if it looks good when it does wrap
</p>
<div class="text-sm text-gray-400">
3 weeks ago
&middot;
<span class="text-blue-800">
7 kudos
</span>
&middot;
<span class="text-blue-800">
42 comments
</span>
</div>
<div class="border-b border-gray-200 w-1/3 mx-auto h-1"></div>
</div>
<% end %>
</div>
</div>
<div class="px-5 py-2 mx-auto flex flex-wrap -m-1 md:-m-2">
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(76).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp">
</div>
</div>
</div>
<div class="px-5 py-2 mx-auto pt-6">
<div class="flex flex-wrap -m-1 md:-m-2">
<%# "highlighted" images %>
<% 1.times do %>
<%# we should probably scale size/dimensions based on actual image data (which we have here) %>
<div class="flex flex-wrap w-2/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3 p-12">
<div>
<h2 class="font-bold w-full">Image title</h2>
<div class="text-sm text-gray-400">
Uploaded by
<span class="<%= User.text_color %>">@andrew</span>
</div>
</div>
<p class="text-gray-700">
Image description that's provided and might be kind of long so it might have to wrap, so we might as well write this long description here to see if it looks good when it does wrap
</p>
<div class="text-sm text-gray-400">
3 weeks ago
&middot;
<span class="text-blue-800">
7 kudos
</span>
&middot;
<span class="text-blue-800">
42 comments
</span>
</div>
<div class="border-b border-gray-200 w-1/3 mx-auto h-1"></div>
</div>
<% end %>
</div>
</div>
<div class="px-5 py-2 mx-auto flex flex-wrap -m-1 md:-m-2">
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(76).webp">
</div>
</div>
<div class="flex flex-wrap w-1/3">
<div class="w-full p-1 md:p-2">
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp">
</div>
</div>
</div>
</div>
</div>
<!-- Activity feed -->
<div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
<div class="hidden bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
<div class="pl-6 lg:w-80 px-6 pt-6">
<div class="lg:flex lg:items-center lg:justify-between">

View File

@ -1,6 +1,8 @@
<div class="space-y-8 divide-y divide-gray-200 px-6">
<div class="divide-y divide-gray-200 space-y-20 mb-20">
<% content.data[:categories].each do |category| %>
<% next if category[:label] == 'Gallery' %>
<div
x-show="showEditMode || (<%= category[:fields].map { |field| "#{field[:value].inspect} != ''" }.join(' || ').present? %>)"
>