organize layout Global Notification detail page

lib/views/admin/global-notification-detail.html

@@ -42,108 +42,111 @@
       {% else %}
         {% set actionPath = '/admin/global-notification/new' %}
       {% endif %}
-      <div class="m-t-20 form-box col-md-11">
-        <form action="{{ actionPath }}" method="post" class="form-horizontal" role="form">
-          <legend>{{ t('notification_setting.notification_detail') }}</legend>
 
-          <fieldset class="col-sm-offset-1 col-sm-4">
-            <div class="form-group">
-              <label for="triggerPath" class="control-label">{{ t('notification_setting.trigger_path') }}</label> {{ t('notification_setting.trigger_path_help', '<code>*</code>') }}<br />
-              <input class="form-control" type="text" name="notificationGlobal[triggerPath]" value="{{ setting.triggerPath || '' }}" required>
-            </div>
+      <div class="row">
+        <div class="m-t-20 form-box col-md-12">
+          <legend>{{ t('notification_setting.notification_detail') }}</legend>
 
-            <div class="form-group">
-              <label for="notificationGlobal[notifyToType]"class="control-label">{{ t('notification_setting.notify_to') }}</label><br />
-              <div class="radio radio-primary">
-                <input type="radio" id="mail" name="notificationGlobal[notifyToType]" value="mail" {% if setting.__t == 'mail' %}checked{% endif %} checked>
-                <label for="mail">
-                  <p class="font-weight-bold">Email</p>
-                </label>
+          <form action="{{ actionPath }}" method="post" class="form-horizontal" role="form">
+            <fieldset class="col-sm-4">
+              <div class="form-group">
+                <h3 for="triggerPath">{{ t('notification_setting.trigger_path') }} <small>{{ t('notification_setting.trigger_path_help', '<code>*</code>') }}</small></h3>
+                <input class="form-control" type="text" name="notificationGlobal[triggerPath]" value="{{ setting.triggerPath || '' }}" required>
               </div>
-              <div class="radio radio-primary">
-                <input type="radio" id="slack" name="notificationGlobal[notifyToType]" value="slack" {% if setting.__t == 'slack' %}checked{% endif %} disabled>
-                <label for="slack">
-                  <p class="font-weight-bold">Slack</p>
-                </label>
-              </div>
-            </div>
-
-            <!-- <div class="form-group notify-to-option {% if setting.__t != 'mail' %}d-none{% endif %}" id="mail-input"> -->
-            <div class="form-group notify-to-option" id="mail-input">
-              <label for="notificationGlobal[toEmail]"class="control-label">Email</label><br />
-              <input class="form-control" type="text" name="notificationGlobal[toEmail]" value="{{ setting.toEmail || '' }}">
-              <p class="help">
-                <a href="https://ifttt.com/create" target="_blank">{{ t('notification_setting.email.ifttt_link') }} <i class="icon-share-alt"></i></a>
-              </p>
-            </div>
 
-            <div class="form-group notify-to-option {% if setting.__t != 'slack' %}d-none{% endif %}" id="slack-input">
-              <label for="notificationGlobal[slackChannels]"class="control-label">Slack Channels</label><br />
-              <input class="form-control" type="text" name="notificationGlobal[slackChannels]" value="{{ setting.slackChannels || '' }}" disabled>
-            </div>
-          </fieldset>
-
-          <fieldset class="col-sm-offset-1 col-sm-5">
-            <div class="form-group">
-              <label for="triggerEvent"class="control-label">{{ t('notification_setting.trigger_events') }}</label><br />
-              <div class="checkbox checkbox-info">
-                <input type="checkbox" id="trigger-event-pageCreate" name="notificationGlobal[triggerEvent:pageCreate]" value="pageCreate"
-                  {% if setting && (setting.triggerEvents.indexOf('pageCreate') != -1) %}checked{% endif %} />
-                <label for="trigger-event-pageCreate">
-                  <span class="label label-info"><i class="icon-doc"></i> CREATE</span> - {{ t('notification_setting.event_pageCreate') }}
-                </label>
-              </div>
-              <div class="checkbox checkbox-info">
-                <input type="checkbox" id="trigger-event-pageEdit" name="notificationGlobal[triggerEvent:pageEdit]" value="pageEdit"
-                  {% if setting && (setting.triggerEvents.indexOf('pageEdit') != -1) %}checked{% endif %} />
-                <label for="trigger-event-pageEdit">
-                  <span class="label label-info"><i class="icon-doc"></i> EDIT</span> - {{ t('notification_setting.event_pageEdit') }}
-                </label>
+              <div class="form-group form-inline">
+                <h3>{{ t('notification_setting.notify_to') }}</h3>
+                <div class="radio radio-primary">
+                  <input type="radio" id="mail" name="notificationGlobal[notifyToType]" value="mail" {% if setting.__t == 'mail' %}checked{% endif %} checked>
+                  <label for="mail">
+                    <p class="font-weight-bold">Email</p>
+                  </label>
+                </div>
+                <div class="radio radio-primary">
+                  <input type="radio" id="slack" name="notificationGlobal[notifyToType]" value="slack" {% if setting.__t == 'slack' %}checked{% endif %} disabled>
+                  <label for="slack">
+                    <p class="font-weight-bold">Slack</p>
+                  </label>
+                </div>
               </div>
-              <div class="checkbox checkbox-info">
-                <input type="checkbox" id="trigger-event-pageDelete" name="notificationGlobal[triggerEvent:pageDelete]" value="pageDelete"
-                  {% if setting && (setting.triggerEvents.indexOf('pageDelete') != -1) %}checked{% endif %} />
-                <label for="trigger-event-pageDelete">
-                  <span class="label label-info"><i class="icon-doc"></i> DELETE</span> - {{ t('notification_setting.event_pageDelete') }}
-                </label>
+
+              <!-- <div class="form-group notify-to-option {% if setting.__t != 'mail' %}d-none{% endif %}" id="mail-input"> -->
+              <div class="form-group notify-to-option" id="mail-input">
+                <input class="form-control" type="text" name="notificationGlobal[toEmail]" value="{{ setting.toEmail || '' }}">
+                <p class="help">
+                  <b>Hint: </b>
+                  <a href="https://ifttt.com/create" target="_blank">{{ t('notification_setting.email.ifttt_link') }} <i class="icon-share-alt"></i></a>
+                </p>
               </div>
-              <div class="checkbox checkbox-info">
-                <input type="checkbox" id="trigger-event-pageMove" name="notificationGlobal[triggerEvent:pageMove]" value="pageMove"
-                  {% if setting && (setting.triggerEvents.indexOf('pageMove') != -1) %}checked{% endif %} />
-                <label for="trigger-event-pageMove">
-                  <span class="label label-info"><i class="icon-doc"></i> MOVE</span> - {{ t('notification_setting.event_pageMove') }}
-                </label>
+
+              <div class="form-group notify-to-option {% if setting.__t != 'slack' %}d-none{% endif %}" id="slack-input">
+                <input class="form-control" type="text" name="notificationGlobal[slackChannels]" value="{{ setting.slackChannels || '' }}" disabled>
               </div>
-              <div class="checkbox checkbox-info">
-                  <input type="checkbox" id="trigger-event-pageLike" name="notificationGlobal[triggerEvent:pageLike]" value="pageLike"
-                    {% if setting && (setting.triggerEvents.indexOf('pageLike') != -1) %}checked{% endif %} />
-                  <label for="trigger-event-pageLike">
-                    <span class="label label-info"><i class="icon-doc"></i> LIKE</span> - {{ t('notification_setting.event_pageLike') }}
+            </fieldset>
+
+            <fieldset class="col-sm-offset-1 col-sm-5">
+              <div class="form-group">
+                <h3>{{ t('notification_setting.trigger_events') }}</h3>
+                <div class="checkbox checkbox-info">
+                  <input type="checkbox" id="trigger-event-pageCreate" name="notificationGlobal[triggerEvent:pageCreate]" value="pageCreate"
+                    {% if setting && (setting.triggerEvents.indexOf('pageCreate') != -1) %}checked{% endif %} />
+                  <label for="trigger-event-pageCreate">
+                    <span class="label label-info"><i class="icon-doc"></i> CREATE</span> - {{ t('notification_setting.event_pageCreate') }}
+                  </label>
+                </div>
+                <div class="checkbox checkbox-info">
+                  <input type="checkbox" id="trigger-event-pageEdit" name="notificationGlobal[triggerEvent:pageEdit]" value="pageEdit"
+                    {% if setting && (setting.triggerEvents.indexOf('pageEdit') != -1) %}checked{% endif %} />
+                  <label for="trigger-event-pageEdit">
+                    <span class="label label-info"><i class="icon-doc"></i> EDIT</span> - {{ t('notification_setting.event_pageEdit') }}
+                  </label>
+                </div>
+                <div class="checkbox checkbox-info">
+                  <input type="checkbox" id="trigger-event-pageDelete" name="notificationGlobal[triggerEvent:pageDelete]" value="pageDelete"
+                    {% if setting && (setting.triggerEvents.indexOf('pageDelete') != -1) %}checked{% endif %} />
+                  <label for="trigger-event-pageDelete">
+                    <span class="label label-info"><i class="icon-doc"></i> DELETE</span> - {{ t('notification_setting.event_pageDelete') }}
+                  </label>
+                </div>
+                <div class="checkbox checkbox-info">
+                  <input type="checkbox" id="trigger-event-pageMove" name="notificationGlobal[triggerEvent:pageMove]" value="pageMove"
+                    {% if setting && (setting.triggerEvents.indexOf('pageMove') != -1) %}checked{% endif %} />
+                  <label for="trigger-event-pageMove">
+                    <span class="label label-info"><i class="icon-doc"></i> MOVE</span> - {{ t('notification_setting.event_pageMove') }}
+                  </label>
+                </div>
+                <div class="checkbox checkbox-info">
+                    <input type="checkbox" id="trigger-event-pageLike" name="notificationGlobal[triggerEvent:pageLike]" value="pageLike"
+                      {% if setting && (setting.triggerEvents.indexOf('pageLike') != -1) %}checked{% endif %} />
+                    <label for="trigger-event-pageLike">
+                      <span class="label label-info"><i class="icon-doc"></i> LIKE</span> - {{ t('notification_setting.event_pageLike') }}
+                    </label>
+                  </div>
+                <div class="checkbox checkbox-info">
+                  <input type="checkbox" id="trigger-event-comment" name="notificationGlobal[triggerEvent:comment]" value="comment"
+                    {% if setting && (setting.triggerEvents.indexOf('comment') != -1) %}checked{% endif %} />
+                  <label for="trigger-event-comment">
+                    <span class="label label-info"><i class="icon-fw icon-bubbles"></i> POST</span> - {{ t('notification_setting.event_comment') }}
                   </label>
                 </div>
-              <div class="checkbox checkbox-info">
-                <input type="checkbox" id="trigger-event-comment" name="notificationGlobal[triggerEvent:comment]" value="comment"
-                  {% if setting && (setting.triggerEvents.indexOf('comment') != -1) %}checked{% endif %} />
-                <label for="trigger-event-comment">
-                  <span class="label label-info"><i class="icon-fw icon-bubbles"></i> POST</span> - {{ t('notification_setting.event_comment') }}
-                </label>
               </div>
+            </fieldset>
+
+            <div class="col-sm-offset-5 col-sm-12 m-t-20">
+              <input type="hidden" name="notificationGlobal[id]" value="{{ setting.id }}">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="btn btn-primary">
+                {% if setting %}
+                  {{ t('Update') }}
+                {% else %}
+                  {{ t('Create') }}
+                {% endif %}
+              </button>
             </div>
-          </fieldset>
-
-          <div class="col-sm-offset-5 col-sm-12 m-t-20">
-            <input type="hidden" name="notificationGlobal[id]" value="{{ setting.id }}">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">
-              {% if setting %}
-                {{ t('Update') }}
-              {% else %}
-                {{ t('Create') }}
-              {% endif %}
-            </button>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
+
     </div>
   </div>
 </div>