Commit: 3774f2dca9ddf61aa42ffad2b85d267189caef20 - mmw_serv (git)

Commit MetaInfo

• Revisão: 3774f2dca9ddf61aa42ffad2b85d267189caef20 (tree)
• Hora: 2017-09-12 22:46:49
• Autor: HMML <hmml3939@gmai...>
• Commiter: HMML

Mensagem de Log

Transit to bootstrap 4 beta!

Mudança Sumário

• modified: Gemfile
• modified: Gemfile.lock
• modified: app/assets/stylesheets/application.scss
• add: app/assets/stylesheets/bootstrap4-beta-simpleform-workaround.scss
• modified: app/assets/stylesheets/welcome.scss
• modified: app/javascript/components/theme_wizard.jsx
• modified: app/models/user.rb
• modified: app/views/drafts/edit.html.haml
• modified: app/views/layouts/_topnav.html.haml
• modified: app/views/themes/index.html.haml
• modified: app/views/users/show.html.haml
• modified: app/views/welcome/index.html.haml
• modified: config/initializers/simple_form_bootstrap.rb

Diff

--- a/Gemfile
+++ b/Gemfile
@@ -40,7 +40,7 @@ gem 'responders'
 gem 'kaminari'
 gem 'kaminari-i18n'
 gem 'font-awesome-rails'
-gem 'bootstrap', '4.0.0.alpha6'
+gem 'bootstrap', '~> 4.0.0.beta'
 gem 'lightbox-bootstrap-rails', '5.1.0.1'
 gem 'popper_js'
 gem 'tether-rails'

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -66,8 +66,9 @@ GEM
     bindex (0.5.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootstrap (4.0.0.alpha6)
+    bootstrap (4.0.0.beta)
       autoprefixer-rails (>= 6.0.3)
+      popper_js (~> 1.11.1)
       sass (>= 3.4.19)
     builder (3.2.3)
     byebug (9.1.0)
@@ -265,7 +266,7 @@ GEM
       cocaine (~> 0.5.5)
       mime-types
       mimemagic (~> 0.3.0)
-    popper_js (1.12.3)
+    popper_js (1.11.1)
     pry (0.10.4)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
@@ -459,7 +460,7 @@ PLATFORMS
 
 DEPENDENCIES
   awesome_print
-  bootstrap (= 4.0.0.alpha6)
+  bootstrap (~> 4.0.0.beta)
   byebug
   cancancan
   capistrano-bundler

--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -6,6 +6,7 @@
 @import "lightbox-bootstrap";
 
 @import "awesome_print";
+@import "bootstrap4-beta-simpleform-workaround";
 @import "common";
 
 @import "dist_signals";

--- /dev/null
+++ b/app/assets/stylesheets/bootstrap4-beta-simpleform-workaround.scss
@@ -0,0 +1,19 @@
+
+@import 'bootstrap/functions';
+@import 'bootstrap/variables';
+@import 'bootstrap/mixins';
+
+.has-invalid {
+  .invalid-feedback {
+    display: block;
+  }
+
+  label {
+    color: theme-color('danger');
+  }
+
+  .form-control {
+    background: theme-color-level('danger', -10);
+    border-color: theme-color('danger');
+  }
+}

--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@@ -22,7 +22,8 @@
     }
     p a { color: #9cf; }
     .image-container {
-        margin-bottom: 2rem;
+        padding-bottom: 2rem;
+        height: 100%;
     }
     @include media-breakpoint-up(lg) {
         .image-container {
@@ -30,8 +31,11 @@
         }
     }
     @include media-breakpoint-down(md) {
+        .carousel-caption h3 {
+            font-size: 1.6rem;
+        }
         .image-container {
-            margin-bottom: 10rem;
+            padding-bottom: 10rem;
             padding-left: 0px;
         }
     }

--- a/app/javascript/components/theme_wizard.jsx
+++ b/app/javascript/components/theme_wizard.jsx
@@ -104,7 +104,7 @@ class TW_Login extends React.Component {
     return(
       <div>
         <div className="card">
-          <div className="card-block">
+          <div className="card-body">
             <h3>ログインの確認</h3>
             <p>現在ログインしていません。このまま進めた場合、テーマを匿名で公開できますが、公開されたテーマの修正・削除などは一切できません。
             </p>
@@ -139,7 +139,7 @@ class TW_ConfirmRights extends React.Component {
     return(
       <div>
         <div className="card">
-          <div className="card-block">
+          <div className="card-body">
             <h3>最初に権利について確認してください</h3>
             <p>
               公開テーマとして登録すると、データは誰でもダウンロードできるようになります。
@@ -153,8 +153,8 @@ class TW_ConfirmRights extends React.Component {
               </li>
             </ul>
             <div className="form-group">
-              <div className={`form-check ${this.state.valid ? '' : 'has-danger'}`}>
-                <label className="form-check-label">
+              <div className="form-check">
+                <label className={`form-check-label ${this.state.valid ? '' : 'text-danger'}`}>
                   <input className="form-check-input" type="checkbox" 
                          checked={this.props.theme.rights_confirmed}
                          onChange={(e) => this.props.updateTheme({rights_confirmed: e.target.checked})} />
@@ -220,14 +220,14 @@ class TW_ThemeInfo extends React.Component {
       if (attr == 'name' || attr == 'author')
         required = <span><abbr title="required">*</abbr>&nbsp;</span>
       inputs.push(
-        <div className={`form-group row ${this.state['valid_'+attr] ? '' : 'has-danger'}`} key={`input-group-${attr}`}>
+        <div className="form-group row">
           <label className="col-md-2 form-control-label string" htmlFor={`theme_${attr}`}>
             {required}
             {I18n.t(`activerecord.attributes.theme.${attr}`)}</label>
           <div className="col-md-10">
-            <input className="form-control string" type="text" 
+            <input className={`form-control string ${this.state['valid_'+attr] ? '' : 'is-invalid'}`} key={`input-group-${attr}`}
                    placeholder={I18n.t(`simple_formn.placeholders.theme.${attr}`, {default: null})}
-                   name={`theme[${attr}]`} id={`theme_${attr}`}
+                   name={`theme[${attr}]`} id={`theme_${attr}`} type="text" 
                    value={this.props.theme[attr]}
                    onChange={(e) => this.props.updateTheme({[attr]: e.target.value})}
               />
@@ -239,7 +239,7 @@ class TW_ThemeInfo extends React.Component {
     return(
       <div>
         <div className="card">
-          <div className="card-block">
+          <div className="card-body">
             <h3>テーマ情報を入力して下さい</h3>
             {inputs}
           </div>
@@ -323,8 +323,8 @@ class TW_License extends React.Component {
     for (let key in cc_conds) {
       cc_choosers.push(
         <div className="form-group" key={`cc-choice-${key}`}>
-          <div className={`form-check ${this.state.valid_cc ? '' : 'has-danger'}`}>
-            <label className="form-check-label">
+          <div className="form-check">
+            <label className={`form-check-label ${this.state.valid_cc ? '' : 'text-danger'}`}>
               <input className="form-check-input" type="radio" name="cc" value={key}
                      checked={this.props.theme.license_cc == key}
                      onChange={(e) => this.props.updateTheme({license_cc: key})}
@@ -346,21 +346,23 @@ class TW_License extends React.Component {
     let other_block = null;
     if (this.state.other_checked) {
       other_block = <div className="other-block">
-        <div className={`form-group row ${this.state.valid_other ? '' : 'has-danger'}`}>
+        <div className="form-group row">
           <label className="col-2 pl-4 form-control-label string" htmlFor="license_oather">
             ライセンス名</label>
           <div className="col-10">
-            <input className="form-control string" type="text"  id="license_other"
-                   placeholder="名称を入力して下さい" value={this.props.theme.license_other}
-                   onChange={(e) => this.props.updateTheme({license_other: e.target.value})}
-              />
+            <input className={`form-control string ${this.state.valid_other ? '' : 'is-invalid'}`}
+               type="text"  id="license_other"
+               placeholder="名称を入力して下さい" value={this.props.theme.license_other}
+               onChange={(e) => this.props.updateTheme({license_other: e.target.value})}
+            />
           </div>
         </div>
-        <div className={`form-group row ${this.state.valid_other_url ? '' : 'has-danger'}`}>
+        <div className="form-group row">
           <label className="col-2 pl-4 form-control-label string" htmlFor="license_other_url">
             ライセンス本文URL</label>
           <div className="col-10">
-            <input className="form-control string" type="text" id="license_other_url"
+          <input className={`form-control string ${this.state.valid_other_url ? '' : 'is-invalid'}`}
+                   type="text" id="license_other_url"
                    placeholder="ライセンスの紹介・本文・など一次情報のURLを入力して下さい"
                    value={this.props.theme.license_other_url}
                    onChange={(e) => this.props.updateTheme({license_other_url: e.target.value})}
@@ -373,13 +375,13 @@ class TW_License extends React.Component {
     return(
       <div>
         <div className="card">
-          <div className="card-block">
+          <div className="card-body">
             <h3>ライセンスの選択</h3>
             <p>公開したテーマを利用者がどのように扱えるか選択して下さい。</p>
             
             <div className="form-group">
-              <div className={`form-check ${this.state.valid ? '' : 'has-danger'}`}>
-                <label className="form-check-label">
+              <div className="form-check">
+                <label className={`form-check-label ${this.state.valid ? '' : 'text-danger'}`}>
                   <input className="form-check-input" type="checkbox" 
                          checked={this.props.theme.allow_orig_dl}
                          onChange={(e) => this.props.updateTheme({allow_orig_dl: e.target.checked})} />
@@ -439,7 +441,7 @@ class TW_Publish extends React.Component {
     return (
       <div>
         <div className="card">
-          <div className="card-block">
+          <div className="card-body">
             <h4>最後のステップです</h4>
             <p>公開の準備ができました。以下の情報が間違いない事を確認して、公開するボタンを押して下さい。</p>
             <ul>

--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -5,6 +5,8 @@ class User < ApplicationRecord
   # :recoverable, :rememberable, :validatable,
   devise :trackable, :omniauthable
 
+  validates :name, presence: true
+
   has_many :themes
 
   def tw_url?

--- a/app/views/drafts/edit.html.haml
+++ b/app/views/drafts/edit.html.haml
@@ -3,16 +3,16 @@
 .draft-actions.pull-right.text-right
   %button.btn.btn-secondary{data: {target: '.draft-basic-into', toggle: 'collapse'}}
     = fa_icon :info
-    %span.hidden-xs-down= t 'draft_info'
-    %span.hidden-sm-up= t 'draft_info_short'
+    %span.d-none.d-sm-inline= t 'draft_info'
+    %span.d-sm-none= t 'draft_info_short'
   %button.btn.btn-secondary{data: {toggle: 'modal', target: '.preview-info-modal'}}
     = fa_icon :mobile
-    %span.hidden-xs-down= t 'device_preview'
-    %span.hidden-sm-up= t 'device_preview_short'
+    %span.d-none.d-sm-inline= t 'device_preview'
+    %span.d-sm-none= t 'device_preview_short'
   .btn-group
     %button.btn.btn-primary.dropdown-toggle{data: {toggle: :dropdown}}
-      %span.hidden-xs-down= fa_icon('chevron-circle-right')+' '+t('finish_edit')
-      %span.hidden-sm-up= fa_icon('chevron-circle-right')+' '+t('finish_edit_short')
+      %span.d-none.d-sm-inline= fa_icon('chevron-circle-right')+' '+t('finish_edit')
+      %span.d-sm-none= fa_icon('chevron-circle-right')+' '+t('finish_edit_short')
     .dropdown-menu.dropdown-menu-right
       = link_to fa_icon('chevron-circle-right')+' '+t('start_publish_theme'), new_theme_path(draft_key: @draft.key), class: 'dropdown-item'
       .dropdown-divider
@@ -24,7 +24,7 @@
 
 .draft-basic-into.collapse.show
   .card
-    .card-block
+    .card-body
       %button.btn.btn-secondary.pull-right{data: {target: '.draft-basic-into', toggle: 'collapse'}}
         = t 'dismiss'
       %p.card-text=t 'draft_edit_desc_html', plus_icon: fa_icon('plus-circle')

--- a/app/views/layouts/_topnav.html.haml
+++ b/app/views/layouts/_topnav.html.haml
@@ -1,8 +1,8 @@
-%nav.navbar.navbar-light.bg-faded.sticky-top.navbar-toggleable-md#topnav
-  %button.navbar-toggler.navbar-toggler-right{data: {toggle: :collapse, target: '#topnavbar-nav'}}
-    %span.navbar-toggler-icon
+%nav.navbar.navbar-light.bg-light.sticky-top.navbar-expand-lg#topnav
   = link_to image_tag('app-icon.png', size: '30x30', class: 'd-inline-block align-top app-icon') + ' ' + t('site_title'),
     root_path, class: "navbar-brand"
+  %button.navbar-toggler{data: {toggle: :collapse, target: '#topnavbar-nav'}}
+    %span.navbar-toggler-icon
   .collapse.navbar-collapse#topnavbar-nav
     %ul.navbar-nav.mr-auto
       %li.nav-item{class: controller_name == "themes" ? 'active' : ''}

--- a/app/views/themes/index.html.haml
+++ b/app/views/themes/index.html.haml
@@ -9,7 +9,7 @@
 .card-columns.theme-index
   - @themes.each do |theme|
     .card{class: theme.day_frame_white? ? 'frame-white' : ''}
-      .card-block.p-1
+      .card-body.p-1
         .icons
           - 3.times do |idx|
             .day-frame.day-frame-80

--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -12,7 +12,7 @@
   .card-columns.theme-index
     - @user.themes.each do |theme|
       .card{class: theme.day_frame_white? ? 'frame-white' : ''}
-        .card-block.p-1
+        .card-body.p-1
           .icons
             - 3.times do |idx|
               .day-frame.day-frame-80

--- a/app/views/welcome/index.html.haml
+++ b/app/views/welcome/index.html.haml
@@ -1,4 +1,4 @@
-.pull-right.hidden-sm-down
+.pull-right.d-none.d-md-block
   = link_to image_tag('phone-shot.jpg', class: 'img-fluid'),
     image_path('phone-shot-full.jpg'),
     'data-toggle' => 'lightbox', 'data-turbolinks' => 'false'
@@ -36,7 +36,7 @@
       %w(1 髪飾り @gull08 https://twitter.com/gull08),
       ].each_with_index do |tinfo, idx|
       .carousel-item{class: "#{idx == 0 ? 'active' : ''} #{tinfo[0] == '3' ? 'item-white-bg' : ''}"}
-        .image-container.text-center.text-lg-left.w-100
+        .image-container.text-center.text-lg-left.w-100.d-inline-block
           = image_tag "theme-#{tinfo[0]}.png", size: '600x300', class: 'img-fluid mx-1'
         .carousel-caption.d-block.text-lg-right
           %h3= tinfo[1]
@@ -45,7 +45,7 @@
             = link_to tinfo[2], tinfo[3]
           = link_to fa_icon(:download) + ' 画像のダウンロード',
             builtin_theme_download_path(tinfo[0]),
-            class: 'btn btn-secondary btn-sm d-block d-lg-inline-block',
+            class: 'btn btn-light btn-sm d-block d-lg-inline-block',
             'data-turbolinks' => 'false'
   %a.carousel-control-prev{href: '#theme-gallery', data: {slide: 'prev'}}
     %span.carousel-control-prev-icon

--- a/config/initializers/simple_form_bootstrap.rb
+++ b/config/initializers/simple_form_bootstrap.rb
@@ -4,7 +4,7 @@ SimpleForm.setup do |config|
   config.button_class = 'btn btn-primary'
   config.boolean_label_class = nil
 
-  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
+  config.wrappers :vertical_form, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -15,11 +15,11 @@ SimpleForm.setup do |config|
     b.use :label, class: 'form-control-label'
 
     b.use :input, class: 'form-control'
-    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
     b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
+  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -28,11 +28,11 @@ SimpleForm.setup do |config|
     b.use :label, class: 'form-control-label'
 
     b.use :input
-    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
     b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
+  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.optional :readonly
 
@@ -40,20 +40,20 @@ SimpleForm.setup do |config|
       ba.use :label_input
     end
 
-    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
     b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
+  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.optional :readonly
     b.use :label, class: 'form-control-label'
     b.use :input
-    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
     b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :horizontal_form, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
+  config.wrappers :horizontal_form, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -65,12 +65,12 @@ SimpleForm.setup do |config|
 
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.use :input, class: 'form-control'
-      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
       ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
+  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -80,12 +80,12 @@ SimpleForm.setup do |config|
 
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.use :input
-      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
       ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
+  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.optional :readonly
 
@@ -94,12 +94,12 @@ SimpleForm.setup do |config|
         ba.use :label_input
       end
 
-      wr.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      wr.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
       wr.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
+  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.optional :readonly
 
@@ -107,12 +107,12 @@ SimpleForm.setup do |config|
 
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.use :input
-      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
       ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
+  config.wrappers :inline_form, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -123,22 +123,22 @@ SimpleForm.setup do |config|
     b.use :label, class: 'sr-only'
 
     b.use :input, class: 'form-control'
-    b.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+    b.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
     b.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
   end
 
-  config.wrappers :multi_select, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
+  config.wrappers :multi_select, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.optional :readonly
     b.use :label, class: 'form-control-label'
     b.wrapper tag: 'div', class: 'form-inline' do |ba|
       ba.use :input, class: 'form-control'
-      ba.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
       ba.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
     end
   end
 
-  config.wrappers :horizontal_multi_select, tag: 'div', class: 'form-group row', error_class: 'has-danger' do |b|
+  config.wrappers :horizontal_multi_select, tag: 'div', class: 'form-group row', error_class: 'has-invalid' do |b|
     b.use :html5
     b.optional :readonly
     b.use :label, class: 'col-3 form-control-label'
@@ -146,7 +146,7 @@ SimpleForm.setup do |config|
     b.wrapper tag: 'div', class: 'col-9' do |ba|
       ba.wrapper tag: 'div', class: 'form-inline' do |bb|
         bb.use :input, class: 'form-control'
-        bb.use :error, wrap_with: { tag: 'span', class: 'form-control-feedback' }
+        bb.use :error, wrap_with: { tag: 'span', class: 'invalid-feedback' }
         bb.use :hint,  wrap_with: { tag: 'p', class: 'form-text text-muted' }
       end
     end