diff --git a/gulpfile.js b/gulpfile.js index 79b9d178..aaf4caec 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,7 +12,7 @@ var pug = require('gulp-pug'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); -var uglify = require('gulp-uglify'); +var uglify = require('gulp-uglify-es').default; var enabled = { uglify: argv.production, @@ -21,6 +21,7 @@ var enabled = { prettyPug: !argv.production, cachify: !argv.production, cleanup: argv.production, + chmod: argv.production, }; var destination = { @@ -29,6 +30,10 @@ var destination = { js: 'pillar/web/static/assets/js', } +var source = { + bootstrap: 'node_modules/bootstrap/', + popper: 'node_modules/popper.js/' +} /* CSS */ gulp.task('styles', function() { @@ -67,7 +72,7 @@ gulp.task('scripts', function() { .pipe(gulpif(enabled.uglify, uglify())) .pipe(rename({suffix: '.min'})) .pipe(gulpif(enabled.maps, sourcemaps.write("."))) - .pipe(chmod(644)) + .pipe(gulpif(enabled.chmod, chmod(644))) .pipe(gulp.dest(destination.js)) .pipe(gulpif(argv.livereload, livereload())); }); @@ -82,7 +87,7 @@ gulp.task('scripts_concat_tutti', function() { .pipe(concat("tutti.min.js")) .pipe(gulpif(enabled.uglify, uglify())) .pipe(gulpif(enabled.maps, sourcemaps.write("."))) - .pipe(chmod(644)) + .pipe(gulpif(enabled.chmod, chmod(644))) .pipe(gulp.dest(destination.js)) .pipe(gulpif(argv.livereload, livereload())); }); @@ -94,7 +99,30 @@ gulp.task('scripts_concat_markdown', function() { .pipe(concat("markdown.min.js")) .pipe(gulpif(enabled.uglify, uglify())) .pipe(gulpif(enabled.maps, sourcemaps.write("."))) - .pipe(chmod(644)) + .pipe(gulpif(enabled.chmod, chmod(644))) + .pipe(gulp.dest(destination.js)) + .pipe(gulpif(argv.livereload, livereload())); +}); + + +// 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(gulpif(enabled.chmod, chmod(644))) .pipe(gulp.dest(destination.js)) .pipe(gulpif(argv.livereload, livereload())); }); @@ -137,4 +165,5 @@ gulp.task('default', tasks.concat([ 'scripts', 'scripts_concat_tutti', 'scripts_concat_markdown', + 'scripts_concat_bootstrap', ])); diff --git a/package.json b/package.json index d1930d4c..d8da25f9 100644 --- a/package.json +++ b/package.json @@ -4,23 +4,28 @@ "author": "Blender Institute", "repository": { "type": "git", - "url": "https://github.com/armadillica/pillar.git" + "url": "git://git.blender.org/pillar.git" }, "devDependencies": { - "gulp": "~3.9.1", - "gulp-autoprefixer": "~2.3.1", - "gulp-cached": "~1.1.0", - "gulp-chmod": "~1.3.0", - "gulp-concat": "~2.6.0", - "gulp-if": "^2.0.1", - "gulp-git": "~2.4.2", - "gulp-livereload": "~3.8.1", - "gulp-plumber": "~1.1.0", - "gulp-pug": "~3.2.0", - "gulp-rename": "~1.2.2", - "gulp-sass": "~2.3.1", - "gulp-sourcemaps": "~1.6.0", - "gulp-uglify": "~1.5.3", + "gulp": "^3.9.1", + "gulp-autoprefixer": "^6.0.0", + "gulp-cached": "^1.1.1", + "gulp-chmod": "^2.0.0", + "gulp-concat": "^2.6.1", + "gulp-if": "^2.0.2", + "gulp-git": "^2.8.0", + "gulp-livereload": "^4.0.0", + "gulp-plumber": "^1.2.0", + "gulp-pug": "^4.0.1", + "gulp-rename": "^1.4.0", + "gulp-sass": "^4.0.1", + "gulp-sourcemaps": "^2.6.4", + "gulp-uglify-es": "^1.0.4", "minimist": "^1.2.0" + }, + "dependencies": { + "bootstrap": "^4.1.3", + "jquery": "^3.3.1", + "popper.js": "^1.14.4" } } diff --git a/src/scripts/tutti/00_utils.js b/src/scripts/tutti/00_utils.js index 99f853c4..47796812 100644 --- a/src/scripts/tutti/00_utils.js +++ b/src/scripts/tutti/00_utils.js @@ -64,4 +64,13 @@ return this; }; + // jQuery's show() sets display as 'inline', this utility sets it to whatever we want. + // Useful for buttons or links that need 'inline-block' or flex for correct padding and alignment. + $.fn.displayAs = function(display_type) { + if (typeof(display_type) === 'undefined') { + display_type = 'block'; + } + + this.css('display', display_type); + } }(jQuery)); diff --git a/src/styles/_comments.sass b/src/styles/_comments.sass index 0c24e0f4..812aca8d 100644 --- a/src/styles/_comments.sass +++ b/src/styles/_comments.sass @@ -453,12 +453,17 @@ $comments-width-max: 710px transition: background-color 150ms ease-in-out, color 150ms ease-in-out width: 100px + // The actual button for submitting the comment. button.comment-action-submit + align-items: center background: transparent border: none border-top-left-radius: 0 border-bottom-left-radius: 0 color: $color-success + cursor: pointer + display: flex + justify-content: center flex-direction: column height: 100% position: relative @@ -466,8 +471,12 @@ $comments-width-max: 710px white-space: nowrap width: 100% + &:hover + background: rgba($color-success, .1) + &:focus background: lighten($color-success, 10%) + color: $white &.submitting color: $color-info diff --git a/src/styles/_config.sass b/src/styles/_config.sass index c69bc5a4..38fe2bd1 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -25,7 +25,7 @@ $color-text-light-primary: rgba($color-text-light, .87) !default $color-text-light-secondary: rgba($color-text-light, .54) !default $color-text-light-hint: rgba($color-text-light, .38) !default -$color-primary: #68B3C8 !default +$color-primary: #009eff !default $color-primary-light: hsl(hue($color-primary), 30%, 90%) !default $color-primary-dark: hsl(hue($color-primary), 80%, 30%) !default $color-primary-accent: hsl(hue($color-primary), 100%, 50%) !default @@ -100,13 +100,10 @@ $sidebar-width: 50px !default /* Project specifics */ $project_nav-width: 250px !default -$project-sidebar-width: 50px !default -$project_header-height: 50px !default +$project-sidebar-width: 40px !default +$project_header-height: 37px !default $project_footer-height: 30px !default -$navbar-height: 50px !default -$navbar-backdrop-height: 600px !default - $node-type-asset_image: #e87d86 !default $node-type-asset_file: #CC91C7 !default $node-type-asset_video: #7dc5e8 !default @@ -125,3 +122,29 @@ $z-index-base: 13 !default @media (min-width: $screen-lg-min) width: 1270px + + +// Bootstrap overrides. +$enable-caret: false + +$border-radius: .2rem +$btn-border-radius: $border-radius + +$primary: $color-primary + +$body-bg: $white +$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 + +$dropdown-border-width: 0 +$dropdown-box-shadow: 0 10px 25px rgba($black, .1) + +// Tooltips. +$tooltip-font-size: 0.83rem +$tooltip-max-width: auto +$tooltip-opacity: 1 diff --git a/src/styles/_error.sass b/src/styles/_error.sass index 02c20aa7..5ad02dc4 100644 --- a/src/styles/_error.sass +++ b/src/styles/_error.sass @@ -60,14 +60,13 @@ #node-overlay #error-container - position: fixed - top: $navbar-height align-items: flex-start + position: fixed + top: $nav-link-height #error-box - box-shadow: 0 0 25px rgba(black, .1), 0 0 50px rgba(black, .1) - width: auto border-top-left-radius: 0 border-top-right-radius: 0 + box-shadow: 0 0 25px rgba(black, .1), 0 0 50px rgba(black, .1) position: relative width: 100% diff --git a/src/styles/_notifications.sass b/src/styles/_notifications.sass index 7dbf18a0..869d3cae 100644 --- a/src/styles/_notifications.sass +++ b/src/styles/_notifications.sass @@ -9,7 +9,6 @@ color: $color-primary cursor: pointer float: right - font-family: $font-body height: initial margin: 0 padding: 8px 10px 0 10px diff --git a/src/styles/_organizations.sass b/src/styles/_organizations.sass index 583a8250..b5af8501 100644 --- a/src/styles/_organizations.sass +++ b/src/styles/_organizations.sass @@ -1,20 +1,4 @@ body.organizations - ul#sub-nav-tabs__list - align-items: center - display: flex - - li.result - padding: 10px 20px - li.create - margin-left: auto - - - .dashboard-secondary - .box - +container-box - padding: 10px 20px - margin: 0 - #item-details .organization label diff --git a/src/styles/_pages.sass b/src/styles/_pages.sass index ee0e37a0..b08417b8 100644 --- a/src/styles/_pages.sass +++ b/src/styles/_pages.sass @@ -409,7 +409,6 @@ a.page-card-cta display: block +position-center-translate - +media-xs display: none +media-sm @@ -419,9 +418,6 @@ a.page-card-cta +media-lg width: 100% -.services.navbar-backdrop-overlay - background: rgba(black, .5) - .services .page-card-side max-width: 500px diff --git a/src/styles/_project-dashboard.sass b/src/styles/_project-dashboard.sass index c07c0dca..c11b6d9c 100644 --- a/src/styles/_project-dashboard.sass +++ b/src/styles/_project-dashboard.sass @@ -1,22 +1,16 @@ - .dashboard-container section#home, section#projects - background-color: $color-background border-bottom-left-radius: 3px border-bottom-right-radius: 3px nav#sub-nav-tabs.home, nav#sub-nav-tabs.projects - background-color: white border-bottom: thin solid $color-background-dark li.nav-tabs__list-tab padding: 15px 20px 10px 20px - section#home - background-color: $color-background-dark - nav.nav-tabs__tab display: none background-color: $color-background-light @@ -287,9 +281,8 @@ flex-direction: column .title - font-size: 1.2em - padding-bottom: 2px color: $color-text-dark-primary + padding-bottom: 2px ul.meta font-size: .9em diff --git a/src/styles/_project-sharing.sass b/src/styles/_project-sharing.sass index 40a2e7be..419e767b 100644 --- a/src/styles/_project-sharing.sass +++ b/src/styles/_project-sharing.sass @@ -92,10 +92,6 @@ ul.sharing-users-list &:hover color: lighten($color-danger, 10%) -.sharing-users-intro, -.sharing-users-info - h4 - font-family: $font-body .sharing-users-info padding-left: 15px diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 32a74288..bd1a80d6 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -1,4 +1,3 @@ -$project-sidebar-background: lighten($color-background, 5%) $node-latest-thumbnail-size: 160px body.open-projects, @@ -41,10 +40,6 @@ body.blog width: 100% left: 0 -#project_context-header - span#status-bar - text-align: left - #project_nav-container +media-lg width: $project_nav-width * 1.33 @@ -63,16 +58,12 @@ body.blog #project_sidebar width: $project-sidebar-width z-index: $z-index-base + 6 + box-shadow: inset -1px 0 0 0 $color-background +media-xs width: 100% ul.project-tabs - background-color: $color-background-nav - margin: 0 - padding: 0 - list-style: none - position: fixed width: $project-sidebar-width top: $project_header-height @@ -85,16 +76,9 @@ body.blog width: 100% li - display: flex - align-items: center - justify-content: center width: $project-sidebar-width height: $project-sidebar-width position: relative - color: white - background-color: $color-background-nav - border-left: 2px solid transparent - transition: all 100ms ease-in-out +media-xs border-bottom: 2px solid transparent @@ -108,78 +92,33 @@ body.blog &:first-child border-top: thin solid transparent - &:hover - background-color: $color-background-nav-light + &:hover, + &.active cursor: pointer - +media-xs - border-bottom: 2px solid $color-background-nav-light - +media-sm - border-bottom: 2px solid $color-background-nav-light - +media-md - border-left: 2px solid $color-background-nav-light - +media-lg - border-left: 2px solid $color-background-nav-light + a + color: $primary a - width: $project-sidebar-width - height: $project-sidebar-width - display: flex align-items: center + color: $color-text + display: flex justify-content: center - color: $color-text-light-primary - - i - font-size: 1.1em - - &.active - background-color: $color-background-nav-light - - // The tiny triangle - &:after - +media-xs - border-top-color: $project-sidebar-background - border-right-color: transparent - left: 50% - right: initial - transform: translateX(-50%) - top: 0 - - border: 7px solid transparent - border-right-color: $project-sidebar-background - content: '' - display: block - position: absolute - right: 0 - top: 50% - transform: translateY(-50%) - - a - color: white + height: $project-sidebar-width + width: $project-sidebar-width &.tabs-thumbnail - height: $project-sidebar-width - border-bottom: 2px solid $color-background-nav-light - img - width: $project-sidebar-width height: $project-sidebar-width - - &.image - border-left: none + width: $project-sidebar-width #project-loading - position: absolute - width: $project-sidebar-width - height: $project-sidebar-width - display: flex align-items: center + display: flex + height: $project-sidebar-width justify-content: center - i - position: relative - top: -1px - font-size: 1em - color: white + width: $project-sidebar-width + #search-container #project_sidebar ul.project-tabs li.tabs-thumbnail background-color: $color-background-nav-dark @@ -199,7 +138,6 @@ body.blog +media-xs width: initial - background-color: $project-sidebar-background display: block left: 0 position: relative @@ -221,53 +159,34 @@ body.blog #project_context-header align-items: center - background-color: white - background-color: $color-background-light - border-bottom: thin solid lighten($color-text-dark-hint, 10%) - box-shadow: none color: $color-text-dark-secondary display: flex height: $project_header-height min-height: $project_header-height position: fixed - top: $project_header-height + top: $project_header-height + 1 transition: box-shadow 250ms ease-in-out - width: auto z-index: $z-index-base + 3 &.is-offset box-shadow: 0 0 25px rgba(black, .2) + span#status-bar + text-align: left + #project_nav-header - z-index: $z-index-base + 3 + left: 0 position: absolute top: 0 - left: 0 - height: $project_header-height - min-height: $project_header-height width: 100% - background-color: $color-background-light - border-bottom: thin solid $color-background-dark + z-index: $z-index-base + 3 /* Name of the project */ .project-title - width: 100% - max-width: 100% + +text-overflow-ellipsis height: 100% - transition: background-color 150ms ease-in-out - - a - display: block - width: 100% - color: $color-text-dark - padding: 15px - font-size: 1.1em - +text-overflow-ellipsis - - &:hover, &:active - color: $color-primary - text-decoration: none - outline: none + max-width: 100% + width: 100% span#status-bar position: absolute @@ -278,7 +197,6 @@ span#status-bar color: $color-text-dark opacity: 0 z-index: 1 - background-color: $color-background-light font-weight: 400 white-space: nowrap transition: all 250ms ease-in-out @@ -293,7 +211,7 @@ span#status-bar &.info color: $color-info &.error - color: $color-danger + color: $danger &.warning color: $color-warning &.success @@ -320,71 +238,29 @@ span#project-edit-title display: none ul.project-edit-tools - display: flex align-items: center - height: 100% - padding: 0 - margin: - top: 0 - left: auto - right: 5px - bottom: 0 - color: $color-text-dark-hint - + display: flex list-style-type: none - font-size: .9em + margin: 0 0 0 auto + padding: 0 +media-xs width: 100% margin: 0 auto justify-content: space-around - /* Bottons at the end of a form, like Save Changes */ - &.bottom - +clearfix - padding: 20px 0 25px 0 - border-top: thin solid $color-text-dark-hint - justify-content: flex-end - width: 100% - height: initial - li - margin: 0 - padding: 0 - position: relative - float: left - user-select: none + a, button + padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2) - a - min-width: 110px - user-select: none - - &:focus, &:active - text-decoration: none - outline: none + i + padding-right: 10px &.button-save - - &.disabled - border-bottom: none - - a - color: white - border-color: darken($color-success, 10%) - - a - border-color: $color-success - background-color: $color-success - color: white - margin-right: 10px - - &:hover - background-color: lighten($color-success, 5%) - &.field-error a - background-color: $color-danger - border-color: $color-danger + background-color: $danger + border-color: $danger color: white &.saving @@ -411,31 +287,6 @@ ul.project-edit-tools &.button-edit min-width: 80px - - &.button-dropdown - min-width: 50px - cursor: pointer - i - margin: auto - padding: 0 - - &.button-add-icon - margin-right: 5px - - a.dropdown-toggle - display: inline-block - min-width: auto - - &.open - a.dropdown-toggle - color: $color-text-light - background-color: $color-primary - border-color: darken($color-primary, 5%) - - li.button-delete:hover - a - color: $color-danger - &.featured a color: $color-warning @@ -445,132 +296,44 @@ ul.project-edit-tools background-color: rgba($color-warning, .1) &.disabled - cursor: not-allowed - border-bottom: thin solid $color-text-dark-hint + +disabled-stripes a - pointer-events: none - background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px) - border-color: darken($color-text-dark-hint, 5%) - opacity: .6 - color: $color-text-dark + +disabled-stripes - &.button-dropdown.disabled - border-bottom: none - - a - margin: 5px - padding: 5px 15px - color: $color-text-dark-primary - border-radius: 3px - border: thin solid $color-text-dark-primary - text-align: center - text-transform: uppercase - transition: background-color 150ms ease-in-out - background-color: $color-background-light - - i - margin-right: 5px - - &:hover - background-color: $color-background-active-dark - border-color: darken($color-background-active-dark, 5%) - color: $color-text-light - text-decoration: none - - &:focus, &:active - text-decoration: none - outline: none - - - &#item_save, - &#item_cancel - i - font-size: 1em - - &#item_add, - &#item_edit, - &#item_move, - &#item_featured + &.dropdown li - i - margin-right: 10px + padding: 0 - &#item_delete - li i - margin-right: 0 - // &:not(:last-of-type) - // border-right: thin solid darken($color-background, 50%) + a + color: $body-color + display: block + padding: $dropdown-item-padding-y $dropdown-item-padding-x + padding-left: 15px + user-select: none - /* ul.project-edit-tools */ + &:hover + color: $primary + text-decoration: none - /* Extra asset tools in dropdown */ - ul.dropdown-menu - width: auto - min-width: 180px - padding: 0 - margin: 0 - top: 44px - left: initial - right: 10px - bottom: initial - border: thin solid $color-text-dark-hint - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - border-top-left-radius: 0 - border-top-right-radius: 0 - background-color: white - color: $color-text-dark-primary - box-shadow: 1px 1px 25px rgba(black, .2) - - li - padding: 0 - clear: both - display: flex - align-items: center - width: 100% - - a - margin: 0 - padding: 10px 15px - width: 100% - border: 0 - font-size: .9em - width: 100% - text-align: left - - &:hover - color: $color-primary - background-color: transparent - &:active, &:focus - color: $color-primary - background-color: transparent - - i - display: inline-block - margin: 0 15px 0 0 - - &.icon-group:after - content: '\e80d' - &.icon-group_texture:after, - &.icon-group_hdri:after - content: '\e80b' - font-size: 1.1em - &.icon-asset:after - content: '\e825' - &.icon-page:after - content: '\e824' - &.icon-texture:after - content: '\e80a' - &.icon-hdri:after - content: '\f019' + /* Icons per asset type. */ + i + &.icon-group:after + content: '\e80d' + &.icon-group_texture:after, + &.icon-group_hdri:after + content: '\e80b' + font-size: 1.1em + &.icon-asset:after + content: '\e825' + &.icon-page:after + content: '\e824' + &.icon-texture:after + content: '\e80a' + &.icon-hdri:after + content: '\f019' /* // Extra asset tools in dropdown */ - - &.open - button - box-shadow: none - /* // Edit Asset buttons */ #project-loading @@ -607,9 +370,6 @@ ul.project_nav-edit-list li background-color: $color-background border-bottom: 1px solid $color-background-dark - font: - weight: 400 - family: $font-body color: $color-text-dark position: relative @@ -663,9 +423,8 @@ ul.project_nav-edit-list padding-top: $project_header-height #node-container - flex: 1 - color: $color-text-dark background-color: white + flex: 1 /* For error messages (403) and other overlaid text*/ #node-overlay @@ -687,8 +446,6 @@ ul.project_nav-edit-list /* Project context on the right of the navigation */ /* Contains #project_context */ #project_context-container - background-color: $color-background-nav - iframe#server_error width: 100% min-height: 800px @@ -700,11 +457,9 @@ ul.project_nav-edit-list +media-xs margin-top: 0 - background-color: $project-sidebar-background - border-right: thin solid $color-background - margin-top: $project_header-height - overflow-y: auto - padding: 0 0 5px 0// some padding on top/bottom of jstree + // margin-top: $project_header-height //so it's right below the project title. + overflow-y: auto // show vertical scrollbars when needed. + padding: 0 0 5px 0 // some padding on top/bottom of jstree. position: relative &.edit @@ -713,9 +468,7 @@ ul.project_nav-edit-list /* Node Context */ =project-node-title - font: - family: $font-body - size: 1.5em + font-size: 1.5em color: $color-text-dark-primary $node-preview-max-height-sm: 300px @@ -825,7 +578,7 @@ $node-preview-max-height-lg: 700px margin-left: auto &.pending - color: $color-danger + color: $danger section.node-preview.texture overflow: hidden @@ -897,7 +650,6 @@ $node-preview-max-height-lg: 700px .node-title color: $color-text-dark-primary font: - family: $font-body weight: 500 size: 1.5em +text-overflow-ellipsis @@ -1054,6 +806,7 @@ section.node-preview-forbidden justify-content: center min-height: 400px position: relative + overflow: hidden img height: 130% @@ -1075,13 +828,6 @@ section.node-preview-forbidden span display: block - a - color: $color-text-light - - &.btn - border-color: white - color: white - hr opacity: .5 @@ -1128,9 +874,6 @@ section.node-preview.group padding: 0 margin: 0 - &.project - .node-details-title - padding: 10px 20px 0 20px .node-details-description +node-details-description @@ -1164,7 +907,7 @@ section.node-preview.group padding-left: 0 &.status-pending - color: $color-danger + color: $danger &.public color: $color-success @@ -1354,7 +1097,7 @@ section.node-details-container opacity: 1 .error-node-type-not-found - color: $color-danger + color: $danger clear: both a.learn-more @@ -1491,8 +1234,6 @@ a.learn-more section.node-children - background-color: white - &.group, &.storage flex: 1 padding: 10px 0 25px 20px @@ -1911,7 +1652,6 @@ section.node-children .node_index-collection-name font: - family: $font-body size: 4em weight: 600 margin-bottom: -5px @@ -2034,7 +1774,6 @@ section.node-children color: $color-text-dark font: size: 1.5em - family: $font-body weight: 500 text-decoration: none @@ -2101,15 +1840,15 @@ section.node-children text-transform: capitalize &.error - color: $color-danger + color: $danger background-color: $color-background-light padding: 10px 15px - border: thin solid lighten($color-danger, 10%) - border-top: 2px solid $color-danger + border: thin solid lighten($danger, 10%) + border-top: 2px solid $danger border-bottom-left-radius: 3px border-bottom-right-radius: 3px label - color: $color-danger + color: $danger font-weight: 500 &.file @@ -2176,7 +1915,7 @@ section.node-children outline: none &.field-error - border-color: $color-danger + border-color: $danger .md-preview-loading position: absolute @@ -2423,7 +2162,7 @@ section.node-children .cancel +button($color-warning, 3px) .delete - +button($color-danger, 3px) + +button($danger, 3px) .toggle margin: 0 20px @@ -2434,7 +2173,7 @@ section.node-children &.cancel +button($color-warning, 3px) &.delete - +button($color-danger, 3px) + +button($danger, 3px) &.create +button($color-success, 3px) diff --git a/src/styles/_search.sass b/src/styles/_search.sass index 7637ad7b..28431e93 100644 --- a/src/styles/_search.sass +++ b/src/styles/_search.sass @@ -29,7 +29,6 @@ $search-hit-width_grid: 100px font: size: .9em weight: 400 - family: $font-body style: initial width: 100% +text-overflow-ellipsis @@ -416,9 +415,7 @@ $search-hit-width_grid: 100px &.texture .texture-title - font: - size: 2em - family: $font-body + font-size: 2em padding: 15px 10px 10px 15px .node-row background: white diff --git a/src/styles/_user.sass b/src/styles/_user.sass index a201494b..09929fb2 100644 --- a/src/styles/_user.sass +++ b/src/styles/_user.sass @@ -68,13 +68,6 @@ background-color: lighten($provider-color-google, 7%) #settings - +media-xs - flex-direction: column - - align-items: stretch - display: flex - margin: 25px auto - #settings-sidebar +media-xs width: 100% diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index de0ba021..be5af072 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -26,7 +26,6 @@ display: inline-flex align-items: center justify-content: center - font-family: $font-body padding: 5px 12px border-radius: $roundness @@ -83,6 +82,15 @@ text-shadow: none +=disabled-stripes + color: $color-text-dark + cursor: not-allowed + background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px) + border-color: darken($color-text-dark-hint, 5%) + pointer-events: none + opacity: .6 + + @mixin overlay($from-color, $from-percentage, $to-color, $to-percentage) position: absolute top: 0 @@ -122,24 +130,17 @@ transform: translate(-50%, -50%) =input-generic - padding: 5px 5px 5px 0 + // padding: 5px 5px 5px 0 color: $color-text-dark - box-shadow: none - font-family: $font-body - border: thin solid transparent - border-radius: 0 - border-bottom-color: $color-background-dark background-color: transparent - transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out &:hover border-bottom-color: $color-background &:focus outline: 0 - border: thin solid transparent - border-bottom-color: $color-primary - box-shadow: 0 1px 0 0 $color-primary + border-color: $primary + box-shadow: none =label-generic color: $color-text-dark-primary @@ -354,7 +355,6 @@ +clearfix color: darken($color-text-dark, 5%) font: - family: $font-body weight: 300 size: 1.2em @@ -660,3 +660,17 @@ transition: all 1s ease-out img transition: all 1s ease-out + +.cursor-pointer + cursor: pointer + +.user-select-none + user-select: none + +// Bootstrap has .img-fluid, a class to limit the width of an image to 100%. +// .imgs-fluid below is to be applied on a parent container when we can't add +// classes to the images themselves. e.g. the blog. +.imgs-fluid + img + // Just re-use Bootstrap's mixin here. + +img-fluid diff --git a/src/styles/base.sass b/src/styles/base.sass index 64f93ec9..6a5ac813 100644 --- a/src/styles/base.sass +++ b/src/styles/base.sass @@ -1,1229 +1,77 @@ -@import _normalize +// First, Bootstrap variables and utilities. +@import "../../node_modules/bootstrap/scss/functions" +@import "../../node_modules/bootstrap/scss/variables" +@import "../../node_modules/bootstrap/scss/mixins" + +// Then Pillar variables and utilities. @import _config @import _utils +// Now Bootstrap components. +@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" + + +// Pillar components. @import _apps_base @import _notifications @import _comments @import _error - -html - height: 100% - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - -body - height: 100% - font: - family: $font-body, sans-serif - size: $font-size - color: $color-text-dark - background-color: $color-background - - +media-sm - width: 100% - max-width: 100% - min-width: auto - - +media-xs - width: 100% - max-width: 100% - min-width: auto - -h1, h2, h3, h4, h5 - font: - family: $font-body - weight: 300 - -a - color: $color-primary-dark - &:hover - color: $color-primary - -.container - +media-xs - max-width: 100% - min-width: auto - padding: - left: 0 - right: 0 - - &.box - +container-box - -.container-page - background-color: $color-background - -.page-content - position: relative - flex: 1 - .container-box - +container-box - - -.navbar+.page-content - padding-top: $navbar-height - -.alert+.navbar+.page-content - padding-top: 0 - -.alert - display: block - position: relative - z-index: 16 - width: 100% - margin-bottom: 0 - text-align: center - padding: 15px 20px - border-radius: 0 - border-bottom: thin solid rgba(black, .1) - - // overriden by alert types - color: $color-text-dark - background-color: $color-background - - +clearfix - - &.alert-danger, - &.alert-error - background-color: lighten($color-danger, 35%) - color: $color-danger - .alert-icon, .close - color: $color-danger - - &.alert-warning - background-color: lighten($color-warning, 20%) - color: darken($color-warning, 20%) - .alert-icon, .close - color: darken($color-warning, 20%) - - &.alert-success - background-color: lighten($color-success, 45%) - color: $color-success - - .alert-icon, .close - color: $color-success - - &.alert-info - background-color: lighten($color-info, 30%) - color: darken($color-info, 10%) - .alert-icon, .close - color: darken($color-info, 10%) - - button.close - background: none - border: none - opacity: .5 - position: absolute - top: 5px - right: 10px - padding: 10px - - &:hover - opacity: 1 - - i - font-size: .8em - - i.alert-icon - &:before - font-family: "pillar-font" - padding-right: 10px - - &.success:before - content: '\e801' - &.info:before - content: "\e80c" - &.warning:before - content: "\e80b" - &.danger:before, - &.error:before - content: "\e83d" - - -/* When there's an alert, disable the fixed top */ -.alert+.navbar-fixed-top - position: relative - margin-bottom: 0 - - &+.container - padding-top: 0 - - -/* Navigation */ -header.navbar-header - position: relative - margin: 0 - height: 100% - z-index: 1 // to be on top of the overlay - - .navbar-toggle - color: white - float: none - margin: 5px 0 0 10px - - i - margin: 0 - -.navbar-overlay - bottom: 0 - display: none - left: 0 - height: 100% - position: absolute - right: 0 - top: 0 - transition: background-color 350ms ease-in-out - width: 100% - z-index: 0 - - &+.navbar-container - .search-input - +media-lg - border: thin solid rgba(white, .2) - - #cloud-search, .tt-hint - &::placeholder - color: rgba(white, .8) - - border: thin solid transparent - border-radius: 3px - margin: 8px 0 - - &.is-active - background-color: $color-background-nav - text-shadow: none - - &+.navbar-container - .search-input - +media-sm - background-color: darken($color-background-nav, 6%) - +media-md - background-color: darken($color-background-nav, 6%) - +media-lg - border: thin solid transparent - background-color: darken($color-background-nav, 6%) - - #cloud-search, .tt-hint - &::placeholder - color: rgba(white, .5) - - +media-lg - display: block - - -.navbar-container - align-items: center - display: flex - width: 100% - - .navbar-collapse - +media-xs - padding: 0 - width: 100% - max-height: initial // overrides bs, we don't have many items - - &.show-notifications - display: block - - li - display: none - &.nav-notifications - display: block - position: absolute - top: 7px - left: 0 - width: 100% - z-index: $z-index-base - - #notifications - padding: 0 10px - - -nav - &.navbar - border-radius: 0 - left: 0 - position: fixed - right: 0 - top: 0 - - -nav.navbar, -nav.sidebar - z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ - border: none - display: flex - align-items: center - background-color: $color-background-nav - - nav - margin-left: auto - margin-right: 0 - - .navbar-nav - margin-right: 0 - +media-xs - margin: 0 - width: 100% - - li - user-select: none - - a.navbar-item - align-items: center - color: $color-text-light-secondary - display: flex - height: $navbar-height - transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out - user-select: none - - +media-sm - padding-left: 10px - padding-right: 10px - - &:hover, &:focus - color: $color-text-light - background-color: initial - box-shadow: inset 0 -3px 0 $color-primary - - &:focus - box-shadow: inset 0 -3px 0 $color-primary - - &.active - color: $color-text-light - box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%) - - &:hover - box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%) - - .pi-angle-down - position: relative - left: 5px - - &.nav-item-sign-in - i - padding-right: 6px - font-size: 1.1em - - img.gravatar - border-radius: 999em - height: 32px - width: 32px - box-shadow: 1px 1px 0 rgba(black, .2) - position: relative - - - .special - width: 18px - height: 18px - border-radius: 999em - position: absolute - background-color: white - z-index: 2 - display: inline-block - top: 10px - left: 38px - font-size: 1.2em - box-shadow: 1px 1px 1px rgba(black, .2) - - &.subscriber - background-color: $color-success - color: white - font-size: .6em - - &.demo - background-color: $color-info - color: white - font-size: .6em - - &.none - color: $color-danger - - i - +position-center-translate - - .navbar-brand - +media-xs - padding-left: 10px - align-items: center - display: flex - color: white - padding: - top: 8px - left: 5px - right: 20px // overrides bootstrap - - &:hover - span.app-logo - transform: scale(1.1) - - span.app-logo - font-size: 1.2em - position: relative - top: 3px - transition: transform 150ms ease-in-out - - .dropdown - position: relative - min-width: 60px - - &:hover - background-color: rgba($color-background-nav, .4) - - &.open a - background-color: $color-background-nav - - span.fa-stack - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - - ul.dropdown-menu - padding: 0 - - li - a - background-color: rgba(white, .3) - text-shadow: none - height: initial - font: - family: $font-body - size: .9em - padding: 5px 15px 5px 5px - color: rgba($color-text, .8) - - &:hover - color: $color-primary - box-shadow: none - - &.subitem - font-size: .8em - padding-top: 0 - text-transform: initial - - i - width: 35px - text-align: center - - &.subscription-status - padding: - top: 10px - bottom: 10px - - transition: opacity 150ms ease-in-out - opacity: 1 - - &:hover - opacity: .8 - - a - text-transform: initial - - &.none a - color: $color-danger - &.subscriber a - color: $color-success - - &.demo a - color: $color-info - - span.info - display: block - - span.renew - display: block - color: $color-text-dark-primary - font-size: .9em - - - &.libraries - ul.dropdown-menu - background-color: lighten($color-background-nav, 5%) - color: white - left: 0 - right: auto - - small - padding-left: 5px - li - a - background-color: transparent - color: $color-text-light-primary - - &:hover - background-color: lighten($color-background-nav, 15%) - - &:last-child a - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - - &.disabled a - color: $color-text-dark-primary - cursor: default - - -nav.sidebar - ul li.nav-item-sign-in a.navbar-item - font-size: .8em - - -.navbar-backdrop-container - width: 100% - height: 100% - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - - img - display: none - position: fixed - width: 100% - align-self: flex-start - +media-md - display: block - +media-lg - display: block - - -.navbar-backdrop - z-index: 0 - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - - width: 100% - height: 100% - background: - size: 100% - position: 0 0 - repeat: no-repeat - color: transparent - image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg) - - filter: none - - &.project - display: none - +media-lg - display: block - left: -10px - width: 105% - &.blog - display: none - +media-lg - display: block - left: -10px - width: 105% - +media-md - display: block - left: -10px - width: 105% - - -.navbar-backdrop-overlay - position: absolute - top: 0 - left: 0 - width: 100% - height: $navbar-backdrop-height - background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%) - - -/* Global, we want all menus to look like this */ -ul.dropdown-menu - background-color: $color-background-light - border: none - box-shadow: 0 10px 25px rgba(black, .1) - user-select: none - - .divider - background-color: rgba(black, .1) - -nav .dropdown:hover ul.dropdown-menu - display: block - -.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu - margin-top: 0 - - -/* FOOTER */ -#footer-container - position: relative - background-color: $color-background - - .row - +media-xs - margin: 0 - -/* Footer Navigation */ -footer - font-size: .75em - padding: 0 0 10px 0 - a - color: $color-text-dark-primary - - &:hover - color: $color-primary - - ul.links - float: left - padding: 0 - margin: 0 - list-style-type: none - - li - padding: 0 15px 0 0 - margin: 0 - float: left - - #hop - display: flex - align-items: center - justify-content: center - visibility: hidden - position: fixed - right: 25px - bottom: 25px - z-index: 999 - cursor: pointer - opacity: 0 - background: $color-background-light - width: 32px - height: 32px - border-radius: 50% - color: $color-text-dark-secondary - font-size: 2em - box-shadow: 0 0 15px rgba(black, .2) - transform: scale(0.5) - transition: all 150ms ease-in-out - - &:hover - transform: scale(1.2) - background-color: $color-background-nav - - &.active - visibility: visible - opacity: 1 - transform: scale(1) - - -#footer-navigation - font-size: .85em - margin-bottom: 5px - color: lighten($color-text, 30%) - border-top: thick solid lighten($color-text, 60%) - padding: - top: 15px - bottom: 15px - - h4 - color: lighten($color-text, 8%) - margin-bottom: 10px - - a - color: $color-text-dark-primary - - ul - position: relative - margin: 0 - padding: 0 0 10px 0 - list-style-type: none - - li - position: relative - padding: 0 - margin: 0 - - a - color: lighten($color-text, 35%) - - &:hover - color: $color-primary - - .footer-links - i - font-size: 80% - position: absolute - left: -14px - top: 20% - - .special - padding: - top: 10px - bottom: 15px - font-size: .9em - border-left: thin solid darken($color-background, 20%) - - - img - max-width: 100% - opacity: .6 - - ul.footer-social - width: 100% - text-align:center - margin: 0 auto - display: flex - align-items: center - justify-content: space-around - - li - display: inline-block - padding: 30px 0 - - i - font-size: 3em - - -.btn-outline - background-color: transparent - border-width: 1px - transition: background-color .1s - - &:focus, &:active - box-shadow: none - -.btn-empty - background-color: transparent - border-color: transparent - - &:focus, &:active - box-shadow: none - - -.tooltip - transition: opacity 50ms ease-in-out - &.in - opacity: 1 - - .tooltip-inner - max-width: auto - white-space: nowrap - background-color: $color-background-nav-light - color: $color-text-light-primary - border-radius: 3px - - &.top .tooltip-arrow - border-top-color: $color-background-nav-light - &.bottom .tooltip-arrow - border-bottom-color: $color-background-nav-light - &.left .tooltip-arrow - border-left-color: $color-background-nav-light - &.right .tooltip-arrow - border-right-color: $color-background-nav-light - -.popover - background-color: lighten($color-background-nav, 5%) - border-radius: 3px - box-shadow: 1px 1px 2px rgba(black, .2) - border: thin solid lighten($color-background-nav, 10%) - - &.in - opacity: 1 - - .popover-title - background-color: lighten($color-background-nav, 10%) - border-bottom: thin solid lighten($color-background-nav, 3%) - color: $color-text-light-primary - font-family: $font-body - - .popover-content - color: $color-text-light - font-size: .9em - - &.top .arrow:after - border-top-color: lighten($color-background-nav, 5%) - &.bottom .arrow:after - border-bottom-color: lighten($color-background-nav, 5%) - &.left .arrow:after - border-left-color: lighten($color-background-nav, 5%) - &.right .arrow:after - border-right-color: lighten($color-background-nav, 5%) - -/* Inputs */ -input, input.form-control, -textarea, textarea.form-control, -select, select.form-control - +input-generic - -label, label.control-label - +label-generic - -select, select.form-control - border-top-left-radius: 3px - border-top-right-radius: 3px - background-color: $color-background-light - - option - background-color: white - -input.fileupload - background-color: transparent - display: block - margin-top: 10px - -textarea - resize: vertical - -button, .btn - +button($color-text-dark-secondary, $color-background, false) - - &-success - +button($color-success, $color-success, false) - &-warning - +button($color-warning, $color-warning, false) - &-danger - +button($color-danger, $color-danger, false) - &-info - +button($color-info, $color-info, false) - - - &.disabled - +button($color-background-dark, $color-background, false) - background-color: $color-background-light !important - border-color: $color-background-dark !important - color: $color-text !important - opacity: .5 !important - pointer-events: none !important - text-shadow: none !important - user-select: none !important - -.input-group-flex - display: flex - -.input-group-separator - margin: 10px 0 - border-top: thin solid $color-background - -/* File Upload forms */ -.fieldlist - list-style: none - padding: 0 - margin: 10px 0 0 0 - - li.fieldlist-item - background-color: $color-background-light - border: thin solid $color-background - border-left: 3px solid $color-primary - border-top-right-radius: 3px - border-bottom-right-radius: 3px - - margin-bottom: 10px - padding: 10px - +clearfix - - .form-group - margin-bottom: 0 !important // override bs - width: 100% - - input.form-control - background-color: white !important - padding: 0 10px !important - border: thin solid $color-background-dark !important - - div[class$="slug"] - width: 50% - float: left - display: flex - align-items: center - - label - margin-right: 10px - - .fieldlist-action-button - +button($color-success, 3px) - margin: 0 0 0 10px - padding: 5px 10px - text-transform: initial - -.form-upload-file - margin-bottom: 10px - display: flex - flex-direction: column - - .form-upload-progress - margin-top: 10px - - .form-upload-progress-bar - margin-top: 5px - background-color: $color-success - height: 5px - min-width: 0 - border-radius: 3px - - &.progress-uploading - background-color: hsl(hue($color-success), 80%, 65%) !important - - &.progress-processing - +stripes($color-success, lighten($color-success, 15%), -45deg, 25px) - +stripes-animate - animation-duration: 1s - - &.progress-error - background-color: $color-danger !important - - .preview-thumbnail - width: 50px - height: 50px - min-width: 50px - min-height: 50px - margin-right: 10px - margin-top: 5px - border-radius: 3px - background-color: $color-background - - .form-upload-file-meta-container - display: flex - - .form-upload-file-meta - list-style: none - padding: 0 - margin: 0 - width: 100% - display: flex - flex-wrap: wrap - flex: 1 - - li - display: inline-block - padding: 5px 10px - - &:first-child - padding-left: 0 - - &.dimensions, &.size - color: $color-text-dark-secondary - - &.delete - margin-left: auto - - &.name - +text-overflow-ellipsis - - .file_delete - color: $color-danger - - .form-upload-file-actions - list-style: none - padding: 0 - margin: 0 - display: flex - flex-wrap: wrap - - li - display: inline-block - padding: 5px 10px - - .file_delete - color: $color-danger - -.form-group - &.error - .form-control, input - border-color: $color-danger !important - - ul.error - padding: 5px 0 0 0 - margin: 0 - color: $color-danger - list-style-type: none - -.checkbox label label - padding-left: 0 - -.checkbox label input[type=checkbox] + label - transition: color 100ms ease-in-out - -.checkbox label input[type=checkbox]:checked + label - color: $color-success !important - - - -/* Flyouts (only used on notifications for now) */ -.flyout - background-color: $color-background - border-radius: 3px - border: thin solid darken($color-background, 3%) - box-shadow: 1px 2px 2px rgba(black, .2) - display: block - font-size: .9em - - & .flyout-title - cursor: default - display: block - float: left - font-size: 1.1em - font-weight: 600 - padding: 8px 10px 5px 10px - - &.notifications - max-height: 1000% - overflow-x: hidden - position: absolute - right: 0 - top: 60px - width: 420px - z-index: 9999 - - -/* Font aliases */ -.pi /* blank item with the right spacing */ - &:after - content: '' - font-family: "pillar-font" - font-style: normal - font-weight: normal - speak: none - display: inline-block - text-decoration: inherit - width: 1em - margin-right: .2em - text-align: center - font-variant: normal - text-transform: none - line-height: 1em - margin-left: .2em - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - position: relative - - &:before - position: relative - -.pi-license-cc-zero:before - content: '\e85a' -.pi-license-cc-sa:before - content: '\e858' -.pi-license-cc-nd:before - content: '\e859' -.pi-license-cc-nc:before - content: '\e857' - -.pi-license-cc-0 - @extend .pi-license-cc-zero - position: relative - top: 1px -.pi-license-cc-by-sa - @extend .pi-license-cc-sa -.pi-license-cc-by-nd - @extend .pi-license-cc-nd -.pi-license-cc-by-nc - @extend .pi-license-cc-nc - -.pi-license-cc-by-sa, -.pi-license-cc-by-nd, -.pi-license-cc-by-nc - @extend .pi - - &:after - content: '\e807' - left: -27px - - &:before - left: 27px - -#search-overlay - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - width: 100% - height: 100% - pointer-events: none - visibility: hidden - opacity: 0 - z-index: $z-index-base + 4 - transition: opacity 150ms ease-in-out - - &.active - opacity: 1 - visibility: visible - background-color: rgba($color-background-nav, .7) - -.search-input - +media-lg - max-width: 350px - +media-md - max-width: 350px - +media-sm - max-width: 120px - +media-xs - display: block - margin: 0 10px - position: absolute - z-index: $z-index-base - right: 5px - position: relative - float: left - padding: 0 - margin: 0 - - - .search-icon - position: absolute - color: white - top: 4px - left: 10px - cursor: pointer - - &:after - opacity: 0 - content: 'Use advanced search...' - font-style: normal - background: darken($color-background-nav, 5%) - color: $color-text-light-primary - box-shadow: 1px 1px 3px rgba(black, .4) - padding: 3px 10px - font-size: .85em - border-radius: 3px - top: 30px - left: -10px - width: 150px - position: absolute - transition: top 150ms ease-in-out, opacity 150ms ease-in-out - pointer-events: none - - &:hover - &:after - opacity: 1 - top: 35px - - - #cloud-search, .tt-hint - +text-overflow-ellipsis - border: thin solid $color-background-nav-light - border-radius: 3px - color: white - font: - size: 1em - weight: 400 - family: $font-body - margin: 0 - min-height: 32px - outline: none - padding: 0 20px 0 40px - transition: border 100ms ease-in-out - - &:focus - background-color: $color-background-nav-light - outline: none - - &::placeholder - color: rgba(white, .5) - transition: color 150ms ease-in-out - - &:hover - &::placeholder - color: rgba(white, .6) - -#page-overlay - background-color: rgba(black, .8) - position: fixed - top: 0 - bottom: 0 - right: 0 - left: 0 - z-index: $z-index-base + 15 - visibility: hidden - opacity: 0 - transition: opacity 150ms ease-in-out - - display: flex - align-items: center - justify-content: center - - img - user-select: none - display: block - max-height: 96% - max-width: 96% - z-index: 0 - - box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5) - p.caption - position: absolute - bottom: 1% - - &.active - visibility: visible - opacity: 1 - - .no-preview - user-select: none - z-index: 0 - color: $color-text-light-secondary - - .nav-prev, .nav-next - display: block - font: - family: 'pillar-font' - size: 2em - height: 80% - width: 50px - cursor: pointer - color: $color-text-light-secondary - z-index: 1 - +position-center-translate - - &:hover - color: $color-text-light - - &:before, &:after - +position-center-translate - - .nav-prev - left: 50px - &:before - content: '\e839' - - .nav-next - left: initial - right: 0 - &:before - content: '\e83a' - - - &.video - .video-embed - +position-center-translate - position: fixed - - iframe - width: 853px - height: 480px - -#status-bar - opacity: 0 - transition: all 250ms ease-in-out - - i - margin-right: 5px - - &.info - color: $color-info - &.error - color: $color-danger - &.warning - color: $color-warning - &.success - color: $color-success - &.default - color: $color-text-light - - &.active - opacity: 1 - -p.shortcode.nocap - padding: 0.6em 3em - font-size: .8em - color: $color-text-dark-primary - background-color: $color-background-dark - border-radius: 3px +@import components/base +@import components/alerts +@import components/navbar +@import components/dropdown +@import components/footer +@import components/shortcode +@import components/statusbar +@import components/search +@import components/flyout +@import components/forms +@import components/inputs +@import components/buttons +@import components/popover +@import components/tooltip +@import components/checkbox +@import components/overlay + +/* Top level, standalone stylesheets (not starting with _ so not meant for importing) + * should not have pure styling here. + * They should be imported as components/modules. + * e.g: @import _notifications + */ diff --git a/src/styles/blog.sass b/src/styles/blog.sass index 42970519..f18e665b 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -1,21 +1,96 @@ -@import _normalize +// Bootstrap variables and utilities. +@import "../../node_modules/bootstrap/scss/functions" +@import "../../node_modules/bootstrap/scss/variables" +@import "../../node_modules/bootstrap/scss/mixins" + @import _config @import _utils +// Bootstrap components. +@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" + +// Pillar components. +@import "apps_base" +@import "components/base" + +@import "components/jumbotron" +@import "components/alerts" +@import "components/navbar" +@import "components/dropdown" +@import "components/footer" +@import "components/shortcode" +@import "components/statusbar" +@import "components/search" +@import "components/flyout" +@import "components/forms" +@import "components/inputs" +@import "components/buttons" +@import "components/popover" +@import "components/tooltip" +@import "components/checkbox" +@import "components/overlay" +@import "components/card" + @import _comments @import _error @import _search -.container-fluid.blog - padding: 0 +@import components/base +@import components/alerts +@import components/navbar +@import components/footer +@import components/shortcode +@import components/statusbar +@import components/search +@import components/flyout +@import components/forms +@import components/inputs +@import components/buttons +@import components/popover +@import components/tooltip +@import components/checkbox +@import components/overlay #blog_container +media-xs flex-direction: column padding-top: 0 - display: flex - padding: - bottom: 15px video max-width: 100% @@ -26,7 +101,6 @@ .form-group position: relative margin: 0 auto 30px auto - font-family: $font-body input, textarea, select +input-generic @@ -167,6 +241,56 @@ #blog_post-edit-container padding: 25px +.blog_index-item + .item-picture + position: relative + width: 100% + max-height: 350px + min-height: 200px + height: auto + overflow: hidden + border-top-left-radius: 3px + border-top-right-radius: 3px + +clearfix + + img + +position-center-translate + width: 100% + border-top-left-radius: 3px + border-top-right-radius: 3px + + +media-xs + min-height: 150px + +media-sm + min-height: 150px + +media-md + min-height: 250px + +media-lg + min-height: 250px + + .item-content + +node-details-description + + +media-xs + padding: + left: 0 + right: 0 + + img + display: block + margin: 0 auto + + .item-meta + color: $color-text-dark-secondary + padding: + left: 25px + right: 25px + + +media-xs + padding: + left: 10px + right: 10px + #blog_index-container, #blog_post-create-container, #blog_post-edit-container @@ -185,133 +309,11 @@ +media-lg width: 100% - .blog_index-header - border-top-left-radius: 3px - border-top-right-radius: 3px - display: block - overflow: hidden - position: relative - text-align: center - width: 100% - - img - width: 100% - - .blog_index-item - +media-lg - max-width: 780px - +media-md - max-width: 780px - +media-sm - max-width: 780px - - margin: 15px auto - - &:hover - .item-info a - color: $color-primary - - .item-picture - position: relative - width: 100% - max-height: 350px - min-height: 200px - height: auto - overflow: hidden - border-top-left-radius: 3px - border-top-right-radius: 3px - +clearfix - - img - +position-center-translate - width: 100% - border-top-left-radius: 3px - border-top-right-radius: 3px - - +media-xs - min-height: 150px - +media-sm - min-height: 150px - +media-md - min-height: 250px - +media-lg - min-height: 250px - - .item-title - color: $color-text-dark - display: block - font: - family: $font-body - size: 1.8em - - padding: 10px 25px 10px - - ul.meta - +list-meta - font-size: .9em - padding: 0px 25px 5px - - .item-content - +node-details-description - font-size: 1.3em - padding: 15px 25px 25px - - +media-xs - padding: - left: 0 - right: 0 - - img - display: block - margin: 0 auto - - .item-meta - color: $color-text-dark-secondary - padding: - left: 25px - right: 25px - - +media-xs - padding: - left: 10px - right: 10px - - .button-create, - .button-edit - +button($color-success, 3px, true) .item-picture+.button-back+.button-edit right: 20px top: 20px - .comments-container - padding: - left: 20px - right: 20px - max-width: 680px - margin: 0 auto - - +media-lg - padding: - left: 0 - right: 0 - - .comment-reply-container - background-color: transparent - - .comment-reply-field - textarea, .comment-reply-meta - background-color: $color-background-light - - &.filled - .comment-reply-meta - background-color: $color-success - - .comment-reply-form - +media-xs - padding: - left: 0 - #blog_post-edit-form padding: 0 @@ -371,12 +373,6 @@ +media-lg width: 25% - .button-create - display: block - width: 100% - +button($color-success, 6px) - margin: 0 - .button-back +button($color-info, 6px, true) display: block @@ -475,105 +471,6 @@ text-decoration: none color: $color-primary - -#blog_container - &.cloud-blog - #blog_index-container, - #blog_post-create-container, - #blog_post-edit-container - width: 100% - padding: 25px 30px 20px 30px - - #blog_index-container+#blog_index-sidebar - display: none - - #blog_index-container, - &.cloud-blog #blog_index-container - +media-sm - width: 100% - - +media-xs - width: 100% - - padding: 0 0 50px 0 - margin: 0 auto - - .blog_index-item - +media-xs - width: 100% - padding: 10px 25px - - &.list - margin: 0 auto - padding: 15px 0 - margin: 0 auto - border-bottom: thin solid $color-background - - &:last-child - border-bottom: none - - +media-xs - width: 100% - padding: 15px 10px - margin: 0 - - a.item-title - padding: - top: 0 - bottom: 5px - font: - size: 1.6em - weight: 400 - family: $font-body - - .item-info - color: $color-text-dark-secondary - font-size: .9em - padding: - left: 25px - right: 25px - - .item-header - width: 50px - height: 50px - position: absolute - top: 20px - border-radius: 3px - background-color: $color-background - overflow: hidden - - img - +position-center-translate - width: 100% - - i - +position-center-translate - font-size: 1.2em - color: $color-text-dark-hint - - &.nothumb - border-radius: 50% - - a.item-title, .item-info - padding-left: 70px - -#blog_index-container - .blog_index-item - position: relative - - +media-xs - padding: 25px 0 20px 0 - - &.list - padding: 15px 10px - margin: 0 - - +media-xs - width: 100% - padding: 15px 10px - margin: 0 - - .blog-archive-navigation +media-xs font-size: 1em @@ -603,16 +500,7 @@ color: $color-text-dark-secondary pointer-events: none -.blog-action - display: flex - padding: 10px - position: absolute - right: 0 - top: 0 - z-index: 1 - - -// Specific tweaks for blogs in the context of a project +// Specific tweaks for blogs in the context of a project. #project_context .blog_index-item +media-xs @@ -637,3 +525,29 @@ .blog-archive-navigation margin-left: 35px + +// Used on the blog. +.comments-compact + .comments-list + border: none + padding: 0 0 15px 0 + + .comments-container + max-width: 680px + margin: 0 auto + + .comment-reply-container + background-color: transparent + + .comment-reply-field + textarea, .comment-reply-meta + background-color: $color-background-light + + &.filled + .comment-reply-meta + background-color: $color-success + + .comment-reply-form + +media-xs + padding: + left: 0 diff --git a/src/styles/components/_alerts.sass b/src/styles/components/_alerts.sass new file mode 100644 index 00000000..2877b4e9 --- /dev/null +++ b/src/styles/components/_alerts.sass @@ -0,0 +1,72 @@ +.alert + margin-bottom: 0 + text-align: center + padding: 10px 20px + z-index: 16 + + // overriden by alert types + color: $color-text-dark + background-color: $color-background + + &.alert-danger, + &.alert-error + background-color: lighten($color-danger, 35%) + color: $color-danger + .alert-icon, .close + color: $color-danger + + &.alert-warning + background-color: lighten($color-warning, 20%) + color: darken($color-warning, 20%) + .alert-icon, .close + color: darken($color-warning, 20%) + + &.alert-success + background-color: lighten($color-success, 45%) + color: $color-success + + .alert-icon, .close + color: $color-success + + &.alert-info + background-color: lighten($color-info, 30%) + color: darken($color-info, 10%) + .alert-icon, .close + color: darken($color-info, 10%) + + button.close + position: absolute + right: 10px + + i + font-size: .8em + + i.alert-icon + &:before + font-family: "pillar-font" + padding-right: 10px + + &.success:before + content: '\e801' + &.info:before + content: "\e80c" + &.warning:before + content: "\e80b" + &.danger:before, + &.error:before + content: "\e83d" + + +/* When there's an alert, disable the fixed top */ +.alert+.navbar-fixed-top + position: relative + margin-bottom: 0 + + &+.container + padding-top: 0 + +.alert+.navbar + position: relative + +.alert+.navbar+.page-content + padding-top: 0 diff --git a/src/styles/components/_base.sass b/src/styles/components/_base.sass new file mode 100644 index 00000000..b4a8fa0c --- /dev/null +++ b/src/styles/components/_base.sass @@ -0,0 +1,29 @@ +body + height: 100% + + +media-sm + width: 100% + max-width: 100% + min-width: auto + + +media-xs + width: 100% + max-width: 100% + min-width: auto + +.container + +media-xs + max-width: 100% + min-width: auto + padding: + left: 0 + right: 0 + + &.box + +container-box + +.page-content + background-color: $white + +.container-box + +container-box diff --git a/src/styles/components/_buttons.sass b/src/styles/components/_buttons.sass new file mode 100644 index 00000000..ff0e0163 --- /dev/null +++ b/src/styles/components/_buttons.sass @@ -0,0 +1,14 @@ +.btn-outline + background-color: transparent + border-width: 1px + transition: background-color .1s + + &:focus, &:active + box-shadow: none + +.btn-empty + background-color: transparent + border-color: transparent + + &:focus, &:active + box-shadow: none diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass new file mode 100644 index 00000000..d13003b7 --- /dev/null +++ b/src/styles/components/_card.sass @@ -0,0 +1,23 @@ +.card-deck + // Custom, as of bootstrap 4.1.3 there is no way to do this. + &.card-3-columns + .card + min-width: 30% + max-width: 30% + + +.card-padless + .card + border: none + + .card-body + padding: 15px 0 + +.card-fade + img + opacity: .8 + transition: opacity ease-in-out 150ms + + &:hover + img + opacity: 1 diff --git a/src/styles/components/_checkbox.sass b/src/styles/components/_checkbox.sass new file mode 100644 index 00000000..13d66285 --- /dev/null +++ b/src/styles/components/_checkbox.sass @@ -0,0 +1,8 @@ +.checkbox label label + padding-left: 0 + +.checkbox label input[type=checkbox] + label + transition: color 100ms ease-in-out + +.checkbox label input[type=checkbox]:checked + label + color: $color-success !important diff --git a/src/styles/components/_dropdown.sass b/src/styles/components/_dropdown.sass new file mode 100644 index 00000000..f03e38df --- /dev/null +++ b/src/styles/components/_dropdown.sass @@ -0,0 +1,13 @@ +// Global, we want all menus to look like this. +.dropdown-menu + box-shadow: $dropdown-box-shadow + top: 95% // So there is less gap between the dropdown and the item. + + > li + > a + padding: $dropdown-item-padding-y + +// Open dropdown on mouse hover dropdowns in the navbar. +nav .dropdown:hover + ul.dropdown-menu + display: block diff --git a/src/styles/components/_flyout.sass b/src/styles/components/_flyout.sass new file mode 100644 index 00000000..4e527916 --- /dev/null +++ b/src/styles/components/_flyout.sass @@ -0,0 +1,25 @@ +/* Flyouts (only used on notifications for now) */ +.flyout + background-color: $color-background + border-radius: 3px + border: thin solid darken($color-background, 3%) + box-shadow: 1px 2px 2px rgba(black, .2) + display: block + font-size: .9em + + & .flyout-title + cursor: default + display: block + float: left + font-size: 1.1em + font-weight: 600 + padding: 8px 10px 5px 10px + + &.notifications + max-height: 1000% + overflow-x: hidden + position: absolute + right: 0 + top: 60px + width: 420px + z-index: 9999 diff --git a/src/styles/components/_footer.sass b/src/styles/components/_footer.sass new file mode 100644 index 00000000..46c2b510 --- /dev/null +++ b/src/styles/components/_footer.sass @@ -0,0 +1,117 @@ +/* FOOTER */ +.footer-wrapper + background-color: $color-background + position: relative + + &:after + background-color: $color-background + bottom: 0 + content: '' + position: fixed + left: 0 + right: 0 + top: 0 + pointer-events: none + z-index: -1 + +/* Footer Navigation */ +footer + font-size: .75em + padding: 0 0 10px 0 + + a + color: $color-text-dark-primary + + &:hover + color: $color-primary + + ul.links + float: left + padding: 0 + margin: 0 + list-style-type: none + + li + padding: 0 15px 0 0 + margin: 0 + float: left + +#hop + display: flex + align-items: center + justify-content: center + visibility: hidden + position: fixed + right: 25px + bottom: 25px + z-index: 999 + cursor: pointer + opacity: 0 + background: $color-background-light + width: 32px + height: 32px + border-radius: 50% + color: $color-text-dark-secondary + font-size: 2em + box-shadow: 0 0 15px rgba(black, .2) + transform: scale(0.5) + transition: all 150ms ease-in-out + + &:hover + transform: scale(1.2) + background-color: $color-background-nav + + &.active + visibility: visible + opacity: 1 + transform: scale(1) + + +.footer-navigation + font-size: .85em + margin-bottom: 5px + color: lighten($color-text, 30%) + border-top: thick solid lighten($color-text, 60%) + padding: + top: 15px + bottom: 15px + + a + color: lighten($color-text, 35%) + + &:hover + color: $color-primary + + .footer-links + i + font-size: 80% + position: absolute + left: -14px + top: 20% + + .special + padding: + top: 10px + bottom: 15px + font-size: .9em + border-left: thin solid darken($color-background, 20%) + + + img + max-width: 100% + opacity: .6 + + ul.footer-social + width: 100% + text-align:center + margin: 0 auto + display: flex + align-items: center + justify-content: space-around + + li + display: inline-block + padding: 30px 0 + + i + font-size: 3em diff --git a/src/styles/components/_forms.sass b/src/styles/components/_forms.sass new file mode 100644 index 00000000..60b4b059 --- /dev/null +++ b/src/styles/components/_forms.sass @@ -0,0 +1,132 @@ +/* File Upload forms */ +.fieldlist + list-style: none + padding: 0 + margin: 10px 0 0 0 + + li.fieldlist-item + background-color: $color-background-light + border: thin solid $color-background + border-left: 3px solid $color-primary + border-top-right-radius: 3px + border-bottom-right-radius: 3px + + margin-bottom: 10px + padding: 10px + +clearfix + + .form-group + margin-bottom: 0 !important // override bs + width: 100% + + input.form-control + background-color: white !important + padding: 0 10px !important + border: thin solid $color-background-dark !important + + div[class$="slug"] + width: 50% + float: left + display: flex + align-items: center + + label + margin-right: 10px + + .fieldlist-action-button + +button($color-success, 3px) + margin: 0 0 0 10px + padding: 5px 10px + text-transform: initial + +.form-upload-file + margin-bottom: 10px + display: flex + flex-direction: column + + .form-upload-progress + margin-top: 10px + + .form-upload-progress-bar + margin-top: 5px + background-color: $color-success + height: 5px + min-width: 0 + border-radius: 3px + + &.progress-uploading + background-color: hsl(hue($color-success), 80%, 65%) !important + + &.progress-processing + +stripes($color-success, lighten($color-success, 15%), -45deg, 25px) + +stripes-animate + animation-duration: 1s + + &.progress-error + background-color: $color-danger !important + + .preview-thumbnail + width: 50px + height: 50px + min-width: 50px + min-height: 50px + margin-right: 10px + margin-top: 5px + border-radius: 3px + background-color: $color-background + + .form-upload-file-meta-container + display: flex + + .form-upload-file-meta + list-style: none + padding: 0 + margin: 0 + width: 100% + display: flex + flex-wrap: wrap + flex: 1 + + li + display: inline-block + padding: 5px 10px + + &:first-child + padding-left: 0 + + &.dimensions, &.size + color: $color-text-dark-secondary + + &.delete + margin-left: auto + + &.name + +text-overflow-ellipsis + + .file_delete + color: $color-danger + + .form-upload-file-actions + list-style: none + padding: 0 + margin: 0 + display: flex + flex-wrap: wrap + + li + display: inline-block + padding: 5px 10px + + .file_delete + color: $color-danger + +.form-group + &.error + .form-control, input + border-color: $color-danger !important + + ul.error + padding: 5px 0 0 0 + margin: 0 + color: $color-danger + list-style-type: none diff --git a/src/styles/components/_inputs.sass b/src/styles/components/_inputs.sass new file mode 100644 index 00000000..2690a549 --- /dev/null +++ b/src/styles/components/_inputs.sass @@ -0,0 +1,38 @@ +/* Inputs */ +input, input.form-control, +textarea, textarea.form-control, +select, select.form-control + +input-generic + +label, label.control-label + +label-generic + +select, select.form-control + border-top-left-radius: 3px + border-top-right-radius: 3px + background-color: $color-background-light + + option + background-color: white + +input.fileupload + background-color: transparent + display: block + margin-top: 10px + +textarea + resize: vertical + +button, .btn + &.disabled + opacity: .5 !important + pointer-events: none !important + text-shadow: none !important + user-select: none !important + +.input-group-flex + display: flex + +.input-group-separator + margin: 10px 0 + border-top: thin solid $color-background diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass new file mode 100644 index 00000000..88dd15ac --- /dev/null +++ b/src/styles/components/_jumbotron.sass @@ -0,0 +1,28 @@ +// Mainly overrides bootstrap jumbotron settings +.jumbotron + background-size: cover + border-radius: 0 + padding-top: 10em + padding-bottom: 10em + + // Black-transparent gradient from left to right to better read the overlay text. + &.jumbotron-overlay + position: relative + + &:after + background-image: linear-gradient(45deg, rgba(black, .5) 25%, transparent 50%) + bottom: 0 + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + + * + z-index: 1 + + h2, p + text-shadow: 1px 1px rgba(black, .2), 1px 1px 25px rgba(black, .5) + + &:hover + text-decoration: none diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass new file mode 100644 index 00000000..a339ccf9 --- /dev/null +++ b/src/styles/components/_navbar.sass @@ -0,0 +1,201 @@ +// Navigation. + +.navbar + box-shadow: inset 0 -2px $color-background + +.navbar, +nav.sidebar + border: none + color: $color-text-dark-secondary + padding: 0 + z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ + + nav + margin-left: auto + margin-right: 0 + + .navbar-nav + margin-right: 0 + +media-xs + margin: 0 + width: 100% + + .navbar-item + align-items: center + display: flex + user-select: none + color: inherit + + +media-sm + padding-left: 10px + padding-right: 10px + + &:hover, &:focus + color: $primary + background-color: transparent + box-shadow: inset 0 -3px 0 $primary + text-decoration: none + + &:focus + box-shadow: inset 0 -3px 0 $primary + + &.active + color: $primary + box-shadow: inset 0 -3px 0 $primary + + li + user-select: none + position: relative + + img.gravatar + border-radius: 999em + height: 32px + width: 32px + box-shadow: 1px 1px 0 rgba(black, .2) + position: relative + + .special + width: 18px + height: 18px + border-radius: 999em + position: absolute + background-color: white + z-index: 2 + display: inline-block + top: 10px + left: 38px + font-size: 1.2em + box-shadow: 1px 1px 1px rgba(black, .2) + + &.subscriber + background-color: $color-success + color: white + font-size: .6em + + &.demo + background-color: $color-info + color: white + font-size: .6em + + &.none + color: $color-danger + + i + +position-center-translate + + .dropdown + min-width: 60px // navbar avatar size + + span.fa-stack + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + + ul.dropdown-menu + li + a + white-space: nowrap + + &:hover + box-shadow: none // removes underline + + &.subitem // e.g. "Not Sintel? Log out" + font-size: .8em + padding-top: 0 + text-transform: initial + + i + width: 30px + + &.subscription-status + &.none a + color: $color-danger + + &.subscriber a + color: $color-success + + &.demo a + color: $color-info + + span.info + display: block + + span.renew + display: block + color: $color-text-dark-primary + font-size: .9em + + +// Secondary navigation for +.nav-secondary + align-items: center + box-shadow: inset 0 -2px 0 0 $color-background + + .nav-link + color: $color-text + cursor: pointer + transition: box-shadow 150ms ease-in-out + + &:hover, + &.active + box-shadow: inset 0 -2px 0 0 $primary + + +.navbar-overlay + +media-lg + display: block + bottom: 0 + display: none + left: 0 + height: 100% + position: absolute + right: 0 + top: 0 + transition: background-color 350ms ease-in-out + width: 100% + z-index: 0 + + &.is-active + background-color: $color-background-nav + text-shadow: none + +.navbar-brand + color: inherit + padding-left: 4px + + &:hover + color: $primary + +nav.navbar + .navbar-collapse + > ul > li > .navbar-item + padding: $navbar-nav-link-padding-x + height: $nav-link-height + + +.navbar-backdrop-container + width: 100% + height: 100% + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + + img + display: none + position: fixed + width: 100% + align-self: flex-start + +media-md + display: block + +media-lg + display: block + + +.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu + margin-top: 0 + +.navbar+.page-content + padding-top: $nav-link-height diff --git a/src/styles/components/_overlay.sass b/src/styles/components/_overlay.sass new file mode 100644 index 00000000..32d9e29d --- /dev/null +++ b/src/styles/components/_overlay.sass @@ -0,0 +1,75 @@ +#page-overlay + background-color: rgba(black, .8) + position: fixed + top: 0 + bottom: 0 + right: 0 + left: 0 + z-index: $z-index-base + 15 + visibility: hidden + opacity: 0 + transition: opacity 150ms ease-in-out + + display: flex + align-items: center + justify-content: center + + img + user-select: none + display: block + max-height: 96% + max-width: 96% + z-index: 0 + + box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5) + p.caption + position: absolute + bottom: 1% + + &.active + visibility: visible + opacity: 1 + + .no-preview + user-select: none + z-index: 0 + color: $color-text-light-secondary + + .nav-prev, .nav-next + display: block + font: + family: 'pillar-font' + size: 2em + height: 80% + width: 50px + cursor: pointer + color: $color-text-light-secondary + z-index: 1 + +position-center-translate + + &:hover + color: $color-text-light + + &:before, &:after + +position-center-translate + + .nav-prev + left: 50px + &:before + content: '\e839' + + .nav-next + left: initial + right: 0 + &:before + content: '\e83a' + + + &.video + .video-embed + +position-center-translate + position: fixed + + iframe + width: 853px + height: 480px diff --git a/src/styles/components/_popover.sass b/src/styles/components/_popover.sass new file mode 100644 index 00000000..5e6ab300 --- /dev/null +++ b/src/styles/components/_popover.sass @@ -0,0 +1,26 @@ +.popover + background-color: lighten($color-background-nav, 5%) + border-radius: 3px + box-shadow: 1px 1px 2px rgba(black, .2) + border: thin solid lighten($color-background-nav, 10%) + + &.in + opacity: 1 + + .popover-title + background-color: lighten($color-background-nav, 10%) + border-bottom: thin solid lighten($color-background-nav, 3%) + color: $color-text-light-primary + + .popover-content + color: $color-text-light + font-size: .9em + + &.top .arrow:after + border-top-color: lighten($color-background-nav, 5%) + &.bottom .arrow:after + border-bottom-color: lighten($color-background-nav, 5%) + &.left .arrow:after + border-left-color: lighten($color-background-nav, 5%) + &.right .arrow:after + border-right-color: lighten($color-background-nav, 5%) diff --git a/src/styles/components/_search.sass b/src/styles/components/_search.sass new file mode 100644 index 00000000..62470e6f --- /dev/null +++ b/src/styles/components/_search.sass @@ -0,0 +1,87 @@ +#search-overlay + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + width: 100% + height: 100% + pointer-events: none + visibility: hidden + opacity: 0 + z-index: $z-index-base + 4 + transition: opacity 150ms ease-in-out + + &.active + opacity: 1 + visibility: visible + background-color: rgba($color-background-nav, .7) + +.search-input + +media-lg + max-width: 350px + +media-md + max-width: 350px + +media-sm + max-width: 120px + +media-xs + display: block + margin: 0 10px + position: absolute + z-index: $z-index-base + right: 5px + position: relative + float: left + padding: 0 + margin: 0 + + .search-icon + position: absolute + top: 4px + left: 10px + cursor: pointer + + &:after + @extend .tooltip-inner + + content: 'Use advanced search...' + font-size: .85em + font-style: normal + left: -10px + opacity: 0 + pointer-events: none + position: absolute + top: 30px + transition: top 150ms ease-in-out, opacity 150ms ease-in-out + width: 150px + + &:hover + &:after + opacity: 1 + top: 35px + + + #cloud-search, .tt-hint + +text-overflow-ellipsis + border: thin solid $color-background + border-radius: 3px + font: + size: 1em + weight: 400 + margin: 0 + min-height: 32px + outline: none + padding: 0 20px 0 40px + transition: border 100ms ease-in-out + + &:focus + box-shadow: none + border: none + + &::placeholder + color: rgba($color-text, .5) + transition: color 150ms ease-in-out + + &:hover + &::placeholder + color: rgba($color-text, .6) diff --git a/src/styles/components/_shortcode.sass b/src/styles/components/_shortcode.sass new file mode 100644 index 00000000..aa807f24 --- /dev/null +++ b/src/styles/components/_shortcode.sass @@ -0,0 +1,6 @@ +p.shortcode.nocap + padding: 0.6em 3em + font-size: .8em + color: $color-text-dark-primary + background-color: $color-background-dark + border-radius: 3px diff --git a/src/styles/components/_statusbar.sass b/src/styles/components/_statusbar.sass new file mode 100644 index 00000000..02d872d9 --- /dev/null +++ b/src/styles/components/_statusbar.sass @@ -0,0 +1,21 @@ +#status-bar + opacity: 0 + transition: all 250ms ease-in-out + + i + margin-right: 5px + + &.info + color: $color-info + &.error + color: $color-danger + &.warning + color: $color-warning + &.success + color: $color-success + &.default + color: $color-text-light + + &.active + opacity: 1 + diff --git a/src/styles/components/_tooltip.sass b/src/styles/components/_tooltip.sass new file mode 100644 index 00000000..8a501463 --- /dev/null +++ b/src/styles/components/_tooltip.sass @@ -0,0 +1,5 @@ +.tooltip + transition: none + + .tooltip-inner + white-space: nowrap diff --git a/src/styles/font-pillar.sass b/src/styles/font-pillar.sass index 905d5410..e17a8309 100644 --- a/src/styles/font-pillar.sass +++ b/src/styles/font-pillar.sass @@ -1,6 +1,71 @@ -/* So it's possible to override the path before importing font-pillar.sass */ +/* SCROLL TO READ ABOUT UPDATING THIS FILE FROM FONTELLO */ + +/* Makes it possible to override the path before importing font-pillar.sass */ $pillar-font-path: "../font" !default +/* Font aliases */ +.pi /* blank item with the right spacing */ + &:after + content: '' + font-family: "pillar-font" + font-style: normal + font-weight: normal + speak: none + display: inline-block + text-decoration: inherit + width: 1em + margin-right: .2em + text-align: center + font-variant: normal + text-transform: none + line-height: 1em + margin-left: .2em + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + position: relative + + &:before + position: relative + +.pi-license-cc-zero:before + content: '\e85a' +.pi-license-cc-sa:before + content: '\e858' +.pi-license-cc-nd:before + content: '\e859' +.pi-license-cc-nc:before + content: '\e857' + +.pi-license-cc-0 + @extend .pi-license-cc-zero + position: relative + top: 1px +.pi-license-cc-by-sa + @extend .pi-license-cc-sa +.pi-license-cc-by-nd + @extend .pi-license-cc-nd +.pi-license-cc-by-nc + @extend .pi-license-cc-nc + +.pi-license-cc-by-sa, +.pi-license-cc-by-nd, +.pi-license-cc-by-nc + @extend .pi + + &:after + content: '\e807' + left: -27px + + &:before + left: 27px + +/* + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Here begins the CSS code generated by fontello.com, converted to * + * Sass and replaced the path with our variable $pillar-font-path. * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + */ + @font-face font-family: 'pillar-font' src: url('#{$pillar-font-path}/pillar-font.woff?55726379') format("woff"), url('#{$pillar-font-path}/pillar-font.woff2?55726379') format("woff2") diff --git a/src/styles/main.sass b/src/styles/main.sass index 060b8dab..aa02c044 100644 --- a/src/styles/main.sass +++ b/src/styles/main.sass @@ -1,15 +1,84 @@ -@import _normalize +// Bootstrap variables and utilities. +@import "../../node_modules/bootstrap/scss/functions" +@import "../../node_modules/bootstrap/scss/variables" +@import "../../node_modules/bootstrap/scss/mixins" + @import _config @import _utils +// Bootstrap components. +@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" + +// Pillar components. +@import "apps_base" +@import "components/base" + +@import "components/jumbotron" +@import "components/alerts" +@import "components/navbar" +@import "components/dropdown" +@import "components/footer" +@import "components/shortcode" +@import "components/statusbar" +@import "components/search" + +@import "components/flyout" +@import "components/forms" +@import "components/inputs" +@import "components/buttons" +@import "components/popover" +@import "components/tooltip" +@import "components/checkbox" +@import "components/overlay" +@import "components/card" + + /* Generic styles (comments, notifications, etc) come from base.css */ +@import _notifications +@import _comments @import _project @import _project-sharing @import _project-dashboard @import _user -@import _search @import _organizations +@import _search /* services, about, etc */ @import _pages diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass index b485e69b..133f2c6d 100644 --- a/src/styles/plugins/_jstree.sass +++ b/src/styles/plugins/_jstree.sass @@ -1,9 +1,8 @@ /* jsTree overrides */ - $tree-color-text: $color-text-dark-primary -$tree-color-highlight: hsl(hue($color-background-active), 40%, 50%) -$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%) -$tree-color-highlight-background-text: white +$tree-color-highlight: $color-primary-accent +$tree-color-highlight-background: $white +$tree-color-highlight-background-text: $primary .jstree-default /* list item */ @@ -63,49 +62,48 @@ $tree-color-highlight-background-text: white &.jstree-open /* Text of children for an open tree (like a folder) */ .jstree-children > .jstree-node - padding-left: 15px !important + padding-left: 16px !important .jstree-icon:empty left: 20px !important // Tweaks for specific icons &.pi-file-archive - left: 22px !important + left: 25px !important &.pi-folder - left: 21px !important + left: 20px !important font-size: .9em !important - &.pi-film-thick - left: 22px !important + &.pi-splay + left: 20px !important font-size: .85em !important .jstree-anchor - box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2) + // box-shadow: inset 1px 0 0 0 $color-background /* Closed Folder */ // &.jstree-closed &.jstree-open .jstree-icon.jstree-ocl, &.jstree-closed .jstree-icon.jstree-ocl + float: left + min-width: 30px + opacity: 0 position: absolute z-index: 1 - opacity: 0 - min-width: 30px - float: left /* The text of the last level item */ .jstree-anchor +media-xs - width: 98% padding: 0 !important + width: 98% border: none + font-size: 13px height: inherit - line-height: 26px + line-height: 24px overflow: hidden padding-left: 28px padding-right: 10px text-overflow: ellipsis - transition: none - transition: color 50ms ease-in-out, background-color 100ms ease-in-out white-space: nowrap width: 100% @@ -113,7 +111,7 @@ $tree-color-highlight-background-text: white &:after content: '\e83a' !important font-family: 'pillar-font' - color: white + color: $tree-color-highlight-background-text display: none position: absolute right: 7px @@ -121,31 +119,31 @@ $tree-color-highlight-background-text: white // Icon, not selected .jstree-icon - color: $color-text-dark-secondary - font-size: 95% !important + color: $tree-color-text margin: 0 !important /* Selected item */ &.jstree-clicked background-color: $tree-color-highlight-background !important - color: white !important + color: $tree-color-highlight-background-text !important + font-weight: bold &:after display: block - color: white !important + color: $tree-color-highlight-background-text !important .jstree-ocl, .jstree-icon - color: white + color: $tree-color-highlight-background-text /* hover an active item */ &.jstree-hovered background-color: lighten($tree-color-highlight-background, 10%) !important box-shadow: none - color: white !important + color: $tree-color-highlight-background-text !important &.jstree-hovered .jstree-icon - color: white !important + color: $tree-color-highlight-background-text !important .jstree-hovered background-color: rgba($tree-color-highlight, .1) !important @@ -184,8 +182,8 @@ $tree-color-highlight-background-text: white position: absolute &:empty - line-height: 26px - left: 5px + line-height: 24px + left: 3px &.is_subscriber .jstree-node @@ -269,7 +267,7 @@ $tree-color-highlight-background-text: white .jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl + .jstree-anchor, .jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl + .jstree-anchor - padding-left: 28px !important + padding-left: 24px !important /* hovered text */ .jstree-default .jstree-hovered, @@ -280,11 +278,11 @@ $tree-color-highlight-background-text: white a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked background-color: rgba($tree-color-highlight-background, .8) !important - color: white !important + color: $tree-color-highlight-background-text !important a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked background-color: rgba($tree-color-highlight-background, .8) !important - color: white !important + color: $tree-color-highlight-background-text !important i.jstree-icon.jstree-ocl color: rgba($tree-color-text, .5) !important diff --git a/src/styles/plugins/_videoplayer.sass b/src/styles/plugins/_videoplayer.sass index d1a25058..94a7e82f 100644 --- a/src/styles/plugins/_videoplayer.sass +++ b/src/styles/plugins/_videoplayer.sass @@ -1,5 +1,5 @@ $videoplayer-controls-color: white -$videoplayer-background-color: $color-background-nav +$videoplayer-background-color: $black .video-js .vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog diff --git a/src/styles/project-main.sass b/src/styles/project-main.sass index 7854143b..8cacdd06 100644 --- a/src/styles/project-main.sass +++ b/src/styles/project-main.sass @@ -1,8 +1,76 @@ -@import _normalize +// Bootstrap variables and utilities. +@import "../../node_modules/bootstrap/scss/functions" +@import "../../node_modules/bootstrap/scss/variables" +@import "../../node_modules/bootstrap/scss/mixins" + @import _config @import _utils +// Bootstrap components. +@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" + +// Pillar components. +@import "apps_base" +@import "components/base" + +@import "components/jumbotron" +@import "components/alerts" +@import "components/navbar" +@import "components/dropdown" +@import "components/footer" +@import "components/shortcode" +@import "components/statusbar" +@import "components/search" + +@import "components/flyout" +@import "components/forms" +@import "components/inputs" +@import "components/buttons" +@import "components/popover" +@import "components/tooltip" +@import "components/checkbox" +@import "components/overlay" +@import "components/card" + +@import _notifications @import _comments + @import _project @import _project-sharing @import _project-dashboard diff --git a/src/styles/theatre.sass b/src/styles/theatre.sass index 10b95e22..371af62e 100644 --- a/src/styles/theatre.sass +++ b/src/styles/theatre.sass @@ -7,8 +7,7 @@ $color-theatre-background-dark: darken($color-theatre-background, 5%) $theatre-width: 350px -body.theatre, -body.theatre .container-page +body.theatre background-color: $color-theatre-background nav.navbar +media-lg @@ -26,6 +25,7 @@ body.theatre .container-page display: flex align-items: center justify-content: center + .page-body height: 100% width: 100% diff --git a/src/templates/_macros/_add_new_menu.pug b/src/templates/_macros/_add_new_menu.pug index 3e02de91..96d3bb6e 100644 --- a/src/templates/_macros/_add_new_menu.pug +++ b/src/templates/_macros/_add_new_menu.pug @@ -6,20 +6,21 @@ | {% if node_type_name == 'group' %} | {% set node_type_name = 'folder' %} | {% endif %} -li(class="button-{{ node_type['name'] }}") +li.dropdown-item(class="button-{{ node_type['name'] }}") a.item_add_node( - href="#", - title="{{ node_type['description'] }}", - data-node-type-name="{{ node_type['name'] }}", - data-toggle="tooltip", - data-placement="left") + href="#", + title="{{ node_type['description'] }}", + data-node-type-name="{{ node_type['name'] }}", + data-toggle="tooltip", + data-placement="left") i.pi(class="icon-{{ node_type['name'] }}") | {% if node_type_name == 'group_texture' %} | Texture Folder | {% elif node_type_name == 'group_hdri' %} | HDRi Folder | {% else %} - | {{ node_type_name }} + span.text-capitalize + |{{ node_type_name }} | {% endif %} | {% endif %} | {% endfor %} diff --git a/src/templates/_macros/_file_uploader_form.pug b/src/templates/_macros/_file_uploader_form.pug index d31f6b61..ad92c518 100644 --- a/src/templates/_macros/_file_uploader_form.pug +++ b/src/templates/_macros/_file_uploader_form.pug @@ -28,15 +28,15 @@ span Add files... input(type='file', name='file', multiple='') - button.btn.btn-primary.start(type='submit') + button.btn.btn-outline-primary.start(type='submit') i.pi-upload - span Start upload + span Start Upload - button.btn.btn-warning.cancel(type='reset') + button.btn.btn-outline-warning.cancel(type='reset') i.pi-cancel - span Cancel upload + span Cancel Upload - button.btn.btn-danger.delete(type='button') + button.btn.btn-outline-danger.delete(type='button') i.pi-trash span Delete diff --git a/src/templates/_macros/_file_uploader_javascript.pug b/src/templates/_macros/_file_uploader_javascript.pug index 53418c59..81e25f7f 100644 --- a/src/templates/_macros/_file_uploader_javascript.pug +++ b/src/templates/_macros/_file_uploader_javascript.pug @@ -23,7 +23,7 @@ script#template-upload(type="text/x-tmpl"). {% } %} {% if (!i) { %} - @@ -61,7 +61,7 @@ script#template-download(type="text/x-tmpl"). {% if (file.deleteUrl) { %} - @@ -71,7 +71,7 @@ script#template-download(type="text/x-tmpl"). Create {% } else { %} - diff --git a/src/templates/_macros/_navigation.pug b/src/templates/_macros/_navigation.pug deleted file mode 100644 index fd08e94a..00000000 --- a/src/templates/_macros/_navigation.pug +++ /dev/null @@ -1,26 +0,0 @@ -| {% macro navigation_tabs(title) %} - -nav#nav-tabs - ul#nav-tabs__list - li.nav-tabs__list-tab( - class="{% if title == 'homepage' %}active{% endif %}") - a(href="{{ url_for('main.homepage') }}") Activity - - li.nav-tabs__list-tab( - class="{% if title == 'home' %}active{% endif %}") - a(href="{{ url_for('projects.home_project') }}") Home - - li.nav-tabs__list-tab( - class="{% if title == 'dashboard' %}active{% endif %}") - a(href="{{ url_for('projects.index') }}") My Projects - - | {% if current_user.has_organizations() %} - li.nav-tabs__list-tab( - class="{% if title == 'organizations' %}active{% endif %}") - a( - href="{{ url_for('pillar.web.organizations.index') }}", - title="My Organizations") - | My Organizations - | {% endif %} - -| {% endmacro %} diff --git a/src/templates/_modal.pug b/src/templates/_modal.pug index dd46e675..e66c1ccd 100644 --- a/src/templates/_modal.pug +++ b/src/templates/_modal.pug @@ -9,5 +9,5 @@ .modal-body | ... .modal-footer - button.btn.btn-default(type='button', data-dismiss='modal') Close + button.btn.btn-outline-secondary(type='button', data-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes diff --git a/src/templates/layout.pug b/src/templates/layout.pug index 2c9e727c..fdfd8d52 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -66,10 +66,9 @@ html(lang="en") | {% if not title %}{% set title="default" %}{% endif %} body(class="{{ title }}") - .container-page - .page-content - .page-body - | {% block body %}{% endblock %} + .page-content + .page-body + | {% block body %}{% endblock %} | {% block footer_container %} #footer-container diff --git a/src/templates/menus/user_base.pug b/src/templates/menus/user_base.pug index 079fc589..3cbebd77 100644 --- a/src/templates/menus/user_base.pug +++ b/src/templates/menus/user_base.pug @@ -1,7 +1,7 @@ | {% block menu_body %} | {% if current_user.is_authenticated %} -li(class="dropdown") +li.dropdown | {% block menu_avatar %} a.navbar-item.dropdown-toggle(href="#", data-toggle="dropdown", title="{{ current_user.email }}") img.gravatar( @@ -9,42 +9,38 @@ li(class="dropdown") alt="Avatar") | {% endblock menu_avatar %} - ul.dropdown-menu + ul.dropdown-menu.dropdown-menu-right | {% if not current_user.has_role('protected') %} | {% block menu_list %} li a.navbar-item( href="{{ url_for('projects.home_project') }}" title="Home") - i.pi-home - | Home + | #[i.pi-home] Home li a.navbar-item( href="{{ url_for('projects.index') }}" title="My Projects") - i.pi-star - | My Projects + | #[i.pi-star] My Projects | {% if current_user.has_organizations() %} li a.navbar-item( href="{{ url_for('pillar.web.organizations.index') }}" title="My Organizations") - i.pi-users - | My Organizations + | #[i.pi-users] My Organizations | {% endif %} li a.navbar-item( href="{{ url_for('settings.profile') }}" title="Settings") - i.pi-cog - | Settings + | #[i.pi-cog] Settings | {% endblock menu_list %} - li.divider(role="separator") + li.dropdown-divider(role="separator") | {% endif %} li @@ -59,8 +55,9 @@ li(class="dropdown") | {% else %} -li.nav-item-sign-in - a.navbar-item(href="{{ url_for('users.login') }}") - | Log in +li.pt-1.pr-1 + a.btn.btn-sm.btn-outline-primary.px-3( + href="{{ url_for('users.login') }}") + | Log In | {% endif %} | {% endblock menu_body %} diff --git a/src/templates/nodes/custom/_node_preview_forbidden.pug b/src/templates/nodes/custom/_node_preview_forbidden.pug index 6dc22129..676a5b29 100644 --- a/src/templates/nodes/custom/_node_preview_forbidden.pug +++ b/src/templates/nodes/custom/_node_preview_forbidden.pug @@ -5,21 +5,21 @@ section.node-preview-forbidden div p Available to Blender Cloud subscribers - hr + hr.bg-white | {% if current_user.has_cap('can-renew-subscription') %} p small You have a subscription, it just needs to be renewed. - a.btn(href="/renew") + a.btn.btn-light(href="/renew") | #[i.pi-heart] Renew Subscription | {% else %} p small Support Blender and get awesome stuff! - a.btn(href="{{ url_for('cloud.join') }}") + a.btn.btn-light(href="{{ url_for('cloud.join') }}") | #[i.pi-heart] Get a Subscription | {% endif %} | {% if current_user.is_anonymous %} p(style="margin-top: 15px") small - a(href="{{ url_for('users.login') }}") Already a subscriber? Log in + a.text-white(href="{{ url_for('users.login') }}") Already a subscriber? Log in | {% endif %} diff --git a/src/templates/nodes/custom/_scripts.pug b/src/templates/nodes/custom/_scripts.pug index 05fbbc76..7be01148 100644 --- a/src/templates/nodes/custom/_scripts.pug +++ b/src/templates/nodes/custom/_scripts.pug @@ -61,7 +61,7 @@ script(type="text/javascript"). } {% if node.has_method('PUT') %} - $('.project-mode-view').show(); + $('.project-mode-view').displayAs('inline-block'); {% else %} $('.project-mode-view').hide(); {% endif %} diff --git a/src/templates/nodes/custom/asset/video/view_embed.pug b/src/templates/nodes/custom/asset/video/view_embed.pug index 6a4206fc..5edc1ad2 100644 --- a/src/templates/nodes/custom/asset/video/view_embed.pug +++ b/src/templates/nodes/custom/asset/video/view_embed.pug @@ -23,7 +23,7 @@ section.node-preview.video | {% block node_download %} | {% if node.file_variations %} -button.btn.btn-default.dropdown-toggle( +button.btn.btn-outline-secondary.dropdown-toggle( type="button", data-toggle="dropdown", aria-haspopup="true", diff --git a/src/templates/nodes/custom/blog/_macros.pug b/src/templates/nodes/custom/blog/_macros.pug deleted file mode 100644 index 1fc29fe3..00000000 --- a/src/templates/nodes/custom/blog/_macros.pug +++ /dev/null @@ -1,142 +0,0 @@ -//- ******************************************************* -// -| {% import 'projects/_macros.html' as projectmacros %} -| {% macro render_blog_post(node, project=None, pages=None) %} -| {% if node.picture %} -a.blog_index-header(href="{{ node.url }}") - img(src="{{ node.picture.thumbnail('h', api=api) }}") -| {% endif %} -| {% if project and project._id != config.MAIN_PROJECT_ID %} -| {{ projectmacros.render_secondary_navigation(project, pages=pages) }} -| {% endif %} -.blog_index-item - a.item-title( - href="{{ node.url }}") - | {{ node.name }} - ul.meta - | {% if node.project.name %} - li {{ node.project.name }} - | {% endif %} - | {% if node.user.full_name%} - li.who - | by {{ node.user.full_name }} - | {% endif %} - li.when - a(href="{{ node.url }}", - title="Updated {{ node._updated | pretty_date }}") - | {{ node._created | pretty_date }} - li - a(href="{{ node.url }}#comments") - | comment - - - .item-content - | {{ node.properties | markdowned('content') }} - -| {% endmacro %} - -//- ******************************************************* -// -| {% macro render_blog_list_item(node) %} -.blog_index-item.list - - | {% if node.picture %} - a.item-header(href="{{ node.url }}") - img.image(src="{{ node.picture.thumbnail('s', api=api) }}") - | {% else %} - a.item-header.nothumb(href="{{ node.url }}") - i.pi-document-text - | {% endif %} - - a.item-title( - href="{{ node.url }}") - | {{node.name}} - - .item-info. - #[span(title="{{node._created}}") {{node._created | pretty_date }}] - {% if node._created != node._updated %} - #[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})] - {% endif %} - {% if node.properties.category %} · {{node.properties.category}}{% endif %} - · {{node.user.full_name}} - {% if node.properties.status != 'published' %} · {{ node.properties.status}} {% endif %} - -| {% endmacro %} - - -//- ******************************************************* -// -| {% macro render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta, pages=None) %} -| {% if can_create_blog_posts %} -.blog-action - a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id=project._id)}}") - i.pi-plus - | Create New Post -| {% endif %} - -| {% if posts %} -| {{ render_blog_post(posts[0], project=project, pages=pages) }} - -| {% for node in posts[1:] %} -| {% if loop.first %} -.blog-archive-navigation - span Blasts from the past -| {% endif %} -| {{ render_blog_list_item(node) }} -| {% endfor %} - -| {% if more_posts_available %} -.blog-archive-navigation - a(href="{{ project.blog_archive_url }}") - | {{posts_meta.total - posts|length}} more blog posts over here - i.pi-angle-right -| {% endif %} - -| {% else %} - -.blog_index-item - .item-content No posts... yet! - -| {% endif %} {# posts #} -| {% endmacro %} - - -//- Macro for rendering the navigation buttons for prev/next pages -// -| {% macro render_archive_pagination(project) %} -.blog-archive-navigation - | {% if project.blog_archive_prev %} - a.archive-nav-button( - href="{{ project.blog_archive_prev }}", rel="prev") - i.pi-angle-left - | Previous page - | {% else %} - span.archive-nav-button - i.pi-angle-left - | Previous page - | {% endif %} - - a.archive-nav-button( - href="{{ url_for('main.project_blog', project_url=project.url) }}") - | Blog Index - - | {% if project.blog_archive_next %} - a.archive-nav-button( - href="{{ project.blog_archive_next }}", rel="next") - | Next page - i.pi-angle-right - | {% else %} - span.archive-nav-button - | Next page - i.pi-angle-right - | {% endif %} - -| {% endmacro %} - -| {% macro render_archive(project, posts, posts_meta) %} - -| {{ render_archive_pagination(project) }} - -| {% for node in posts %} -| {{ render_blog_list_item(node) }} -| {% endfor %} - -| {{ render_archive_pagination(project) }} - -| {% endmacro %} diff --git a/src/templates/nodes/custom/blog/archive_main_project.pug b/src/templates/nodes/custom/blog/archive_main_project.pug index 6ef9952a..bdbb6805 100644 --- a/src/templates/nodes/custom/blog/archive_main_project.pug +++ b/src/templates/nodes/custom/blog/archive_main_project.pug @@ -2,11 +2,8 @@ | {% import 'nodes/custom/blog/_macros.html' as blogmacros %} | {% block body %} -.container-fluid - #blog_container.cloud-blog - #blog_index-container - .blog_index-header - h3 Blog Archive +.container + h3 Blog Archive - | {{ blogmacros.render_archive(project, posts, posts_meta) }} + | {{ blogmacros.render_archive(project, posts, posts_meta) }} | {% endblock body %} diff --git a/src/templates/nodes/custom/blog/index.pug b/src/templates/nodes/custom/blog/index.pug index 6d502a1b..d5381689 100644 --- a/src/templates/nodes/custom/blog/index.pug +++ b/src/templates/nodes/custom/blog/index.pug @@ -9,9 +9,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css') }}", rel= | {% endblock %} | {% block project_context %} -#blog_container - #blog_index-container.expand-image-links - | {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta) }} +| {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta) }} | {% endblock %} | {% block project_tree %} diff --git a/src/templates/nodes/custom/blog/index_main_project.pug b/src/templates/nodes/custom/blog/index_main_project.pug index 64b239fc..6f809bff 100644 --- a/src/templates/nodes/custom/blog/index_main_project.pug +++ b/src/templates/nodes/custom/blog/index_main_project.pug @@ -10,10 +10,7 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') | {% endblock css %} | {% block body %} -.container-fluid.blog - #blog_container.cloud-blog - #blog_index-container.expand-image-links - | {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta, pages=pages) }} +| {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta, pages=pages) }} | {% endblock %} | {% block footer_scripts %} @@ -25,7 +22,7 @@ script. /* Expand images when their link points to a jpg/png/gif */ /* TODO: De-duplicate code from view post */ var page_overlay = document.getElementById('page-overlay'); - $('.blog_index-item .item-content a img').on('click', function(e){ + $('.item-content a img').on('click', function(e){ e.preventDefault(); var href = $(this).parent().attr('href'); diff --git a/src/templates/nodes/custom/comment/list_embed_base.pug b/src/templates/nodes/custom/comment/list_embed_base.pug index 143faa7a..90ddf312 100644 --- a/src/templates/nodes/custom/comment/list_embed_base.pug +++ b/src/templates/nodes/custom/comment/list_embed_base.pug @@ -32,7 +32,6 @@ .comment-reply-preview-md .comment-reply-info .comment-action-cancel( - type="button", title="{{ _('cancel') }}") span {{ _('cancel') }} diff --git a/src/templates/nodes/custom/hdri/view_embed.pug b/src/templates/nodes/custom/hdri/view_embed.pug index 2fc00288..5c3a856a 100644 --- a/src/templates/nodes/custom/hdri/view_embed.pug +++ b/src/templates/nodes/custom/hdri/view_embed.pug @@ -28,7 +28,7 @@ li.node-details-meta-list-item | {% block node_download %} | {% if node.properties.files %} -button.btn.btn-default.dropdown-toggle( +button.btn.btn-outline-secondary.dropdown-toggle( title="Download HDRI", type="button", data-toggle="dropdown", diff --git a/src/templates/nodes/custom/post/create.pug b/src/templates/nodes/custom/post/create.pug index 1e17dd61..6af4c7a1 100644 --- a/src/templates/nodes/custom/post/create.pug +++ b/src/templates/nodes/custom/post/create.pug @@ -68,9 +68,9 @@ | {% endif %} | {% endfor %} - input.btn.btn-default.button-create(type='submit', value='Create {{ node_type.name }}') + input.btn.btn-outline-secondary(type='submit', value='Create {{ node_type.name }}') - a.btn.btn-default.button-back(href="{{ url_for('projects.view', project_url=project.url) }}blog") + a.btn.btn-link.button-back(href="{{ url_for('projects.view', project_url=project.url) }}blog") | Back to Blog #blog_post-create-container diff --git a/src/templates/nodes/custom/post/view_embed.pug b/src/templates/nodes/custom/post/view_embed.pug index 3922fab9..d5e1e38f 100644 --- a/src/templates/nodes/custom/post/view_embed.pug +++ b/src/templates/nodes/custom/post/view_embed.pug @@ -1,19 +1,9 @@ | {% import 'nodes/custom/blog/_macros.html' as blogmacros %} -#blog_container(class="{% if project and project._id == config.MAIN_PROJECT_ID %}cloud-blog{% endif %}") +| {{ blogmacros.render_blog_post(node, project=project) }} - #blog_index-container.expand-image-links - .blog-action - | {% if node.has_method('PUT') %} - a.btn.btn-default.button-edit(href="{{url_for('nodes.edit', node_id=node._id)}}") - i.pi-edit - | Edit Post - | {% endif %} - - | {{ blogmacros.render_blog_post(node, project=project) }} - - #comments-embed - .comments-list-loading - i.pi-spin +#comments-embed.comments-compact + .comments-list-loading + i.pi-spin include ../_scripts diff --git a/src/templates/nodes/custom/post/view_main_project.pug b/src/templates/nodes/custom/post/view_main_project.pug index c8c48071..26ece6ec 100644 --- a/src/templates/nodes/custom/post/view_main_project.pug +++ b/src/templates/nodes/custom/post/view_main_project.pug @@ -26,8 +26,7 @@ link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') | {% set title = 'blog' %} | {% block body %} -.container-fluid.blog - | {% include 'nodes/custom/post/view_embed.html' %} +| {% include 'nodes/custom/post/view_embed.html' %} | {% endblock %} diff --git a/src/templates/nodes/custom/texture/view_embed.pug b/src/templates/nodes/custom/texture/view_embed.pug index e6d90184..654cc5db 100644 --- a/src/templates/nodes/custom/texture/view_embed.pug +++ b/src/templates/nodes/custom/texture/view_embed.pug @@ -91,11 +91,11 @@ a(href="{{ f.file.link }}",, title="Download texture", download="{{ f.file.filename }}") - button.btn.btn-default(type="button") + button.btn.btn-outline-secondary(type="button") i.pi-download | Download | {% else %} - button.btn.btn-default.disabled.sorry(type="button") + button.btn.btn-outline-secondary.disabled.sorry(type="button") i.pi-lock | Download | {% endif %} diff --git a/src/templates/nodes/edit_embed.pug b/src/templates/nodes/edit_embed.pug index cfe935b3..bd78fdf8 100644 --- a/src/templates/nodes/edit_embed.pug +++ b/src/templates/nodes/edit_embed.pug @@ -38,18 +38,21 @@ | {% elif field.type == 'HiddenField' %} | {{ field }} + | {% elif field.name == 'attachments' %} + hr #attachments-actions .btn.btn-info#attachments-action-add i.pi-plus | Add New Attachment - p.text-muted + p.text-muted.mt-3 | Attachments can be included in any MarkDown field by using the #[code {attachment slug}] shortcode | (#[a(href='https://pillarframework.org/shortcodes/#attachments', target='_blank') help]). | This shortcode is placed on your copy-paste buffer by clicking "Copy to clipboard". | {{ render_field(field, field.name) }} + hr | {% elif field.name == 'files' %} #files-actions @@ -66,20 +69,23 @@ | {% endfor %} - ul.project-edit-tools.bottom + hr + + ul.project-edit-tools.justify-content-end.h-auto li.button-cancel - a#item_cancel.item-cancel.project-mode-edit( + a#item_cancel.item-cancel.project-mode-edit.btn.btn-outline-secondary( href="javascript:void(0);", title="Cancel changes") i.button-cancel-icon.pi-cancel | Cancel li.button-save - a#item_save.item-save.project-mode-edit( + a#item_save.item-save.project-mode-edit.btn.btn-outline-success.ml-2( href="javascript:void(0);", title="Save changes") i.button-save-icon.pi-check | Save Changes + script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.ui.widget.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.iframe-transport.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.fileupload.min.js') }}") diff --git a/src/templates/organizations/index.pug b/src/templates/organizations/index.pug index 511aa935..d61e9b3b 100644 --- a/src/templates/organizations/index.pug +++ b/src/templates/organizations/index.pug @@ -1,210 +1,10 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_tabs %} - | {% set title = 'organizations' %} | {% block page_title %}Organizations{% endblock %} -| {% block og %} -meta(property="og:title", content="Dashboard") -meta(name="twitter:title", content="Blender Cloud") - -meta(property="og:url", content="https://cloud.blender.org/{{ request.path }}") -meta(property="og:type", content="website") - -meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}") -meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}") -| {% endblock %} - | {% block body %} -.dashboard-container - section.dashboard-main - | {{ navigation_tabs(title) }} - - section#projects - - | {% if can_create_organization %} - nav#sub-nav-tabs.projects - ul#sub-nav-tabs__list - li.result#create_organization_result_panel - li.create - button.btn.btn-success(onclick='createNewOrganization(this)') - i.pi-plus - | Create Organization - | {% endif %} - - nav.nav-tabs__tab.active#own_projects - ul.projects__list - | {% if organizations %} - | {% for organization in organizations['_items'] %} - | {% set link_url = url_for('pillar.web.organizations.view_embed', organization_id=organization._id) %} - li.projects__list-item( - data-url="{{ link_url }}", - id="organization-{{ organization._id }}") - a.projects__list-thumbnail( - href="{{ link_url }}") - i.pi-users - .projects__list-details - a.title(href="{{ link_url }}") - | {{ organization.name }} - - ul.meta - li(title="Members") - | {{ organization.members|hide_none|count }} Member{{ organization.members|hide_none|count|pluralize }} - | {% if (organization.unknown_members|count) != 0 %} - | ({{ organization.unknown_members|hide_none|count }} pending) - | {% endif %} - li(title="Seats") - | {{ organization.seat_count }} Seat{{ organization.seat_count|pluralize }} - - | {% endfor %} - | {% else %} - li.projects__list-item - a.projects__list-thumbnail - i.pi-blender-cloud - .projects__list-details - span Create an Organization to get started! - | {% endif %} - - section.dashboard-secondary - section.box - #item-details - -| {% endblock %} - - -| {% block footer_scripts %} -script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typeahead-0.11.1.min.js')}}") -script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.autocomplete-0.22.0.min.js') }}", async=true) - -script. - - /* Returns a more-or-less reasonable message given an error response object. */ - function xhrErrorResponseMessage(err) { - if (typeof err.responseJSON == 'undefined') - return err.statusText; - - if (typeof err.responseJSON._error != 'undefined' && typeof err.responseJSON._error.message != 'undefined') - return err.responseJSON._error.message; - - if (typeof err.responseJSON._message != 'undefined') - return err.responseJSON._message - - return err.statusText; - } - - /** - * Open an organization in the #item-details div. - */ - function item_open(item_id, pushState) - { - if (item_id === undefined ) { - throw new ReferenceError("item_open(" + item_id + ") called."); - } - - // Style elements starting with item_type and dash, e.g. "#job-uuid" - var clean_classes = 'active processing'; - var current_item = $('#organization-' + item_id); - - $('[id^="organization-"]').removeClass(clean_classes); - current_item - .removeClass(clean_classes) - .addClass('processing'); - - var item_url = '/o/' + item_id; - - $.get(item_url, function(item_data) { - $('#item-details').html(item_data); - - current_item - .removeClass(clean_classes) - .addClass('active'); - - }).fail(function(xhr) { - if (console) { - console.log('Error fetching organization', item_id, 'from', item_url); - console.log('XHR:', xhr); - } - - current_item.removeClass(clean_classes); - toastr.error('Failed to open organization'); - - if (xhr.status) { - $('#item-details').html(xhr.responseText); - } else { - $('#item-details').html('

Opening ' + item_type + ' failed. There possibly was ' + - 'an error connecting to the server. Please check your network connection and ' + - 'try again.

'); - } - }); - - // Determine whether we should push the new state or not. - pushState = (typeof pushState !== 'undefined') ? pushState : true; - if (!pushState) return; - - // Push the correct URL onto the history. - var push_state = {itemId: item_id}; - - window.history.pushState( - push_state, - 'Organization: ' + item_id, - item_url - ); - } - - $('li.projects__list-item').click(function(e){ - url = $(this).data('url'); - if (typeof url === 'undefined') return; - - window.location.href = url; - if (console) console.log(url); - - $(this).addClass('active'); - $(this).find('.projects__list-thumbnail i') - .removeAttr('class') - .addClass('pi-spin spin'); - }); - - - {% if open_organization_id %} - $(function() { item_open('{{ open_organization_id }}', false); }); - {% endif %} - - {% if can_create_organization %} - function createNewOrganization(button) { - $(button) - .attr('disabled', 'disabled') - .fadeTo(200, 0.1); - $('#create_organization_result_panel').html(''); - - // TODO: create a form to get the initial info from the user. - $.post( - '{{ url_for('pillar.web.organizations.create_new') }}', - { - name: 'New Organization', - seat_count: 1, - } - ) - .done(function(result) { - var $p = $('

').text('organization created, reloading list.') - $('#create_organization_result_panel').html($p); - - window.location.href = result.location; - }) - .fail(function(err) { - var msg = xhrErrorResponseMessage(err); - $('#create_organization_result_panel').html('Error creating organization: ' + msg); - - $(button) - .fadeTo(1000, 1.0) - .queue(function() { - $(this) - .removeAttr('disabled') - .dequeue() - ; - }) - }) - ; - return false; - } - {% endif %} +.p-5.text-center + h2 Organizations Index + .lead. + See Blender Cloud template for reference. | {% endblock %} diff --git a/src/templates/organizations/view_embed.pug b/src/templates/organizations/view_embed.pug index a9ab4564..9bc2a31b 100644 --- a/src/templates/organizations/view_embed.pug +++ b/src/templates/organizations/view_embed.pug @@ -75,7 +75,7 @@ script $('#admin-picker').hide(); .input-group - button#item-save.btn.btn-success.btn-block(type='submit') + button#item-save.btn.btn-outline-success.btn-block(type='submit') i.pi-check | Save Changes | {% else %} diff --git a/src/templates/projects/_macros.pug b/src/templates/projects/_macros.pug index 308ebf70..b95b7c69 100644 --- a/src/templates/projects/_macros.pug +++ b/src/templates/projects/_macros.pug @@ -1,42 +1,41 @@ | {% macro render_secondary_navigation(project, pages=None) %} nav.navbar-secondary - .navbar-container - nav.collapse.navbar-collapse - ul.nav.navbar-nav.navbar-right - li - a.navbar-item( - href="{{ url_for('projects.view', project_url=project.url) }}", - title="{{ project.name }} Homepage") - span - b {{ project.name }} - li - a.navbar-item( - href="{{ url_for('main.project_blog', project_url=project.url) }}", - title="Project Blog", - class="{% if category == 'blog' %}active{% endif %}") - span Blog - | {% if pages %} - | {% for p in pages %} - li - a.navbar-item( - href="{{ url_for('projects.view_node', project_url=project.url, node_id=p._id) }}", - title="{{ p.name }}", - class="{% if category == 'page' %}active{% endif %}") - span {{ p.name }} - | {% endfor %} - | {% endif %} - | {% if project.nodes_featured %} - | {# In some cases featured_nodes might might be embedded #} - | {% if '_id' in project.nodes_featured[0] %} - | {% set featured_node_id=project.nodes_featured[0]._id %} - | {% else %} - | {% set featured_node_id=project.nodes_featured[0] %} - | {% endif %} - li - a.navbar-item( - href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}", - title="Explore {{ project.name }}", - class="{% if category == 'blog' %}active{% endif %}") - span Explore - | {% endif %} + nav.collapse.navbar-collapse + ul.navbar-nav.navbar-right + li + a.navbar-item( + href="{{ url_for('projects.view', project_url=project.url) }}", + title="{{ project.name }} Homepage") + span + b {{ project.name }} + li + a.navbar-item( + href="{{ url_for('main.project_blog', project_url=project.url) }}", + title="Project Blog", + class="{% if category == 'blog' %}active{% endif %}") + span Blog + | {% if pages %} + | {% for p in pages %} + li + a.navbar-item( + href="{{ url_for('projects.view_node', project_url=project.url, node_id=p._id) }}", + title="{{ p.name }}", + class="{% if category == 'page' %}active{% endif %}") + span {{ p.name }} + | {% endfor %} + | {% endif %} + | {% if project.nodes_featured %} + | {# In some cases featured_nodes might might be embedded #} + | {% if '_id' in project.nodes_featured[0] %} + | {% set featured_node_id=project.nodes_featured[0]._id %} + | {% else %} + | {% set featured_node_id=project.nodes_featured[0] %} + | {% endif %} + li + a.navbar-item( + href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}", + title="Explore {{ project.name }}", + class="{% if category == 'blog' %}active{% endif %}") + span Explore + | {% endif %} | {% endmacro %} diff --git a/src/templates/projects/edit.pug b/src/templates/projects/edit.pug index e24883f0..9132251e 100644 --- a/src/templates/projects/edit.pug +++ b/src/templates/projects/edit.pug @@ -7,17 +7,16 @@ span#project-edit-title | Edit Project ul.project-edit-tools - // Edit Mode li.button-cancel - a#item_cancel.project-mode-edit( + a#item_cancel.project-mode-edit.btn.btn-sm.btn-link( href="{{url_for('projects.view', project_url=project.url, _external=True)}}", title="Cancel changes") - i.button-cancel-icon.pi-back + i.button-cancel-icon.pi-angle-left | Go to Project li.button-save - a#item_save.project-mode-edit( + a#item_save.project-mode-edit.btn.btn-sm.btn-outline-success.mx-2( href="#", title="Save changes") i.button-save-icon.pi-check @@ -80,16 +79,18 @@ ul.project-edit-tools | {% endfor %} - ul.project-edit-tools.bottom + hr + + ul.project-edit-tools.justify-content-end.h-auto li.button-cancel - a#item_cancel.project-mode-edit( + a#item_cancel.project-mode-edit.btn.btn-link( href="{{url_for('projects.view', project_url=project.url, _external=True)}}", title="Cancel changes") - i.button-cancel-icon.pi-back + i.button-cancel-icon.pi-angle-left | Go to Project li.button-save - a#item_save.project-mode-edit( + a#item_save.project-mode-edit.btn.btn-outline-success.ml-2( href="#", title="Save changes") i.button-save-icon.pi-check @@ -97,6 +98,8 @@ ul.project-edit-tools | {% endblock %} +| {% block footer_container %}{% endblock %} + | {% block footer_scripts %} script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.ui.widget.min.js') }}") script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.iframe-transport.min.js') }}") @@ -105,7 +108,8 @@ script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets script(type="text/javascript"). - $('.project-mode-edit').show(); + // Show edit mode buttons (save, cancel). + $('.project-mode-edit').displayAs('inline-block'); ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''}); var convert = new Markdown.getSanitizingConverter().makeHtml; diff --git a/src/templates/projects/edit_layout.pug b/src/templates/projects/edit_layout.pug index 4c0bd38a..1809f4bc 100644 --- a/src/templates/projects/edit_layout.pug +++ b/src/templates/projects/edit_layout.pug @@ -5,7 +5,7 @@ #project-container #project-side-container #project_sidebar - ul.project-tabs + ul.project-tabs.p-0 li.tabs-thumbnail( title="About", data-toggle="tooltip", @@ -51,13 +51,13 @@ #project_nav #project_nav-container - #project_nav-header - .project-title - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - | {{ project.name }} + #project_nav-header.bg-white + a.project-title.p-2.font-weight-bold.text-dark( + href="{{url_for('projects.view', project_url=project.url, _external=True)}}") + | {{ project.name }} // TODO - make list a macro - #project_tree.edit + #project_tree.edit.bg-white ul.project_nav-edit-list li(class="{% if title == 'edit' %}active{% endif %}") a(href="{{ url_for('projects.edit', project_url=project.url) }}") @@ -77,10 +77,9 @@ i(class="pi-{{ext.icon}}") | {{ext.name | title}} | {% endfor %} - .project_split(title="Toggle Navigation [T]") #project_context-container - #project_context-header + #project_context-header.bg-white span#status-bar | {% block project_context_header %} | {% endblock %} diff --git a/src/templates/projects/edit_node_type_embed.pug b/src/templates/projects/edit_node_type_embed.pug index ca1fd4d7..aff9e8b4 100644 --- a/src/templates/projects/edit_node_type_embed.pug +++ b/src/templates/projects/edit_node_type_embed.pug @@ -19,7 +19,7 @@ form( .col-md-9 h3 Editing: {{ node_type['name'] }} .col-md-3 - button.js-form-save.btn.btn-success.pull-right(style="margin-top: 15px;") + button.js-form-save.btn.btn-outline-success.pull-right(style="margin-top: 15px;") | Save Changes .row @@ -46,7 +46,7 @@ form( | {% endif %} | {% endfor %} - button.js-form-save.btn.btn-success.pull-right + button.js-form-save.btn.btn-outline-success.pull-right | Save Changes diff --git a/src/templates/projects/home_images.pug b/src/templates/projects/home_images.pug index 7399d796..274a9dfc 100644 --- a/src/templates/projects/home_images.pug +++ b/src/templates/projects/home_images.pug @@ -80,7 +80,7 @@ section.nav-tabs__tab.active#tab-images Image Sharing requires a Blender Cloud subscription. .buttons - a.btn.btn-default.btn-outline.green(href="https://store.blender.org/product/membership/") + a.btn.btn-outline-primary(href="https://store.blender.org/product/membership/") | Join Now | {% endif %} | {% endblock %} diff --git a/src/templates/projects/home_index.pug b/src/templates/projects/home_index.pug index d4d59224..95a64997 100644 --- a/src/templates/projects/home_index.pug +++ b/src/templates/projects/home_index.pug @@ -1,43 +1,8 @@ | {% extends 'projects/home_layout.html' %} -| {% set subtab = 'blender_sync' %} -| {% set learn_more_btn_url = '/blog/introducing-blender-sync' %} | {% block currenttab %} -section.nav-tabs__tab.active#tab-blender_sync - .tab_header-container - .tab_header-intro( - style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})") - .tab_header-intro_text - h2 Connect Blender with the Cloud - p - | Save your Blender preferences once, load them anywhere. -
- | Use the - =' ' - a(href='https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip') Blender Cloud add-on - =' ' - | to synchronise your settings from within Blender. - .tab_header-intro_icons - i.pi-blender - i.pi-heart-filled - i.pi-blender-cloud - - | {% for version in synced_versions %} - .blender_sync-main - .blender_sync-main-header - h2.blender_sync-main-title - i.pi-blender - | Blender {{ version.version }} - .blender_sync-main-last - | Last synced on: {{ version.date|pretty_date }} - | {% else %} - .blender_sync-main.empty - .blender_sync-main-header - span.blender_sync-main-title - | No settings synced yet -

- a.download( - href='https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip') - | Download add-on - | {% endfor %} +.p-5.text-center + h2 Home Index + p.lead. + See Blender Cloud for reference. | {% endblock %} diff --git a/src/templates/projects/home_layout.pug b/src/templates/projects/home_layout.pug index 733f6ae7..9a82df3a 100644 --- a/src/templates/projects/home_layout.pug +++ b/src/templates/projects/home_layout.pug @@ -1,77 +1,15 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_tabs %} - | {% set title = 'home' %} -| {% block og %} -meta(property="og:type", content="website") -meta(property="og:url", content="https://cloud.blender.org{{ request.path }}") - -meta(property="og:title", content="Blender Cloud - Home") -meta(name="twitter:title", content="Blender Cloud") - -meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}") -meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}") -| {% endblock %} - | {% block page_title %} | {{current_user.full_name}} | {% endblock %} | {% block body %} -.dashboard-container - section.dashboard-main - | {{ navigation_tabs(title) }} +.p-5.text-center + h2 Home Layout + p.lead. + See Blender Cloud for reference. - section#projects - - nav#sub-nav-tabs.home - ul#sub-nav-tabs__list - li.nav-tabs__list-tab#subtab-blender_sync(data-tab-url="{{ url_for('projects.home_project')}}") - i.pi-blender - | Blender Sync - - li.nav-tabs__list-tab#subtab-images(data-tab-url="{{ url_for('projects.home_project_shared_images')}}") - i.pi-picture - | Images - | {% block currenttab %}{% endblock %} - - section.dashboard-secondary - section.announcement - img.header( - src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}") - .text - | {% block side_announcement %} - .title - a(href="https://cloud.blender.org/blog/introducing-blender-sync") Blender Sync - - .lead - span. - Save your settings once. Use them anywhere. - Carry your Blender configuration with you, use our free add-on to sync your keymaps and preferences. -
- Syncing is free for everyone. No subscription required. - | {% endblock %} - | {% if show_addon_download_buttons %} - .buttons - a.btn.btn-default.btn-outline.orange( - href="https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip") - i.pi-download - | Download v{{ config.BLENDER_CLOUD_ADDON_VERSION }} - a.btn.btn-default.btn-outline.blue( - href="{{ learn_more_btn_url }}") - | Learn More - | {% endif %} -| {% endblock %} - - -| {% block footer_scripts %} -script. - $(document).ready(function () { - $('#subtab-{{ subtab }}').addClass('active'); - var $nav_tabs = $('#sub-nav-tabs__list').find('li.nav-tabs__list-tab'); - $nav_tabs.on('click', function (e) { - window.location = $(this).attr('data-tab-url'); - }); - }); + | {% block currenttab %}{% endblock currenttab %} | {% endblock %} diff --git a/src/templates/projects/index_dashboard.pug b/src/templates/projects/index_dashboard.pug index 48c9008c..ca6d7f22 100644 --- a/src/templates/projects/index_dashboard.pug +++ b/src/templates/projects/index_dashboard.pug @@ -1,347 +1,16 @@ | {% extends 'layout.html' %} -| {% from '_macros/_navigation.html' import navigation_tabs %} - | {% set title = 'dashboard' %} -| {% block og %} -meta(property="og:title", content="Dashboard") -meta(name="twitter:title", content="Blender Cloud") - -meta(property="og:url", content="https://cloud.blender.org/{{ request.path }}") -meta(property="og:type", content="website") - -meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}") -meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}") -| {% endblock %} - | {% block page_title %} | {{current_user.full_name}} | {% endblock %} -| {% block css %} -| {{ super() }} -style. - .deleted-projects-toggle { - z-index: 10; - position: absolute; - right: 0; - font-size: 20px; - padding: 3px; - text-shadow: 0 0 2px white; - } - .deleted-projects-toggle .show-deleted { - color: #aaa; - } - .deleted-projects-toggle .hide-deleted { - color: #bbb; - } -| {% endblock %} - | {% block body %} -.dashboard-container - section.dashboard-main - | {{ navigation_tabs(title) }} - - section#projects - - nav#sub-nav-tabs.projects - ul#sub-nav-tabs__list - li.nav-tabs__list-tab.active(data-tab-toggle='own_projects') - | Own Projects - | {% if projects_user|length != 0 %} - span ({{ projects_user|length }}) - | {% endif %} - - li.nav-tabs__list-tab(data-tab-toggle='shared') - | Shared with me - | {% if projects_shared|length != 0 %} - span ({{ projects_shared|length }}) - | {% endif %} - - | {% if current_user.has_cap('subscriber') %} - li.create#project-create( - data-url="{{ url_for('projects.create') }}") - a.btn.btn-success( - href="{{ url_for('projects.create') }}") - i.pi-plus - | Create Project - | {% elif current_user.has_cap('can-renew-subscription') %} - li.create - a.btn(href="/renew", target="_blank") - i.pi-heart - | Renew subscription to create a project - | {% endif %} - - nav.nav-tabs__tab.active#own_projects - .deleted-projects-toggle - | {% if show_deleted_projects %} - a.hide-deleted(href="{{ request.base_url }}", title='Hide deleted projects') - i.pi-trash - | {% else %} - a.show-deleted(href="{{ request.base_url }}?deleted=1", title='Show deleted projects') - i.pi-trash - | {% endif %} - - ul.projects__list - | {% for project in projects_deleted %} - li.projects__list-item.deleted - span.projects__list-thumbnail - | {% if project.picture_square %} - img(src="{{ project.picture_square.thumbnail('s', api=api) }}") - | {% else %} - i.pi-blender-cloud - | {% endif %} - .projects__list-details - span.title {{ project.name }} - ul.meta - li.status.deleted Deleted - li.edit - a(href="javascript:undelete_project('{{ project._id }}')") Restore project - | {% else %} - | {% if show_deleted_projects %} - li.projects__list-item.deleted You have no recenly deleted projects. Deleted projects can be restored within a month after deletion. - | {% endif %} - | {% endfor %} - - | {% for project in projects_user %} - li.projects__list-item( - data-url="{{ url_for('projects.view', project_url=project.url) }}") - a.projects__list-thumbnail( - href="{{ url_for('projects.view', project_url=project.url) }}") - | {% if project.picture_square %} - img(src="{{ project.picture_square.thumbnail('s', api=api) }}") - | {% else %} - i.pi-blender-cloud - | {% endif %} - .projects__list-details - a.title(href="{{ url_for('projects.view', project_url=project.url) }}") - | {{ project.name }} - - ul.meta - li.status( - class="{{ project.is_private | yesno('private,public,') }}", - title="{{ project.is_private | yesno('Private Project,Public Project,') }}") - | {{ project.is_private | yesno('Private,Public,') }} - li.when(title="{{ project._created }}") {{ project._created | pretty_date }} - li.edit - a(href="{{ url_for('projects.edit', project_url=project.url) }}") Edit - | {% if project.status == 'pending' and current_user.has_cap('view-pending-nodes') %} - li.pending Not Published - | {% endif %} - | {% else %} - | {% if current_user.has_cap('subscriber') %} - li.projects__list-item(data-url="{{ url_for('projects.create') }}") - a.projects__list-thumbnail - i.pi-plus - .projects__list-details - a.title(href="{{ url_for('projects.create') }}") - | Create a project to get started! - | {% elif current_user.has_cap('can-renew-subscription') %} - li.projects__list-item(data-url="https://store.blender.org/renew-my-subscription.php") - a.projects__list-thumbnail - i.pi-plus - .projects__list-details - a.title(href="https://store.blender.org/renew-my-subscription.php") - | Renew your Blender Cloud subscription to create your own projects! - | {% else %} - li.projects__list-item(data-url="/join") - a.projects__list-thumbnail - i.pi-plus - .projects__list-details - a.title(href="/join") - | Join Blender Cloud to create your own projects! - | {% endif %} - | {% endfor %} - - section.nav-tabs__tab#shared(style='display: none') - ul.projects__list - | {% if projects_shared %} - | {% for project in projects_shared %} - li.projects__list-item( - data-url="{{ url_for('projects.view', project_url=project.url) }}") - a.projects__list-thumbnail( - href="{{ url_for('projects.view', project_url=project.url) }}") - | {% if project.picture_square %} - img(src="{{ project.picture_square.thumbnail('s', api=api) }}") - | {% else %} - i.pi-blender-cloud - | {% endif %} - .projects__list-details - a.title(href="{{ url_for('projects.view', project_url=project.url) }}") - | {{ project.name }} - - ul.meta - li.status( - class="{{ project.is_private | yesno('private,public,') }}", - title="{{ project.is_private | yesno('Private Project,Public Project,') }}") - | {{ project.is_private | yesno('Private,Public,') }} - li.when {{ project._created | pretty_date }} - li.who by {{ project.user.full_name }} - li.edit - a(href="{{ url_for('projects.edit', project_url=project.url) }}") Edit - | {% if project.status == 'pending' and current_user.has_cap('view-pending-nodes') %} - li.pending Not Published - | {% endif %} - - li.leave - span.user-remove-prompt - | Leave Project - - span.user-remove - | Are you sure? - span.user-remove-confirm( - user-id="{{ current_user.objectid }}", - project-url="{{url_for('projects.sharing', project_url=project.url)}}") - i.pi-check - | Yes, leave - span.user-remove-cancel - i.pi-cancel - | No, cancel - - | {% endfor %} - | {% else %} - li.projects__list-item - a.projects__list-thumbnail - i.pi-heart-broken - .projects__list-details - .title - | No projects shared with you... yet! - | {% endif %} - - section.dashboard-secondary - section.announcement - img.header( - src="{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}") - .text - .title Projects - .lead - span. - Create and manage your own personal projects. - Upload assets and collaborate with other Blender Cloud members. - .buttons - a.btn.btn-default.btn-outline.blue( - href="https://cloud.blender.org/blog/introducing-private-projects") - | Learn More - - section.announcement - a(href="https://cloud.blender.org/blog/introducing-blender-sync") - img.header( - src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}") - .text - .title - a(href="https://cloud.blender.org/blog/introducing-blender-sync") Textures Browser & Settings Sync - - .lead - span. - Get the official Blender Cloud add-on: - ul - li Save your Blender settings online, use them anywhere - li Browse over 800 textures & HDRIs within Blender - li Share Screenshots & Renders directly to Blender Cloud - - .buttons - a.btn.btn-default.btn-outline.orange( - href="https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip") - i.pi-download - | Download Add-on v {{ config.BLENDER_CLOUD_ADDON_VERSION }} - a.btn.btn-default.btn-outline.blue( - href="https://cloud.blender.org/blog/introducing-blender-sync") - | Learn More - +.p-5.text-center + h2 Index Dashboard + p.lead. + See Blender Cloud template for reference. | {% endblock %} - | {% block footer_scripts %} -script. - $(document).ready(function() { - - $('li.projects__list-item').click(function(e){ - url = $(this).data('url'); - if (typeof url === 'undefined') return; - - window.location.href = url; - if (console) console.log(url); - - $(this).addClass('active'); - $(this).find('.projects__list-thumbnail i') - .removeAttr('class') - .addClass('pi-spin spin'); - }); - - // Tabs behavior - var $nav_tabs_list = $('#sub-nav-tabs__list'); - var $nav_tabs = $nav_tabs_list.find('li.nav-tabs__list-tab'); - $nav_tabs.on('click', function(e){ - e.preventDefault(); - - $nav_tabs.removeClass('active'); - $(this).addClass('active'); - - $('.nav-tabs__tab').hide(); - $('#' + $(this).attr('data-tab-toggle')).show(); - }); - - // Create project - $('#project-create').on('click', function(e){ - e.preventDefault(); - - $(this).addClass('disabled'); - $('a', this).html(' Creating project...'); - - window.location.href = $(this).data('url'); - }); - - // Leave project - var $projects_list = $('ul.projects__list'); - $projects_list.find('span.user-remove-prompt').on('click', function(e){ - e.stopPropagation(); - e.preventDefault(); - - $(this).next().show(); - $(this).hide(); - }); - - $projects_list.find('span.user-remove-cancel').on('click', function(e){ - e.stopPropagation(); - e.preventDefault(); - - $(this).parent().prev().show(); - $(this).parent().hide(); - }); - - $projects_list.find('span.user-remove-confirm').on('click', function(e){ - e.stopPropagation(); - e.preventDefault(); - var parent = $(this).closest('.projects__list-item'); - - function removeUser(userId, projectUrl){ - $.post(projectUrl, {user_id: userId, action: 'remove'}) - .done(function (data) { - parent.remove(); - }); - } - - removeUser($(this).attr('user-id'), $(this).attr('project-url')); - }); - - hopToTop(); // Display jump to top button - }); - - - var patch_url = '{{ url_for('projects.patch.patch_project', project_id='PROJECTID') }}'; - function undelete_project(project_id) { - console.log('undeleting project', project_id); - $.ajax({ - url: patch_url.replace('PROJECTID', project_id), - method: 'PATCH', - data: JSON.stringify({'op': 'undelete'}), - contentType: 'application/json' - }) - .done(function(data, textStatus, jqXHR) { - location.href = jqXHR.getResponseHeader('Location'); - }) - .fail(function(err) { - toastr.error(xhrErrorResponseMessage(err), 'Undeletion failed'); - }) - } | {% endblock %} diff --git a/src/templates/projects/view.pug b/src/templates/projects/view.pug index a216bc20..4b79cb27 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -1,642 +1,10 @@ | {% extends 'layout.html' %} -| {% from '_macros/_add_new_menu.html' import add_new_menu %} - | {% block page_title %}{{ project.name }}{% endblock%} - -| {% block og %} -meta(property="og:type", content="website") - -| {% if og_picture %} -meta(property="og:image", content="{{ og_picture.thumbnail('l', api=api) }}") -meta(name="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}") -| {% elif node and node.picture %} -meta(property="og:image", content="{{ node.picture.thumbnail('l', api=api) }}") -meta(name="twitter:image", content="{{ node.picture.thumbnail('l', api=api) }}") -| {% elif project.picture_header %} -meta(property="og:image", content="{{ project.picture_header.thumbnail('l', api=api) }}") -meta(name="twitter:image", content="{{ project.picture_header.thumbnail('l', api=api) }}") -| {% endif %} - -| {% if show_project %} -meta(property="og:title", content="{{ project.name }} - Blender Cloud") -meta(name="twitter:title", content="{{ project.name }} - Blender Cloud") -meta(property="og:description", content="{{ project.summary }}") -meta(name="twitter:description", content="{{ project.summary }}") - -meta(property="og:url", content="{{ url_for('projects.view', project_url=project.url, _external=True) }}") -| {% else %} - -| {% if node %} -meta(property="og:title", content="{{ node.name }} - Blender Cloud") -meta(name="twitter:title", content="{{ node.name }} on Blender Cloud") - -| {% if node.node_type == 'post' %} - -| {% if node.properties.content %} -meta(property="og:description", content="{{ node.properties.content | truncate(180) }}") -meta(name="twitter:description", content="{{ node.properties.content | truncate(180) }}") -| {% else %} -meta(property="og:description", content="Blender Cloud, your source for open content and training") -meta(name="twitter:description", content="Blender Cloud, your source for open content and training") -| {% endif %} - -| {% else %} - -| {% if node.description %} -meta(property="og:description", content="{{ node.description | truncate(180) }}") -meta(name="twitter:description", content="{{ node.description | truncate(180) }}") -| {% else %} -meta(property="og:description", content="Blender Cloud, your source for open content and training") -meta(name="twitter:description", content="Blender Cloud, your source for open content and training") -| {% endif %} - -| {% endif %} - -meta(property="og:url", content="{{url_for('projects.view_node', project_url=project.url, node_id=node._id)}}") -| {% else %} -meta(property="og:title", content="{{ project.name }} Blog on Blender Cloud") -meta(name="twitter:title", content="{{ project.name }} Blog on Blender Cloud") -meta(property="og:description", content="{{ project.summary }}") -meta(name="twitter:description", content="{{ project.summary }}") - -meta(property="og:url", content="{{url_for('projects.view', project_url=project.url, _external=True)}}") -| {% endif %} - -| {% endif %} -| {% endblock %} - -| {% block head %} -link(href="{{ url_for('static_pillar', filename='assets/jstree/themes/default/style.min.css') }}", rel="stylesheet") -| {% if node %} -link(rel="amphtml", href="{{ url_for('nodes.view', node_id=node._id, _external=True, format='amp') }}") -| {% endif %} - -script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}") -script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}") -script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}") -script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.min.js') }}") -| {% endblock %} - -| {% block css %} -link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet") -link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet") -link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') }}", rel="stylesheet") -| {% endblock %} +| {% set title = 'project' %} | {% block body %} -#project-container - #project-side-container - #project_sidebar - ul.project-tabs - li.tabs-thumbnail(class="{% if project.picture_square %}image{% endif %}") - a(href="{{url_for('projects.view', project_url=project.url)}}") - #project-loading - i.pi-spin - | {% if project.picture_square %} - img(src="{{ project.picture_square.thumbnail('b', api=api) }}") - | {% else %} - i.pi-home - | {% endif %} - li.tabs-browse( - title="Browse", - data-toggle="tooltip", - data-placement="right", - class="active") - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - i.pi-folder - | {% if not project.is_private %} - | {% if current_user_is_subscriber %} - li.tabs-search( - title="Search", - data-toggle="tooltip", - data-placement="right") - a(href="{{ url_for('projects.search', project_url=project.url, _external=True)}} ") - i.pi-search - | {% else %} - li.tabs-search( - title="Search (subscribers only)", - data-toggle="tooltip", - data-placement="right") - a(href="{{ url_for('cloud.join') }}") - i.pi-search - | {% endif %} - | {% endif %} - | {{ extension_sidebar_links }} - - | {% if project.has_method('PUT') %} - li( - title="Edit Project", - data-toggle="tooltip", - data-placement="right") - a(href="{{ url_for('projects.edit', project_url=project.url) }}") - i.pi-cog - | {% endif %} - - - #project_nav(class="{{ title }}") - #project_nav-container - | {% if title != 'about' %} - #project_nav-header - .project-title - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - | {{ project.name }} - - | {% block project_tree %} - #project_tree - | {% endblock project_tree %} - | {% endif %} - - - #project_context-container - | {% if project.has_method('PUT') %} - #project_context-header - span#status-bar - - ul.project-edit-tools.disabled - li.button-dropdown - a#item_add.dropdown-toggle.project-mode-view( - type="button", - data-toggle="dropdown", - aria-haspopup="true", - aria-expanded="false") - i.button-add-icon.pi-collection-plus - | New... - - ul.dropdown-menu.add_new-menu - | {{ add_new_menu(project.node_types) }} - - li.button-edit - a#item_edit.project-mode-view( - href="javascript:void(0);", - title="Edit", - data-project_id="{{project._id}}") - i.button-edit-icon.pi-edit - | Edit Project - - li.button-dropdown - a.dropdown-toggle.project-mode-view( - type="button", - data-toggle="dropdown", - aria-haspopup="true", - aria-expanded="false") - i.pi-more-vertical - - ul.dropdown-menu - | {% if current_user.has_cap('admin') %} - li.button-featured - a#item_featured( - href="javascript:void(0);", - title="Feature on project's homepage", - data-toggle="tooltip", - data-placement="left") - i.button-featured-icon.pi-star - | Toggle Featured - - li.button-toggle-public - a#item_toggle_public( - href="javascript:void(0);", - title="Make it accessible to anyone", - data-toggle="tooltip", - data-placement="left") - i.pi-lock-open - | Toggle public - | {% endif %} - - li.button-toggle-projheader - a#item_toggle_projheader( - href="javascript:void(0);", - title="Feature as project's header", - data-toggle="tooltip", - data-placement="left") - i.button-featured-icon.pi-star - | Toggle Project Header video - - li.button-move - a#item_move( - href="javascript:void(0);", - title="Move into a folder...", - data-toggle="tooltip", - data-placement="left") - i.button-move-icon.pi-move - | Move - - li.button-delete - a#item_delete( - href="javascript:void(0);", - title="Can be undone within a month", - data-toggle="tooltip", - data-placement="left") - i.pi-trash - | Delete Project - - // Edit Mode - li.button-cancel - a#item_cancel.project-mode-edit( - href="javascript:void(0);", - title="Cancel changes") - i.button-cancel-icon.pi-cancel - | Cancel - - li.button-save - a#item_save.project-mode-edit( - href="javascript:void(0);", - title="Save changes") - i.button-save-icon.pi-check - | Save Changes - - | {% endif %} - - | {% set utm_source = request.args.get('utm_source') %} - | {% if config.UTM_LINKS and utm_source in config.UTM_LINKS %} - #utm_container - a(href="{{config.UTM_LINKS[utm_source]['link']}}") - img(src="{{config.UTM_LINKS[utm_source]['image']}}", alt="gift", class="img-responsive") - | {% endif %} - #project_context - | {% block project_context %} - | {% if show_project %} - | {% include "projects/view_embed.html" %} - | {% endif %} - | {% endblock project_context %} - - #overlay-mode-move-container - .overlay-container - .title - i.pi-angle-left - | Select the folder where you want to move it - .buttons - button#item_move_accept.move.disabled - | Select a Folder - button#item_move_cancel.cancel - i.pi-cancel - | Cancel - +.p-5.text-center + h2 Project View + .lead. + See Blender Cloud for reference. | {% endblock %} - -| {% block footer_navigation %}{% endblock %} -| {% block footer %}{% endblock %} - - -| {% block footer_scripts_pre %} - -| {% if project.has_method('PUT') %} -| {# JS containing the Edit, Add, Featured, and Move functions #} -script(type="text/javascript", src="{{ url_for('static_pillar', filename='assets/js/project-edit.min.js') }}") -| {% endif %} - -script. - function updateToggleProjHeaderMenuItem() { - var $toggle_projheader = $('#item_toggle_projheader'); - - if (ProjectUtils.isProject()) { - $toggle_projheader.hide(); - return; - } - if (ProjectUtils.nodeType() == 'asset') { - $toggle_projheader.show(); - } else { - $toggle_projheader.hide(); - } - } - $(updateToggleProjHeaderMenuItem); - - // Function to update the interface on loadNodeContent, and edit/saving assets - function updateUi(nodeId, mode) { - - if (mode === 'view') { - $('.project-mode-view').show(); - $('.project-mode-edit').hide(); - - $("#node-edit-form").unbind("submit"); - $("#item_save").unbind("click"); - $("#item_cancel").unbind("click"); - } else if (mode === 'edit') { - $('.project-mode-view').hide(); - $('.project-mode-edit').show(); - } else { - if (console) console.log('Invalid mode:', mode); - } - - // Prevent flicker by scrolling to top - $("#project_context-container").scrollTop(0); - - // Enable specific items under the Add New dropdown - if (ProjectUtils.nodeType() === 'group') { - addMenuEnable(['asset', 'group']); - - } else if (ProjectUtils.nodeType() === 'group_texture') { - addMenuEnable(['group_texture', 'texture']); - - } else if (ProjectUtils.nodeType() === 'group_hdri') { - addMenuEnable(['group_hdri', 'hdri']); - - } else if (!ProjectUtils.isProject()) { - addMenuEnable(false); - } - - updateToggleProjHeaderMenuItem(); - - // Set the page title on the document - var page_title = $('#node-title').text() + " - {{ project.name }} — Blender Cloud"; - DocumentTitleAPI.set_page_title(page_title); - - // TODO: Maybe remove this, now it's also in loadNodeContent(), but double-check - // it's done like that in all users of updateUi(). - $('#project-loading').removeAttr('class'); - } -| {% endblock %} - -| {% block footer_scripts %} -script(src="{{ url_for('static_pillar', filename='assets/jstree/jstree.min.js') }}") - -script. - {% if show_project %} - ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''}); - {% else %} - {% if node %} - ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: false, nodeId: '{{node._id}}'}); - {% endif %} - {% endif %} - - var projectTree = document.getElementById('project_tree'); - - var urlNodeMove = "{{url_for('projects.move_node')}}"; - var urlNodeFeature = "{{url_for('projects.add_featured_node')}}"; - var urlNodeDelete = "{{url_for('projects.delete_node')}}"; - var urlNodeTogglePublic = "{{url_for('projects.toggle_node_public')}}"; - var urlNodeToggleProjHeader = "{{url_for('projects.toggle_node_project_header')}}"; - var urlProjectDelete = "{{url_for('projects.delete')}}"; - var urlProjectEdit = "{{url_for('projects.edit', project_url=project.url)}}"; - - - function loadNodeContent(url, nodeId) { - $('#project-loading').addClass('active'); - $.get(url, function(dataHtml) { - // Update the DOM injecting the generate HTML into the page - $('#project_context').html(dataHtml); - }) - .done(function(){ - updateUi(nodeId, 'view'); - }) - .fail(function(dataResponse) { - $('#project_context').html($('