Add footer.

yamat47 · Aug 11, 2024 · 99f10d8 · 99f10d8
1 parent 140624f
commit 99f10d8
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 2 deletions.
diff --git a/app/app/assets/images/kcff-logo.png b/app/app/assets/images/kcff-logo.png
diff --git a/app/app/assets/stylesheets/media.css b/app/app/assets/stylesheets/media.css
@@ -17,3 +17,4 @@
 @import url('media/notice.css');
 @import url('media/home.css');
 @import url('media/button.css');
+@import url('media/footer.css');
diff --git a/app/app/assets/stylesheets/media/application-header.css b/app/app/assets/stylesheets/media/application-header.css
@@ -16,14 +16,14 @@
 }
 
 .application-header-logo {
-  height: 64px;
+  height: 36px;
 
   img {
     height: 100%;
   }
 
   @media (max-width: 599px) {
-    height: 48px;
+    height: 24px;
   }
 }
 

diff --git a/app/app/assets/stylesheets/media/footer.css b/app/app/assets/stylesheets/media/footer.css
@@ -0,0 +1,56 @@
+.media-footer {
+  gap: 2rem;
+  padding-block: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--color-gray-100);
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    padding-block: 4rem;
+    gap: 8rem;
+  }
+}
+
+.media-footer-logo {
+  display: flex;
+  justify-content: center;
+}
+
+.media-footer-logo-image {
+  width: 18rem;
+
+  @media (min-width: 768px) {
+    width: 24rem;
+  }
+}
+
+.media-footer-link-groups {
+  display: flex;
+  gap: 4rem;
+
+  @media (max-width: 599px) {
+    justify-content: center;
+  }
+}
+
+.media-footer-link-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.media-footer-link-group-title {
+  font-weight: bold;
+}
+
+.media-footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.media-footer-link-group-title, .media-footer-link {
+  font-size: 0.875rem;
+}
diff --git a/app/app/views/layouts/media/_footer.html.haml b/app/app/views/layouts/media/_footer.html.haml
@@ -0,0 +1,38 @@
+:ruby
+  menu_links = [
+    { title: 'お知らせ', path: notices_path },
+    { title: '日程・結果', path: game_schedules_path },
+    { title: '所属チーム', path: teams_path },
+    { title: '試合会場', path: game_fields_path }
+  ]
+
+  support_links = [
+    { title: 'お問い合わせ', path: 'https://forms.gle/Nv5ng9Up8DrY4B2G7' },
+    { title: '公式X（旧Twitter）', path: 'https://x.com/kcff_contact' }
+  ]
+
+.media-footer
+  .media-footer__logo
+    .media-footer-logo
+      = image_tag 'kcff-logo.png', class: 'media-footer-logo-image'
+  .media-footer__link-groups
+    .media-footer-link-groups
+      .media-footer-link-groups__link-group
+        .media-footer-link-group
+          .media-footer-link-group__title
+            .media-footer-link-group-title
+              メニュー
+          .media-footer-link-group__links
+            .media-footer-links
+              - menu_links.each do |menu_link|
+                = link_to menu_link[:title], menu_link[:path], class: 'media-footer-link common-text-link'
+      .media-footer-link-groups__link-group
+        .media-footer-link-group
+          .media-footer-link-group__title
+            .media-footer-link-group-title
+              サポート
+          .media-footer-link-group__links
+            .media-footer-links
+              - support_links.each do |support_link|
+                = link_to support_link[:title], support_link[:path],
+                          class: 'media-footer-link common-text-link', target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/app/views/layouts/media/application.html.haml b/app/app/views/layouts/media/application.html.haml
@@ -17,3 +17,5 @@
         = render 'layouts/media/breadcrumbs'
       .application__main
         = yield
+      .application__footer
+        = render 'layouts/media/footer'