mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

add empty state styling for content#index

Browse Source
This commit is contained in:
drusepth 2022-04-15 16:46:30 -07:00
parent 0ac4bcf75f
commit 520a2aa566
1 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/views/content/index.html.erb
View File

@ -324,25 +324,49 @@
<%# render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
<%# to be made into new card list partial? %>
<div class="flex flex-wrap mb-32 container mx-auto">
<% @content.each do |content| %>
<div class="xl:w-1/4 md:w-1/2 p-2 group">
<%= link_to content.view_path do %>
<div class="bg-white hover:shadow-lg rounded-lg transition">
<%= image_tag content.random_image_including_private(format: :small), class: 'h-64 rounded-t w-full object-cover object-center mb-6' %>
<div class="pl-4 pb-1">
<i class="material-icons float-right text-2xl mr-3">star_outline</i>
<h3 class="tracking-widest <%= content.text_color %> text-xs uppercase font-medium title-font">
<%= content.page_type %>
</h3>
<h2 class="text-lg text-gray-900 font-medium title-font mb-4">
<%= content.name %>
</h2>
<% if @content.any? %>
<div class="flex flex-wrap mb-32 container mx-auto">
<% @content.each do |content| %>
<div class="xl:w-1/4 md:w-1/2 p-2 group">
<%= link_to content.view_path do %>
<div class="bg-white hover:shadow-lg rounded-lg transition">
<%= image_tag content.random_image_including_private(format: :small), class: 'h-64 rounded-t w-full object-cover object-center mb-6' %>
<div class="pl-4 pb-1">
<i class="material-icons float-right text-2xl mr-3">star_outline</i>
<h3 class="tracking-widest <%= content.text_color %> text-xs uppercase font-medium title-font">
<%= content.page_type %>
</h3>
<h2 class="text-lg text-gray-900 font-medium title-font mb-4">
<%= content.name %>
</h2>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
<% if @content.empty? %>
<div class="container mx-auto flex">
<div class="w-1/2 text-center p-6">
<button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i class="material-icons text-6xl <%= @content_type_class.text_color %>">list</i>
<div class="mt-2 block text-sm font-medium text-gray-900 mb-1">
Customize your <%= @content_type_name.downcase %> page template
</div>
<% end %>
<span class="rounded bg-notebook-blue text-white px-2 py-1 text-xs">
recommended before creating your first <%= @content_type_name.downcase %>
</span>
</button>
</div>
<% end %>
</div>
<div class="w-1/2 text-center p-6">
<button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i class="material-icons text-6xl <%= @content_type_class.text_color %>"><%= @content_type_class.icon %></i>
<span class="mt-2 block text-sm font-medium text-gray-900">Create your first <%= @content_type_name.downcase %></span>
</button>
</div>
</div>
<% end %>
<%= render partial: 'javascripts/content_linking' %>