Skip to content

Commit 677cc83

Browse files
Mr-T18Mr-T18
committed
本当に最後
1 parent 045bfd0 commit 677cc83

1 file changed

Lines changed: 72 additions & 53 deletions

File tree

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

Lines changed: 72 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<% content_for :title, @photo_spot.name %>
2-
<div data-controller="image-modal">
2+
<div data-controller="image-modal">
33
<div class="container mx-auto px-4 py-6">
44
<% if notice.present? %>
55
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6">
@@ -13,47 +13,6 @@
1313
<%= @photo_spot.name %>
1414
<span class="text-gray-600 text-lg font-normal">
1515
（<%= @photo_spot.reviews.count %>件のレビュー）
16-
<div class="flex-1 min-w-0">
17-
<dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm text-gray-700 break-words">
18-
<dt class="font-semibold">名称</dt>
19-
<dd><%= @photo_spot.name %></dd>
20-
<dt class="font-semibold">説明</dt>
21-
<dd><%= @photo_spot.detail %></dd>
22-
<dt class="font-semibold">タグ</dt>
23-
<dd><%= @photo_spot.tags %></dd>
24-
<dt class="font-semibold">時間帯</dt>
25-
<dd>
26-
<%= @photo_spot.timestart ? @photo_spot.timestart.strftime("%H:%M") : "未設定" %> 〜
27-
<%= @photo_spot.timeend ? @photo_spot.timeend.strftime("%H:%M") : "未設定" %>
28-
</dd>
29-
<dt class="font-semibold">駐車場</dt>
30-
<dd>
31-
<% if @photo_spot.parking_flag == 1 %>
32-
駐車場あり
33-
<% if @photo_spot.parking_count%>
34-
：<%= @photo_spot.parking_count %> 台
35-
<% end %>
36-
<% elsif @photo_spot.parking_flag == 0 %>
37-
駐車場なし
38-
<% end %>
39-
</dd>
40-
<dt class="font-semibold">おすすめの季節</dt>
41-
<dd>
42-
<% case @photo_spot.season %>
43-
<% when 'spring' %>
44-
春
45-
<% when 'summer' %>
46-
夏
47-
<% when 'autumn' %>
48-
秋
49-
<% when 'winter' %>
50-
冬
51-
<% else %>
52-
未設定
53-
<% end %>
54-
</dd>
55-
</dl>
56-
</div>
5716
</span>
5817
</h1>
5918
<% if @photo_spot.tags.present? %>
@@ -65,22 +24,63 @@
6524
<% end %>
6625
</div>
6726
<% end %>
27+
<div class="flex-1 min-w-0">
28+
<dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm text-gray-700 break-words">
29+
<dt class="font-semibold">名称</dt>
30+
<dd><%= @photo_spot.name %></dd>
31+
<dt class="font-semibold">説明</dt>
32+
<dd><%= @photo_spot.detail %></dd>
33+
<dt class="font-semibold">タグ</dt>
34+
<dd><%= @photo_spot.tags %></dd>
35+
<dt class="font-semibold">時間帯</dt>
36+
<dd>
37+
<%= @photo_spot.timestart ? @photo_spot.timestart.strftime("%H:%M") : "未設定" %> 〜
38+
<%= @photo_spot.timeend ? @photo_spot.timeend.strftime("%H:%M") : "未設定" %>
39+
</dd>
40+
<dt class="font-semibold">駐車場</dt>
41+
<dd>
42+
<% if @photo_spot.parking_flag == 1 %>
43+
駐車場あり
44+
<% if @photo_spot.parking_count %>
45+
：<%= @photo_spot.parking_count %> 台
46+
<% end %>
47+
<% elsif @photo_spot.parking_flag == 0 %>
48+
駐車場なし
49+
<% end %>
50+
</dd>
51+
<dt class="font-semibold">おすすめの季節</dt>
52+
<dd>
53+
<% case @photo_spot.season %>
54+
<% when 'spring' %>
55+
春
56+
<% when 'summer' %>
57+
夏
58+
<% when 'autumn' %>
59+
秋
60+
<% when 'winter' %>
61+
冬
62+
<% else %>
63+
未設定
64+
<% end %>
65+
</dd>
66+
</dl>
67+
</div>
6868
</div>
6969
<div class="flex flex-col sm:flex-row gap-3 mt-4 lg:mt-0">
70-
<%= link_to "レビューを投稿", new_photo_spot_review_path(@photo_spot),
71-
class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" %>
70+
<%= link_to "レビューを投稿", new_photo_spot_review_path(@photo_spot),
71+
class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" %>
7272
</div>
7373
</div>
7474
<% if @photo_spot.images.attached? %>
7575
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
7676
<% @photo_spot.images.limit(6).each_with_index do |image, index| %>
7777
<div class="relative group aspect-video overflow-hidden rounded-lg shadow-sm cursor-pointer"
78-
data-action="click->image-modal#open"
78+
data-action="click->image-modal#open"
7979
data-image-modal-index-value="<%= index %>"
8080
data-image-modal-images-value="<%= @photo_spot.images.map { |i| url_for(i) }.to_json %>">
8181
<%= image_tag image.variant(resize_to_fill: [400, 225]),
82-
class: "w-full h-full object-cover group-hover:shadow-md transition-shadow duration-200",
83-
alt: "#{@photo_spot.name}の画像#{index + 1}" %>
82+
class: "w-full h-full object-cover group-hover:shadow-md transition-shadow duration-200",
83+
alt: "#{@photo_spot.name}の画像#{index + 1}" %>
8484
<% if index == 5 && @photo_spot.images.count > 6 %>
8585
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
8686
<span class="text-white text-lg font-semibold">
@@ -96,6 +96,26 @@
9696
<p class="text-gray-700 leading-relaxed"><%= simple_format(@photo_spot.detail) %></p>
9797
</div>
9898
</div>
99+
<%# モーダルウィンドウのHTML部分 %>
100+
<div data-image-modal-target="modal"
101+
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-75 hidden">
102+
<div class="relative w-full h-full max-w-5xl">
103+
<div class="relative w-full h-full flex items-center justify-center">
104+
<img data-image-modal-target="image" class="max-w-full max-h-screen object-contain" alt="Enlarged image">
105+
<%# 閉じるボタン %>
106+
<button data-action="click->image-modal#close" class="absolute top-4 right-4 text-white text-4xl">
107+
&times;
108+
</button>
109+
<%# 左右の矢印ボタン %>
110+
<button data-action="click->image-modal#previous" data-image-modal-target="prevBtn" class="absolute left-4 top-1/2 -translate-y-1/2 text-white text-5xl">
111+
&lsaquo;
112+
</button>
113+
<button data-action="click->image-modal#next" data-image-modal-target="nextBtn" class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-5xl">
114+
&rsaquo;
115+
</button>
116+
</div>
117+
</div>
118+
</div>
99119
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
100120
<h2 class="text-2xl font-semibold text-gray-900 mb-6 flex items-center">
101121
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
@@ -116,17 +136,16 @@
116136
<p class="text-lg">まだレビューが投稿されていません</p>
117137
<p class="text-sm mt-2">最初のレビューを投稿してみませんか？</p>
118138
<div class="mt-4">
119-
<%= link_to "最初のレビューを投稿", new_photo_spot_review_path(@photo_spot),
120-
class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" %>
139+
<%= link_to "最初のレビューを投稿", new_photo_spot_review_path(@photo_spot),
140+
class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" %>
121141
</div>
122142
</div>
123143
<% end %>
124144
</div>
125145
</div>
126146
<div class="mt-6">
127-
<%= link_to "フォトスポット一覧に戻る", photo_spots_path,
128-
class: "inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50" %>
147+
<%= link_to "フォトスポット一覧に戻る", photo_spots_path,
148+
class: "inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50" %>
129149
</div>
130150
</div>
131-
</div>
132-
</div>
151+
</div>

0 commit comments

Comments
 (0)