adjust layout for /admin/customize

lib/views/admin/customize.html

@@ -86,30 +86,38 @@
         <div class="form-group">
           <div class="col-xs-6">
             <h4>
-              <input type="radio" name="settingForm[customize:behavior]" value="crowi"
-                  {% if !isBehaviorGrowi %}checked="checked"{% endif %}>
-              Official Crowi Behavior
+              <div class="radio radio-primary">
+                <input type="radio" id="radioBehaviorGrowi" name="settingForm[customize:behavior]" value="crowi-plus"
+                    {% if isBehaviorGrowi %}checked="checked"{% endif %}>
+                <label for="radioBehaviorGrowi">
+                  GROWI Simplified Behavior <small class="text-success">(Recommended)</small>
+                </label>
+            </div>
             </h4>
             <ul>
-              <li><code>/page</code> shows the page</li>
-              <li><code>/page/</code> shows the list of sub pages</li>
-              <ul>
-                <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
-              </ul>
+              <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
               <li><code>/nonexistent_page</code> shows editing form</li>
-              <li><code>/nonexistent_page/</code> the list of sub pages</li>
+              <li>All pages shows the list of sub pages when using <b>crowi-plus Enhanced Layout</b></li>
             </ul>
           </div>
           <div class="col-xs-6">
             <h4>
-              <input type="radio" name="settingForm[customize:behavior]" value="crowi-plus"
-                  {% if isBehaviorGrowi %}checked="checked"{% endif %}>
-              crowi-plus Simplified Behavior <small class="text-success">(Recommended)</small>
+              <div class="radio radio-primary">
+                <input type="radio" id="radioBehaviorCrowi" name="settingForm[customize:behavior]" value="crowi"
+                    {% if !isBehaviorGrowi %}checked="checked"{% endif %}>
+                <label for="radioBehaviorCrowi">
+                  Crowi Classic Behavior
+                </label>
+              </div>
             </h4>
             <ul>
-              <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
+              <li><code>/page</code> shows the page</li>
+              <li><code>/page/</code> shows the list of sub pages</li>
+              <ul>
+                <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
+              </ul>
               <li><code>/nonexistent_page</code> shows editing form</li>
-              <li>All pages shows the list of sub pages when using <b>crowi-plus Enhanced Layout</b></li>
+              <li><code>/nonexistent_page/</code> the list of sub pages</li>
             </ul>
           </div>
         </div>
@@ -133,36 +141,44 @@
         <div class="form-group">
           <div class="col-xs-6">
             <h4>
-              <input type="radio" name="settingForm[customize:layout]" value="crowi"
-                  {% if !isLayoutGrowi %}checked="checked"{% endif %}>
-              Official Crowi Classic Layout
+              <div class="radio radio-primary">
+                <input type="radio" id="radioLayoutGrowi" name="settingForm[customize:layout]" value="crowi-plus"
+                    {% if isLayoutGrowi %}checked="checked"{% endif %}>
+                <label for="radioLayoutGrowi">
+                  GROWI Enhanced Layout <small class="text-success">(Recommended)</small>
+                </label>
+              </div>
             </h4>
-            <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
-              <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
+            <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
+              <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
             </a>
             <ul>
-              <li>Functional</li>
+              <li>Simple and Clear</li>
               <ul>
-                <li>Collapsible Sidebar</li>
-                <li>Show and post comments in Sidebar</li>
-                <li>Collapsible Table-of-contents</li>
+                <li>Show and post comments from the bottom of the page</li>
+                <li>Affix Table-of-contents</li>
               </ul>
             </ul>
           </div>
           <div class="col-xs-6">
             <h4>
-              <input type="radio" name="settingForm[customize:layout]" value="crowi-plus"
-                  {% if isLayoutGrowi %}checked="checked"{% endif %}>
-              crowi-plus Enhanced Layout <small class="text-success">(Recommended)</small>
+              <div class="radio radio-primary">
+                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi"
+                    {% if !isLayoutGrowi %}checked="checked"{% endif %}>
+                <label for="radioLayoutCrowi">
+                  Crowi Classic Layout
+                </label>
+              </div>
             </h4>
-            <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
-              <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
+            <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
+              <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
             </a>
             <ul>
-              <li>Simple and Clear</li>
+              <li>Functional</li>
               <ul>
-                <li>Show and post comments from the bottom of the page</li>
-                <li>Affix Table-of-contents</li>
+                <li>Collapsible Sidebar</li>
+                <li>Show and post comments in Sidebar</li>
+                <li>Collapsible Table-of-contents</li>
               </ul>
             </ul>
           </div>

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -2191,12 +2191,12 @@ table.dataTable thead .sorting:after {
       outline: none !important;
     }
     &::after {
-      -moz-transition: -moz-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      -moz-transition: -moz-transform 0.2s;
       -ms-transform: scale(0, 0);
       -o-transform: scale(0, 0);
-      -o-transition: -o-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      -o-transition: -o-transform 0.2s;
       -webkit-transform: scale(0, 0);
-      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      -webkit-transition: -webkit-transform 0.2s;
       background-color: $dark;
       border-radius: 50%;
       content: " ";
@@ -2207,7 +2207,7 @@ table.dataTable thead .sorting:after {
       position: absolute;
       top: 5px;
       transform: scale(0, 0);
-      transition: transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+      transition: transform 0.2s;
       width: 7px;
     }
   }