Merge pull request #7609 from fjordllc/side-card

Side card
fjordllc · Mar 28, 2024 · 24b90d7 · 24b90d7
2 parents f1b1863 + cf5a725
commit 24b90d7
Show file tree

Hide file tree

Showing 101 changed files with 603 additions and 457 deletions.
diff --git a/app/javascript/components/ElapsedDays.jsx b/app/javascript/components/ElapsedDays.jsx
@@ -7,10 +7,10 @@ export default function ElapsedDays({ countProductsGroupedBy }) {
 
   return (
     <nav className="page-body__column is-sub">
-      <div className="page-nav">
+      <div className="page-nav a-card">
         <ol className="page-nav__items elapsed-days">
           <li
-            className={`page-nav__item is-reply-deadline ${activeClass(
+            className={`page-nav__item is-reply-deadline border-b-0 ${activeClass(
               countProductsGroupedBy(7)
             )}`}>
             <a className="page-nav__item-link" href="#7days-elapsed">
@@ -20,7 +20,7 @@ export default function ElapsedDays({ countProductsGroupedBy }) {
             </a>
           </li>
           <li
-            className={`page-nav__item is-reply-alert ${activeClass(
+            className={`page-nav__item is-reply-alert border-b-0 ${activeClass(
               countProductsGroupedBy(6)
             )}`}>
             <a className="page-nav__item-link" href="#6days-elapsed">
@@ -30,7 +30,7 @@ export default function ElapsedDays({ countProductsGroupedBy }) {
             </a>
           </li>
           <li
-            className={`page-nav__item is-reply-warning ${activeClass(
+            className={`page-nav__item is-reply-warning border-b-0 ${activeClass(
               countProductsGroupedBy(5)
             )}`}>
             <a className="page-nav__item-link" href="#5days-elapsed">

diff --git a/app/javascript/stylesheets/application/blocks/page/_page-body.sass b/app/javascript/stylesheets/application/blocks/page/_page-body.sass
@@ -4,6 +4,7 @@
     flex: 1
     display: flex
     flex-direction: column
+    min-height: calc(100vh - 321px)
   +media-breakpoint-down(sm)
     padding-block: 1.125rem
 

diff --git a/app/javascript/stylesheets/application/blocks/page/_page-header.sass b/app/javascript/stylesheets/application/blocks/page/_page-header.sass
@@ -3,18 +3,19 @@
 
 .page-header__inner
   +position(relative)
+  display: flex
   +media-breakpoint-up(md)
     height: 3.25rem
-    display: flex
     align-items: center
     justify-content: space-between
   +media-breakpoint-down(sm)
-    display: block
     padding-block: .5rem
+    flex-direction: column
 
 .page-header__start
   display: flex
   align-items: center
+  flex: 1
 
 .page-header__title
   color: var(--main)
@@ -39,7 +40,6 @@
     +text-block(1rem 1.4)
     color: var(--main)
   .page-header__start &
-    margin-right: .5em
     align-self: center
 
 .page-header__action

diff --git a/app/javascript/stylesheets/shared/blocks/_page-nav.sass b/app/javascript/stylesheets/shared/blocks/_page-nav.sass
@@ -47,6 +47,8 @@ a.page-nav__title-inner
   +position(relative, 1)
   box-shadow: 0 0 0 1px $border-color inset
   background-color: $background-color
+  border-bottom: none
+  margin-bottom: -1px
   .page-nav__item-link
     background-color: transparent
     color: $text-color

diff --git a/app/views/admin/campaigns/edit.html.slim b/app/views/admin/campaigns/edit.html.slim
@@ -3,22 +3,23 @@
 header.page-header
   .container
     .page-header__inner
-      h2.page-header__title
-        | 管理ページ
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 
-.page-main
+main.page-main
   header.page-main-header
     .container
       .page-main-header__inner
         .page-main-header__start
           h1.page-main-header__title
             | お試し延長編集
         .page-main-header__end
-          .page-header-actions
-            .page-header-actions__items
-              .page-header-actions__item
+          .page-main-header-actions
+            .page-main-header-actions__items
+              .page-main-header-actions__item
                 = link_to admin_campaigns_path, class: 'a-button is-md is-secondary is-block is-back' do
                   | お試し延長一覧
   hr.a-border

diff --git a/app/views/admin/campaigns/index.html.slim b/app/views/admin/campaigns/index.html.slim
@@ -3,23 +3,26 @@
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title
-        | 管理ページ
-      .page-header-actions
-        .page-header-actions__items
-          .page-header-actions__item
-            = link_to new_admin_campaign_path, class: 'a-button is-md is-secondary is-block' do
-              i.fa-regular.fa-plus
-              | お試し延長作成
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
+      .page-header__end
+        .page-header-actions
+          .page-header-actions__items
+            .page-header-actions__item
+              = link_to new_admin_campaign_path, class: 'a-button is-md is-secondary is-block' do
+                i.fa-regular.fa-plus
+                | お試し延長作成
 
 = render 'admin/admin_page_tabs'
 
-.page-main
+main.page-main
   header.page-main-header
     .container
       .page-main-header__inner
-        h1.page-main-header__title
-          | お試し延長一覧
+        .page-main-header__start
+          h1.page-main-header__title
+            | お試し延長一覧
   hr.a-border
   .page-body
     .container.is-lg

diff --git a/app/views/admin/campaigns/new.html.slim b/app/views/admin/campaigns/new.html.slim
@@ -3,8 +3,9 @@
 header.page-header
   .container
     .page-header__inner
-      h2.page-header__title
-        | 管理ページ
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 

diff --git a/app/views/admin/companies/edit.html.slim b/app/views/admin/companies/edit.html.slim
@@ -1,9 +1,11 @@
-- title '管理ページ'
+- title '企業編集'
 
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title = title
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 

diff --git a/app/views/admin/companies/index.html.slim b/app/views/admin/companies/index.html.slim
@@ -1,9 +1,11 @@
-- title '管理ページ'
+- title '企業一覧'
 
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title = title
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 
@@ -15,9 +17,9 @@ main.page-main
           h1.page-main-header__title
             | 企業一覧
         .page-main-header__end
-          .page-header-actions
-            .page-header-actions__items
-              .page-header-actions__item
+          .page-main-header-actions
+            .page-main-header-actions__items
+              .page-main-header-actions__item
                 = link_to new_admin_company_path, class: 'a-button is-md is-secondary is-block' do
                   i.fa-regular.fa-plus
                   | 企業追加

diff --git a/app/views/admin/companies/new.html.slim b/app/views/admin/companies/new.html.slim
@@ -1,9 +1,11 @@
-- title '管理ページ'
+- title '企業追加'
 
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title = title
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 

diff --git a/app/views/admin/home/index.html.slim b/app/views/admin/home/index.html.slim
@@ -3,7 +3,9 @@
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title = title
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 

diff --git a/app/views/admin/inquiries/index.html.slim b/app/views/admin/inquiries/index.html.slim
@@ -1,20 +1,24 @@
-- title '管理ページ'
+- title 'お問い合わせ一覧'
 
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title = title
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
 
 = render 'admin/admin_page_tabs'
 
 header.page-main-header
   .container
     .page-main-header__inner
-      h1.page-main-header__title お問い合わせ一覧
+      h1.page-main-header__title
+        | お問い合わせ一覧
 hr.a-border
 .page-body
   .page-body__inner
     .container.is-md
-      .card-list.a-card
-        .card-list__items
-          = render partial: 'inquiries_item', collection: @inquiries, as: :inquiry
+      - if @inquiries.present?
+        .card-list.a-card
+          .card-list__items
+            = render partial: 'inquiries_item', collection: @inquiries, as: :inquiry
diff --git a/app/views/admin/inquiries/show.html.slim b/app/views/admin/inquiries/show.html.slim
@@ -3,31 +3,44 @@
 header.page-header
   .container
     .page-header__inner
-      h1.page-header__title お問い合わせ
-      .page-header-actions
-        ul.page-header-actions__items
-          li.page-header-actions__item
-            = link_to admin_inquiries_path, class: 'a-button is-md is-secondary is-block is-back' do
-              | お問い合わせ一覧へ
-hr.a-border
-.page-body
-  .container.is-md
-    .page-content
-      header.page-content-header
-        .page-content-header__end
-          .page-content-header__row
-            h1.page-content-header__title
-              = @inquiry.sender_name_and_email
-          .page-content-header__row
-            .page-content-header-metas
-              .page-content-header-metas__start
-                .page-content-header-metas__meta
-                  .a-meta
-                    span.a-meta__label 受信日
-                    span.a-meta__value = l @inquiry.created_at
-      .page-content__body
-        .a-card
-          .card-body
-            .card__description
-              .a-long-text.is-md
-                = auto_link(simple_format(@inquiry.body), html: { target: '_blank' })
+      .page-header__start
+        h2.page-header__title
+          | 管理ページ
+
+= render 'admin/admin_page_tabs'
+
+main.page-main
+  header.page-main-header
+    .container
+      .page-main-header__inner
+        .page-main-header__start
+          h1.page-main-header__title
+            | #{@inquiry.name}様
+        .page-main-header__end
+          .page-main-header-actions
+            ul.page-main-header-actions__items
+              li.page-main-header-actions__item
+                = link_to admin_inquiries_path, class: 'a-button is-md is-secondary is-block is-back' do
+                  | お問い合わせ一覧へ
+  hr.a-border
+  .page-body
+    .container.is-md
+      .page-content
+        header.page-content-header
+          .page-content-header__end
+            .page-content-header__row
+              h1.page-content-header__title
+                = @inquiry.sender_name_and_email
+            .page-content-header__row
+              .page-content-header-metas
+                .page-content-header-metas__start
+                  .page-content-header-metas__meta
+                    .a-meta
+                      span.a-meta__label 受信日
+                      span.a-meta__value = l @inquiry.created_at
+        .page-content__body
+          .a-card
+            .card-body
+              .card__description
+                .a-long-text.is-md
+                  = auto_link(simple_format(@inquiry.body), html: { target: '_blank' })
diff --git a/app/views/articles/edit.html.slim b/app/views/articles/edit.html.slim
@@ -17,9 +17,9 @@ header.page-header
           h1.page-main-header__title
             = title
         .page-main-header__end
-          .page-header-actions
-            .page-header-actions__items
-              .page-header-actions__item
+          .page-main-header-actions
+            .page-main-header-actions__items
+              .page-main-header-actions__item
                 = link_to articles_path, class: 'a-button is-md is-secondary is-block', target: '_blank', rel: 'noopener' do
                   | ブログ
   - if @article.wip?

diff --git a/app/views/articles/new.html.slim b/app/views/articles/new.html.slim
@@ -4,8 +4,9 @@
 header.page-header
   .container
     .page-header__inner
-      .page-header__title
-        | メンターページ
+      .page-header__start
+        .page-header__title
+          | メンターページ
 
 = render 'mentor/mentor_page_tabs'
 

diff --git a/app/views/books/edit.html.slim b/app/views/books/edit.html.slim
@@ -5,13 +5,15 @@
 .page-header
   .container
     .page-header__inner
-      h1.page-header__title
-        = title
-      .page-header-actions
-        ul.page-header-actions__items
-          li.page-header-actions__item
-            = link_to books_path, class: 'a-button is-md is-secondary is-block is-back' do
-              | 参考書籍一覧
+      .page-header__start
+        h2.page-header__title
+          = title
+      .page-header__end
+        .page-header-actions
+          ul.page-header-actions__items
+            li.page-header-actions__item
+              = link_to books_path, class: 'a-button is-md is-secondary is-block is-back' do
+                | 参考書籍一覧
 hr.a-border
 .page-body
   .container.is-md