Skip to content

Commit 01debb7

Browse files
miharekarmiharekar
committed
Convert shot to erb and extract header row
1 parent 0bb54f4 commit 01debb7

File tree

5 files changed

+193
-145
lines changed

5 files changed

+193
-145
lines changed

‎app/views/shots/_share.html.erb

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<% if @shot.information&.tcl_profile_fields.present? %>
2+
<div class="mr-3">
3+
<a class="inline-flex px-4 py-2 text-sm bg-white border rounded-md shadow-sm cursor-pointer border-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-900" href="<%= api_shot_profile_path(@shot) %>" title="Download this profile" target="_blank">
4+
<svg class="w-4 h-4 -ml-1 -mr-1 text-neutral-500 dark:text-neutral-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
5+
<path clip-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" fill-rule="evenodd"></path>
6+
</svg>
7+
</a>
8+
</div>
9+
<div class="mr-3" data-controller="share-shot" data-share-shot-url-value="<%= share_shot_url %>">
10+
<div class="fixed inset-0 z-50 hidden overflow-y-auto" data-share-shot-target="toggleable" data-action="keydown@window->share-shot#keydown">
11+
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
12+
<div class="fixed inset-0 transition-opacity" data-transition-enter="ease-out duration-300" data-transition-enter-start="opacity-0" data-transition-enter-end="opacity-100" data-transition-leave="ease-in duration-200" data-transition-leave-start="opacity-100" data-transition-leave-end="opacity-0" data-share-shot-target="toggleable">
13+
<div class="absolute inset-0 opacity-75 bg-neutral-500" data-action="click->share-shot#hide"></div>
14+
</div>
15+
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
16+
<div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl dark:bg-neutral-900 sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" data-transition-enter="ease-out duration-300" data-transition-enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" data-transition-enter-end="opacity-100 translate-y-0 sm:scale-100" data-transition-leave="ease-in duration-200" data-transition-leave-start="opacity-100 translate-y-0 sm:scale-100" data-transition-leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" data-share-shot-target="toggleable">
17+
<div class="px-4 pt-5 pb-4 bg-white dark:bg-neutral-900 sm:p-6 sm:pb-4">
18+
<div class="sm:flex sm:items-start">
19+
<div class="flex items-center justify-center w-12 h-12 mx-auto rounded-full shrink-0 bg-terracotta-100 dark:bg-terracotta-900 sm:mx-0 sm:h-10 sm:w-10">
20+
<svg class="w-6 h-6 text-terracotta-600 dark:text-terracotta-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
21+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
22+
</svg>
23+
</div>
24+
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
25+
<h3 class="text-lg font-medium leading-6 text-neutral-900 dark:text-neutral-100">
26+
Share this Shot
27+
</h3>
28+
<div class="mt-2">
29+
<p class="text-sm text-neutral-500 dark:text-neutral-400">
30+
Open DYE (Describe Your Espresso), navigate to "Next Shot," tap the "Visualizer" button, type the code below in the "Code" field, and tap "Download."
31+
</p>
32+
</div>
33+
<p class="px-6 py-6 mt-6 font-mono text-6xl font-semibold tracking-widest text-center text-white rounded-lg bg-terracotta-700 dark:bg-terracotta-900" data-share-shot-target="code">
34+
…
35+
</p>
36+
<div class="mt-6">
37+
<p class="mb-1 text-sm text-neutral-500 dark:text-neutral-400">
38+
The capitalization of the code is <strong>not important</strong> (ASDF equals Asdf equals asdf).
39+
</p>
40+
<p class="text-sm text-neutral-500 dark:text-neutral-400">
41+
This code is only valid for 1 hour.
42+
</p>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="px-4 py-3 bg-neutral-50 dark:bg-neutral-900 sm:px-6 sm:flex sm:flex-row-reverse">
48+
<button class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium bg-white border rounded-md shadow-sm border-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-terracotta-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" data-action="share-shot#hide">
49+
Close
50+
</button>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
<button class="inline-flex px-4 py-2 text-sm bg-white border rounded-md shadow-sm cursor-pointer border-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-900" title="Share this Shot" data-action="share-shot#show">
56+
<svg class="w-4 h-4 -ml-1 -mr-1 text-neutral-500 dark:text-neutral-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
57+
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
58+
</svg>
59+
</button>
60+
</div>
61+
<% end %>

‎app/views/shots/_share.html.slim

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎app/views/shots/_shot_header_row.html.erb

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<% owner = current_user && @shot.user_id == current_user.id %>
2+
<% if owner || @shot.user&.public? || @shot.information&.tcl_profile_fields.present? %>
3+
<div class="bg-white shadow dark:bg-neutral-900" data-controller="modal">
4+
<%= render "shared/modal" %>
5+
<div class="flex items-center justify-between px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
6+
<% if !owner && @shot.user&.public? %>
7+
<div class="flex flex-col items-center min-w-full lg:flex-row">
8+
<h1 class="flex text-2xl font-bold leading-tight sm:text-3xl text-neutral-900 dark:text-neutral-100">
9+
<div class="flex space-x-2">
10+
<img class="w-8 h-8 rounded" src="<%= avatar_url(@shot.user, 80) %>">
11+
<span class="font-serif text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
12+
Shot by <%= link_to "#{@shot.user.name}", person_path(@shot.user.slug), class: "underline hover:text-neutral-500" %>
13+
</span>
14+
<% if @shot.user.premium? %>
15+
<%= link_to premium_index_path do %>
16+
<svg class="h-9 w-9 text-terracotta-600 hover:text-terracotta-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
17+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
18+
</svg>
19+
<% end %>
20+
<% end %>
21+
</div>
22+
</h1>
23+
<div class="grow"></div>
24+
<div class="flex items-center mt-3 lg:mt-0">
25+
<%= render "share" %>
26+
<%= render "related_shots", related_shots: @related_shots, shot: @shot if @related_shots.present? %>
27+
</div>
28+
</div>
29+
<% else %>
30+
<div class="flex flex-col items-center min-w-full sm:flex-row">
31+
<div class="flex items-center">
32+
<% if owner %>
33+
<div class="flex mr-3" data-controller="clipboard">
34+
<input class="hidden" size="1" type="text" value="<%= request.url %>" readonly="readonly" data-clipboard-target="source">
35+
<a class="inline-flex px-4 py-2 text-sm bg-white border rounded-md shadow-sm cursor-pointer border-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-900" data-action="clipboard#copy" href="#" title="Copy URL to clipboard" data-clipboard-target="container">
36+
<svg class="w-4 h-4 -ml-1 -mr-1 text-neutral-500 dark:text-neutral-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-clipboard-target="copy">
37+
<path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z" />
38+
<path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z" />
39+
</svg>
40+
<svg class="hidden w-4 h-4 -ml-1 -mr-1 text-terracotta-500 dark:text-terracotta-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-clipboard-target="check">
41+
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
42+
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
43+
</svg>
44+
</a>
45+
</div>
46+
<div class="mr-3">
47+
<a class="inline-flex px-4 py-2 text-sm bg-white border rounded-md shadow-sm cursor-pointer border-neutral-300 dark:border-neutral-600 dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-900" href="<%= edit_shot_path %>">
48+
<svg class="w-4 h-4 -ml-1 -mr-1 text-neutral-500 dark:text-neutral-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
49+
<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" />
50+
</svg>
51+
</a>
52+
</div>
53+
<div class="mr-3">
54+
<%= button_to shot_path, method: :delete, form_class: "inline-flex", class: "inline-flex px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md shadow-sm text-sm font-medium text-neutral-700 bg-white dark:bg-neutral-800 dark:text-neutral-300 hover:bg-red-50 dark:hover:bg-red-900", data: {turbo: false, action: "click->modal#confirm", title: "Delete Shot", text: "Are you sure you want to permanently delete shot from #{@shot.start_time.in_time_zone(@timezone).to_formatted_s(:long)}?"} do %>
55+
<svg class="w-4 h-4 -ml-1 -mr-1 text-neutral-500 dark:text-neutral-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
56+
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
57+
</svg>
58+
<% end %>
59+
</div>
60+
<% end %>
61+
<%= render "share" %>
62+
</div>
63+
<% if owner && @related_shots.present? %>
64+
<div class="grow"></div>
65+
<div class="flex mt-3 sm:mt-0">
66+
<%= render "related_shots", related_shots: @related_shots, shot: @shot %>
67+
</div>
68+
<% end %>
69+
</div>
70+
<% end %>
71+
</div>
72+
</div>
73+
<% end %>

‎app/views/shots/show.html.erb

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<% content_for(:html_title) { "Visualizer | #{@shot.profile_title}" } %>
2+
<% content_for(:head) do %>
3+
<% description = render "meta_description", shot: @shot %>
4+
<meta name="description" content="<%= description %>">
5+
<meta name="twitter:card" content="summary_large_image">
6+
<meta property="og:title" content="<%= @shot.profile_title %>">
7+
<% if @shot.screenshot? %><meta property="og:image" content="<%= @shot.screenshot_url %>"><% end %>
8+
<meta property="og:url" content="https://visualizer.coffee/shots/<%= @shot.id %>">
9+
<meta property="og:description" content="<%= description %>">
10+
<% end %>
11+
<%= render "shot_header_row" %>
12+
<% width_class = @shot.image.attached? ? "md:w-full" : "md:w-2/3" %>
13+
<div class="px-2 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
14+
<div class="flex flex-col md:flex-row">
15+
<div class="<%= @shot.image.attached? ? "md:w-1/2" : "md:w-full" %>">
16+
<%= render "details", shot: @shot, name: false %>
17+
<h3 class="mt-3 text-l dark:text-neutral-300">Compare</h3>
18+
<div class="flex flex-col mt-3" data-controller="shot-routing" data-shot-routing-shot-id-value="<%= @shot.id %>">
19+
<% if @compare_shots.present? %>
20+
<div class="flex-1 mb-1 <%= width_class %>">
21+
<select class="standard-input" data-action="shot-routing#compare">
22+
<option>With one of your recent shots</option>
23+
<% @compare_shots.each do |id, title, time| %>
24+
<option value="<%= id %>">
25+
<%= [title, time.in_time_zone(@timezone).to_formatted_s(:long)].join(" @ ") %>
26+
</option>
27+
<% end %>
28+
</select>
29+
</div>
30+
<% end %>
31+
<div class="flex-1 <%= width_class %>">
32+
<input class="mt-1 standard-input" type="text" data-action="shot-routing#urlCompare" placeholder="With any shot via its URL">
33+
</div>
34+
</div>
35+
</div>
36+
<% if @shot.image.attached? && @shot.image.variable? %>
37+
<div class="mt-3 md:w-1/2 md:mt-0 md:ml-3">
38+
<%= link_to @shot.image, target: "_blank" do %>
39+
<%= image_tag @shot.image.variant(:display), class: "rounded-lg mx-auto" %>
40+
<% end %>
41+
</div>
42+
<% end %>
43+
</div>
44+
</div>
45+
<% if @chart %>
46+
<div class="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
47+
<div id="shot-chart"></div>
48+
</div>
49+
<% if @chart.temperature_chart.present? %>
50+
<div class="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
51+
<div id="temperature-chart"></div>
52+
</div>
53+
<% end %>
54+
<script>
55+
window.shotData = <%== @chart.shot_chart.to_json %>;
56+
window.temperatureData = <%== @chart.temperature_chart.to_json %>;
57+
window.shotStages = <%== @chart.stages.to_json %>;
58+
</script>
59+
<% end %>

0 commit comments

Comments
 (0)