WIP #219 ItemPanelComponent

learn-awesome · Nov 14, 2020 · d219a97 · d219a97
1 parent c7d1bf0
commit d219a97
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/app/components/five_star_component.html.erb b/app/components/five_star_component.html.erb
@@ -1,7 +1,8 @@
+<% if @user %>
 <%= form_with(model: @review, class: "inline review-rating-#{@review.item.id}") do |form| %>
 <div 
   x-data="{ val: <%= @review.overall_score.to_json %>, orig: <%= @review.overall_score.to_json %> }"
-  class="inline-flex cursor-pointer text-orange-600" 
+  class="inline-flex cursor-pointer text-orange-600 text-2xl" 
   @click="orig = val; $nextTick(() => { Rails.fire($el.parentElement,'submit') });"
 >
   <input type="number" name="review[overall_score]" :value="orig" class="hidden"/>
@@ -13,4 +14,8 @@
 
 </div>
 <input type="hidden" name="review[item_id]" value="<%= @review.item_id %>" />
+<% end %>
+
+<% else %>
+<!-- not logged in -->
 <% end %>
diff --git a/app/components/item_panel_component.html.erb b/app/components/item_panel_component.html.erb
@@ -1,4 +1,4 @@
-<div class="flex flex-col bg-white rounded-lg shadow-lg overflow-hidden">
+<div class="flex flex-col">
 <div class="flex-1 p-6 flex flex-col">
   <div>
     <div class='w-32 mb-2 ml-2 float-right 2xl:w-40'>
@@ -20,7 +20,7 @@
         <h3 class="mt-4 text-xl leading-7 font-semibold text-gray-900">
           <%= @item.display_name %>
         </h3>
-
+        <p class="text-gray-500 text-sm"><%= @item.primary_link.top_domain %></p>
         <p class="mt-3 text-base leading-6 text-gray-500">
           <%= @item.display_description %>
         </p>
@@ -32,19 +32,17 @@
 <div class="border-t border-gray-200">
   <div class="-mt-px flex">
     <div class="w-0 flex-1 flex border-r border-gray-200">
-      <div class="relative -mr-px w-0 flex-1 inline-flex p-2">
+      <div class="relative -mr-px w-0 flex-1 inline-flex justify-around items-center p-2">
         <%= render SplitButtonComponent.new(item: @item, user: @user, isopen: false) %>
         <%= render FiveStarComponent.new(review: Review.find_or_initialize_by(item_id: @item.id, user: @user)) %>
+        <div class="flex p-2 overflow-hidden">
+          <% @item.get_people(@user).each_with_index do |p, i| %>
+            <img title="<%= p.nickname %>" class="<%= i >= 1 ? '-ml-2' : '' %> inline-block h-10 w-10 rounded-full text-white shadow-solid" src="<%= p.avatar_image %>" alt="">
+          <% end %>
+        </div>
       </div>
     </div>
-    <div class="-ml-px w-0 flex-1 flex">
-      <div class="flex p-2 overflow-hidden">
-        <img class="inline-block h-10 w-10 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-        <img class="-ml-2 inline-block h-10 w-10 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-        <img class="-ml-2 inline-block h-10 w-10 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="">
-        <img class="-ml-2 inline-block h-10 w-10 rounded-full text-white shadow-solid" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-      </div>
-    </div>
+
   </div>
 </div>
 </div>

diff --git a/app/models/item.rb b/app/models/item.rb
@@ -172,6 +172,10 @@ def average_overall_score
     return scores.sum / scores.size
   end
 
+  def get_people(for_user)
+    self.reviews.map(&:user).take(5)
+  end
+
   def large_thumbnail
     return self.image_url if self.image_url.present?
     if self.links.any? { |l| l.url.include?("youtube.com") }

diff --git a/app/views/layouts/tailwind.html.erb b/app/views/layouts/tailwind.html.erb
@@ -144,7 +144,7 @@
       </div>
     </div>
 
-    <main class="flex-1 relative z-0 overflow-y-auto py-6 focus:outline-none pattern" tabindex="0">
+    <main class="flex-1 relative z-0 overflow-y-auto py-6 focus:outline-none bg-pink-50" tabindex="0">
       <div class="mx-auto px-4 sm:px-6 md:px-8">
 
         <% flash.each do |name, msg| -%>

diff --git a/app/views/welcome/components.html+tailwind.erb b/app/views/welcome/components.html+tailwind.erb
@@ -10,7 +10,9 @@
 <%= render SplitButtonComponent.new(item: Item.order(:created_at).first, user: current_user, isopen: false) %>
 
 <h1 class="mt-8">ItemPanelComponent</h1>
+<div class="bg-white rounded-lg shadow-lg">
 <%= render ItemPanelComponent.new(item: Item.order(:created_at).first, user: current_user) %>
+</div>
 
 <h1 class="mt-8">ItemsGridComponent</h1>
 <%= render ItemsGridComponent.new(items: Item.all.take(6), user: current_user) %>