diff --git a/app/javascript/stylesheets/application/blocks/practice/_categories.sass b/app/javascript/stylesheets/application/blocks/practice/_categories.sass index 27279abe917..b77aedc6b30 100644 --- 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 index a8ddb0cde60..0aa6fce9aa7 100644 --- 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 index 642da7c5fd7..81ca7cdd11a 100644 --- 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 index 7c3f7802c3a..8b6a748f4cb 100644 --- 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 index 83e4e2295ba..823df980d95 100644 --- 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 index d2da2277e72..0dd2bfa2ee4 100644 --- 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 index 86b4e3d2856..9156813a4d2 100644 --- 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