archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

Introducing Bootstrap 4

Browse Source 
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.
This commit is contained in:
Pablo Vazquez 2018-08-27 16:52:22 +02:00
parent 4dc11b075a
commit 2be601d0b0
5 changed files with 120 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -6,6 +6,7 @@ __pycache__
/cloud/templates/
/cloud/static/assets/css/
/cloud/static/assets/js/bootstrap.min.js
node_modules/
/config_local.py

34
gulpfile.js
View File

@ -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']));

4
package.json
View File

@ -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"
}
}

87
src/styles/main.sass
View File

@ -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

3
src/templates/layout.pug
View File

@ -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') }}")