Refs #3151: updating period_form layout

7 files changed, 321 insertions, 275 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
index 943b781f5..7807c3ef6 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
@@ -6,118 +6,114 @@ var TagsSelect2 = require('./TagsSelect2')
 const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelect2Tags, onUnselect2Tags}) => {
   let colorList = ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"]
   return (
-    <div className="row">
-      <div className="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
-        <div className='form-horizontal'>
-          <div className="row">
-            <div className="col-lg-12">
-              {/* comment (name) */}
-              <div className="form-group">
-                <label htmlFor="" className="control-label col-sm-4 required">
-                  Nom <abbr title="Champ requis">*</abbr>
-                </label>
-                <div className="col-sm-8">
-                  <input
-                    type='text'
-                    className='form-control'
-                    value={metas.comment}
-                    onChange={(e) => (onUpdateComment(e.currentTarget.value))}
-                    />
-                </div>
-              </div>
+    <div className='form-horizontal'>
+      <div className="row">
+        <div className="col-lg-10 col-lg-offset-1">
+          {/* comment (name) */}
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4 required">
+              Nom <abbr title="Champ requis">*</abbr>
+            </label>
+            <div className="col-sm-8">
+              <input
+                type='text'
+                className='form-control'
+                value={metas.comment}
+                onChange={(e) => (onUpdateComment(e.currentTarget.value))}
+                />
+            </div>
+          </div>
 
-              {/* color */}
-              <div className="form-group">
-                <label htmlFor="" className="control-label col-sm-4">Couleur associée</label>
-                <div className="col-sm-8">
-                  <div className="dropdown color_selector">
-                    <button
-                      type='button'
-                      className="btn btn-default dropdown-toggle"
-                      id='dpdwn_color'
-                      data-toggle='dropdown'
-                      aria-haspopup='true'
-                      aria-expanded='true'
-                      >
-                      <span
-                        className='fa fa-circle mr-xs'
-                        style={{color: (metas.color == '')  ? 'transparent' : metas.color}}
-                        ></span>
-                      <span className='caret'></span>
-                    </button>
+          {/* color */}
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4">Couleur associée</label>
+            <div className="col-sm-8">
+              <div className="dropdown color_selector">
+                <button
+                  type='button'
+                  className="btn btn-default dropdown-toggle"
+                  id='dpdwn_color'
+                  data-toggle='dropdown'
+                  aria-haspopup='true'
+                  aria-expanded='true'
+                  >
+                  <span
+                    className='fa fa-circle mr-xs'
+                    style={{color: (metas.color == '')  ? 'transparent' : metas.color}}
+                    ></span>
+                  <span className='caret'></span>
+                </button>
 
-                    <div className="form-group dropdown-menu" aria-labelledby='dpdwn_color'>
-                      {colorList.map((c, i) =>
+                <div className="form-group dropdown-menu" aria-labelledby='dpdwn_color'>
+                  {colorList.map((c, i) =>
+                    <span
+                      className="radio"
+                      key={i}
+                      onClick={() => {onUpdateColor(c)}}
+                    >
+                      <label htmlFor="">
+                        <input
+                          type='radio'
+                          className='color_selector'
+                          value={c}
+                          />
                         <span
-                          className="radio"
-                          key={i}
-                          onClick={() => {onUpdateColor(c)}}
-                        >
-                          <label htmlFor="">
-                            <input
-                              type='radio'
-                              className='color_selector'
-                              value={c}
-                              />
-                            <span
-                              className='fa fa-circle'
-                              style={{color: ((c == '') ? 'transparent' : c)}}
-                              ></span>
-                          </label>
-                        </span>
-                      )}
-                    </div>
-                  </div>
+                          className='fa fa-circle'
+                          style={{color: ((c == '') ? 'transparent' : c)}}
+                          ></span>
+                      </label>
+                    </span>
+                  )}
                 </div>
               </div>
+            </div>
+          </div>
 
-              {/* tags */}
-              {/* <div className="form-group">
-                <label htmlFor="" className="control-label col-sm-4">Etiquettes</label>
-                <div className="col-sm-8">
-                  <TagsSelect2
-                    tags={metas.tags}
-                    onSelect2Tags={(e) => onSelect2Tags(e)}
-                    onUnselect2Tags={(e) => onUnselect2Tags(e)}
-                  />
-                  <input type="text" value='ton papa' className='form-control'/>
-                </div>
-              </div>
-              */}
+          {/* tags */}
+          {/* <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4">Etiquettes</label>
+            <div className="col-sm-8">
+              <TagsSelect2
+                tags={metas.tags}
+                onSelect2Tags={(e) => onSelect2Tags(e)}
+                onUnselect2Tags={(e) => onUnselect2Tags(e)}
+              />
+              <input type="text" value='ton papa' className='form-control'/>
+            </div>
+          </div>
+          */}
 
-              {/* calendar */}
-              <div className="form-group">
-                <label htmlFor="" className="control-label col-sm-4">Modèle de calendrier associé</label>
-                <div className="col-sm-8">
-                  <span>{metas.calendar.name}</span>
-                </div>
-              </div>
-              {/* day_types */}
-              <div className="form-group">
-                <label htmlFor="" className="control-label col-sm-4">
-                  Journées d'applications pour les périodes ci-dessous
-                </label>
-                <div className="col-sm-8">
-                  <div className="form-group labelled-checkbox-group">
-                    {metas.day_types.map((day, i) =>
-                      <div className="lcbx-group-item"
-                        key={i}
-                      >
-                        <div className="checkbox">
-                          <label>
-                            <input
-                              onChange={(e) => {onUpdateDayTypes(i)}}
-                              id={i}
-                              type="checkbox"
-                              checked={day ? 'checked' : ''}
-                              />
-                            <span className='lcbx-group-item-label'>{weekDays[i]}</span>
-                          </label>
-                        </div>
-                      </div>
-                    )}
+          {/* calendar */}
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4">Modèle de calendrier associé</label>
+            <div className="col-sm-8">
+              <span>{metas.calendar.name}</span>
+            </div>
+          </div>
+          {/* day_types */}
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4">
+              Journées d'applications pour les périodes ci-dessous
+            </label>
+            <div className="col-sm-8">
+              <div className="form-group labelled-checkbox-group">
+                {metas.day_types.map((day, i) =>
+                  <div className="lcbx-group-item"
+                    key={i}
+                  >
+                    <div className="checkbox">
+                      <label>
+                        <input
+                          onChange={(e) => {onUpdateDayTypes(i)}}
+                          id={i}
+                          type="checkbox"
+                          checked={day ? 'checked' : ''}
+                          />
+                        <span className='lcbx-group-item-label'>{weekDays[i]}</span>
+                      </label>
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             </div>
           </div>
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js b/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
index 5db373f9c..c43cd025a 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
@@ -13,73 +13,69 @@ let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
     let firstPage = pageIndex == 0
     let lastPage = pageIndex == pagination.periode_range.length - 1
     return (
-      <div className="row mt-md">
-        <div className="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-right">
-          <div className="pagination">
-            <form className='form-inline' onSubmit={e => {e.preventDefault()}}>
-              {/* date selector */}
-              <div className="form-group">
-                <div className="dropdown month_selector" style={{display: 'inline-block'}}>
-                  <div
-                    className='btn btn-default dropdown-toggle'
-                    id='date_selector'
-                    data-toggle='dropdown'
-                    aria-haspopup='true'
-                    aria-expanded='true'
-                  >
-                    {pagination.currentPage ? (actions.monthName(pagination.currentPage) + ' ' + new Date(pagination.currentPage).getFullYear()) : ''}
-                    <span className='caret'></span>
-                  </div>
-                  <ul
-                    className='dropdown-menu'
-                    aria-labelledby='date_selector'
-                    >
-                    {_.map(pagination.periode_range, (month, i) => (
-                      <li key={i}>
-                        <button
-                          type='button'
-                          value={month}
-                          onClick={e => {
-                            e.preventDefault()
-                            dispatch(actions.checkConfirmModal(e, actions.changePage(dispatch, pagination, e.currentTarget.value), pagination.stateChanged, dispatch))
-                          }}
-                        >
-                          {actions.monthName(month) + ' ' + new Date(month).getFullYear()}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
+      <div className="pagination pull-right">
+        <form className='form-inline' onSubmit={e => {e.preventDefault()}}>
+          {/* date selector */}
+          <div className="form-group">
+            <div className="dropdown month_selector" style={{display: 'inline-block'}}>
+              <div
+                className='btn btn-default dropdown-toggle'
+                id='date_selector'
+                data-toggle='dropdown'
+                aria-haspopup='true'
+                aria-expanded='true'
+              >
+                {pagination.currentPage ? (actions.monthName(pagination.currentPage) + ' ' + new Date(pagination.currentPage).getFullYear()) : ''}
+                <span className='caret'></span>
               </div>
+              <ul
+                className='dropdown-menu'
+                aria-labelledby='date_selector'
+                >
+                {_.map(pagination.periode_range, (month, i) => (
+                  <li key={i}>
+                    <button
+                      type='button'
+                      value={month}
+                      onClick={e => {
+                        e.preventDefault()
+                        dispatch(actions.checkConfirmModal(e, actions.changePage(dispatch, pagination, e.currentTarget.value), pagination.stateChanged, dispatch))
+                      }}
+                    >
+                      {actions.monthName(month) + ' ' + new Date(month).getFullYear()}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
 
-              {/* prev/next */}
-              <div className="form-group">
-                <div className="page_links">
-                  <button
-                    onClick={e => {
-                      e.preventDefault()
-                      dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
-                    }}
-                    type='button'
-                    data-target='#ConfirmModal'
-                    className={(firstPage ? 'disabled ' : '') + 'previous_page'}
-                    disabled={(firstPage ? 'disabled' : '')}
-                    ></button>
-                  <button
-                    onClick={e => {
-                      e.preventDefault()
-                      dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
-                    }}
-                    type='button'
-                    data-target='#ConfirmModal'
-                    className={(lastPage ? 'disabled ' : '') + 'next_page'}
-                    disabled={(lastPage ? 'disabled' : '')}
-                    ></button>
-                </div>
-              </div>
-            </form>
+          {/* prev/next */}
+          <div className="form-group">
+            <div className="page_links">
+              <button
+                onClick={e => {
+                  e.preventDefault()
+                  dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
+                }}
+                type='button'
+                data-target='#ConfirmModal'
+                className={(firstPage ? 'disabled ' : '') + 'previous_page'}
+                disabled={(firstPage ? 'disabled' : '')}
+                ></button>
+              <button
+                onClick={e => {
+                  e.preventDefault()
+                  dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
+                }}
+                type='button'
+                data-target='#ConfirmModal'
+                className={(lastPage ? 'disabled ' : '') + 'next_page'}
+                disabled={(lastPage ? 'disabled' : '')}
+                ></button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
     )
   } else {
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
index 0fc8b7cf4..82b0d9950 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
@@ -32,55 +32,103 @@ const makeYearsOptions = (yearSelected) => {
 }
 
 const PeriodForm = ({modal, timetable, metas, onOpenAddPeriodForm, onClosePeriodForm, onUpdatePeriodForm, onValidatePeriodForm}) => (
-  <div>
-    {modal.modalProps.active &&
-      <div className="form-group date filter_menu-item">
-        <label className="date required control-label" >Du <abbr title="Champ requis">*</abbr></label>
-        <div className="form-inline">
-          <select value={formatNumber(modal.modalProps.begin.day)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'day')} id="q_validity_period_begin_gteq_3i" className="date required form-control">
-            {makeDaysOptions(modal.modalProps.begin.day)}
-          </select>
-          <select value={formatNumber(modal.modalProps.begin.month)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'month')} id="q_validity_period_begin_gteq_2i" className="date required form-control">
-            {makeMonthsOptions(modal.modalProps.begin.month)}
-          </select>
-          <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'year')} id="q_validity_period_begin_gteq_1i" className="date required form-control">
-            {makeYearsOptions(modal.modalProps.begin.year)}
-          </select>
-        </div>
-        <label className="date required control-label" >Au <abbr title="Champ requis">*</abbr></label>
-        <div className="form-inline">
-          <select value={formatNumber(modal.modalProps.end.day)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'day')} id="q_validity_period_end_gteq_3i" className="date required form-control">
-            {makeDaysOptions(modal.modalProps.end.day)}
-          </select>
-          <select value={formatNumber(modal.modalProps.end.month)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'month')} id="q_validity_period_end_gteq_2i" className="date required form-control">
-            {makeMonthsOptions(modal.modalProps.end.month)}
-          </select>
-          <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'year')} id="q_validity_period_end_gteq_1i" className="date required form-control">
-            {makeYearsOptions(modal.modalProps.end.year)}
-          </select>
-        </div>
-        <div>
-          <button
-            onClick={onClosePeriodForm}
-          >
-          Annuler
-          </button>
-          <button
-            onClick={() => onValidatePeriodForm(modal.modalProps, timetable.time_table_periods, metas)}
-          >
-          Valider
-          </button>
-          <span>{modal.modalProps.error}</span>
+  <div className="container-fluid">
+    <div className="row">
+      <div className="col lg-6 col-lg-offset-3">
+        <div className='subform'>
+          <div className="nested-head">
+            <div className="wrapper">
+              <div>
+                <div className="form-group">
+                  <label htmlFor="" className="control-label required">
+                    Début de période
+                    <abbr title="requis">*</abbr>
+                  </label>
+                </div>
+              </div>
+              <div>
+                <div className="form-group">
+                  <label htmlFor="" className="control-label required">
+                    Fin de période
+                    <abbr title="requis">*</abbr>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {modal.modalProps.active &&
+            <div>
+              <div className="nested-fields">
+                <div className="wrapper">
+                  <div>
+                    <div className={'form-group date' + (modal.modalProps.error ? ' has-error' : '')}>
+                      <div className="form-inline">
+                        <select value={formatNumber(modal.modalProps.begin.day)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'day')} id="q_validity_period_begin_gteq_3i" className="date required form-control">
+                          {makeDaysOptions(modal.modalProps.begin.day)}
+                        </select>
+                        <select value={formatNumber(modal.modalProps.begin.month)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'month')} id="q_validity_period_begin_gteq_2i" className="date required form-control">
+                          {makeMonthsOptions(modal.modalProps.begin.month)}
+                        </select>
+                        <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'year')} id="q_validity_period_begin_gteq_1i" className="date required form-control">
+                          {makeYearsOptions(modal.modalProps.begin.year)}
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <div className={'form-group date' + (modal.modalProps.error ? ' has-error' : '')}>
+                      <div className="form-inline">
+                        <select value={formatNumber(modal.modalProps.end.day)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'day')} id="q_validity_period_end_gteq_3i" className="date required form-control">
+                          {makeDaysOptions(modal.modalProps.end.day)}
+                        </select>
+                        <select value={formatNumber(modal.modalProps.end.month)} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'month')} id="q_validity_period_end_gteq_2i" className="date required form-control">
+                          {makeMonthsOptions(modal.modalProps.end.month)}
+                        </select>
+                        <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'year')} id="q_validity_period_end_gteq_1i" className="date required form-control">
+                          {makeYearsOptions(modal.modalProps.end.year)}
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className='links nested-linker'>
+                <span className='help-block small text-danger pull-left mt-xs ml-sm'>
+                  {modal.modalProps.error}
+                </span>
+                <button
+                  type='button'
+                  className='btn btn-link'
+                  onClick={onClosePeriodForm}
+                >
+                  Annuler
+                </button>
+                <button
+                  type='button'
+                  className='btn btn-outline-primary mr-sm'
+                  onClick={() => onValidatePeriodForm(modal.modalProps, timetable.time_table_periods, metas)}
+                >
+                  Valider
+                </button>
+              </div>
+            </div>
+          }
+          {!modal.modalProps.active &&
+            <div className="links nested-linker">
+              <button
+                type='button'
+                className='btn btn-outline-primary add_fields'
+                onClick={onOpenAddPeriodForm}
+                >
+                Ajouter une période
+              </button>
+            </div>
+          }
         </div>
       </div>
-    }
-    {!modal.modalProps.active &&
-      <button
-        onClick={onOpenAddPeriodForm}
-      >
-        Ajouter une période
-      </button>
-    }
+    </div>
   </div>
 )
 
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
index 65aae0e11..7a33bd63d 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -21,68 +21,64 @@ class Timetable extends Component{
 
   render() {
     return (
-      <div className='row'>
-        <div className="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
-          <div className="table table-2entries mb-sm">
-            <div className="t2e-head w20">
+      <div className="table table-2entries mb-sm">
+        <div className="t2e-head w20">
+          <div className="th">
+            <div className="strong">Synthèse</div>
+          </div>
+          <div className="td"><span>Journées d'application</span></div>
+          <div className="td"><span>Périodes</span></div>
+          <div className="td"><span>Exceptions</span></div>
+        </div>
+        <div className="t2e-item-list w80">
+          <div>
+            <div className="t2e-item">
               <div className="th">
-                <div className="strong">Synthèse</div>
-              </div>
-              <div className="td"><span>Journées d'application</span></div>
-              <div className="td"><span>Périodes</span></div>
-              <div className="td"><span>Exceptions</span></div>
-            </div>
-            <div className="t2e-item-list w80">
-              <div>
-                <div className="t2e-item">
-                  <div className="th">
-                    <div className="strong monthName">
-                      {actions.monthName(this.props.timetable.current_periode_range)}
-                    </div>
-
-                    <div className='monthDays'>
-                      {this.props.timetable.current_month.map((d, i) =>
-                        <TimeTableDay
-                          key={i}
-                          index={i}
-                          value={d}
-                          dayTypeActive={this.props.metas.day_types[d.wday]}
-                          />
-                      )}
-                    </div>
-                  </div>
+                <div className="strong monthName">
+                  {actions.monthName(this.props.timetable.current_periode_range)}
+                </div>
 
+                <div className='monthDays'>
                   {this.props.timetable.current_month.map((d, i) =>
-                    <div
+                    <TimeTableDay
                       key={i}
-                      className={'td-group' + (this.props.metas.day_types[d.wday] ? '' : ' out_from_daytypes') + (d.wday == 0 ? ' last_wday' : '')}
-                    >
-                      {/* day_types */}
-                      <div className="td"></div>
-
-                      {/* periods */}
-                      <PeriodsInDay
-                        index={i}
-                        value={this.props.timetable.time_table_periods}
-                        currentDate={this.currentDate(this.props.timetable.current_periode_range, d.mday)}
-                        onDeletePeriod={this.props.onDeletePeriod}
-                        onOpenEditPeriodForm={this.props.onOpenEditPeriodForm}
-                        metas={this.props.metas}
+                      index={i}
+                      value={d}
+                      dayTypeActive={this.props.metas.day_types[d.wday]}
                       />
-
-                      {/* exceptions */}
-                      <ExceptionsInDay
-                        index={i}
-                        value={this.props.timetable}
-                        metas={this.props.metas}
-                        outFromDaytypes={this.props.metas.day_types[d.wday]}
-                        onExcludeDateFromPeriod={this.props.onExcludeDateFromPeriod}
-                        onIncludeDateInPeriod={this.props.onIncludeDateInPeriod}
-                      />
-                    </div>
                   )}
                 </div>
               </div>
+
+              {this.props.timetable.current_month.map((d, i) =>
+                <div
+                  key={i}
+                  className={'td-group' + (this.props.metas.day_types[d.wday] ? '' : ' out_from_daytypes') + (d.wday == 0 ? ' last_wday' : '')}
+                >
+                  {/* day_types */}
+                  <div className="td"></div>
+
+                  {/* periods */}
+                  <PeriodsInDay
+                    index={i}
+                    value={this.props.timetable.time_table_periods}
+                    currentDate={this.currentDate(this.props.timetable.current_periode_range, d.mday)}
+                    onDeletePeriod={this.props.onDeletePeriod}
+                    onOpenEditPeriodForm={this.props.onOpenEditPeriodForm}
+                    metas={this.props.metas}
+                  />
+
+                  {/* exceptions */}
+                  <ExceptionsInDay
+                    index={i}
+                    value={this.props.timetable}
+                    metas={this.props.metas}
+                    outFromDaytypes={this.props.metas.day_types[d.wday]}
+                    onExcludeDateFromPeriod={this.props.onExcludeDateFromPeriod}
+                    onIncludeDateInPeriod={this.props.onIncludeDateInPeriod}
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
index fede03aec..36e3a98e0 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
@@ -14,11 +14,13 @@ class App extends Component {
 
   render(){
     return(
-      <div>
-        <Metas />
-        <Navigate />
-        <Timetable />
-        <PeriodForm />
+      <div className='row'>
+        <div className="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
+          <Metas />
+          <Navigate />
+          <Timetable />
+          <PeriodForm />
+        </div>
       </div>
     )
   }
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 27188060f..ed92796f9 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -193,3 +193,11 @@
       > .period_manager .dropdown-menu
         left: auto
         right: 0
+
+  // Period form
+  .nested-head, .nested-fields
+    .wrapper > div:last-child
+      width: auto
+
+  .nested-head + *
+    border-top: 2px solid $darkgrey
diff --git a/app/views/time_tables/show.html.slim b/app/views/time_tables/show.html.slim
index 6e6833cf4..220ac3995 100644
--- a/app/views/time_tables/show.html.slim
+++ b/app/views/time_tables/show.html.slim
@@ -30,7 +30,7 @@
       .col-lg-6.col-md-6.col-sm-12.col-xs-12
         = definition_list t('metadatas'),
           { "Période d'application" => (@time_table.bounding_dates.empty? ? '-' : t('bounding_dates', debut: l(@time_table.bounding_dates.min), end: l(@time_table.bounding_dates.max))),
-            'Couleur associée' => content_tag(:span, '', class: 'fa fa-circle', style: "color:#{@time_table.try(:color)}"),
+            'Couleur associée' => (@time_table.color.nil? ? '-' : content_tag(:span, '', class: 'fa fa-circle', style: "color:#{@time_table.try(:color)}")),
             'Etiquettes' => @time_table.tag_list,
             'Modèle de calendrier' => (@time_table.calendar ? link_to(@time_table.calendar.name, @time_table.calendar) : '-'),
             "Journées d'application pour les périodes ci-dessous" => %w(monday tuesday wednesday thursday friday saturday sunday).collect{ |d| content_tag(:span, t("calendars.days.#{d}"), class: "label label-default #{@time_table.send(d) ? '' : 'disabled'}") }.join.html_safe }