プラクティス完了ツイート機能の実装

app/assets/stylesheets/atoms/_a-completion-message.sass

@@ -0,0 +1,29 @@
+.a-completion-message
+  background-color: $info
+  +padding(vertical, .75rem)
+  &:not(:last-child)
+    margin-bottom: 1.25rem
+
+.a-completion-message__inner
+  +media-breakpoint-up(md)
+    display: flex
+    justify-content: center
+    align-items: center
+
+.a-completion-message__title
+  +text-block(1em 1.45, center $reversal-text 600)
+  +media-breakpoint-up(md)
+    font-size: 1rem
+  +media-breakpoint-down(sm)
+    font-size: .8125rem
+
+.a-completion-message__actions-item
+  +media-breakpoint-up(md)
+    width: 10rem
+  +media-breakpoint-down(sm)
+
+.a-completion-message__inner-end
+  +media-breakpoint-up(md)
+    margin-left: 1rem
+  +media-breakpoint-down(sm)
+    margin-top: .75rem

app/assets/stylesheets/blocks/card/_congrats-card-body.sass

@@ -0,0 +1,22 @@
+.congrats-card-body__title
+  +text-block(1.5rem 1.5, 700)
+  +media-breakpoint-up(md)
+    font-size: 1.5rem
+  +media-breakpoint-down(sm)
+    font-size: 1rem
+
+.congrats-card-body__image-container
+  margin-top: 1.25rem
+
+.congrats-card-body__image-container
+  width: 100%
+  max-width: 28rem
+  +margin(horizontal, auto)
+
+.congrats-card-body__image
+  border-radius: .75rem
+  border: solid .5rem $background
+
+.congrats-card-body
+  .card-main-actions
+    margin-top: 1.25rem

app/assets/stylesheets/blocks/page/_page-body.sass

@@ -2,19 +2,21 @@
   +padding(vertical, 1.5rem)
   +media-breakpoint-down(sm)
     +padding(vertical, 1.125rem)
+  .page-header + &
+    border-top: solid 1px $border-shade
 
 .page-body__inner
   position: relative
 
 .page-optional-header
   +padding(vertical, .875rem)
-  border-bottom: solid 1px $border-shade
+  border-bottom: solid 1px $border-more-shade
 
 .page-optional-header__title
-  +text-block(1em 1.4, center flex)
+  +text-block(1em 1.4, center 600 flex)
   align-items: center
   +media-breakpoint-up(md)
-    font-size: 1.25rem
+    font-size: 1.125rem
   +media-breakpoint-down(sm)
     font-size: 1rem
 

app/assets/stylesheets/blocks/page/_page-tabs.sass

@@ -8,6 +8,11 @@
   +media-breakpoint-down(sm)
     >.container
       +padding(horizontal, 0)
+  .page-header + &
+    border-top: solid 1px $border-more-shade
+  .page-tools &:last-child
+    border-bottom: none
+
 
 .page-tabs__items
   display: flex

app/assets/stylesheets/blocks/page/_page-tools.sass

@@ -0,0 +1,5 @@
+.page-tools
+  .page-header + &
+    border-top: solid 1px $border-more-shade
+  & + .page-body
+    border-top: solid 1px $border-more-shade

app/assets/stylesheets/blocks/practice/_completion-massage.sass

@@ -0,0 +1,2 @@
+.completion-massage
+  background-color: $success

app/assets/stylesheets/blocks/practice/_sticky-message.sass

@@ -4,7 +4,7 @@
     width: 100%
     +position(sticky, left 0, bottom 0, 1)
     +padding(vertical, .5rem)
-    +text-block(1rem 1.4, center $reversal-text)
+    +text-block(.875rem 1.4, center $reversal-text)
     a
       +hover-link-reversal
       color: $reversal-text

app/assets/stylesheets/blocks/shared/_modal.sass

@@ -14,27 +14,33 @@
     font-size: .875rem
 
 .modal-header
-  padding: .25rem 1rem
   display: flex
   align-items: center
   justify-content: space-between
   border-bottom: solid 1px $background
+  +media-breakpoint-up(md)
+    padding: .25rem 1.5rem
+  +media-breakpoint-down(sm)
+    padding: .25rem 1rem
 
 .modal-header__close
   display: flex
   align-items: center
   justify-content: center
   +size(2.75rem)
   cursor: pointer
-  margin-right: -.75rem
-  opacity: .7
+  opacity: .4
   transition: all .2s ease-out
   position: relative
+  +media-breakpoint-up(md)
+    margin-right: -1.5rem
+  +media-breakpoint-down(sm)
+    margin-right: -1rem
   &::before,
   &::after
     content: ""
     display: block
-    +size(50% 2px)
+    +size(40% 2px)
     background-color: $default-text
     +position(absolute, left 50%, top 50%)
     border-radius: 2px
@@ -60,12 +66,21 @@
 .modal-body
   max-height: calc(100vh - 11.5rem)
   overflow: auto
-  padding: 1rem
   border-bottom: solid 1px $background
+  +media-breakpoint-up(md)
+    padding: 1rem 1.5rem
+  +media-breakpoint-down(sm)
+    padding: 1rem
 
 .modal-title
-  font-size: 1.25rem
   font-weight: 600
+  +media-breakpoint-up(md)
+    font-size: 1.25rem
+  +media-breakpoint-down(sm)
+    font-size: 1rem
 
 .modal-footer
-  padding: .25rem 1rem
+  +media-breakpoint-up(md)
+    padding: .25rem 1.5rem
+  +media-breakpoint-down(sm)
+    padding: .25rem 1rem

app/assets/stylesheets/blocks/shared/_sort-nav.sass

@@ -12,7 +12,7 @@
     flex-direction: column
 
 .sort-nav__label
-  +text-block(.8125rem 1.45)
+  +text-block(.75rem 1.4)
   margin-right: .5rem
   white-space: nowrap
   +media-breakpoint-down(sm)

app/assets/stylesheets/blocks/thread/_thread-list-item-meta.sass

@@ -2,6 +2,8 @@
   .a-user-name,
   .a-meta
     font-size: .75rem
+  .thread-list-item-title + &
+    margin-top: .25em
 
 .thread-list-item-meta__items
   +text-block(.75rem 1.4)

app/assets/stylesheets/completion.sass

@@ -0,0 +1,4 @@
+@import common-imports
+@import blocks/shared/flash
+@import blocks/shared/modal
+@import completion/**/*

app/assets/stylesheets/completion/_completion-base.sass

@@ -0,0 +1,80 @@
+$completion: #00a0dd
+
+body.is-completion
+  background-color: $completion
+
+.completion-wrapper
+  min-height: 100vh
+  display: flex
+  flex-direction: column
+  &::before
+    content: ''
+    background-image: image_url('completion/completion_background.svg')
+    background-repeat: repeat
+    +position(fixed, left 0, top 0, right 0, bottom 0, 1)
+    +size(100%)
+    opacity: .075
+    +media-breakpoint-up(md)
+      background-size: 16rem auto
+
+.completion-wrapper__start
+  flex: 1
+  +position(relative, 2)
+
+.completion-wrapper__end
+  +position(relative, 2)
+
+.complestion
+  +padding(vertical, 4rem 2rem)
+
+.complestion__title
+  +text-block(2rem 1.5, 800 center $reversal-text)
+  font-family: YakuHanJP_Narrow,Hiragino Sans,Hiragino Kaku Gothic ProN,BIZ UDPGothic,Meiryo,sans-serif
+
+.complestion__body
+  margin-top: 3rem
+
+.complestion__image
+  border-radius: 1rem
+  border: solid .75rem shade($completion, 30%)
+
+.welcome-footer
+  +media-breakpoint-up(md)
+    +padding(vertical, 3rem)
+  +media-breakpoint-down(sm)
+    padding-bottom: 1.5rem
+    body.welcome & .container
+      +padding(horizontal, 0)
+
+.welcome-footer__nav
+  margin-bottom: 1.5rem
+
+.welcome-footer__nav-items
+  +media-breakpoint-up(md)
+    display: flex
+    justify-content: center
+
+.welcome-footer__nav-item
+  +media-breakpoint-up(md)
+    +padding(horizontal, .5rem)
+
+.welcome-footer__nav-item-link
+  +text-block(.875rem 1, $reversal-text)
+  +media-breakpoint-up(md)
+    +hover-link
+  +media-breakpoint-down(sm)
+    text-decoration: none
+    display: flex
+    align-items: center
+    +padding(horizontal, 1rem)
+    border-bottom: solid 1px $border
+    +size(100% 2.75rem)
+
+.welcome-footer-copyright
+  justify-content: center
+  align-items: center
+  +text-block(.875rem 1.45, flex $reversal-text)
+
+.welcome-footer-copyright__author
+  display: block
+  +margin(horizontal, .1em .5em)

app/controllers/api/practices/learning/completion_message_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class API::Practices::Learning::CompletionMessageController < API::BaseController
+  def update
+    learning = current_user.learnings.find_by(practice_id: params[:practice_id])
+    if learning.update(completion_message_displayed: true)
+      head :ok
+    else
+      head :bad_request
+    end
+  end
+end

app/controllers/practices/completion_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Practices::CompletionController < ApplicationController
+  layout 'completion'
+
+  def show
+    @practice = Practice.find(params[:practice_id])
+  end
+end

app/controllers/practices_controller.rb

@@ -9,6 +9,7 @@ class PracticesController < ApplicationController
 
   def show
     @categories = @practice.categories
+    @tweet_url = @practice.tweet_url(practice_completion_url(@practice.id))
   end
 
   def new
@@ -47,6 +48,7 @@ def practice_params
       :submission,
       :open_product,
       :include_progress,
+      :ogp_image,
       :memo,
       category_ids: [],
       reference_books_attributes: %i[id title price page_url must_read cover description _destroy]

app/controllers/products_controller.rb

@@ -12,7 +12,9 @@ def show
     @product = find_product
     @reports = @product.user.reports.limit(10).order(reported_on: :DESC)
     @practice = find_practice
+    @learning = @product.learning # decoratorメソッド用にcontrollerでインスタンス変数化
     @footprints = find_footprints
+    @tweet_url = @practice.tweet_url(practice_completion_url(@practice.id))
     footprint!
     respond_to do |format|
       format.html

app/decorators/learning_decorator.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module LearningDecorator
+  def should_display_message_automatically?(current_user:)
+    user == current_user && complete? && !completion_message_displayed?
+  end
+end

app/javascript/learning-completion-message.js

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const modal = document.querySelector('#modal-learning_completion')
+  if (!modal) {
+    return null
+  }
+
+  const datasetNode = document.querySelector('#modal-learning_completion-data')
+
+  if (datasetNode.dataset.shouldDisplayMessageAutomatically === 'true') {
+    modal.checked = true
+  }
+
+  modal.addEventListener('change', () => {
+    if (!modal.checked) {
+      const practiceId = datasetNode.dataset.practiceId
+      fetch(`/api/practices/${practiceId}/learning/completion_message`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': token()
+        },
+        credentials: 'same-origin',
+        redirect: 'manual'
+      }).catch((error) => {
+        console.warn('Failed to parsing', error)
+      })
+    }
+  })
+
+  function token() {
+    const meta = document.querySelector('meta[name="csrf-token"]')
+    return meta ? meta.getAttribute('content') : ''
+  }
+})

app/javascript/learning.vue

@@ -10,8 +10,9 @@
         i.fas.fa-check
         | 完了しています
     li.card-main-actions__item(v-else)
-      button#js-complete.a-button.is-md.is-warning.is-block(
-        @click='pushComplete'
+      label#js-complete.a-button.is-md.is-warning.is-block(
+        @click='pushComplete',
+        for='modal-learning_completion'
       )
         i.fas.fa-check
         | 完了

app/javascript/packs/application.js

@@ -68,3 +68,4 @@ import '../talks.js'
 import '../admin_companies.js'
 import '../company-users.js'
 import '../generation-users.js'
+import '../learning-completion-message.js'