Skip to content

Commit 9d9e2fc

Browse files
Mr-T18Mr-T18
committed
レビュー画面のタグ微修正
1 parent 9df1694 commit 9d9e2fc

1 file changed

Lines changed: 114 additions & 114 deletions

File tree

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

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,132 @@
11
<% content_for :title, @photo_spot.name %>
22
<div data-controller="image-modal">
3-
<div class="container mx-auto px-4 py-6">
4-
<% if notice.present? %>
5-
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6">
6-
<%= notice %>
7-
</div>
8-
<% end %>
9-
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
10-
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between mb-6">
11-
<div class="flex-1">
12-
<h1 class="text-3xl font-bold text-gray-900 mb-2">
13-
<%= @photo_spot.name %>
14-
<span class="text-gray-600 text-lg font-normal">
15-
（<%= @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>
57-
</span>
58-
</h1>
59-
<% if @photo_spot.tags.present? %>
60-
<div class="flex flex-wrap gap-2 mb-4">
61-
<% @photo_spot.tags.each do |tag| %>
62-
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
63-
<%= tag.name %>
64-
</span>
65-
<% end %>
66-
</div>
67-
<% end %>
3+
<div class="container mx-auto px-4 py-6">
4+
<% if notice.present? %>
5+
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6">
6+
<%= notice %>
687
</div>
69-
<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),
8+
<% end %>
9+
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
10+
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between mb-6">
11+
<div class="flex-1">
12+
<h1 class="text-3xl font-bold text-gray-900 mb-2">
13+
<%= @photo_spot.name %>
14+
<span class="text-gray-600 text-lg font-normal">
15+
（<%= @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>
57+
</span>
58+
</h1>
59+
<% if @photo_spot.tags.present? %>
60+
<div class="flex flex-wrap gap-2 mb-4">
61+
<% @photo_spot.tags.split(",").each do |tag| %>
62+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
63+
<%= tag.strip %>
64+
</span>
65+
<% end %>
66+
</div>
67+
<% end %>
68+
</div>
69+
<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),
7171
class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" %>
72+
</div>
7273
</div>
73-
</div>
74-
<% if @photo_spot.images.attached? %>
75-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
76-
<% @photo_spot.images.limit(6).each_with_index do |image, index| %>
77-
<div class="relative group aspect-video overflow-hidden rounded-lg shadow-sm cursor-pointer"
74+
<% if @photo_spot.images.attached? %>
75+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
76+
<% @photo_spot.images.limit(6).each_with_index do |image, index| %>
77+
<div class="relative group aspect-video overflow-hidden rounded-lg shadow-sm cursor-pointer"
7878
data-action="click->image-modal#open"
79-
data-image-modal-index-value="<%= index %>"
80-
data-image-modal-images-value="<%= @photo_spot.images.map { |i| url_for(i) }.to_json %>">
81-
<%= image_tag image.variant(resize_to_fill: [400, 225]),
79+
data-image-modal-index-value="<%= index %>"
80+
data-image-modal-images-value="<%= @photo_spot.images.map { |i| url_for(i) }.to_json %>">
81+
<%= image_tag image.variant(resize_to_fill: [400, 225]),
8282
class: "w-full h-full object-cover group-hover:shadow-md transition-shadow duration-200",
8383
alt: "#{@photo_spot.name}の画像#{index + 1}" %>
84-
<% if index == 5 && @photo_spot.images.count > 6 %>
85-
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
86-
<span class="text-white text-lg font-semibold">
87-
+<%= @photo_spot.images.count - 6 %>枚
88-
</span>
89-
</div>
84+
<% if index == 5 && @photo_spot.images.count > 6 %>
85+
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
86+
<span class="text-white text-lg font-semibold">
87+
+<%= @photo_spot.images.count - 6 %>枚
88+
</span>
89+
</div>
9090
<% end %>
91-
</div>
92-
<% end %>
91+
</div>
92+
<% end %>
93+
</div>
94+
<% end %>
95+
<div class="prose max-w-none mb-6">
96+
<p class="text-gray-700 leading-relaxed"><%= simple_format(@photo_spot.detail) %></p>
9397
</div>
94-
<% end %>
95-
<div class="prose max-w-none mb-6">
96-
<p class="text-gray-700 leading-relaxed"><%= simple_format(@photo_spot.detail) %></p>
9798
</div>
98-
</div>
99-
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
100-
<h2 class="text-2xl font-semibold text-gray-900 mb-6 flex items-center">
101-
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
102-
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
103-
</svg>
104-
レビュー
105-
</h2>
106-
<div class="space-y-4">
107-
<% if @reviews.any? %>
108-
<% @reviews.each do |review| %>
109-
<%= render partial: "reviews/review", locals: { review: review } %>
110-
<% end %>
111-
<% else %>
112-
<div class="text-center py-12 text-gray-500">
113-
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
114-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.001 8.001 0 01-7.938-7M5 20h-.5a2.5 2.5 0 010-5H5a8.001 8.001 0 017.938-7M5 20v-2a8.001 8.001 0 017.938-7H13.5a2.5 2.5 0 010 5H13a8.001 8.001 0 00-7.938 7z"/>
115-
</svg>
116-
<p class="text-lg">まだレビューが投稿されていません</p>
117-
<p class="text-sm mt-2">最初のレビューを投稿してみませんか？</p>
118-
<div class="mt-4">
119-
<%= link_to "最初のレビューを投稿", new_photo_spot_review_path(@photo_spot),
99+
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
100+
<h2 class="text-2xl font-semibold text-gray-900 mb-6 flex items-center">
101+
<svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
102+
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
103+
</svg>
104+
レビュー
105+
</h2>
106+
<div class="space-y-4">
107+
<% if @reviews.any? %>
108+
<% @reviews.each do |review| %>
109+
<%= render partial: "reviews/review", locals: { review: review } %>
110+
<% end %>
111+
<% else %>
112+
<div class="text-center py-12 text-gray-500">
113+
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
114+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.001 8.001 0 01-7.938-7M5 20h-.5a2.5 2.5 0 010-5H5a8.001 8.001 0 017.938-7M5 20v-2a8.001 8.001 0 017.938-7H13.5a2.5 2.5 0 010 5H13a8.001 8.001 0 00-7.938 7z"/>
115+
</svg>
116+
<p class="text-lg">まだレビューが投稿されていません</p>
117+
<p class="text-sm mt-2">最初のレビューを投稿してみませんか？</p>
118+
<div class="mt-4">
119+
<%= link_to "最初のレビューを投稿", new_photo_spot_review_path(@photo_spot),
120120
class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" %>
121+
</div>
121122
</div>
122-
</div>
123-
<% end %>
123+
<% end %>
124+
</div>
124125
</div>
125-
</div>
126-
<div class="mt-6">
127-
<%= link_to "フォトスポット一覧に戻る", photo_spots_path,
126+
<div class="mt-6">
127+
<%= link_to "フォトスポット一覧に戻る", photo_spots_path,
128128
class: "inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50" %>
129+
</div>
129130
</div>
130-
</div>
131131
</div>
132132
</div>

0 commit comments

Comments
 (0)