Merge pull request #7793 from fjordllc/feature/signup-course-selection

[6/30 夜にマージ] フロントエンドエンジニアコースオープン
fjordllc · Jun 30, 2024 · 88aae17 · 88aae17
2 parents 77056cb + 56a3704
commit 88aae17
Show file tree

Hide file tree

Showing 55 changed files with 556 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 
 # Bootcamp
 
-プログラマー向けEラーニングシステム。
+エンジニア向けEラーニングシステム。
 
 ## インストールと起動
 

diff --git a/app/assets/images/courses/nextjs.svg b/app/assets/images/courses/nextjs.svg
diff --git a/app/assets/images/courses/rails.svg b/app/assets/images/courses/rails.svg
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -61,6 +61,7 @@ def create
     logger.info "[Signup] 1. start create. #{user_params[:email]}"
 
     @user = User.new(user_params)
+    @user.course_id = params[:user][:course_id] if params[:user][:course_id].present?
     @user.course_id ||= Course.first.id
     @user.free = true if @user.trainee?
     @user.build_discord_profile

diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
@@ -15,9 +15,7 @@ def faq; end
 
   def training; end
 
-  def practices
-    @categories = Course.find_by(title: DEFAULT_COURSE).categories.preload(:practices).order(:position)
-  end
+  def practices; end
 
   def tos; end
 
@@ -26,4 +24,8 @@ def pp; end
   def law; end
 
   def coc; end
+
+  def courses
+    @courses = Course.order(:created_at)
+  end
 end
diff --git a/app/helpers/courses_helper.rb b/app/helpers/courses_helper.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module CoursesHelper
+  def find_course(course_id)
+    Course.find_by(id: course_id) || Course.default_course
+  end
+end
diff --git a/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass b/app/javascript/stylesheets/application/blocks/auth-form/_auth-form.sass
@@ -29,7 +29,10 @@
   padding: 1rem 1.75rem
 
 .auth-form__body
-  padding: 1.5rem 1.75rem
+  +media-breakpoint-up(md)
+    padding: 1.5rem 1.75rem
+  +media-breakpoint-down(sm)
+    padding: 1.25rem 1rem
 
 .auth-form__footer
   padding: 1rem 1.75rem

diff --git a/app/javascript/stylesheets/application/blocks/form/_form-actions.sass b/app/javascript/stylesheets/application/blocks/form/_form-actions.sass
@@ -15,6 +15,7 @@
       padding-top: 1rem
 
 .form-actions__items
+  gap: .75rem
   +media-breakpoint-up(md)
     display: flex
     align-items: flex-end
@@ -29,7 +30,6 @@
     flex-direction: column
 
 .form-actions__item
-  padding-inline: .375rem
   +position(relative)
   &.is-sub
     +media-breakpoint-up(md)

diff --git a/app/javascript/stylesheets/atoms/_a-short-text.sass b/app/javascript/stylesheets/atoms/_a-short-text.sass
@@ -35,6 +35,11 @@
     border: none
     border-top: dashed 1px var(--border)
     margin-block: 1.25em
+  strong,
+  b
+    font-weight: 700
+  .is-danger
+    color: var(--danger)
   &.is-ta-center,
   .is-ta-center
     text-align: center

diff --git a/app/javascript/stylesheets/atoms/_a-welcome-button.sass b/app/javascript/stylesheets/atoms/_a-welcome-button.sass
@@ -21,3 +21,8 @@
     font-size: .9375rem
   &.is-signup
     background-color: var(--welcome-orange)
+  &.is-disabled
+    pointer-events: none
+    background-color: var(--background-shade)
+    color: var(--muted-text)
+    border-color: var(--muted-text)
diff --git a/app/javascript/stylesheets/shared/blocks/card/_card-header.sass b/app/javascript/stylesheets/shared/blocks/card/_card-header.sass
@@ -23,6 +23,8 @@
     font-size: .875rem
   .card-header.is-sm &
     font-size: .875rem
+  .card-header.is-lg &
+    font-size: 1.5rem
 
 .card-header__count
   font-weight: 400

diff --git a/app/javascript/stylesheets/welcome.sass b/app/javascript/stylesheets/welcome.sass
@@ -8,6 +8,10 @@
 @import welcome/articles/bootcamp-ad
 @import welcome/articles/share-buttons
 
+@import welcome/course-selection
+@import welcome/course-selection-item
+@import welcome/course-selection-nav
+
 @import welcome/welcome-member/welcome-member-books
 @import welcome/welcome-member/welcome-member
 

diff --git a/app/javascript/stylesheets/welcome/_course-selection-item.sass b/app/javascript/stylesheets/welcome/_course-selection-item.sass
@@ -0,0 +1,28 @@
+.course-selection-item-anchor
+  position: relative
+  top: -3rem
+
+.course-selection-item
+  +media-breakpoint-up(md)
+    padding: 1.5rem 2rem
+  +media-breakpoint-down(sm)
+    padding: 1.25rem 1rem
+
+.course-selection-item__body:not(:first-child)
+  margin-top: 1.5rem
+
+.course-selection-item__title
+  font-weight: 700
+  +media-breakpoint-up(md)
+    +text-block(1.5rem 1.4)
+  +media-breakpoint-down(sm)
+    +text-block(1.25rem 1.4)
+
+.course-selection-item__action
+  margin-top: 1.25rem
+
+.course-selection-item__section
+  margin-top: 1.5rem
+  font-size: .875rem
+  +media-breakpoint-up(md)
+  +media-breakpoint-down(sm)
diff --git a/app/javascript/stylesheets/welcome/_course-selection-nav.sass b/app/javascript/stylesheets/welcome/_course-selection-nav.sass
@@ -0,0 +1,28 @@
+.course-selection-nav
+  position: sticky
+  top: 0
+  z-index: 2
+
+.course-selection-nav__inner
+  padding-block: .5rem
+
+.course-selection-nav__items
+  display: flex
+
+.course-selection-nav__item
+  flex: 1
+
+.course-selection-nav__item-link
+  border: solid 1px var(--main)
+  background-color: var(--base)
+  +text-block(.75rem 1.4, center)
+  display: flex
+  text-decoration: none
+  height: 2.75rem
+  justify-content: center
+  align-items: center
+  .course-selection-nav__item:first-child &
+    border-radius: .25rem 0 0 .25rem
+    margin-right: -1px
+  .course-selection-nav__item:last-child &
+    border-radius: 0 .25rem .25rem 0
diff --git a/app/javascript/stylesheets/welcome/_course-selection.sass b/app/javascript/stylesheets/welcome/_course-selection.sass
@@ -0,0 +1,12 @@
+.course-selection__descritpion
+  +media-breakpoint-up(md)
+    font-size: 1rem
+  +media-breakpoint-down(sm)
+    font-size: .875rem
+    margin-bottom: .5rem
+
+.course-selection__items
+  +media-breakpoint-up(md)
+    margin-top: 2rem
+  +media-breakpoint-down(sm)
+    margin-top: 1rem
diff --git a/app/javascript/stylesheets/welcome/_welcome-small-sections.sass b/app/javascript/stylesheets/welcome/_welcome-small-sections.sass
@@ -162,3 +162,12 @@
     aspect-ratio: 5 / 3
   +media-breakpoint-down(sm)
     aspect-ratio: 3 / 4
+
+.welcome-small-section__float-image
+  float: left
+  border-radius: .25rem
+  margin-right: 1rem
+  +media-breakpoint-up(md)
+    width: 6.75rem
+  +media-breakpoint-down(sm)
+    width: 4rem
diff --git a/app/javascript/stylesheets/welcome/_welcome.sass b/app/javascript/stylesheets/welcome/_welcome.sass
@@ -1,3 +1,4 @@
 body.is-welcome
   color: var(--default-text)
   font-family: $sans-serif
+  scroll-behavior: smooth
diff --git a/app/models/course.rb b/app/models/course.rb
@@ -1,11 +1,17 @@
 # frozen_string_literal: true
 
 class Course < ApplicationRecord
+  DEFAULT_COURSE = 'Railsエンジニア'
+
   has_many :courses_categories, dependent: :destroy
   has_many :categories, through: :courses_categories
   has_many :practices, through: :categories
   has_many :learnings, through: :practices
   has_many :users, dependent: :nullify
   validates :title, presence: true
   validates :description, presence: true
+
+  def self.default_course
+    find_by(title: DEFAULT_COURSE)
+  end
 end
diff --git a/app/views/articles/_ad.html.slim b/app/views/articles/_ad.html.slim
@@ -11,15 +11,13 @@ aside.bootcamp-ad
           class: 'bootcamp-ad__image'
         .a-short-text.is-sm
           p
-            | フィヨルドブートキャンプは、
-            | ソフトウェアエンジニアとして就職を目指せるスキルを
-            | 「プロの現場でプラス戦力として数えられるソフトウェアエンジニア」とし、
-            | それを身につけることを目標とした
-            | オンラインプログラミングスクールです。
+            | 就職ができるスキルを身につけるのは当然、
+            | 卒業をした時点ですでに、「現場にとって、プラスの戦力として数えられる」の実力を
+            | 身につけることを目標とした、オンラインプログラミングスクールです。
             br
             | プログラミング未経験からスタートして、
             | HTML、CSS、Linux、Ruby、Rails、JavaScript、チーム開発を経て、
-            | 自作サービスを公開するまでのカリキュラムを用意しています。
+            | 最終的に自作サービスを公開するまでのカリキュラムを用意しています。
     hr.a-border-tint
     .card-footer
       = link_to welcome_path, class: 'a-button is-primary is-lg is-block' do

diff --git a/app/views/home/_welcome_message.html.slim b/app/views/home/_welcome_message.html.slim
@@ -53,26 +53,32 @@
                     | 自分の気持ちをアウトプットする場としてコミュニティを使うのがオススメです。
                   p
                     | 学習が進まなくて辛い、新しいことを知って嬉しい、プログラミングができるようになって楽しい、
-                    | 仕事が忙しくて学習に時間が取れなくて悲しい、ソフトウェアエンジニアとして就職できるのか不安...これから学習を進めていく上で色んな気持ちになるかと思いますが、
+                    | 仕事が忙しくて学習に時間が取れなくて悲しい、ソフトウェアエンジニアとして就職できるのか不安...
+                    | これから学習を進めていく上で色んな気持ちになるかと思いますが、
                     | 気持ちをチャットや日報を使ってアウトプットしていきましょう。
                     | 辛いことに対しては親身に相談に乗ってくれたり、アドバイスをしてくれたり、嬉しいことは一緒に喜んでくれたり、
                     | コミュニティのみんなが「あなたのプログラミングを楽しむ気持ち」を育ててくれます。
-                    | どんな状況でも、それを楽しめるようになれば無敵です。どんどん気持ちをアウトプットすること、これが卒業までやりきるためのコツです。
+                    | どんな状況でも、それを楽しめるようになれば無敵です。
+                    | どんどん気持ちをアウトプットすること、これが卒業までやりきるためのコツです。
                   h2
                     | 学習の進め方
                   p
                     | 画面の左側に「プラクティス」というリンクがあります。こちらをクリックしますと、プラクティス一覧画面に移動します。
                     | フィヨルドブートキャンプでは、学習の項目一つ一つを「プラクティス」と呼んでいます。
                     |このプラクティスを上から順にやっていく、というのが学習の進め方になります。
                   p
-                    | プラクティス一覧画面に移動したら、最初のプラクティスをクリックしますと、そのプラクティスでやることが書かれています。
-                    | まずは、ページ上部にある「着手」をクリックして、ステータスを着手中にします。そして、そのプラクティスでのやることを進めていきます。
-                    | 全てが完了したら、ステータスを「修了」にします。これでそのプラクティスは完了です。次のプラクティスに進みます。
+                    | プラクティス一覧画面に移動したら、最初のプラクティスをクリックしますと、
+                    | そのプラクティスでやることが書かれています。
+                    | まずは、ページ上部にある「着手」をクリックして、ステータスを着手中にします。
+                    | そして、そのプラクティスでのやることを進めていきます。
+                    | 全てが完了したら、ステータスを「修了」にします。これでそのプラクティスは完了です。
+                    | 次のプラクティスに進みます。
                   p
                     | 他にも色々在るのですが、現時点では以上のところだけ理解いただければ十分です。
                     | これから始まる「学習の進め方を知る」というプラクティスでその他の詳しい説明があります。
                   p
-                    | もし何か不明点がありましたら、現時点では <code>[email protected]</code> にメールでご連絡をお願いします。
-                    | 途中、「チャットを使えるようになる」というプラクティスがあるのですが、それを終えるとチャットで連絡が取れるようになりますので、
+                    | もし何か不明点がありましたら、現時点では <code>[email protected]</code> にメールでご連絡をお願いします。
+                    | 途中、「チャットを使えるようになる」というプラクティスがあるのですが、
+                    | それを終えるとチャットで連絡が取れるようになりますので、
                     | そこから先はチャットでご質問をお願いします。
 hr.a-border
diff --git a/app/views/reports/_form.html.slim b/app/views/reports/_form.html.slim
@@ -125,7 +125,7 @@
     .a-short-text
       p
         | WIPとは、「work in progress」もしくは「work in process」の略。
-        | 「作業中」を表すプログラマー界隈でよく使われる用語です。
+        | 「作業中」を表すエンジニア界隈でよく使われる用語です。
       p
         | 下書きと違って、WIPの状態でも公開されています(バグではありません😄)。
       p

diff --git a/app/views/unauthorized/_about_fbc.html.slim b/app/views/unauthorized/_about_fbc.html.slim
@@ -1,9 +1,10 @@
 .about-fbc
   .a-long-text.is-md
     p
-      | フィヨルドブートキャンプは、ソフトウェアエンジニアとして就職を
-      | 目指せるだけのスキルを身につけることを目標とした、
-      | オンラインプログラミングスクールです。現場のソフトウェアエンジニアによる、
+      | 就職ができるスキルを身につけるのは当然、
+      | 卒業をした時点ですでに、「現場にとって、プラスの戦力として数えられる」の実力を
+      | 身につけることを目標とした、オンラインプログラミングスクールです。
+      | 現場のプログラマーによる、
       | 徹底的に現場目線にこだわった、
-      | 現場のソフトウェアエンジニアが考える、
+      | 現場のプログラマーが考える、
       | プログラミングスクールの在るべき姿の実現に励んでいます。
diff --git a/app/views/user_sessions/new.html.slim b/app/views/user_sessions/new.html.slim
@@ -18,6 +18,6 @@ description: 'オンラインプログラミングスクールのフィヨルド
           li.auth-form-nav__item
             = link_to 'トップページ', root_path, class: 'auth-form-nav__item-link'
           li.auth-form-nav__item
-            = link_to '参加登録', new_user_path, class: 'auth-form-nav__item-link'
+            = link_to '参加登録', courses_path, class: 'auth-form-nav__item-link'
           li.auth-form-nav__item
             = link_to '休会からの復帰', new_comeback_path, class: 'auth-form-nav__item-link'