From 2428d5e44217e77abefbf4af9763e4251a1e5d8d Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 25 Aug 2016 16:10:06 -0400 Subject: [PATCH] Update bootstrap in ACP Also fixed #4872 by moving user creation modal to root level (outside of .panel) --- public/less/admin/bootstrap/bootstrap.less | 4 +- .../less/admin/bootstrap/button-groups.less | 2 +- public/less/admin/bootstrap/forms.less | 2 +- public/less/admin/bootstrap/input-groups.less | 2 +- .../admin/bootstrap/mixins/tab-focus.less | 6 +- public/less/admin/bootstrap/panels.less | 2 +- public/less/admin/bootstrap/scaffolding.less | 2 +- public/less/admin/bootstrap/theme.less | 4 +- public/less/admin/bootstrap/variables.less | 184 +++++++++--------- public/src/admin/manage/users.js | 75 ++++--- src/meta/css.js | 3 +- src/views/admin/manage/users.tpl | 40 ---- .../admin/partials/create_user_modal.tpl | 21 ++ 13 files changed, 174 insertions(+), 173 deletions(-) create mode 100644 src/views/admin/partials/create_user_modal.tpl diff --git a/public/less/admin/bootstrap/bootstrap.less b/public/less/admin/bootstrap/bootstrap.less index 1c0477805f..f0aa08f3a6 100644 --- a/public/less/admin/bootstrap/bootstrap.less +++ b/public/less/admin/bootstrap/bootstrap.less @@ -1,6 +1,6 @@ /*! - * Bootstrap v3.3.6 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ diff --git a/public/less/admin/bootstrap/button-groups.less b/public/less/admin/bootstrap/button-groups.less index 293245a650..16db0c6135 100644 --- a/public/less/admin/bootstrap/button-groups.less +++ b/public/less/admin/bootstrap/button-groups.less @@ -59,7 +59,7 @@ .border-right-radius(0); } } -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { .border-left-radius(0); diff --git a/public/less/admin/bootstrap/forms.less b/public/less/admin/bootstrap/forms.less index e8b071a138..9377d3846b 100644 --- a/public/less/admin/bootstrap/forms.less +++ b/public/less/admin/bootstrap/forms.less @@ -181,7 +181,7 @@ input[type="search"] { // set a pixel line-height that matches the given height of the input, but only // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 // -// Note that as of 8.3, iOS doesn't support `datetime` or `week`. +// Note that as of 9.3, iOS doesn't support `week`. @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type="date"], diff --git a/public/less/admin/bootstrap/input-groups.less b/public/less/admin/bootstrap/input-groups.less index 5f73eec40c..d0763db7ff 100644 --- a/public/less/admin/bootstrap/input-groups.less +++ b/public/less/admin/bootstrap/input-groups.less @@ -29,7 +29,7 @@ width: 100%; margin-bottom: 0; - + &:focus { z-index: 3; } diff --git a/public/less/admin/bootstrap/mixins/tab-focus.less b/public/less/admin/bootstrap/mixins/tab-focus.less index 1f1f05ab05..d12d23629f 100644 --- a/public/less/admin/bootstrap/mixins/tab-focus.less +++ b/public/less/admin/bootstrap/mixins/tab-focus.less @@ -1,9 +1,9 @@ // WebKit-style focus .tab-focus() { - // Default - outline: thin dotted; - // WebKit + // WebKit-specific. Other browsers will keep their default outline style. + // (Initially tried to also force default via `outline: initial`, + // but that seems to erroneously remove the outline in Firefox altogether.) outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } diff --git a/public/less/admin/bootstrap/panels.less b/public/less/admin/bootstrap/panels.less index 425eb5e642..65aa3a83f3 100644 --- a/public/less/admin/bootstrap/panels.less +++ b/public/less/admin/bootstrap/panels.less @@ -214,7 +214,7 @@ } -// Collapsable panels (aka, accordion) +// Collapsible panels (aka, accordion) // // Wrap a series of panels in `.panel-group` to turn them into an accordion with // the help of our collapse JavaScript plugin. diff --git a/public/less/admin/bootstrap/scaffolding.less b/public/less/admin/bootstrap/scaffolding.less index 1929bfc5cf..64a29c6a5e 100644 --- a/public/less/admin/bootstrap/scaffolding.less +++ b/public/less/admin/bootstrap/scaffolding.less @@ -120,7 +120,7 @@ hr { // Only display content to screen readers // -// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: http://a11yproject.com/posts/how-to-hide-content .sr-only { position: absolute; diff --git a/public/less/admin/bootstrap/theme.less b/public/less/admin/bootstrap/theme.less index 8f51d913dc..fb6174427b 100644 --- a/public/less/admin/bootstrap/theme.less +++ b/public/less/admin/bootstrap/theme.less @@ -1,6 +1,6 @@ /*! - * Bootstrap v3.3.6 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ diff --git a/public/less/admin/bootstrap/variables.less b/public/less/admin/bootstrap/variables.less index d0cf54f043..03b54980ae 100644 --- a/public/less/admin/bootstrap/variables.less +++ b/public/less/admin/bootstrap/variables.less @@ -1,4 +1,4 @@ -// Paper 3.3.5 +// // Variables // -------------------------------------------------- @@ -9,16 +9,16 @@ @gray-base: #000; @gray-darker: lighten(@gray-base, 13.5%); // #222 -@gray-dark: #212121; -@gray: #666; -@gray-light: #bbb; +@gray-dark: lighten(@gray-base, 20%); // #333 +@gray: lighten(@gray-base, 33.5%); // #555 +@gray-light: lighten(@gray-base, 46.7%); // #777 @gray-lighter: lighten(@gray-base, 93.5%); // #eee -@brand-primary: #2196F3; -@brand-success: #4CAF50; -@brand-info: #9C27B0; -@brand-warning: #ff9800; -@brand-danger: #e51c23; +@brand-primary: darken(#428bca, 6.5%); // #337ab7 +@brand-success: #5cb85c; +@brand-info: #5bc0de; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; //== Scaffolding @@ -28,7 +28,7 @@ //** Background color for ``. @body-bg: #fff; //** Global text color on ``. -@text-color: @gray; +@text-color: @gray-dark; //** Global textual link color. @link-color: @brand-primary; @@ -42,33 +42,33 @@ // //## Font, line-height, and color for body text, headings, and more. -@font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; //** Default monospace fonts for ``, ``, and `
`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          13px;
+@font-size-base:          14px;
 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
-@font-size-h1:            56px;
-@font-size-h2:            45px;
-@font-size-h3:            34px;
-@font-size-h4:            24px;
-@font-size-h5:            20px;
-@font-size-h6:            14px;
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 
 //** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.846; // 20/14
+@line-height-base:        1.428571429; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
 //** By default, this inherits from the ``.
 @headings-font-family:    inherit;
-@headings-font-weight:    400;
+@headings-font-weight:    500;
 @headings-line-height:    1.1;
-@headings-color:          #444;
+@headings-color:          inherit;
 
 
 //== Iconography
@@ -88,7 +88,7 @@
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
 @padding-base-vertical:     6px;
-@padding-base-horizontal:   16px;
+@padding-base-horizontal:   12px;
 
 @padding-large-vertical:    10px;
 @padding-large-horizontal:  16px;
@@ -102,16 +102,16 @@
 @line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
 @line-height-small:         1.5;
 
-@border-radius-base:        0px;
-@border-radius-large:       0px;
-@border-radius-small:       0px;
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
 
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
 //** Global background color for active items (e.g., navs or dropdowns).
 @component-active-bg:       @brand-primary;
 
-//** Width of the `border` for generating carets that indicator dropdowns.
+//** Width of the `border` for generating carets that indicate dropdowns.
 @caret-width-base:          4px;
 //** Carets increase slightly in size for larger components.
 @caret-width-large:         5px;
@@ -144,29 +144,29 @@
 
 @btn-font-weight:                normal;
 
-@btn-default-color:              #444;
+@btn-default-color:              #333;
 @btn-default-bg:                 #fff;
-@btn-default-border:             transparent;
+@btn-default-border:             #ccc;
 
 @btn-primary-color:              #fff;
 @btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             transparent;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);
 
 @btn-success-color:              #fff;
 @btn-success-bg:                 @brand-success;
-@btn-success-border:             transparent;
+@btn-success-border:             darken(@btn-success-bg, 5%);
 
 @btn-info-color:                 #fff;
 @btn-info-bg:                    @brand-info;
-@btn-info-border:                transparent;
+@btn-info-border:                darken(@btn-info-bg, 5%);
 
 @btn-warning-color:              #fff;
 @btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             transparent;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);
 
 @btn-danger-color:               #fff;
 @btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              transparent;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);
 
 @btn-link-disabled-color:        @gray-light;
 
@@ -181,14 +181,14 @@
 //##
 
 //** `` background color
-@input-bg:                       transparent;
+@input-bg:                       #fff;
 //** `` background color
-@input-bg-disabled:              transparent;
+@input-bg-disabled:              @gray-lighter;
 
 //** Text color for ``s
 @input-color:                    @gray;
 //** `` border color
-@input-border:                   transparent;
+@input-border:                   #ccc;
 
 // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
 //** Default `.form-control` border radius
@@ -203,7 +203,7 @@
 @input-border-focus:             #66afe9;
 
 //** Placeholder text color
-@input-color-placeholder:        @gray-light;
+@input-color-placeholder:        #999;
 
 //** Default `.form-control` height
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
@@ -219,7 +219,7 @@
 @legend-border-color:            #e5e5e5;
 
 //** Background color for textual input addons
-@input-group-addon-bg:           transparent;
+@input-group-addon-bg:           @gray-lighter;
 //** Border color for textual input addons
 @input-group-addon-border-color: @input-border;
 
@@ -241,11 +241,11 @@
 @dropdown-divider-bg:            #e5e5e5;
 
 //** Dropdown link text color.
-@dropdown-link-color:            @text-color;
+@dropdown-link-color:            @gray-dark;
 //** Hover color for dropdown links.
 @dropdown-link-hover-color:      darken(@gray-dark, 5%);
 //** Hover background for dropdown links.
-@dropdown-link-hover-bg:         @gray-lighter;
+@dropdown-link-hover-bg:         #f5f5f5;
 
 //** Active dropdown menu item text color.
 @dropdown-link-active-color:     @component-active-color;
@@ -259,7 +259,7 @@
 @dropdown-header-color:          @gray-light;
 
 //** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color:           @gray-light;
+@dropdown-caret-color:           #000;
 
 
 //-- Z-index master list
@@ -357,45 +357,45 @@
 //##
 
 // Basics of a navbar
-@navbar-height:                    64px;
+@navbar-height:                    50px;
 @navbar-margin-bottom:             @line-height-computed;
 @navbar-border-radius:             @border-radius-base;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 @navbar-collapse-max-height:       340px;
 
-@navbar-default-color:             @gray-light;
-@navbar-default-bg:                #fff;
-@navbar-default-border:            transparent;
+@navbar-default-color:             #777;
+@navbar-default-bg:                #f8f8f8;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
 
 // Navbar links
-@navbar-default-link-color:                @gray;
-@navbar-default-link-hover-color:          @gray-dark;
+@navbar-default-link-color:                #777;
+@navbar-default-link-hover-color:          #333;
 @navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         @gray-dark;
+@navbar-default-link-active-color:         #555;
 @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
 @navbar-default-link-disabled-color:       #ccc;
 @navbar-default-link-disabled-bg:          transparent;
 
 // Navbar brand label
 @navbar-default-brand-color:               @navbar-default-link-color;
-@navbar-default-brand-hover-color:         @navbar-default-link-hover-color;
+@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
 @navbar-default-brand-hover-bg:            transparent;
 
 // Navbar toggle
-@navbar-default-toggle-hover-bg:           transparent;
-@navbar-default-toggle-icon-bar-bg:        rgba(0,0,0,0.5);
-@navbar-default-toggle-border-color:       transparent;
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #888;
+@navbar-default-toggle-border-color:       #ddd;
 
 
 //=== Inverted navbar
 // Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
-@navbar-inverse-bg:                         @brand-primary;
-@navbar-inverse-border:                     transparent;
+@navbar-inverse-color:                      lighten(@gray-light, 15%);
+@navbar-inverse-bg:                         #222;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 lighten(@brand-primary, 30%);
+@navbar-inverse-link-color:                 lighten(@gray-light, 15%);
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              transparent;
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -408,10 +408,10 @@
 @navbar-inverse-brand-hover-color:          #fff;
 @navbar-inverse-brand-hover-bg:             transparent;
 
-// Inverted navbar toggle\
-@navbar-inverse-toggle-hover-bg:            transparent;
-@navbar-inverse-toggle-icon-bar-bg:         rgba(0,0,0,0.5);
-@navbar-inverse-toggle-border-color:        transparent;
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-icon-bar-bg:         #fff;
+@navbar-inverse-toggle-border-color:        #333;
 
 
 //== Navs
@@ -426,15 +426,15 @@
 @nav-disabled-link-hover-color:             @gray-light;
 
 //== Tabs
-@nav-tabs-border-color:                     transparent;
+@nav-tabs-border-color:                     #ddd;
 
 @nav-tabs-link-hover-border-color:          @gray-lighter;
 
-@nav-tabs-active-link-hover-bg:             transparent;
+@nav-tabs-active-link-hover-bg:             @body-bg;
 @nav-tabs-active-link-hover-color:          @gray;
-@nav-tabs-active-link-hover-border-color:   transparent;
+@nav-tabs-active-link-hover-border-color:   #ddd;
 
-@nav-tabs-justified-link-border-color:            @nav-tabs-border-color;
+@nav-tabs-justified-link-border-color:            #ddd;
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
 //== Pills
@@ -486,8 +486,8 @@
 
 @jumbotron-padding:              30px;
 @jumbotron-color:                inherit;
-@jumbotron-bg:                   #f9f9f9;
-@jumbotron-heading-color:        @headings-color;
+@jumbotron-bg:                   @gray-lighter;
+@jumbotron-heading-color:        inherit;
 @jumbotron-font-size:            ceil((@font-size-base * 1.5));
 @jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
 
@@ -496,20 +496,20 @@
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-@state-success-text:             @brand-success;
+@state-success-text:             #3c763d;
 @state-success-bg:               #dff0d8;
 @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
 
-@state-info-text:                @brand-info;
-@state-info-bg:                  #e1bee7;
+@state-info-text:                #31708f;
+@state-info-bg:                  #d9edf7;
 @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
 
-@state-warning-text:             @brand-warning;
-@state-warning-bg:               #ffe0b2;
+@state-warning-text:             #8a6d3b;
+@state-warning-bg:               #fcf8e3;
 @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
 
-@state-danger-text:              @brand-danger;
-@state-danger-bg:                #f9bdbb;
+@state-danger-text:              #a94442;
+@state-danger-bg:                #f2dede;
 @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
 
 
@@ -522,7 +522,7 @@
 //** Tooltip text color
 @tooltip-color:               #fff;
 //** Tooltip background color
-@tooltip-bg:                  #727272;
+@tooltip-bg:                  #000;
 @tooltip-opacity:             .9;
 
 //** Tooltip arrow width
@@ -540,9 +540,9 @@
 //** Popover maximum width
 @popover-max-width:                   276px;
 //** Popover border color
-@popover-border-color:                transparent;
+@popover-border-color:                rgba(0,0,0,.2);
 //** Popover fallback border color
-@popover-fallback-border-color:       transparent;
+@popover-fallback-border-color:       #ccc;
 
 //** Popover title background color
 @popover-title-bg:                    darken(@popover-bg, 3%);
@@ -555,7 +555,7 @@
 //** Popover outer arrow width
 @popover-arrow-outer-width:           (@popover-arrow-width + 1);
 //** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 7.5%);
+@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
 //** Popover outer arrow fallback color
 @popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
 
@@ -598,7 +598,7 @@
 //** Background color of modal content area
 @modal-content-bg:                             #fff;
 //** Modal content border color
-@modal-content-border-color:                   transparent;
+@modal-content-border-color:                   rgba(0,0,0,.2);
 //** Modal content border color **for IE8**
 @modal-content-fallback-border-color:          #999;
 
@@ -607,7 +607,7 @@
 //** Modal backdrop opacity
 @modal-backdrop-opacity:      .5;
 //** Modal header border color
-@modal-header-border-color:   transparent;
+@modal-header-border-color:   #e5e5e5;
 //** Modal footer border color
 @modal-footer-border-color:   @modal-header-border-color;
 
@@ -720,21 +720,21 @@
 @panel-primary-border:        @brand-primary;
 @panel-primary-heading-bg:    @brand-primary;
 
-@panel-success-text:          #fff;
+@panel-success-text:          @state-success-text;
 @panel-success-border:        @state-success-border;
-@panel-success-heading-bg:    @brand-success;
+@panel-success-heading-bg:    @state-success-bg;
 
-@panel-info-text:             #fff;
+@panel-info-text:             @state-info-text;
 @panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @brand-info;
+@panel-info-heading-bg:       @state-info-bg;
 
-@panel-warning-text:          #fff;
+@panel-warning-text:          @state-warning-text;
 @panel-warning-border:        @state-warning-border;
-@panel-warning-heading-bg:    @brand-warning;
+@panel-warning-heading-bg:    @state-warning-bg;
 
-@panel-danger-text:           #fff;
+@panel-danger-text:           @state-danger-text;
 @panel-danger-border:         @state-danger-border;
-@panel-danger-heading-bg:     @brand-danger;
+@panel-danger-heading-bg:     @state-danger-bg;
 
 
 //== Thumbnails
@@ -760,8 +760,8 @@
 //
 //##
 
-@well-bg:                     #f9f9f9;
-@well-border:                 transparent;
+@well-bg:                     #f5f5f5;
+@well-border:                 darken(@well-bg, 7%);
 
 
 //== Badges
@@ -778,7 +778,7 @@
 //** Badge background color in active nav link
 @badge-active-bg:             #fff;
 
-@badge-font-weight:           normal;
+@badge-font-weight:           bold;
 @badge-line-height:           1;
 @badge-border-radius:         10px;
 
@@ -820,9 +820,9 @@
 //
 //##
 
-@close-font-weight:           normal;
+@close-font-weight:           bold;
 @close-color:                 #000;
-@close-text-shadow:           none;
+@close-text-shadow:           0 1px 0 #fff;
 
 
 //== Code
diff --git a/public/src/admin/manage/users.js b/public/src/admin/manage/users.js
index 7138bb01b9..1008928bc5 100644
--- a/public/src/admin/manage/users.js
+++ b/public/src/admin/manage/users.js
@@ -231,41 +231,62 @@ define('admin/manage/users', ['admin/modules/selectable'], function(selectable)
 		});
 
 		function handleUserCreate() {
-			var errorEl = $('#create-modal-error');
 			$('#createUser').on('click', function() {
-				$('#create-modal').modal('show');
-				$('#create-modal form')[0].reset();
-				errorEl.addClass('hide');
+				templates.parse('admin/partials/create_user_modal', {}, function(html) {
+					translator.translate(html, function(html) {
+						bootbox.dialog({
+							message: html,
+							title: 'Create User',
+							onEscape: true,
+							buttons: {
+								cancel: {
+									label: 'Cancel',
+									className: 'btn-link'
+								},
+								create: {
+									label: 'Create',
+									className: 'btn-primary',
+									callback: function(e) {
+										createUser.call(this);
+										return false;
+									}
+								}
+							}
+						});
+					});
+				});
 			});
+		}
 
-			$('#create-modal-go').on('click', function() {
-				var username = $('#create-user-name').val(),
-					email = $('#create-user-email').val(),
-					password = $('#create-user-password').val(),
-					passwordAgain = $('#create-user-password-again').val();
+		function createUser() {
+			var modal = this;
+			var username = document.getElementById('create-user-name').value;
+			var email = document.getElementById('create-user-email').value;
+			var password = document.getElementById('create-user-password').value;
+			var passwordAgain = document.getElementById('create-user-password-again').value;
 
+			var errorEl = $('#create-modal-error');
 
-				if (password !== passwordAgain) {
-					return errorEl.html('Error
Passwords must match!
').removeClass('hide');
-				}
+			if (password !== passwordAgain) {
+				return errorEl.html('Error
Passwords must match!
').removeClass('hide');
+			}
 
-				var user = {
-					username: username,
-					email: email,
-					password: password
-				};
+			var user = {
+				username: username,
+				email: email,
+				password: password
+			};
 
-				socket.emit('admin.user.createUser', user, function(err) {
-					if(err) {
-						return errorEl.translateHtml('Error
' + err.message + '
').removeClass('hide');
-					}
-					$('#create-modal').modal('hide');
-					$('#create-modal').on('hidden.bs.modal', function() {
-						ajaxify.refresh();
-					});
-					app.alertSuccess('User created!');
-				});
+			socket.emit('admin.user.createUser', user, function(err) {
+				if(err) {
+					return errorEl.translateHtml('Error
' + err.message + '
').removeClass('hide');
+				}
 
+				modal.modal('hide');
+				modal.on('hidden.bs.modal', function() {
+					ajaxify.refresh();
+				});
+				app.alertSuccess('User created!');
 			});
 		}
 
diff --git a/src/meta/css.js b/src/meta/css.js
index 4834cedc95..a118d75b1a 100644
--- a/src/meta/css.js
+++ b/src/meta/css.js
@@ -39,8 +39,7 @@ module.exports = function(Meta) {
 				paths = [
 					baseThemePath,
 					path.join(__dirname, '../../node_modules'),
-					path.join(__dirname, '../../public/vendor/fontawesome/less'),
-					path.join(__dirname, '../../public/vendor/bootstrap/less')
+					path.join(__dirname, '../../public/vendor/fontawesome/less')
 				],
 				source = '@import "font-awesome";';
 
diff --git a/src/views/admin/manage/users.tpl b/src/views/admin/manage/users.tpl
index d6dd8c5a25..b2042d8e74 100644
--- a/src/views/admin/manage/users.tpl
+++ b/src/views/admin/manage/users.tpl
@@ -94,46 +94,6 @@
 				
 
 				
-
-				
-
 			
 		
 	
diff --git a/src/views/admin/partials/create_user_modal.tpl b/src/views/admin/partials/create_user_modal.tpl
new file mode 100644
index 0000000000..b065479b06
--- /dev/null
+++ b/src/views/admin/partials/create_user_modal.tpl
@@ -0,0 +1,21 @@
+

+

+	

+		
+		
+	

+	

+		
+		
+	

+
+	

+		
+		
+	

+
+	

+		
+		
+	

+