mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
more dashboard polish
This commit is contained in:
Andrew Brown
parent
0baec4f9ad
commit
971475e747
@ -1,4 +1,7 @@
|
||||
<%
|
||||
# DEPRECATED: This partial has been merged into app/views/main/components/_serendipitous_question.html.erb
|
||||
# and is no longer used. It's kept here temporarily for reference.
|
||||
#
|
||||
# Partial locals: `content` to ask a question about, and `field` for the field being questioned
|
||||
include_quick_reference = defined?(include_quick_reference) && !!include_quick_reference
|
||||
%>
|
||||
|
||||
@ -21,12 +21,6 @@
|
||||
<i class="material-icons text-xs">schedule</i>
|
||||
<span>edited <%= time_ago_in_words page.updated_at %> ago</span>
|
||||
</span>
|
||||
<% if page.cached_word_count.present? %>
|
||||
<span class="flex items-center space-x-1">
|
||||
<i class="material-icons text-xs">description</i>
|
||||
<span><%= number_with_delimiter page.cached_word_count %> words</span>
|
||||
</span>
|
||||
<% end %>
|
||||
<% if page.respond_to?(:favorite?) && page.favorite? %>
|
||||
<i class="material-icons text-xs text-yellow-500">star</i>
|
||||
<% end %>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<% if @content %>
|
||||
<% if @content && @attribute_field_to_question %>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<!-- Hero Image -->
|
||||
<div class="relative h-48 overflow-hidden">
|
||||
@ -27,39 +27,109 @@
|
||||
</div>
|
||||
|
||||
<!-- Question Content -->
|
||||
<div class="p-6">
|
||||
<% if @attribute_field_to_question %>
|
||||
<%= render partial: 'cards/serendipitous/tailwind_content_question', locals: {
|
||||
content: @content,
|
||||
field: @attribute_field_to_question,
|
||||
expand_by_default: true,
|
||||
include_quick_reference: false
|
||||
} %>
|
||||
|
||||
<!-- Seamless clickable footer -->
|
||||
<button type="submit" class="w-full px-4 py-3 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-blue-50 hover:to-blue-100 border border-t-0 border-gray-300 hover:border-blue-300 rounded-b-lg transition-all duration-300 ease-out group cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset hover:shadow-sm active:scale-[0.998] active:shadow-inner">
|
||||
<div class="flex items-center justify-between text-sm text-gray-700 group-hover:text-blue-700 mb-1.5 transition-colors duration-200">
|
||||
<span class="flex items-center font-medium">
|
||||
<svg class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
<div class="p-6 pb-0">
|
||||
<style>
|
||||
/* Enhanced autosave visual feedback styles */
|
||||
.js-enhanced-autosave.border-yellow-400 {
|
||||
border-color: #fbbf24 !important;
|
||||
box-shadow: 0 0 0 1px #fbbf24 !important;
|
||||
}
|
||||
.js-enhanced-autosave.border-green-400 {
|
||||
border-color: #34d399 !important;
|
||||
box-shadow: 0 0 0 1px #34d399 !important;
|
||||
}
|
||||
.js-enhanced-autosave.border-red-400 {
|
||||
border-color: #f87171 !important;
|
||||
box-shadow: 0 0 0 1px #f87171 !important;
|
||||
}
|
||||
.js-enhanced-autosave:focus.border-yellow-400 {
|
||||
border-color: #fbbf24 !important;
|
||||
box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2) !important;
|
||||
}
|
||||
.js-enhanced-autosave:focus.border-green-400 {
|
||||
border-color: #34d399 !important;
|
||||
box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2) !important;
|
||||
}
|
||||
.js-enhanced-autosave:focus.border-red-400 {
|
||||
border-color: #f87171 !important;
|
||||
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p class="text-4xl text-gray-900">
|
||||
<%=
|
||||
t(
|
||||
"serendipitous_questions.attributes.#{@content.page_type.downcase}.#{@attribute_field_to_question.label.downcase}",
|
||||
name: @content.name,
|
||||
default: "What is #{@content.name}'s #{@attribute_field_to_question.label.downcase}?"
|
||||
)
|
||||
%>
|
||||
</p>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-sm text-gray-500">
|
||||
<span class="<%= @content.text_color %>"><%= link_to @content.name, @content.view_path %></span>
|
||||
<span class="mx-1">›</span>
|
||||
<%= @attribute_field_to_question.label %>
|
||||
</label>
|
||||
<div class="js-autosave-status text-xs text-gray-400 hidden">
|
||||
<span class="js-status-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= form_for @content, url: FieldTypeService.form_path_from_attribute_field(@attribute_field_to_question), method: :patch, html: { class: "serendipitous-question-form" } do |f| %>
|
||||
<%= hidden_field(:override, :redirect_path, value: request.fullpath) %>
|
||||
<%= hidden_field_tag "entity[entity_id]", @content.id %>
|
||||
<%= hidden_field_tag "entity[entity_type]", @content.page_type %>
|
||||
<%= hidden_field_tag "field[name]", @attribute_field_to_question[:id] %>
|
||||
|
||||
<%
|
||||
field_value = @attribute_field_to_question.attribute_values.find_by(
|
||||
user: @content.user,
|
||||
entity_type: @content.page_type,
|
||||
entity_id: @content.id
|
||||
).try(:value)
|
||||
|
||||
placeholder = I18n.translate "attributes.#{@content.page_type.downcase}.#{@attribute_field_to_question.label.downcase.gsub(/\s/, '_')}",
|
||||
scope: :serendipitous_questions,
|
||||
name: @content.name || "this #{@content.page_type.downcase}",
|
||||
default: 'Write as little or as much as you want!'
|
||||
%>
|
||||
|
||||
<div class="relative mt-1">
|
||||
<%=
|
||||
text_area_tag "field[value]",
|
||||
field_value,
|
||||
class: "w-full rounded-t-lg focus:border-notebook-blue h-48 border-gray-300 js-enhanced-autosave js-can-mention-pages resize-none transition-all duration-200",
|
||||
placeholder: placeholder
|
||||
%>
|
||||
</div>
|
||||
|
||||
<!-- Card Footer with Submit Button -->
|
||||
<button type="submit" class="w-full px-4 py-3 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-blue-50 hover:to-blue-100 border border-t-0 border-gray-300 hover:border-blue-300 rounded-b-lg transition-all duration-300 ease-out group cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset hover:shadow-sm active:scale-[0.998] active:shadow-inner">
|
||||
<div class="flex items-center justify-between text-sm text-gray-700 group-hover:text-blue-700 mb-1.5 transition-colors duration-200">
|
||||
<span class="flex items-center font-medium">
|
||||
<svg class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
Save answer & get next question
|
||||
</span>
|
||||
<svg class="w-4 h-4 opacity-50 group-hover:opacity-80 group-hover:translate-x-1 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
Save answer & get next question
|
||||
</span>
|
||||
<svg class="w-4 h-4 opacity-50 group-hover:opacity-80 group-hover:translate-x-1 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-gray-500 group-hover:text-blue-600 transition-colors duration-200">
|
||||
<i class="material-icons text-xs mr-1 opacity-80 group-hover:opacity-100 transition-opacity duration-200"><%= @content.icon %></i>
|
||||
<span class="opacity-90 group-hover:opacity-100 transition-opacity duration-200">
|
||||
Your answer will be automatically saved to your
|
||||
<span class="<%= @content.text_color %> mx-1 font-medium"><%= @content.name %></span>
|
||||
<%= @content.page_type.downcase %> page.
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-gray-500 group-hover:text-blue-600 transition-colors duration-200">
|
||||
<i class="material-icons text-xs mr-1 opacity-80 group-hover:opacity-100 transition-opacity duration-200"><%= @content.icon %></i>
|
||||
<span class="opacity-90 group-hover:opacity-100 transition-opacity duration-200">
|
||||
Your answer will be automatically saved to your
|
||||
<span class="<%= @content.text_color %> mx-1 font-medium"><%= @content.name %></span>
|
||||
<%= @content.page_type.downcase %> page.
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@ -64,15 +64,17 @@
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
|
||||
<!-- What's New Card -->
|
||||
<div>
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-md shadow-sm hover:shadow-lg transition-all duration-300">
|
||||
<div class="p-4">
|
||||
<h4 class="text-base font-semibold text-blue-900 mb-2">New Something</h4>
|
||||
<p class="text-sm text-blue-700 leading-relaxed">This is a little notice box about what's new. I can fit about 2 lines before I feel bad.</p>
|
||||
<div class="text-right">
|
||||
<%= link_to 'Dismiss', '#', class: 'text-blue-600 hover:text-blue-700 font-medium text-xs' %>
|
||||
<div>
|
||||
<%= link_to '#' do %>
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-md shadow-sm hover:shadow-lg transition-all duration-300">
|
||||
<div class="p-4">
|
||||
<h4 class="text-base font-semibold text-blue-900 mb-2">New Something</h4>
|
||||
<p class="text-sm text-blue-700 leading-relaxed">This is a little notice box about what's new. I can fit about 2 lines before I feel bad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="text-right">
|
||||
<%= link_to 'Dismiss this notice', '#', class: 'text-gray-400 hover:text-notebook-blue font-medium text-xs' %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -112,9 +114,6 @@
|
||||
<i class="material-icons mr-3 text-gray-600 text-3xl">library_books</i>
|
||||
Most-Edited Pages
|
||||
</h2>
|
||||
<%= link_to recent_content_path, class: "text-sm text-blue-600 hover:text-blue-700 font-medium" do %>
|
||||
View more →
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Scrolling Content Grid -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user