From 2be601d0b0e445a9804d2b918d4e1400431d3b16 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 16:52:22 +0200 Subject: [PATCH] Introducing Bootstrap 4 Bootstrap (and its dependency popper.js) are now used from npm packages, allowing better version control and custom building of only the required components for both styling and javascript. At this moment the whole styling of bootstrap is included, once the Cloud redesign is over it will be stripped to only the used components. --- .gitignore | 1 + gulpfile.js | 34 ++++++++++++++-- package.json | 4 ++ src/styles/main.sass | 87 ++++++++++++++++++++++++++++++++++++++-- src/templates/layout.pug | 3 +- 5 files changed, 120 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index b9623fc..e00f0a2 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ __pycache__ /cloud/templates/ /cloud/static/assets/css/ +/cloud/static/assets/js/bootstrap.min.js node_modules/ /config_local.py diff --git a/gulpfile.js b/gulpfile.js index 3e605c2..173cbfd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -29,7 +29,12 @@ var destination = { js: 'cloud/static/assets/js', } -var pillar = '../pillar/'; +var source = { + pillar: '../pillar/', + bootstrap: 'node_modules/bootstrap/', + popper: 'node_modules/popper.js/' +} + /* CSS */ gulp.task('styles', function() { @@ -95,6 +100,28 @@ gulp.task('scripts_concat_tutti', function() { }); +// Combine all needed Bootstrap JavaScript into a single file. +gulp.task('scripts_concat_bootstrap', function() { + + toUglify = [ + source.popper + 'dist/umd/popper.min.js', + source.bootstrap + 'js/dist/index.js', + source.bootstrap + 'js/dist/util.js', + source.bootstrap + 'js/dist/tooltip.js', + source.bootstrap + 'js/dist/dropdown.js', + ]; + + gulp.src(toUglify) + .pipe(gulpif(enabled.failCheck, plumber())) + .pipe(gulpif(enabled.maps, sourcemaps.init())) + .pipe(concat("bootstrap.min.js")) + .pipe(gulpif(enabled.uglify, uglify())) + .pipe(gulpif(enabled.maps, sourcemaps.write("."))) + .pipe(chmod(644)) + .pipe(gulp.dest(destination.js)) + .pipe(gulpif(argv.livereload, livereload())); +}); + // While developing, run 'gulp watch' gulp.task('watch',function() { @@ -104,7 +131,7 @@ gulp.task('watch',function() { } gulp.watch('src/styles/**/*.sass',['styles']); - gulp.watch(pillar + 'src/styles/**/*.sass',['styles']); + gulp.watch(source.pillar + 'src/styles/**/*.sass',['styles']); gulp.watch('src/templates/**/*.pug',['templates']); gulp.watch('src/scripts/*.js',['scripts']); @@ -128,4 +155,5 @@ gulp.task('cleanup', function() { // Run 'gulp' to build everything at once var tasks = []; if (enabled.cleanup) tasks.push('cleanup'); -gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti'])); + +gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti', 'scripts_concat_bootstrap'])); diff --git a/package.json b/package.json index f988f0b..377b536 100644 --- a/package.json +++ b/package.json @@ -23,5 +23,9 @@ "gulp-sourcemaps": "~1.6.0", "gulp-uglify": "~1.5.3", "minimist": "^1.2.0" + }, + "dependencies": { + "bootstrap": "^4.1.3", + "popper.js": "^1.14.4" } } diff --git a/src/styles/main.sass b/src/styles/main.sass index 6d2da95..7d7f19c 100644 --- a/src/styles/main.sass +++ b/src/styles/main.sass @@ -1,14 +1,93 @@ -@import ../../../pillar/src/styles/_normalize -@import ../../../pillar/src/styles/_config -@import ../../../pillar/src/styles/_utils +// Boi-tstrap +@import "../../node_modules/bootstrap/scss/functions" +@import "../../node_modules/bootstrap/scss/variables" +@import "../../node_modules/bootstrap/scss/mixins" -/* Generic styles (comments, notifications, etc) come from base.css */ +@import ../../../pillar/src/styles/config + +$primary: $color-primary + +$body-bg: $color-background +$body-color: $color-text + +$color-background-nav: #fff +$link-color: $primary + +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" +$font-size-base: .9rem + +@import "../../node_modules/bootstrap/scss/root" +@import "../../node_modules/bootstrap/scss/reboot" + +@import "../../node_modules/bootstrap/scss/type" +@import "../../node_modules/bootstrap/scss/images" + +@import "../../node_modules/bootstrap/scss/code" +@import "../../node_modules/bootstrap/scss/grid" +@import "../../node_modules/bootstrap/scss/tables" +@import "../../node_modules/bootstrap/scss/forms" +@import "../../node_modules/bootstrap/scss/buttons" +@import "../../node_modules/bootstrap/scss/transitions" +@import "../../node_modules/bootstrap/scss/dropdown" +@import "../../node_modules/bootstrap/scss/button-group" +@import "../../node_modules/bootstrap/scss/input-group" +@import "../../node_modules/bootstrap/scss/custom-forms" + +@import "../../node_modules/bootstrap/scss/nav" +@import "../../node_modules/bootstrap/scss/navbar" + +@import "../../node_modules/bootstrap/scss/card" +@import "../../node_modules/bootstrap/scss/breadcrumb" +@import "../../node_modules/bootstrap/scss/pagination" +@import "../../node_modules/bootstrap/scss/badge" +@import "../../node_modules/bootstrap/scss/jumbotron" +@import "../../node_modules/bootstrap/scss/alert" +@import "../../node_modules/bootstrap/scss/progress" +@import "../../node_modules/bootstrap/scss/media" +@import "../../node_modules/bootstrap/scss/list-group" +@import "../../node_modules/bootstrap/scss/close" +@import "../../node_modules/bootstrap/scss/modal" +@import "../../node_modules/bootstrap/scss/tooltip" +@import "../../node_modules/bootstrap/scss/popover" +@import "../../node_modules/bootstrap/scss/carousel" + +@import "../../node_modules/bootstrap/scss/utilities" +@import "../../node_modules/bootstrap/scss/print" + +@import ../../../pillar/src/styles/normalize +@import ../../../pillar/src/styles/utils +@import ../../../pillar/src/styles/apps_base +@import ../../../pillar/src/styles/error + +@import ../../../pillar/src/styles/components/base + +@import ../../../pillar/src/styles/components/jumbotron +@import ../../../pillar/src/styles/components/alerts +@import ../../../pillar/src/styles/components/navbar +@import ../../../pillar/src/styles/components/footer +@import ../../../pillar/src/styles/components/shortcode +@import ../../../pillar/src/styles/components/statusbar +@import ../../../pillar/src/styles/components/search + +@import ../../../pillar/src/styles/components/flyout +@import ../../../pillar/src/styles/components/forms +@import ../../../pillar/src/styles/components/inputs +@import ../../../pillar/src/styles/components/buttons +@import ../../../pillar/src/styles/components/popover +@import ../../../pillar/src/styles/components/tooltip +@import ../../../pillar/src/styles/components/checkbox +@import ../../../pillar/src/styles/components/overlay +@import ../../../pillar/src/styles/components/card + +@import ../../../pillar/src/styles/comments +@import ../../../pillar/src/styles/notifications /* Blender Cloud specific styles */ @import ../../../pillar/src/styles/_project @import ../../../pillar/src/styles/_project-sharing @import ../../../pillar/src/styles/_project-dashboard @import ../../../pillar/src/styles/_user + @import _welcome @import _homepage @import _services diff --git a/src/templates/layout.pug b/src/templates/layout.pug index 96b0579..059d417 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -46,7 +46,6 @@ html(lang="en") link(href="{{ url_for('static', filename='assets/img/favicon.png') }}", rel="shortcut icon") link(href="{{ url_for('static', filename='assets/img/apple-touch-icon-precomposed.png') }}", rel="icon apple-touch-icon-precomposed", sizes="192x192") - link(href="{{ url_for('static_pillar', filename='assets/css/vendor/bootstrap.min.css') }}", rel="stylesheet") link(href="{{ url_for('static', filename='assets/google-font-roboto/roboto.css') }}", rel="stylesheet") | {% block head %}{% endblock %} @@ -318,10 +317,10 @@ html(lang="en") span.nc-date a(href="") + script(src="{{ url_for('static_cloud', filename='assets/js/bootstrap.min.js') }}") noscript link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css') - script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.bootstrap-3.3.7.min.js') }}") | {% if current_user.is_authenticated %} script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typewatch-3.0.0.min.js') }}")