diff --git a/app/assets/stylesheets/_layout.scss b/app/assets/stylesheets/_layout.scss
new file mode 100644
index 0000000..8e2cb4d
--- /dev/null
+++ b/app/assets/stylesheets/_layout.scss
@@ -0,0 +1,66 @@
+$reline-navbar-height: 3.5rem;
+$reline-navbar-height-lg: 4rem;
+
+:root {
+ --reline-navbar-height: #{$reline-navbar-height};
+
+ @include media-breakpoint-up(lg) {
+ --reline-navbar-height: #{$reline-navbar-height-lg};
+ }
+}
+
+.navbar.fixed-top {
+ min-height: var(--reline-navbar-height);
+}
+
+body {
+ padding-top: var(--reline-navbar-height);
+}
+
+html {
+ scroll-padding-top: var(--reline-navbar-height);
+}
+
+.fade-in {
+ opacity: 0;
+ transition-duration: 1000ms;
+ transition-property: opacity, transform;
+}
+
+.fade-in-up {
+ transform: translate(0, 50px);
+}
+
+.scroll-in {
+ opacity: 1;
+ transform: translate(0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .fade-in {
+ opacity: 1;
+ transition: none;
+ }
+
+ .fade-in-up {
+ transform: none;
+ }
+}
+
+.usage-section {
+ max-width: 960px;
+ margin-inline: auto;
+}
+
+.web-font {
+ font-family: 'Hachi Maru Pop', cursive;
+}
+
+.meiryo-font {
+ font-family: Meiryo, sans-serif;
+}
+
+.feedback-input {
+ resize: none;
+ height: 280px;
+}
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index b61b612..15df8c2 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -1,2 +1,3 @@
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
+@import 'layout';
diff --git a/app/javascript/scroll.js b/app/javascript/scroll.js
index dc4f963..3c4e0d5 100644
--- a/app/javascript/scroll.js
+++ b/app/javascript/scroll.js
@@ -1,18 +1,19 @@
-window.addEventListener('scroll', () => { // 'スクロール'(イベント)が発生するとアロー関数以下が動きます。
- let targets = document.querySelectorAll('.fade-in'); // 'fade-in'クラスを集計。
- for (let i = 0; i < targets.length; i++){ // iに0を代入し、'targets'の数を下回れば、iの値を増やします。
- const selectorPlace = targets[i].getBoundingClientRect().top; // 個々の'targets'までの距離
- const scrollAmount = window.scrollY || document.documentElement.scrollTop; // 現在のスクロール位置
- const referencePoint = selectorPlace + scrollAmount; // 基準点
- const windowHeight = window.innerHeight; // ユーザーが使用しているブラウザの高さ
- if (scrollAmount > referencePoint - windowHeight + 275) {
- targets[i].classList.add('scroll-in');
+const REVEAL_OFFSET = 275;
+
+const revealVisibleTargets = () => {
+ const targets = document.querySelectorAll('.fade-in:not(.scroll-in)');
+ const windowHeight = window.innerHeight;
+ const revealOffset = Math.min(REVEAL_OFFSET, windowHeight * 0.35);
+
+ targets.forEach((target) => {
+ if (target.getBoundingClientRect().top < windowHeight - revealOffset) {
+ target.classList.add('scroll-in');
}
- }
-});
+ });
+};
+
+window.addEventListener('scroll', revealVisibleTargets, { passive: true });
+window.addEventListener('resize', revealVisibleTargets, { passive: true });
-// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for
-// https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect
-// https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY
-// https://developer.mozilla.org/ja/docs/Web/API/Element/scrollTop
-// https://flex-box.net/js-scrollin/
+document.addEventListener('DOMContentLoaded', revealVisibleTargets);
+document.addEventListener('turbo:load', revealVisibleTargets);
diff --git a/app/views/customers/_usage_section.html.slim b/app/views/customers/_usage_section.html.slim
new file mode 100644
index 0000000..8fda249
--- /dev/null
+++ b/app/views/customers/_usage_section.html.slim
@@ -0,0 +1,10 @@
+- reverse = local_assigns.fetch(:reverse, false)
+.fade-in.fade-in-up.usage-section.my-5
+ .row.align-items-center.g-4.g-lg-5
+ div class=['col-12', 'col-lg-6', ('order-lg-2' if reverse)]
+ - lines.each do |paragraph|
+ .h4.mb-0.mt-4.mt-lg-0
+ = safe_join(paragraph, tag.br)
+ div class=['col-12', 'col-lg-6', ('order-lg-1' if reverse)]
+ .usage-images
+ = image_tag image, class: 'img-fluid', alt: ''
diff --git a/app/views/customers/top.html.slim b/app/views/customers/top.html.slim
index 768d6e2..de5e3ba 100644
--- a/app/views/customers/top.html.slim
+++ b/app/views/customers/top.html.slim
@@ -8,37 +8,23 @@ h1.mt-5
.special_thanks.mt-2.mb-5
| 猫さんのイラスト協力：Sapico様
-/ ===== 使い方に関して(フェードイン方式) =====
-.fade-in.fade-in-up.col-md-6.offset-md-3
- .h4.mt-5
- | あの日を最後に
連絡が途切れた人はいませんか？
- .usage-images.my-5
- = image_tag 'undraw_true_friends_c94g.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
- .h4.mt-5
- | 猫さんが
間を取り持つ手助けをします。
- .usage-images.my-5
- = image_tag 'undraw_connection_b38q.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
- .h4.mt-5
+= render 'usage_section', lines: [['あの日を最後に', '連絡が途切れた人はいませんか？']],
+ image: 'undraw_true_friends_c94g.webp'
+= render 'usage_section', lines: [['猫さんが', '間を取り持つ手助けをします。']],
+ image: 'undraw_connection_b38q.webp', reverse: true
+
+.fade-in.fade-in-up.usage-section.my-5
+ .h4
| 具体的な操作は2つだけ
-.fade-in.fade-in-up.col-md-6.offset-md-3
- .h4.mt-5
- | 1.猫さんをLINEの友だちに追加
- .usage-images.my-5
- = image_tag 'undraw_Following_re_d5aa.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
- h4.mt-5
- | 2.猫さんをグループに加える
- .usage-images.my-5
- = image_tag 'undraw_Chatting_re_j55r.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
- .h4.mt-5
- | "2"まで完了すると…
- .h4.mt-5
- | 最後の投稿から
3週間〜2ヶ月後に
猫さんがLINEします。
- .usage-images.my-5
- = image_tag 'undraw_Online_messaging_re_qft3.webp', class: 'img-fluid'
+
+= render 'usage_section', lines: [['1.猫さんをLINEの友だちに追加']],
+ image: 'undraw_Following_re_d5aa.webp'
+= render 'usage_section', lines: [['2.猫さんをグループに加える']],
+ image: 'undraw_Chatting_re_j55r.webp', reverse: true
+= render 'usage_section', lines: [['"2"まで完了すると…'], ['最後の投稿から', '3週間〜2ヶ月後に', '猫さんがLINEします。']],
+ image: 'undraw_Online_messaging_re_qft3.webp'
+
+.fade-in.fade-in-up.usage-section.my-5
.mt-5.mb-4
| 〜 通知時期を設定したい場合 〜
.mb-3
@@ -47,12 +33,6 @@ h1.mt-5
| 約2ヶ月にしたい場合は
"Would you set to latter."
.mb-5
| デフォルトに戻したい場合は
"Would you set to default."
と投稿してください🖍
-.fade-in.fade-in-up.col-md-6.offset-md-3
- .h4.mt-5
- | もし働きかけを止めたいときは
- .h4.mt-5
- | "Cat sleeping on our Memory."
- .h4.mt-5
- | と投稿してください🐾
-.col-md-6.offset-md-3.my-5
- = image_tag 'undraw_friends_r511.webp', class: 'img-fluid'
+
+= render 'usage_section', lines: [['もし働きかけを止めたいときは'], ['"Cat sleeping on our Memory."'], ['と投稿してください🐾']],
+ image: 'undraw_friends_r511.webp', reverse: true
diff --git a/app/views/feedbacks/new.html.slim b/app/views/feedbacks/new.html.slim
index 3cfc36b..be2d9b9 100644
--- a/app/views/feedbacks/new.html.slim
+++ b/app/views/feedbacks/new.html.slim
@@ -1,7 +1,7 @@
h1.mt-5
| フィードバック
= form_with model: @feedback, data: { turbo: false } do |f|
- .form-group.my-5.offset-2.col-8
+ .form-group.my-5.col-10.offset-1.col-md-8.offset-md-2.col-lg-6.offset-lg-3
= f.label :text, Feedback.human_attribute_name(:text)
= f.text_area :text, maxlength: 500, placeholder: '30〜500文字でお願いします🐾', class: 'form-control rounded-3 py-2 px-2 mt-3 feedback-input'
.form-group.my-5
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index 793fae5..8b06952 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -16,6 +16,9 @@ html
meta[name="viewport" content="width=device-width,initial-scale=1"]
= csrf_meta_tags
= csp_meta_tag
+ link[rel="preconnect" href="https://fonts.googleapis.com"]
+ link[rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"]
+ link[rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap"]
= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload'
= javascript_include_tag 'application', 'data-turbo-track': 'reload', type: 'module'
body.web-font
diff --git a/app/views/shared/_navbar.html.slim b/app/views/shared/_navbar.html.slim
index 86dbf1a..849153f 100644
--- a/app/views/shared/_navbar.html.slim
+++ b/app/views/shared/_navbar.html.slim
@@ -1,26 +1,26 @@
-nav.navbar.navbar-expand-xl.navbar-dark.bg-secondary.fixed-top
- = link_to 'ReLINE', root_path, class: 'navbar-brand ps-3'
+nav.navbar.navbar-expand-lg.navbar-dark.bg-secondary.fixed-top
+ = link_to 'ReLINE', root_path, class: 'navbar-brand ps-3', data: { turbo_preload: true }
button.navbar-toggler.me-3 data-bs-toggle='collapse' data-bs-target="#navbarSupportedContent" aria-label="Toggle navigation"
span.navbar-toggler-icon
.collapse.navbar-collapse id='navbarSupportedContent'
ul.navbar-nav.ps-3
li.nav-item
- = link_to root_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+ = link_to root_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
icon.fas.fa-home.me-2
.guide-text
| ホーム
li.nav-item
- = link_to terms_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+ = link_to terms_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
icon.far.fa-file.me-2
.guide-text.ms-1
| 利用規約
li.nav-item
- = link_to privacy_policy_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+ = link_to privacy_policy_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
icon.fas.fa-lock.me-2
.guide-text
| プライバシーポリシー
li.nav-item
- = link_to new_feedback_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+ = link_to new_feedback_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
icon.far.fa-comment.me-2
.guide-text
| フィードバック
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 99ddf8a..9ecdb33 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -16,7 +16,7 @@
# In the development environment your application's code is reloaded any time
# it changes. This slows down response time but is perfect for development
# since you don't have to restart the web server when you make code changes.
- config.cache_classes = false
+ config.enable_reloading = true
# Do not eager load code on boot.
config.eager_load = false
diff --git a/config/environments/production.rb b/config/environments/production.rb
index ba6662a..77d2999 100644
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -4,7 +4,7 @@
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
- config.cache_classes = true
+ config.enable_reloading = false
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
diff --git a/config/environments/test.rb b/config/environments/test.rb
index 32f33c3..70694e1 100644
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -8,7 +8,7 @@
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
- config.cache_classes = false
+ config.enable_reloading = true
config.action_view.cache_template_loading = true
# Do not eager load code on boot. This avoids loading your whole application