mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
tweaked gallery design based on feedback
This commit is contained in:
drusepth
parent
0d0c07a6b1
commit
2e9115aa25
@ -3,7 +3,7 @@
|
||||
# TODO: we should probably spin off an Api::ContentController for #api_sort and anything else
|
||||
# api-wise we need
|
||||
class ContentController < ApplicationController
|
||||
layout 'tailwind', only: [:index, :show]
|
||||
layout 'tailwind', only: [:index, :show, :gallery]
|
||||
|
||||
before_action :authenticate_user!, except: [:show, :changelog, :api_sort] \
|
||||
+ Rails.application.config.content_types[:all_non_universe].map { |type| type.name.downcase.pluralize.to_sym }
|
||||
@ -93,6 +93,19 @@ class ContentController < ApplicationController
|
||||
end
|
||||
end
|
||||
|
||||
def gallery
|
||||
content_type = content_type_from_controller(self.class)
|
||||
return redirect_to(root_path, notice: "That page doesn't exist!") unless valid_content_types.include?(content_type.name)
|
||||
|
||||
@content = content_type.find_by(id: params[:id])
|
||||
return redirect_to(root_path, notice: "You don't have permission to view that content.") if @content.nil?
|
||||
|
||||
return redirect_to(root_path) if @content.user.nil? # deleted user's content
|
||||
return if ENV.key?('CONTENT_BLACKLIST') && ENV['CONTENT_BLACKLIST'].split(',').include?(@content.user.try(:email))
|
||||
|
||||
@serialized_content = ContentSerializer.new(@content)
|
||||
end
|
||||
|
||||
def new
|
||||
@content = content_type_from_controller(self.class)
|
||||
.new(user: current_user)
|
||||
|
||||
229
app/views/content/gallery.html.erb
Normal file
229
app/views/content/gallery.html.erb
Normal file
@ -0,0 +1,229 @@
|
||||
<%= render partial: 'content/tailwind_components/content_image_header', locals: { content: @serialized_content } %>
|
||||
|
||||
<div class="relative min-h-full flex flex-col">
|
||||
<!-- 3 column wrapper -->
|
||||
<div class="flex-grow w-full lg:flex min-h-screen">
|
||||
<!-- Left sidebar & main wrapper -->
|
||||
<div class="flex-1 min-w-0 bg-gray-50 xl:flex px-6">
|
||||
<% if @serialized_content.class_name == Universe.name %>
|
||||
<%= render partial: 'content/tailwind_components/universe_context_sidenav', locals: { content: @serialized_content } %>
|
||||
<% else %>
|
||||
<%= render partial: 'content/tailwind_components/content_context_sidenav', locals: { content: @serialized_content } %>
|
||||
<% end %>
|
||||
|
||||
<div class="bg-white lg:min-w-0 lg:flex-1">
|
||||
<div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0">
|
||||
<div class="flex items-center">
|
||||
<h1 class="flex-1 text-lg font-medium">
|
||||
<span class="<%= @serialized_content.class_text_color %>">
|
||||
<%= @serialized_content.name %>
|
||||
</span>
|
||||
<small class="ml-2 text-gray-500">
|
||||
by
|
||||
<span class="<%= User.text_color %>">
|
||||
<%= link_to @serialized_content.user.display_name, @serialized_content.user %>
|
||||
</span>
|
||||
</small>
|
||||
</h1>
|
||||
<div class="mr-2">
|
||||
<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>
|
||||
</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
|
||||
·
|
||||
<span class="text-blue-800">
|
||||
7 kudos
|
||||
</span>
|
||||
·
|
||||
<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="pl-6 lg:w-80 px-6 pt-6">
|
||||
|
||||
<div class="lg:flex lg:items-center lg:justify-between">
|
||||
<div class="flex-1 min-w-0 mb-8">
|
||||
<h2 class="font-bold leading-tight text-gray-900">Page customization</h2>
|
||||
<div class="flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Only visible to you (maybe its own page?) (maybe slide in/out from Edit mode button?)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center mb-4">
|
||||
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
|
||||
<button type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
|
||||
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
|
||||
</button>
|
||||
<span class="ml-3" id="annual-billing-label">
|
||||
<span class="text-sm font-medium text-gray-900">Enable Gallery</span>
|
||||
<span class="text-sm text-gray-500">to others</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
|
||||
<button type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
|
||||
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
|
||||
</button>
|
||||
<span class="ml-3" id="annual-billing-label">
|
||||
<span class="text-sm font-medium text-gray-900">Enable Comments</span>
|
||||
<span class="text-sm text-gray-500">something</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col sm:flex-row xl:flex-col space-y-1">
|
||||
<button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white <%= Universe.color %> hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 xl:w-full">
|
||||
</button>
|
||||
Create page
|
||||
<br />Privacy settings [page controls visible only to you!]
|
||||
<button type="button" class="mt-3 inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 xl:ml-0 xl:mt-3 xl:w-full">
|
||||
Share universe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 pb-2">
|
||||
<h2 class="text-sm font-semibold">Recent Activity</h2>
|
||||
</div>
|
||||
<div>
|
||||
<ul role="list" class="divide-y divide-gray-200">
|
||||
|
||||
<% 4.times do %>
|
||||
|
||||
<li class="py-4">
|
||||
<div class="flex space-x-3">
|
||||
<img class="h-10 w-10 rounded-lg" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="">
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium">Sarah Cena</h3>
|
||||
<p class="text-sm text-gray-500">1h</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 group">
|
||||
Character updated by <%= link_to current_user.display_name, current_user, class: "group-hover:#{User.text_color}" %>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<% end %>
|
||||
|
||||
<!-- More items... -->
|
||||
</ul>
|
||||
<!--
|
||||
<div class="py-4 text-sm border-t border-gray-200">
|
||||
<a href="#" class="text-indigo-600 font-semibold hover:text-indigo-900">View all activity <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="pt-6 pb-2">
|
||||
<h2 class="text-sm font-semibold">Contributors to this page</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex-shrink-0 sm:mt-0">
|
||||
<div class="flex overflow-hidden -space-x-1">
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Emily Selman">
|
||||
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Kristin Watson">
|
||||
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Emma Dorsey">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -228,6 +228,7 @@ Rails.application.routes.draw do
|
||||
Rails.application.config.content_types[:all_non_universe].each do |content_type|
|
||||
# resources :characters do
|
||||
resources content_type.name.downcase.pluralize.to_sym do
|
||||
get :gallery, on: :member
|
||||
get :changelog, on: :member
|
||||
get :toggle_archive, on: :member
|
||||
post :toggle_favorite, on: :member
|
||||
|
||||
Loading…
Reference in New Issue
Block a user