Merge pull request #7852 from fjordllc/feature/output-category-descri…

…ption-in-markdown カテゴリーの説明文をマークダウンで出力する
fjordllc · Jun 24, 2024 · e6256fb · e6256fb
2 parents 206c9b4 + 40d8682
commit e6256fb
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 13 deletions.
diff --git a/app/javascript/stylesheets/application/blocks/practice/_categories.sass b/app/javascript/stylesheets/application/blocks/practice/_categories.sass
@@ -48,15 +48,12 @@
 .categories-item__description
   +position(relative)
   margin-bottom: 1rem
-  p
-    +text-block(.875rem 1.6 0 .6em)
-  *:last-child
-    margin-bottom: 0
 
 .categories-item__edit
   float: right
   margin-left: .5rem
   +position(relative, top -.25rem)
+  z-index: 2
 
 .categories-item__edit-link
   +size(2rem)

diff --git a/app/javascript/stylesheets/atoms/_a-form-help.sass b/app/javascript/stylesheets/atoms/_a-form-help.sass
@@ -2,7 +2,12 @@
   font-size: .75rem
   color: var(--semi-muted-text)
   &:not(:first-child)
-    margin-top: .5em
+    margin-top: .5rem
+  label + &:not(:first-child)
+    margin-top: 0
+  & + input,
+  & + textarea
+    margin-top: .5rem
   em
     font-style: normal
     font-weight: 600

diff --git a/app/javascript/stylesheets/atoms/_a-long-text.sass b/app/javascript/stylesheets/atoms/_a-long-text.sass
@@ -10,6 +10,16 @@
       font-size: .8125rem
     +media-breakpoint-down(sm)
       font-size: .75rem
+  &.has-no-headding
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      +text-block(1em 1.6 0 .625em, 600)
+      border: none
+      padding: 0
   .a-long-text + &
     margin-top: 2em
     padding-top: 2em

diff --git a/app/javascript/stylesheets/atoms/_a-short-text.sass b/app/javascript/stylesheets/atoms/_a-short-text.sass
@@ -1,8 +1,8 @@
 .a-short-text
   p
-    +text-block(1em 1.7 .75em)
+    +text-block(1em 1.6 .75em)
   li
-    +text-block(1em 1.7)
+    +text-block(1em 1.6)
   ol,
   ul
     margin-left: 1.25em
@@ -26,6 +26,9 @@
       >li
         >ul
           list-style-type: square
+  a
+    +hover-link-reversal
+    +default-link
   hr
     display: block
     +size(100% 0)
@@ -37,5 +40,17 @@
     text-align: center
   &.is-sm
     font-size: .8125rem
+  &.has-no-headding
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      +text-block(1em 1.6 0 .625em, 700)
+      border: none
+      padding: 0
   *:first-child
     margin-top: 0
+  *:last-child
+    margin-bottom: 0
diff --git a/app/javascript/stylesheets/config/mixins/_long-text-style.sass b/app/javascript/stylesheets/config/mixins/_long-text-style.sass
@@ -77,7 +77,7 @@
     +text-block(1.125em 1.6, 600)
     margin-bottom: .625em
   h6
-    +text-block(1em 1.86 0 .625em, 600)
+    +text-block(1em 1.6 0 .625em, 600)
   p
     +text-block(1em 1.86)
     margin-bottom: 1.5em

diff --git a/app/views/courses/practices/_courses_practices.html.slim b/app/views/courses/practices/_courses_practices.html.slim
@@ -14,7 +14,7 @@
                 .categories-item__edit.is-only-mentor
                   a.categories-item__edit-link href=edit_mentor_category_path(category.id, course_id: course_id)
                     i.fa-solid.fa-pen
-              .a-long-text.is-md
+              .a-short-text.is-md.has-no-headding.js-markdown-view
                 = category.description
             .categories-item__body.a-card
               .category-practices

diff --git a/app/views/mentor/categories/_form.html.slim b/app/views/mentor/categories/_form.html.slim
@@ -16,14 +16,18 @@
       .row.js-markdown-parent
         .col-md-6.col-xs-12
           = f.label :description, class: 'a-form-label'
-          = f.text_area :description, class: 'a-text-input js-warning-form js-markdown markdown-form__text-area practices-edit__input', data: { 'preview': '.js-preview' }
           .a-form-help
             p
-              | このカテゴリーを学ぶことでできるようになること、なぜこれを学ぶのかの理由、学ぶにあたっての必要な前提条件（修了していないといけないプラクティスなど）を記入してください。
+              | このカテゴリーを学ぶことでできるようになること、なぜこれを学ぶのかの理由、
+              | 学ぶにあたっての必要な前提条件（修了していないといけないプラクティスなど）を
+              | 記入してください。
+              br
+              | カテゴリーの説明には見出し（hタグ）も本文と同じ文字サイズで表示されます。
+          = f.text_area :description, class: 'a-text-input js-warning-form js-markdown markdown-form__text-area practices-edit__input', data: { 'preview': '.js-preview' }
         .col-md-6.col-xs-12
-          .a-form-label
+          .a-form-label.md:mt-16
             | プレビュー
-          .js-preview.a-long-text.is-md.practices-edit__input.markdown-form__preview
+          .js-preview.a-short-text.is-md.has-no-headding.practices-edit__input.markdown-form__preview
   .form-actions
     ul.form-actions__items
       li.form-actions__item.is-main