Skip to content

Commit 48bcd75

Browse files
flour621flour621
committed
✨ よくあるご質問コンテンツを追加
1 parent 41609c0 commit 48bcd75

File tree

12 files changed

+360
-0
lines changed

12 files changed

+360
-0
lines changed

‎dest/bundle.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1887,6 +1887,65 @@ a[href^="tel:"]:hover {
18871887
font-size: 1.25rem;
18881888
}
18891889
}
1890+
/* ------------------------------
1891+
　　よくあるご質問
1892+
------------------------------ */
1893+
.faq {
1894+
padding: 1.25rem 1.5rem;
1895+
border-radius: 4px;
1896+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
1897+
}
1898+
.faq + .faq {
1899+
margin-top: 1rem;
1900+
}
1901+
1902+
.faq-icon {
1903+
flex: 0 0 auto;
1904+
width: 2rem;
1905+
margin: 0;
1906+
font-weight: bold;
1907+
font-size: 1.953125rem;
1908+
line-height: 1.5;
1909+
text-align: center;
1910+
}
1911+
1912+
.faq-question,
1913+
.faq-answer {
1914+
position: relative;
1915+
display: flex;
1916+
gap: 1rem;
1917+
align-items: flex-start;
1918+
}
1919+
1920+
.faq-question .faq-icon {
1921+
color: var(--color-primary);
1922+
}
1923+
.faq-question .faq-title {
1924+
margin: 0;
1925+
padding: 0.5rem 0;
1926+
font-size: 1.25rem;
1927+
}
1928+
1929+
.faq-answer {
1930+
margin-top: 10px;
1931+
}
1932+
.faq-answer .faq-icon {
1933+
color: var(--color-gray90);
1934+
}
1935+
.faq-answer .faq-body {
1936+
padding-top: 0.5rem;
1937+
}
1938+
.faq-answer .entry-style {
1939+
margin-bottom: -1rem;
1940+
}
1941+
1942+
/* 質問リスト */
1943+
.faq-list {
1944+
margin: 0;
1945+
padding: 0;
1946+
list-style: none;
1947+
}
1948+
18901949
/* ------------------------------
18911950
　　お問い合わせ
18921951
------------------------------ */
@@ -2447,6 +2506,37 @@ a[href^="tel:"]:hover {
24472506
margin-left: auto;
24482507
}
24492508

2509+
/* ------------------------------
2510+
　　ローディングアイコン
2511+
------------------------------ */
2512+
.content-loading {
2513+
display: flex;
2514+
gap: 10px;
2515+
padding: 10px;
2516+
}
2517+
2518+
.content-loading-icon {
2519+
width: 8px;
2520+
height: 8px;
2521+
background: var(--color-gray40);
2522+
border-radius: 50%;
2523+
animation: bounce 0.6s infinite ease-in-out;
2524+
}
2525+
.content-loading-icon:nth-child(2) {
2526+
animation-delay: 0.15s;
2527+
}
2528+
.content-loading-icon:nth-child(3) {
2529+
animation-delay: 0.3s;
2530+
}
2531+
2532+
@keyframes bounce {
2533+
0%, 100% {
2534+
transform: scale(1);
2535+
}
2536+
50% {
2537+
transform: scale(1.4);
2538+
}
2539+
}
24502540
/* ------------------------------
24512541
　　ローカルナビゲーション
24522542
------------------------------ */
@@ -3323,6 +3413,37 @@ a[href^="tel:"]:hover {
33233413
padding: 0.5rem 1rem;
33243414
}
33253415
}
3416+
/* ------------------------------
3417+
　　アコーディオン
3418+
------------------------------ */
3419+
.toggle-button {
3420+
width: 100%;
3421+
padding: 0;
3422+
font-family: inherit;
3423+
line-height: 1.7;
3424+
text-align: left;
3425+
background: none;
3426+
border: 0;
3427+
}
3428+
.toggle-button.js-post-include-disabled {
3429+
color: inherit;
3430+
opacity: 1;
3431+
}
3432+
3433+
.toggle-icon {
3434+
margin-top: 0.85rem;
3435+
margin-left: auto;
3436+
line-height: 1;
3437+
transition: 0.3s ease;
3438+
}
3439+
.toggle-button.is-active .toggle-icon {
3440+
transform: rotate(180deg);
3441+
}
3442+
3443+
.toggle-body {
3444+
display: none;
3445+
}
3446+
33263447
/* ------------------------------
33273448
　　トピックパス
33283449
------------------------------ */

‎faq/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@extends("/_layouts/base.html")
2+
3+
@section("main")
4+
<div class="acms-container">
5+
<main class="main">
6+
<div class="acms-grid">
7+
<div class="container-md">
8+
<!-- 質問一覧 -->
9+
@include("/include/entry/list-faq.html")
10+
</div>
11+
</div>
12+
</main>
13+
</div>
14+
@endsection

‎faq/post-entry.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- BEGIN_MODULE Entry_Body id="body_faq_post" -->
2+
<!-- BEGIN entry:loop -->
3+
<div aria-label="回答">
4+
<!-- BEGIN unit:veil -->
5+
<div class="acms-entry entry-style">
6+
<div class="entry-style-grid">
7+
@include("/include/unit.html")
8+
</div>
9+
</div>
10+
<hr class="clearHidden">
11+
<!-- END unit:veil -->
12+
@include("/admin/entry/edit-%{IS_ADMIN}.html")
13+
14+
@include("/admin/entry/action.html")
15+
</div>
16+
<!-- END entry:loop -->
17+
<!-- END_MODULE Entry_Body -->

‎images/arrow-down-gray.svg

Lines changed: 1 addition & 0 deletions
Loading

‎include/entry/list-faq.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!-- BEGIN_MODULE Entry_List id="list_faq" -->
2+
<ul class="faq-list">
3+
<!-- BEGIN entry:loop -->
4+
<li class="toggle faq js-toggle">
5+
<form action="/" method="post" class="js-post_include" target="#jsIncludeTo{eid}">
6+
<button type="submit" name="ACMS_POST_2GET" class="toggle-button faq-question js-toggle-button" aria-pressed="false" aria-label="質問">
7+
<p class="faq-icon" aria-hidden="true">Q</p>
8+
<p class="faq-title">{title}</p>
9+
<span class="toggle-icon" aria-hidden="false">
10+
<img src="/images/arrow-down-gray.svg" width="18" height="18" alt="">
11+
</span>
12+
</button>
13+
<input type="hidden" name="tpl" value="faq/post-entry.html" />
14+
<input type="hidden" name="bid" value="%{BID}">
15+
<input type="hidden" name="cid" value="%{CID}">
16+
<input type="hidden" name="eid" value="{eid}">
17+
</form>
18+
<div class="toggle-body js-toggle-body">
19+
<div class="faq-answer">
20+
<p class="faq-icon" aria-hidden="true">A</p>
21+
<div class="faq-body">
22+
<div id="jsIncludeTo{eid}">
23+
<div class="content-loading">
24+
<span class="content-loading-icon"></span>
25+
<span class="content-loading-icon"></span>
26+
<span class="content-loading-icon"></span>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</li>
33+
<!-- END entry:loop -->
34+
</ul>
35+
<!-- END_MODULE Entry_List -->

‎js/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,14 @@ $(() => {
107107
$(window).on('load scroll', () => {
108108
fixElement();
109109
});
110+
111+
// アコーディオン
112+
$('.js-toggle-button').on('click', (e) => {
113+
const $self = $(e.currentTarget);
114+
const $parent = $self.closest('.js-toggle');
115+
const $body = $parent.find('.js-toggle-body');
116+
console.log($parent)
117+
$self.toggleClass('is-active');
118+
$body.slideToggle();
119+
});
110120
});

‎src/js/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import domContentLoaded from 'dom-content-loaded';
22
import animation from './animation';
33
import navigation from './navigation';
4+
import toggle from './toggle';
45

56
/**
67
* スタイルの読み込み
@@ -19,6 +20,7 @@ $('html').removeClass('no-js').addClass('js');
1920

2021
animation(); // アニメーション
2122
navigation(); // ナビゲーション
23+
toggle(); // アコーディオン
2224

2325
/**
2426
* Content Ready

‎src/js/toggle.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import domContentLoaded from 'dom-content-loaded';
2+
3+
export default () => {
4+
domContentLoaded(() => {
5+
$('.js-toggle').on('click', () => {
6+
const $self = $(this);
7+
const $parent = $self.closest('js-toggle');
8+
const $body = $parent.find('.js-toggle-body');
9+
$self.toggleClass('is-active');
10+
$body.slideToggle();
11+
});
12+
});
13+
};

‎src/scss/_content-loading.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@use "global/acms-common" as acms;
2+
@use "global/common" as global;
3+
4+
/* ------------------------------
5+
　　ローディングアイコン
6+
------------------------------ */
7+
.content-loading {
8+
display: flex;
9+
gap: 10px;
10+
padding: 10px;
11+
}
12+
13+
.content-loading-icon {
14+
width: 8px;
15+
height: 8px;
16+
background: global.$color-gray40;
17+
border-radius: 50%;
18+
animation: bounce .6s infinite ease-in-out;
19+
20+
&:nth-child(2) {
21+
animation-delay: .15s;
22+
}
23+
24+
&:nth-child(3) {
25+
animation-delay: .3s;
26+
}
27+
}
28+
29+
@keyframes bounce {
30+
0%, 100% {
31+
transform: scale(1);
32+
}
33+
34+
50% {
35+
transform: scale(1.4);
36+
}
37+
}

‎src/scss/_faq.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@use "sass:map";
2+
@use "global/acms-common" as acms;
3+
@use "global/common" as global;
4+
5+
/* ------------------------------
6+
　　よくあるご質問
7+
------------------------------ */
8+
.faq {
9+
padding: 1.25rem 1.5rem;
10+
border-radius: global.$border-radius-md;
11+
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
12+
13+
& + & {
14+
margin-top: 1rem;
15+
}
16+
}
17+
18+
.faq-icon {
19+
flex: 0 0 auto;
20+
width: 2rem;
21+
margin: 0;
22+
font-weight: bold;
23+
font-size: map.get(global.$font-scales, heading-m);
24+
line-height: 1.5;
25+
text-align: center;
26+
}
27+
28+
.faq-question,
29+
.faq-answer {
30+
position: relative;
31+
display: flex;
32+
gap: 1rem;
33+
align-items: flex-start;
34+
}
35+
36+
.faq-question {
37+
.faq-icon {
38+
color: global.$color-primary;
39+
}
40+
41+
.faq-title {
42+
margin: 0;
43+
padding: .5rem 0;
44+
font-size: map.get(global.$font-scales, heading-ss);
45+
}
46+
}
47+
48+
.faq-answer {
49+
margin-top: 10px;
50+
51+
.faq-icon {
52+
color: global.$color-gray90;
53+
}
54+
55+
.faq-body {
56+
padding-top: .5rem;
57+
}
58+
59+
.entry-style {
60+
margin-bottom: -1rem;
61+
}
62+
}
63+
64+
65+
/* 質問リスト */
66+
.faq-list {
67+
margin: 0;
68+
padding: 0;
69+
list-style: none;
70+
}

0 commit comments

Comments
 (0)