Skip to content

Commit 5cb7e09

Browse files
Mr-T18Mr-T18
authored
Merge pull request #22 from RubyCamp/ichiran_compact
Ichiran compact
2 parents 465d400 + 1c31518 commit 5cb7e09

5 files changed

Lines changed: 113 additions & 50 deletions

File tree

‎app/javascript/controllers/parking_controller.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
3+
export default class extends Controller {
4+
static targets = ["countInput"]
5+
6+
connect() {
7+
this.updateInputState()
8+
}
9+
10+
toggle(event) {
11+
this.updateInputState()
12+
}
13+
14+
updateInputState() {
15+
const selected = this.element.querySelector("input[name='photo_spot[parking_flag]']:checked")
16+
if (selected && selected.value === "1") {
17+
this.countInputTarget.disabled = false
18+
this.countInputTarget.classList.remove("bg-gray-200", "text-gray-500")
19+
this.countInputTarget.classList.add("bg-white", "text-black")
20+
} else {
21+
this.countInputTarget.disabled = true
22+
this.countInputTarget.value = ""
23+
this.countInputTarget.classList.remove("bg-white", "text-black")
24+
this.countInputTarget.classList.add("bg-gray-200", "text-gray-500")
25+
}
26+
}
27+
}

‎app/views/admin/photo_spots/_form.html.erb‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,26 @@
6565
<%= form.label :tags, 'タグ（カンマ区切り）', class: 'block font-semibold mb-1' %>
6666
<%= form.text_field :tags, class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
6767
</div>
68-
<div>
69-
<%= form.label :parking_flag, '駐車場の有無', class: 'block font-semibold mb-1' %>
70-
<%= form.text_field :parking_flag, class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
68+
<div data-controller="parking">
69+
<div class="flex gap-4 mb-2">
70+
<label>
71+
<%= form.radio_button :parking_flag, 1, data: { action: "change->parking#toggle" }, checked: form.object.parking_flag == 1 %> ある
72+
</label>
73+
<label>
74+
<%= form.radio_button :parking_flag, 0, data: { action: "change->parking#toggle" }, checked: form.object.parking_flag == 0 %> ない
75+
</label>
76+
<label>
77+
<%= form.radio_button :parking_flag, nil, data: { action: "change->parking#toggle" }, checked: form.object.parking_flag.nil? %> わからない
78+
</label>
79+
</div>
80+
<div class="w-32">
81+
<%= form.label :parking_count, '台数' %>
82+
<%= form.number_field :parking_count,
83+
min: 1,
84+
data: { parking_target: "countInput" },
85+
disabled: form.object.parking_flag != 1,
86+
class: form.object.parking_flag == 1 ? "bg-white text-black border rounded px-2 py-1" : "bg-gray-200 text-gray-500 border rounded px-2 py-1" %>
87+
</div>
7188
</div>
7289
<div>
7390
<%= form.label :images, '画像（最大5枚・JPEG/PNG/GIF）', class: 'block font-semibold mb-1' %>

‎app/views/admin/photo_spots/_photo_spot.html.erb‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -27,45 +27,57 @@
2727
<dd><%= photo_spot.tags %></dd>
2828
<dt class="font-semibold">時間帯</dt>
2929
<dd>
30-
<%= photo_spot.timestart ? photo_spot.timestart.strftime("%H:%M") : "未設定" %> 〜
31-
<%= photo_spot.timeend ? photo_spot.timeend.strftime("%H:%M") : "未設定" %>
30+
<%= photo_spot.timestart ? photo_spot.timestart.strftime("%H:%M") : "未設定" %> 〜
31+
<%= photo_spot.timeend ? photo_spot.timeend.strftime("%H:%M") : "未設定" %>
3232
</dd>
33-
<dt class="font-semibold">おすすめの季節</dt>
33+
<dt class="font-semibold">駐車場</dt>
3434
<dd>
35-
<% case photo_spot.season %>
36-
<% when 'spring' %>
37-
春
38-
<% when 'summer' %>
39-
夏
40-
<% when 'autumn' %>
41-
秋
42-
<% when 'winter' %>
43-
冬
44-
<% else %>
45-
未設定
46-
<% end %>
47-
</dd>
48-
</dl>
49-
</div>
35+
<% if photo_spot.parking_flag == 1 %>
36+
駐車場あり
37+
<% if photo_spot.parking_count%>
38+
：<%= photo_spot.parking_count %> 台
39+
<% end %>
40+
<% elsif photo_spot.parking_flag == 0 %>
41+
駐車場なし
42+
</div>
43+
<% end %>
44+
</dd>
45+
<dt class="font-semibold">おすすめの季節</dt>
46+
<dd>
47+
<% case photo_spot.season %>
48+
<% when 'spring' %>
49+
春
50+
<% when 'summer' %>
51+
夏
52+
<% when 'autumn' %>
53+
秋
54+
<% when 'winter' %>
55+
冬
56+
<% else %>
57+
未設定
58+
<% end %>
59+
</dd>
60+
</dl>
5061
</div>
51-
<%# モーダルウィンドウのHTML部分 %>
52-
<div data-image-modal-target="modal"
62+
</div>
63+
<%# モーダルウィンドウのHTML部分 %>
64+
<div data-image-modal-target="modal"
5365
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-75 hidden">
54-
<div class="relative w-full h-full max-w-5xl">
55-
<div class="relative w-full h-full flex items-center justify-center">
56-
<img data-image-modal-target="image" class="max-w-full max-h-screen object-contain" alt="Enlarged image">
57-
<%# 閉じるボタン %>
58-
<button data-action="click->image-modal#close" class="absolute top-4 right-4 text-white text-4xl">
59-
&times;
60-
</button>
61-
<%# 左右の矢印ボタン %>
62-
<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">
63-
&lsaquo;
64-
</button>
65-
<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">
66-
&rsaquo;
67-
</button>
68-
</div>
66+
<div class="relative w-full h-full max-w-5xl">
67+
<div class="relative w-full h-full flex items-center justify-center">
68+
<img data-image-modal-target="image" class="max-w-full max-h-screen object-contain" alt="Enlarged image">
69+
<%# 閉じるボタン %>
70+
<button data-action="click->image-modal#close" class="absolute top-4 right-4 text-white text-4xl">
71+
&times;
72+
</button>
73+
<%# 左右の矢印ボタン %>
74+
<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">
75+
&lsaquo;
76+
</button>
77+
<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">
78+
&rsaquo;
79+
</button>
6980
</div>
7081
</div>
82+
</div>
7183
</div>

‎app/views/admin/photo_spots/index.html.erb‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,12 @@
1212
<% @photo_spots.each do |photo_spot| %>
1313
<div class="flex flex-col md:flex-row justify-between items-center py-6 gap-4 w-full">
1414
<div class="flex-1 min-w-0">
15-
<%= render partial: 'photo_spot', locals: { photo_spot: photo_spot } %>
16-
<!-- 画像サムネイル -->
17-
<% if photo_spot.images.attached? %>
18-
<div class="flex flex-wrap gap-2 mt-2">
19-
<% photo_spot.images.each do |img| %><%= image_tag img.variant(resize_to_limit: [80,80]), class: "rounded shadow border w-20 h-20 object-cover", alt: photo_spot.name %>
15+
<%= render partial: 'photo_spot', locals: { photo_spot: photo_spot } %>
16+
<!-- 画像サムネイル -->
17+
<% if photo_spot.images.attached? %>
18+
<div class="flex flex-wrap gap-2 mt-2">
19+
</div>
2020
<% end %>
21-
</div>
22-
<% end %>
2321
</div>
2422
<div class="flex flex-col md:flex-row gap-2 w-full md:w-auto">
2523
<%= link_to t('admin.photo_spots.index.show', default: '詳細'), admin_photo_spot_path(photo_spot), class: "rounded-md px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium text-center w-full md:w-auto" %>

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,6 @@
1111
<div class="flex-1 min-w-0">
1212
<h2 class="text-lg font-semibold mb-2 text-gray-900 truncate"><%= photo_spot.name %></h2>
1313
<div class="text-sm text-gray-600 mb-2 line-clamp-2"><%= truncate(photo_spot.detail, length: 60) %></div>
14-
<% if photo_spot.tags.present? %>
15-
<div class="text-xs text-gray-500 mb-2">
16-
<span class="font-medium">タグ:</span> <%= photo_spot.tags %>
17-
</div>
18-
<% end %>
1914
<div class="flex items-center">
2015
<% if photo_spot.reviews.any? %>
2116
<%= render partial: "shared/rating_stars", locals: { rating: (photo_spot.reviews.average(:rating)&.round || 0) } %>
@@ -24,6 +19,20 @@
2419
<span class="text-xs text-gray-400">未評価</span>
2520
<% end %>
2621
</div>
22+
<% if photo_spot.tags.present? %>
23+
<div class="text-xs text-gray-500 mb-2">
24+
<span class="font-medium">タグ:</span> <%= photo_spot.tags %>
25+
</div>
26+
<% end %>
27+
<% if photo_spot.parking_flag == 1 %>
28+
<div class="text-xs text-gray-500 mb-2">
29+
<span class="font-medium">駐車場あり</span>
30+
</div>
31+
<% elsif photo_spot.parking_flag == 0 %>
32+
<div class="text-xs text-gray-500 mb-2">
33+
<span class="font-medium">駐車場なし</span>
34+
</div>
35+
<% end %>
2736
</div>
2837
</div>
2938
<% end %>

0 commit comments

Comments
 (0)