Add notice list to media home.

yamat47 · Aug 11, 2024 · c53be6c · c53be6c
1 parent e6ac45c
commit c53be6c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 1 deletion.
diff --git a/app/app/assets/stylesheets/media.css b/app/app/assets/stylesheets/media.css
@@ -15,3 +15,5 @@
 @import url('media/teams.css');
 @import url('media/notice-list.css');
 @import url('media/notice.css');
+@import url('media/home.css');
+@import url('media/button.css');
diff --git a/app/app/assets/stylesheets/media/button.css b/app/app/assets/stylesheets/media/button.css
@@ -0,0 +1,16 @@
+.media-button {
+  padding: 0.5rem 1rem;
+  border: solid 1px var(--color-gray-500);
+  border-radius: var(--button-border-radius);
+  width: fit-content;
+  display: flex;
+  gap: 1.0rem;
+  align-items: center;
+  color: var(--color-gray-500);
+  font-size: 0.875rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-gray-100);
+  }
+}
diff --git a/app/app/assets/stylesheets/media/home.css b/app/app/assets/stylesheets/media/home.css
@@ -0,0 +1,20 @@
+.media-home {
+  width: 90vw;
+  margin-inline: auto;
+
+  @media (min-width: 768px) {
+    padding-block: 4rem;
+    width: 48rem;
+  }
+}
+
+.media-home-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.media-home-section-button {
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/app/app/controllers/media/homes_controller.rb b/app/app/controllers/media/homes_controller.rb
@@ -2,6 +2,12 @@
 
 module Media
   class HomesController < ApplicationController
-    def show; end
+    NOTICES_LIMIT = 3
+
+    def show
+      @notices = Notice.only_published
+                       .published_at_ordered
+                       .limit(NOTICES_LIMIT)
+    end
   end
 end
diff --git a/app/app/views/media/homes/show.html.haml b/app/app/views/media/homes/show.html.haml
@@ -4,3 +4,26 @@
 .hero-container
   - images.each do |image|
     = image_tag image, class: 'hero-image'
+
+.media-home
+  .media-home__section
+    .media-home-section
+      .media-home-section__title
+        .media-subheader
+          最新のお知らせ
+      .media-home-section__content
+        .media-notice-list
+          - @notices.each do |notice|
+            .media-notice-list__item
+              = link_to notice_path(notice.universal_id), class: 'media-notice-list-item' do
+                .media-notice-list-item-title
+                  = notice.title
+                .media-notice-list-item-date
+                  = l notice.published_at, format: :long_kanji
+                .media-notice-list-item-button
+                  = image_tag 'icon-right-arrow.svg'
+      .media-home-section__button
+        .media-home-section-button
+          = link_to notices_path, class: 'media-button' do
+            %span 一覧を見る
+            = image_tag 'icon-right-arrow.svg'