Upgrade Bootstrap to 3.0.0

admin/css/admin.css

@@ -14,10 +14,10 @@
  */
 
 body {
-    margin: 0;
+    padding: 0;
 }
 
-#admin-header-container, #admin-content-container {
+#admin-header-container {
     padding: 0 30px;
 }
 
@@ -30,7 +30,7 @@ body {
 }
 
 #admin-header-container #admin-header-content {
-    background: url('/shared/oae/img/oae-logo.png') no-repeat left center transparent;
+    background: url('/shared/oae/img/oae-logo.png') no-repeat 15px center transparent;
     background-size: 60px;
     min-height: 70px;
 }
@@ -47,14 +47,18 @@ body {
     font-size: 22px;
     font-weight: normal;
     margin: 0;
-    padding: 15px 0 0 80px;
+    padding: 18px 0 0 80px;
 }
 
 
 /*************
  ** CONTENT **
  *************/
 
+#admin-content {
+    margin-bottom: 100px;
+}
+
 #admin-content-container {
     padding-top: 20px;
     padding-bottom: 120px;
@@ -68,6 +72,10 @@ body {
     margin-bottom: 20px;
 }
 
+.admin-container-striped form {
+    margin: 20px 0;
+}
+
 /* Tenant list */
 
 .table-striped td.admin-tenants-visit {
@@ -114,29 +122,32 @@ td.jeditable-container:hover {
     background: linear-gradient(to bottom, #DDD 0%,#CCC 100%) !important; /* W3C */
 }
 
+td.jeditable-container form input {
+    height: 25px !important;
+}
+
 td form {
     margin: 0;
 }
 
 /* Module configuration */
 
-.admin-module-configuration-container input[type="checkbox"],
-.admin-module-configuration-container .admin-module-configuration-toggle-button i {
-    float:left;
-    margin-right:12px;
+.admin-module-configuration-container {
+    margin: 0;
 }
 
-.admin-module-configuration-container .form-horizontal .control-label {
-    width: 225px;
+.admin-module-configuration-container form {
+    margin: 0 0 20px;
 }
 
-.admin-module-configuration-container .form-horizontal .controls {
-    margin-left: 250px;
+.admin-module-configuration-container .admin-module-configuration-toggle-button i {
+    float:left;
+    margin-right:12px;
 }
 
 .admin-module-configuration-container h4 {
     margin-top: 20px;
-    margin-bottom: 20px;
+    margin-bottom: 7px;
 }
 
 .admin-module-configuration-container h4 span,
@@ -145,16 +156,15 @@ td form {
     font-weight: normal;
 }
 
-
-.admin-container-striped form {
-    margin: 20px 0;
-}
 .admin-container-striped > div:nth-child(2n+1),
 .admin-container-striped > div:nth-child(2n+2) {
     border-top: 1px solid #DDD;
     max-width: none;
     padding: 12px;
 }
+.admin-container-striped form .form-group {
+    margin-left: 0;
+}
 
 /* Skinning configuration */
 
@@ -168,20 +178,26 @@ td form {
     margin-top: 20px;
 }
 
-#admin-skinning-container .control-group {
-    margin-bottom: 0px;
+#admin-skinning-container #admin-skinning-actions {
+    margin-top: 30px;
 }
 
-#admin-skinning-container .control-label {
-    width: 350px;
+#admin-skinning-form .form-group {
+    margin: 0;
 }
 
-#admin-skinning-container .controls {
-    margin-left: 370px;
+/* Override bootstrap box sizing for the spectrum plugin https://github.com/bgrins/spectrum/issues/175 */
+
+.sp-container *,
+.sp-container *:after,
+.sp-container *:before {
+    -webkit-box-sizing: content-box;
+       -moz-box-sizing: content-box;
+            box-sizing: content-box;
 }
 
-#admin-skinning-container #admin-skinning-actions {
-    margin-top: 30px;
+.sp-input-container .sp-input {
+    background-color: #FFF;
 }
 
 /************
@@ -198,13 +214,13 @@ td form {
 }
 
 #admin-footer-content {
-    background: url("/shared/oae/img/oae-logo-white.png") no-repeat scroll left 20px transparent;
+    background: url("/shared/oae/img/oae-logo-white.png") no-repeat scroll 15px center transparent;
     background-size: 70px;
-    min-height: 75px;
+    min-height: 80px;
 }
 
 #admin-footer-container ul {
-    margin: 30px 0 10px 50px;
+    margin: 30px 0 0 50px;
 }
 
 #admin-footer-container ul li {

admin/js/admin.skin.js

@@ -261,7 +261,7 @@ define(['exports', 'jquery', 'underscore', 'oae.core', 'jquery.spectrum'], funct
      * value back to its previous value.
      */
     var revertSkinValue = function() {
-        var $input = $('input', $(this).parent());
+        var $input = $('input', $(this).parents('.form-group'));
         var defaultValue = defaultSkin[$input.attr('name')];
         // If the variable is a color, we use the set method provided by jQuery spectrum
         if ($input.attr('data-type') === 'color') {

admin/js/admin.util.js

@@ -28,10 +28,10 @@ define(['exports', 'jquery', 'oae.core'], function(exports, $, oae) {
     var toggleInternationalizableFieldContainer = exports.toggleInternationalizableFieldContainer = function() {
         // Define the target container
         var $targetContainer = $(this).parents('.admin-internationalizable-text-container');
-        // Hide all control groups except the first one (language select) in the target container
-        $targetContainer.find('.control-group').hide();
-        $targetContainer.find('.control-group:first-child').show();
-        // Show the selected language control group in the target container
+        // Hide all form groups except the first one (language select) in the target container
+        $targetContainer.find('.form-group').hide();
+        $targetContainer.find('.form-group:first-child').show();
+        // Show the selected language form group in the target container
         $targetContainer.find('div[data-id="' + $(this).val() + '"]').show();
     };
 

docs/css/doc.css

@@ -15,6 +15,7 @@
 
 html, body {
     margin: 0;
+    padding: 0;
 }
 #doc-header-container, #doc-content-container {
     padding: 0 30px;
@@ -105,9 +106,15 @@ td form {
     display: block;
     margin: 0 0 -1px;
     padding: 8px 14px;
+    word-break: break-word;
+}
+.bs-docs-sidenav > li > a > span {
+    display: block;
+    margin-right: 22px;
 }
 .bs-docs-sidenav .icon-chevron-right {
     margin-right: -6px;
+    margin-top: -5px;
     opacity: 0.25;
 }
 .nav > li > a:hover {

docs/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
+        <meta name="viewport" content="width=device-width, user-scalable=no">
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <noscript>
@@ -10,7 +11,7 @@
         <!-- CORE CSS -->
         <link rel="stylesheet" type="text/css" href="/shared/oae/css/oae.core.css" />
         <link rel="stylesheet" type="text/css" href="/api/ui/skin" />
-        
+
         <!-- PAGE CSS -->
         <link href="/docs/css/doc.css" type="text/css" rel="stylesheet"/>
     </head>
@@ -22,20 +23,20 @@ <h1>API Reference</h1>
             </div>
         </div>
         <!-- CONTENT -->
-        <div id="doc-content-container">
-            <div class="row-fluid">
-                <div id="doc-modules-container" class="span3"><!----></div>
-                <div id="doc-module-container" class="span9"><!----></div>
+        <main id="doc-content-container" role="main">
+            <div class="row">
+                <div id="doc-modules-container" class="col-sm-3"><!----></div>
+                <div id="doc-module-container" class="col-sm-9"><!----></div>
             </div>
-        </div>
+        </main>
 
         <div id="doc-modules-template"><!--
             {macro renderModules(title, type, modules)}
                 <h5>${title}</h5>
                 <ul class="nav nav-list bs-docs-sidenav">
                     {for module in modules}
                         <li data-id="${module}" data-type="${type}">
-                            <a href="/docs/${type}/${module}"><i class="icon-chevron-right pull-right"></i> ${module}</a>
+                            <a href="/docs/${type}/${module}"><i class="icon-chevron-right pull-right"></i> <span>${module}</span></a>
                         </li>
                     {/for}
                 </ul>