polish on multiverse, notifications, and page type toggling

This commit is contained in:
Andrew Brown 2023-04-21 14:22:31 -07:00
parent 8c7b749ee5
commit 124960edd8
3 changed files with 36 additions and 13 deletions

View File

@ -24,9 +24,9 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<h3 class="text-xl font-medium text-gray-900">Choose your page templates</h3>
<h3 class="text-xl font-medium text-gray-900">Choose your page types</h3>
<p class="mt-4 text-base text-gray-500">
Add or remove templates across the site at any time by toggling them here. Disabled templates are hidden, but not deleted.
Add or remove page types across the site at any time by toggling them here. Disabled page types are simply hidden, not deleted.
</p>
</div>
<div class="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
@ -48,11 +48,11 @@
</div>
<h3 class="text-xl font-medium text-gray-900">Customize your templates</h3>
<p class="mt-4 text-base text-gray-500">
Each page template comes with a thorough set of categories and questions &mdash; which you can fully customize.
Each page type comes with an in-depth template of fully-customizable categories and questions.
</p>
</div>
<div class="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<a href="#" class="text-base font-medium text-indigo-700 hover:text-indigo-600">Learn about templates<span aria-hidden="true"> &rarr;</span></a>
<a href="#" class="text-base font-medium text-notebook-blue hover:text-blue-600">Learn about templates</a>
</div>
</div>
@ -69,8 +69,9 @@
</p>
</div>
<div class="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<%= link_to 'https://docs.google.com/forms/d/1PFOaa97Cu3vrceUvcuFT6nyITaMwR-4wQSarUdVoPSg/edit', target: '_new', class: 'text-base font-medium text-indigo-700 hover:text-indigo-600' do %>
Suggest a new template
<%= link_to 'https://docs.google.com/forms/d/1PFOaa97Cu3vrceUvcuFT6nyITaMwR-4wQSarUdVoPSg/edit', target: '_new', class: 'text-base font-medium text-notebook-blue hover:text-blue-600' do %>
Suggest a new page type
<span aria-hidden="true"> &rarr;</span>
<% end %>
</div>
</div>
@ -131,7 +132,10 @@
<% if user_signed_in? %>
You've created <%= pluralize @current_user_content.fetch(content_type.name, []).count, "page" %> with this template.
<% else %>
Users have created <%= pluralize content_type.last.try(:id) || 0, "page" %> with this template.
Users have created
<%= number_with_delimiter content_type.last.try(:id) || 0 %>
<%= "page".pluralize content_type.last.try(:id) || 0 %>
with this template.
<% end %>
</span>
</span>
@ -227,7 +231,10 @@
<% if user_signed_in? %>
You've created <%= pluralize @current_user_content.fetch('Universe', []).count, "page" %> with this template.
<% else %>
Users have created <%= pluralize Universe.last.try(:id) || 0, "page" %> with this template.
Users have created
<%= number_with_delimiter Universe.last.try(:id) || 0 %>
<%= "universe".pluralize Universe.last.try(:id) || 0 %>
with this template.
<% end %>
</span>
</span>
@ -259,9 +266,9 @@
</noscript>
</div>
<% else %>
<%= link_to send("#{content_type.name.downcase}_worldbuilding_info_path") do %>
<%= link_to send("#{Universe.name.downcase}_worldbuilding_info_path") do %>
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
About <%= content_type.name.pluralize %>
About <%= Universe.name.pluralize %>
</button>
<% end %>
<% end %>
@ -345,7 +352,10 @@
<% if user_signed_in? %>
You've created <%= pluralize @current_user_content.fetch(content_type.name, []).count, "page" %> with this template.
<% else %>
Users have created <%= pluralize content_type.last.try(:id) || 0, "page" %> with this template.
Users have created
<%= number_with_delimiter content_type.last.try(:id) || 0 %>
<%= "page".pluralize content_type.last.try(:id) || 0 %>
with this template.
<% end %>
</span>
</span>

View File

@ -62,6 +62,17 @@
<% end %>
<% end %>
</div>
<% if @user_notifications.empty? %>
<div class="relative block my-4 mx-6 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">
<svg class="mx-auto h-12 w-12 text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
<span class="mt-2 block text-sm font-medium text-gray-900">
Your notifications will appear here<br />
<sub class="text-gray-500">..when you have any!</sub>
</span>
</div>
<% end %>
<%= link_to main_app.mark_all_read_path, class: 'block bg-blue-100 hover:bg-blue-50 text-black text-center py-2' do %>
Mark all notifications read
<% end %>

View File

@ -12,7 +12,7 @@
</p>
<p class="mt-3 text-lg text-gray-300">
Universes are a convenient way to organize your notebook pages into separate worlds.
You can click <strong>FOCUS</strong> on any universe below to filter your entire notebook to just that universe &mdash;
You can click <i class="material-icons" style="position: relative; top: 5px;">fullscreen</i><strong>FOCUS</strong> on any universe below to filter your entire notebook to just that universe &mdash;
and focus on just the world you're working on.
</p>
<div class="mt-8">
@ -56,7 +56,9 @@
<% @current_user_content.fetch('Universe', []).each do |universe| %>
<li class="col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200">
<div class="flex-1 flex flex-col p-8">
<%= image_tag universe.random_image_including_private, class: 'w-48 h-48 flex-shrink-0 mx-auto rounded-full border-2 border-purple-800' %>
<%= link_to universe.view_path do %>
<%= image_tag universe.random_image_including_private, class: 'w-48 h-48 flex-shrink-0 mx-auto rounded-full border-2 border-purple-800 hover:opacity-80' %>
<% end %>
<h3 class="mt-6 text-gray-900 text-sm font-medium"><%= universe.name %></h3>
<dl class="mt-1 flex-grow flex flex-col justify-between">
<dd class="text-gray-500 text-sm"><%= universe.description %></dd>