「カテゴリーでさがす」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 4行目: | 4行目: | ||
カテゴリーグリッド | カテゴリーグリッド | ||
======================================== */ | ======================================== */ | ||
. | .category-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | ||
| 14行目: | 14行目: | ||
カテゴリーカード | カテゴリーカード | ||
======================================== */ | ======================================== */ | ||
. | .category-card { | ||
background: #fff; | background: #fff; | ||
border: 2px solid #e5e7eb; | border: 2px solid #e5e7eb; | ||
| 24行目: | 24行目: | ||
} | } | ||
. | .category-card:hover { | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15); | box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15); | ||
| 32行目: | 32行目: | ||
カテゴリータイトル | カテゴリータイトル | ||
======================================== */ | ======================================== */ | ||
. | .category-title { | ||
font-size: 20px; | font-size: 20px; | ||
font-weight: 700; | font-weight: 700; | ||
| 44行目: | 44行目: | ||
アクションボタンエリア | アクションボタンエリア | ||
======================================== */ | ======================================== */ | ||
. | .category-actions { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| 51行目: | 51行目: | ||
} | } | ||
. | .category-actions a { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| 67行目: | 67行目: | ||
} | } | ||
. | .category-actions a::after { | ||
content: '›'; | content: '›'; | ||
font-size: 20px; | font-size: 20px; | ||
| 74行目: | 74行目: | ||
} | } | ||
. | .category-actions a:hover { | ||
background: #fef3c7; | background: #fef3c7; | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
| 81行目: | 81行目: | ||
} | } | ||
. | .category-actions a:hover::after { | ||
color: #f59e0b; | color: #f59e0b; | ||
transform: translateX(2px); | transform: translateX(2px); | ||
| 98行目: | 98行目: | ||
/* 開いている状態 */ | /* 開いている状態 */ | ||
. | .category-card.is-open .genre-toggle::after { | ||
transform: rotate(180deg); | transform: rotate(180deg); | ||
} | } | ||
| 178行目: | 178行目: | ||
ダークモード | ダークモード | ||
======================================== */ | ======================================== */ | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .category-card { | ||
background: #2a2a2a; | background: #2a2a2a; | ||
border-color: #3a3a3a; | border-color: #3a3a3a; | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .category-title { | ||
color: #f9fafb; | color: #f9fafb; | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .category-actions a { | ||
background: #1e1e1e; | background: #1e1e1e; | ||
border-color: #3a3a3a; | border-color: #3a3a3a; | ||
| 194行目: | 194行目: | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .category-actions a::after { | ||
color: #6b7280; | color: #6b7280; | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .category-actions a:hover { | ||
background: #374151; | background: #374151; | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
| 204行目: | 204行目: | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .category-actions a:hover::after { | ||
color: #fbbf24; | color: #fbbf24; | ||
} | } | ||
| 233行目: | 233行目: | ||
======================================== */ | ======================================== */ | ||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
.skin-theme-clientpref-os . | .skin-theme-clientpref-os .category-card { | ||
background: #2a2a2a; | background: #2a2a2a; | ||
border-color: #3a3a3a; | border-color: #3a3a3a; | ||
} | } | ||
.skin-theme-clientpref-os . | .skin-theme-clientpref-os .category-title { | ||
color: #f9fafb; | color: #f9fafb; | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
} | } | ||
.skin-theme-clientpref-os . | .skin-theme-clientpref-os .category-actions a { | ||
background: #1e1e1e; | background: #1e1e1e; | ||
border-color: #3a3a3a; | border-color: #3a3a3a; | ||
| 249行目: | 249行目: | ||
} | } | ||
.skin-theme-clientpref-os . | .skin-theme-clientpref-os .category-actions a::after { | ||
color: #6b7280; | color: #6b7280; | ||
} | } | ||
.skin-theme-clientpref-os . | .skin-theme-clientpref-os .category-actions a:hover { | ||
background: #374151; | background: #374151; | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
| 259行目: | 259行目: | ||
} | } | ||
.skin-theme-clientpref-os . | .skin-theme-clientpref-os .category-actions a:hover::after { | ||
color: #fbbf24; | color: #fbbf24; | ||
} | } | ||
| 289行目: | 289行目: | ||
======================================== */ | ======================================== */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
. | .category-grid { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
. | .category-card { | ||
padding: 20px; | padding: 20px; | ||
} | } | ||
. | .category-title { | ||
font-size: 18px; | font-size: 18px; | ||
} | } | ||
. | .category-actions a { | ||
font-size: 13px; | font-size: 13px; | ||
padding: 12px 14px; | padding: 12px 14px; | ||
| 327行目: | 327行目: | ||
JavaScriptでのトグル制御用 | JavaScriptでのトグル制御用 | ||
======================================== */ | ======================================== */ | ||
. | .category-card.is-open .subgenres { | ||
max-height: 2000px; | max-height: 2000px; | ||
opacity: 1; | opacity: 1; | ||
| 333行目: | 333行目: | ||
} | } | ||
. | .category-card.is-open .genre-toggle::after { | ||
transform: rotate(180deg); | transform: rotate(180deg); | ||
} | } | ||
| 341行目: | 341行目: | ||
// ページ読み込み後に実行 | // ページ読み込み後に実行 | ||
document.addEventListener('DOMContentLoaded', function() { | document.addEventListener('DOMContentLoaded', function() { | ||
const grid = document.querySelector('. | const grid = document.querySelector('.category-grid'); | ||
let currentExpandedPanel = null; | let currentExpandedPanel = null; | ||
| 351行目: | 351行目: | ||
e.preventDefault(); | e.preventDefault(); | ||
const card = this.closest('. | const card = this.closest('.category-card'); | ||
const cardId = card.id; | const cardId = card.id; | ||
const wasOpen = card.classList.contains('is-open'); | const wasOpen = card.classList.contains('is-open'); | ||
| 362行目: | 362行目: | ||
// すべてのカードを閉じる | // すべてのカードを閉じる | ||
document.querySelectorAll('. | document.querySelectorAll('.category-card').forEach(c => { | ||
c.classList.remove('is-open'); | c.classList.remove('is-open'); | ||
}); | }); | ||
| 374行目: | 374行目: | ||
// カードの位置を取得して、同じ行の最後に展開パネルを挿入 | // カードの位置を取得して、同じ行の最後に展開パネルを挿入 | ||
const allCards = Array.from(grid.children).filter(el => el.classList.contains(' | const allCards = Array.from(grid.children).filter(el => el.classList.contains('category-card')); | ||
const cardIndex = allCards.indexOf(card); | const cardIndex = allCards.indexOf(card); | ||
| 407行目: | 407行目: | ||
clearTimeout(resizeTimer); | clearTimeout(resizeTimer); | ||
resizeTimer = setTimeout(function() { | resizeTimer = setTimeout(function() { | ||
const openCard = document.querySelector('. | const openCard = document.querySelector('.category-card.is-open'); | ||
if (openCard) { | if (openCard) { | ||
// 再度開き直す | // 再度開き直す | ||
| 424行目: | 424行目: | ||
気になるカテゴリーを選んでください。 | 気になるカテゴリーを選んでください。 | ||
<div class=" | <div class="category-grid"> | ||
<div class=" | <div class="category-card" id="food"> | ||
<h3 class=" | <h3 class="category-title">飲食店</h3> | ||
<div class=" | <div class="category-actions"> | ||
[[飲食店検索|すべての飲食店を見る {{飲食店件数取得|column=ジャンル|detail=}}件]] | [[飲食店検索|すべての飲食店を見る {{飲食店件数取得|column=ジャンル|detail=}}件]] | ||
<html><a href="#food" class="genre-toggle">ジャンルで探す</a></html> | <html><a href="#food" class="genre-toggle">ジャンルで探す</a></html> | ||
| 452行目: | 452行目: | ||
</div> | </div> | ||
<div class=" | <div class="category-card" id="beauty"> | ||
<h3 class=" | <h3 class="category-title">美容・健康</h3> | ||
<div class=" | <div class="category-actions"> | ||
[[美容・健康一覧|一覧を見る]] | [[美容・健康一覧|一覧を見る]] | ||
<html><a href="#beauty" class="genre-toggle">カテゴリーで探す</a></html> | <html><a href="#beauty" class="genre-toggle">カテゴリーで探す</a></html> | ||
| 471行目: | 471行目: | ||
</div> | </div> | ||
<div class=" | <div class="category-card" id="store"> | ||
<h3 class=" | <h3 class="category-title">店・施設</h3> | ||
<div class=" | <div class="category-actions"> | ||
[[店・施設一覧|すべてを見る]] | [[店・施設一覧|すべてを見る]] | ||
<html><a href="#store" class="genre-toggle">カテゴリーで探す</a></html> | <html><a href="#store" class="genre-toggle">カテゴリーで探す</a></html> | ||
| 490行目: | 490行目: | ||
</div> | </div> | ||
<div class=" | <div class="category-card" id="person"> | ||
<h3 class=" | <h3 class="category-title">人</h3> | ||
<div class=" | <div class="category-actions"> | ||
[[人の図鑑一覧|すべてを見る]] | [[人の図鑑一覧|すべてを見る]] | ||
<html><a href="#person" class="genre-toggle">カテゴリーで探す</a></html> | <html><a href="#person" class="genre-toggle">カテゴリーで探す</a></html> | ||
| 505行目: | 505行目: | ||
</div> | </div> | ||
<div class=" | <div class="category-card" id="campary"> | ||
<h3 class=" | <h3 class="category-title">団体・企業</h3> | ||
<div class=" | <div class="category-actions"> | ||
[[団体・企業一覧|すべてを見る]] | [[団体・企業一覧|すべてを見る]] | ||
<html><a href="#campary" class="genre-toggle">カテゴリーで探す</a></html> | <html><a href="#campary" class="genre-toggle">カテゴリーで探す</a></html> | ||
| 519行目: | 519行目: | ||
</div> | </div> | ||
<div class=" | <div class="category-card" id="job"> | ||
<h3 class=" | <h3 class="category-title">仕事</h3> | ||
<div class=" | <div class="category-actions"> | ||
[[仕事図鑑一覧|すべてを見る]] | [[仕事図鑑一覧|すべてを見る]] | ||
<html><a href="#job" class="genre-toggle">カテゴリーで探す</a></html> | <html><a href="#job" class="genre-toggle">カテゴリーで探す</a></html> | ||
2026年1月29日 (木) 11:14時点における版
カテゴリーから探す
川西の情報を、カテゴリーごとに整理しています。 気になるカテゴリーを選んでください。