フォント変更・バグ修正等

.gitignore

@@ -22,6 +22,9 @@
 /public/packs
 /public/packs-test
 /public/uploads
+/public/assets/*
+!/public/assets/images
+!/public/assets/audios
 
 .byebug_history
 

.node-version

@@ -1 +1 @@
-8.9.3
+10.6.0

app/assets/stylesheets/partials/fonts.sass

@@ -1,3 +1,10 @@
-@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700")
+@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css)
+@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700)
 *
-  font-family: "Ubuntu", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
+  font-family: 'Noto Sans JP', sans-serif
+#score-editor, .title-logo, .navbar, .tab-bar, .score-controls, .button, input
+  *:not(.fa)
+    font-family: 'Ubuntu', sans-serif
+#score-editor
+  .comment
+    font-family: 'Noto Sans JP', sans-serif

app/assets/stylesheets/partials/modify-bulma.sass

@@ -35,6 +35,8 @@ h1, h2, h3
   .has-checkradio
     .is-checkradio + label
       padding-right: 0
+      padding-top: 0
+      padding-bottom: 0
     &:not(:last-of-type)
       .is-checkradio + label
         margin-right: 1.2rem

app/controllers/scores_controller.rb

@@ -73,7 +73,10 @@ def set_score
   end
 
   def authenticate!
-    if @score.user_id != current_user.id
+    case
+    when !user_signed_in?
+      render json: "この操作に対する権限がありません。ログインしてください。", status: :unprocessable_entity
+    when @score.user_id != current_user.id
       render json: "現在ログイン中のユーザは、この操作に対する権限がありません。", status: :unprocessable_entity
     end
   end

app/controllers/users_controller.rb

@@ -100,7 +100,10 @@ def set_user
   end
 
   def authenticate!
-    if @user.id != current_user.id
+    case
+    when !user_signed_in?
+      render json: "この操作に対する権限がありません。ログインしてください。", status: :unprocessable_entity
+    when @user.id != current_user.id
       render json: "現在ログイン中のユーザは、この操作に対する権限がありません。", status: :unprocessable_entity
     end
   end

app/frontend/components/CardsList/index.js

@@ -6,8 +6,8 @@ import OptionCheckbox       from "./OptionCheckbox"
 import ScoresResult         from "./ScoresResult"
 import UsersResult          from "./UsersResult"
 import Pagination           from "../commons/Pagination"
-import * as utils           from "./cardsListUtils"
-import { setMeta }          from "../../utils"
+import * as cardsListUtils  from "./cardsListUtils"
+import * as utils           from "../../utils"
 import { history }          from "../../utils/browser-dependencies"
 import * as api             from "../../api"
 import * as path            from "../../utils/path"
@@ -18,7 +18,7 @@ export default class CardsList extends Component {
     const { type, location } = props
     const query = qs.parse(location.search.substr(1))
     this.state = {
-      query:   utils.setDefault(query, type),
+      query:   cardsListUtils.setDefault(query, type),
       result:  [],
       loading: true
     }
@@ -33,10 +33,10 @@ export default class CardsList extends Component {
         if (label) {
           const { query: { word } } = this.state
           const title = word ? `検索: ${word}` : `${label}一覧`
-          setMeta(title, "", this.props.history)
+          utils.setMeta(title, "", this.props.history)
         }
       },
-      () => this.props.history.push(path.root, { flash: ["error", "読み込みに失敗しました。"] })
+      (errors) => this.props.history.push(path.root, utils.setFlashError(errors))
     )
   )
   handlePush = (type, query) => {

app/frontend/components/Routes/EditScore/UpdateControl/index.js

@@ -35,7 +35,7 @@ class UpdateControl extends Component {
           status={status}
           handleSetState={handleSetState}
         />
-        <div className="field is-grouped" style={{ marginTop: ".7em" }}>
+        <div className="field is-grouped">
           <div className="control">
             <Link
               to={showPath}

app/frontend/components/Routes/EditScore/index.js

@@ -56,7 +56,7 @@ export default class EditScore extends Component {
             token:          score.token
           })
         },
-        () => this.props.history.push(path.root, { flash: ["error", "読み込みに失敗しました。"] })
+        (errors) => this.props.history.push(path.root, utils.setFlashError(errors))
       )
     }
   }

app/frontend/components/Routes/ShowScore/ScoreHeader/index.js

@@ -43,13 +43,18 @@ export default class ScoreHeader extends Component {
     return (
       <div>
         <div className="score-header">
+          {isClosed && (
+            <div className="notification">
+              <p className="private-description">
+                <span className="icon is-medium">
+                  <i className="fa fa-lock fa-lg" />
+                </span>
+                <span>このスコアは非公開です。あなた以外には見えません。</span>
+              </p>
+            </div>
+          )}
           <h1 className="title">
             {title}
-            {isClosed && (
-              <span className="icon is-small">
-                <i className="fa fa-lock" />
-              </span>
-            )}
           </h1>
 
           <Author author={author} createdAt={createdAt} updatedAt={updatedAt} />

app/frontend/components/Routes/User/index.js

@@ -26,7 +26,7 @@ export default class User extends Component {
         utils.setMeta(`${user.screen_name} のマイページ`, user.profile, this.props.history)
         this.setState({ loading: false, user })
       },
-      () => this.props.history.push(path.root, { flash: ["error", "読み込みに失敗しました。"] })
+      (errors) => this.props.history.push(path.root, utils.setFlashError(errors))
     )
   }
   handleToggleEdit = () => this.setState({ edit: !this.state.edit })

app/frontend/components/Routes/index.js

@@ -16,6 +16,7 @@ import Changelog    from "./Changelog"
 import ScoresList   from "./ScoresList"
 import UsersList    from "./UsersList"
 import FavsList     from "./FavsList"
+import * as utils   from "../../utils"
 import * as path    from "../../utils/path"
 import * as api     from "../../api"
 import { window }   from "../../utils/browser-dependencies"
@@ -39,7 +40,7 @@ class Container extends Component {
         if (currentVersion !== this.state.currentVersion) window.location.reload() // 更新があればブラウザをリロード
         this.setState({ loading: false, currentUser, notifications })
       },
-      () => history.push(path.root, { flash: ["error", "読み込みに失敗しました。"] })
+      (errors) => history.push(path.root, utils.setFlashError(errors))
     )
   }
   render() {

app/frontend/components/StatusControl/index.js

@@ -7,8 +7,20 @@ export default class StatusControl extends Component {
   render() {
     const { status } = this.props
     const radioParams = [
-      { label: "Public",  value: "published" },
-      { label: "Private", value: "closed" }
+      {
+        label: "Public",
+        description: <p>保存されたスコアは誰でも閲覧可能になります。</p>,
+        value: "published"
+      }, {
+        label: "Private",
+        description: (
+          <p>
+            保存されたスコアは非公開になります。<br />
+            あなた以外には見えず、検索にも表示されません。
+          </p>
+        ),
+        value: "closed"
+      }
     ]
     const renderRadioComponent = (param) => (
       <span className="has-checkradio" key={param.value}>
@@ -24,11 +36,15 @@ export default class StatusControl extends Component {
         <label htmlFor={param.value}>{param.label}</label>
       </span>
     )
+    const currentParam = radioParams.find(param => param.value === status) || {}
     return (
       <div className="field status-control">
         <div className="control radio-buttons">
           {radioParams.map(renderRadioComponent)}
         </div>
+        <div className="current-status-description">
+          {currentParam.description}
+        </div>
       </div>
     )
   }

app/frontend/styles/partials/navbar.sass

@@ -24,16 +24,19 @@
       .navbar-item:last-child
         margin-right: -1rem
 
+@media screen and (max-width: $mobile - 1)
+  .navbar
+    .navbar-brand
+      .title-logo
+        margin-left: 0
+
 @media screen and (max-width: $desktop - 1)
   .navbar
     .button.is-primary.login-button
       width: 100%
       background-color: $primary
       border-color: transparent
       color: #fff
-    .navbar-brand
-      .title-logo
-        margin-left: 0
     .navbar-menu
       &.is-active
         position: absolute

app/frontend/styles/partials/score-footer.sass

@@ -7,6 +7,11 @@
   .status-control
     font-weight: bold
     display: inline-block
+    .current-status-description
+      color: #888
+      font-weight: normal
+      font-size: .9em
+      margin: .75em 0 .5em
   .save-control
     display: inline-block
     width: 100%

app/frontend/styles/partials/score-header.sass

@@ -1,13 +1,13 @@
 .score-header
   margin-bottom: .4rem
+  .private-description
+    font-size: .9em
+    opacity: .5
+    .icon
+      margin-right: .5em
   .title
     font-size: 1.8em
     margin-bottom: 1.2rem
-    .icon
-      color: #363636
-      font-size: .85em
-      margin-left: .4em
-      opacity: .5
   .button
     display: block
     margin-bottom: 1rem

app/frontend/styles/partials/search.sass

@@ -9,6 +9,8 @@
     .control.options
       display: flex
       align-items: center
+  .pagination
+    min-height: 3em
   .hits
     font-size: 1rem
     align-self: center

app/frontend/styles/partials/tabbar.sass

@@ -26,7 +26,7 @@
       .input, .button, .icon
         font-size: .95rem
 
-@media screen and (max-width: $desktop - 1px)
+@media screen and (max-width: $mobile - 1px)
   .tab-bar.tabs
     .container
       width: 100%

app/frontend/styles/partials/variables.sass

@@ -2,6 +2,7 @@
 $gap:        32px
 $tablet:     769px
 $desktop:    960px  + (2 * $gap)
+$mobile:     1024px + (2 * $gap)
 $widescreen: 1152px + (2 * $gap)
 $fullhd:     1344px + (2 * $gap) !default
 

app/frontend/styles/rechord.sass

@@ -64,6 +64,11 @@ section.section
     display: flex
     flex-direction: column
 
-@media screen and (max-width: $tablet - 1px)
+@media screen and (max-width: $mobile - 1)
+  .section.root-section
+    .container
+      width: 100%
+
+@media screen and (max-width: $tablet - 1)
   .twitter-tl
     width: auto

app/frontend/utils/index.js

@@ -110,6 +110,14 @@ export const setApiErrors = (apiErrors) => {
   return errors
 }
 
+export const setFlashError = ({ response: { status, data } }) => {
+  let errorMessage = "予期しないエラーが発生しました。読み込みに失敗しました。"
+  if (Number(status / 100) === 4 && data) {
+    errorMessage = data
+  }
+  return { flash: ["error", errorMessage] }
+}
+
 export const iconUrl = (icon, size) => {
   if (icon && icon.url) {
     return size === "thumb" ? icon.thumb.url : icon.url