From 3965061bdedae4d05a03e3e2b731ba666ec0bc83 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 17:01:08 +0200 Subject: [PATCH 01/29] CSS: Split into modules Don't place pure styling on top-level files (those that don't begin with underscore). Instead, import them as individual files. --- src/styles/base.sass | 1241 +------------------------ src/styles/blog.sass | 17 + src/styles/components/_alerts.sass | 72 ++ src/styles/components/_base.sass | 32 + src/styles/components/_buttons.sass | 14 + src/styles/components/_card.sass | 23 + src/styles/components/_checkbox.sass | 8 + src/styles/components/_flyout.sass | 25 + src/styles/components/_footer.sass | 108 +++ src/styles/components/_forms.sass | 132 +++ src/styles/components/_inputs.sass | 54 ++ src/styles/components/_jumbotron.sass | 25 + src/styles/components/_navbar.sass | 364 ++++++++ src/styles/components/_overlay.sass | 75 ++ src/styles/components/_popover.sass | 26 + src/styles/components/_search.sass | 92 ++ src/styles/components/_shortcode.sass | 6 + src/styles/components/_statusbar.sass | 21 + src/styles/components/_tooltip.sass | 20 + 19 files changed, 1135 insertions(+), 1220 deletions(-) create mode 100644 src/styles/components/_alerts.sass create mode 100644 src/styles/components/_base.sass create mode 100644 src/styles/components/_buttons.sass create mode 100644 src/styles/components/_card.sass create mode 100644 src/styles/components/_checkbox.sass create mode 100644 src/styles/components/_flyout.sass create mode 100644 src/styles/components/_footer.sass create mode 100644 src/styles/components/_forms.sass create mode 100644 src/styles/components/_inputs.sass create mode 100644 src/styles/components/_jumbotron.sass create mode 100644 src/styles/components/_navbar.sass create mode 100644 src/styles/components/_overlay.sass create mode 100644 src/styles/components/_popover.sass create mode 100644 src/styles/components/_search.sass create mode 100644 src/styles/components/_shortcode.sass create mode 100644 src/styles/components/_statusbar.sass create mode 100644 src/styles/components/_tooltip.sass diff --git a/src/styles/base.sass b/src/styles/base.sass index 64f93ec9..9eeaeeb5 100644 --- a/src/styles/base.sass +++ b/src/styles/base.sass @@ -7,1223 +7,24 @@ @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/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..ff84c52e 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -2,10 +2,27 @@ @import _config @import _utils +@import _apps_base @import _comments @import _error @import _search +@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 + .container-fluid.blog padding: 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..027f1b92 --- /dev/null +++ b/src/styles/components/_base.sass @@ -0,0 +1,32 @@ +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 + +.container-page + background-color: white + +.page-content + position: relative + flex: 1 + .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..edb993fc --- /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: 20px 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/_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..9af3ba97 --- /dev/null +++ b/src/styles/components/_footer.sass @@ -0,0 +1,108 @@ +/* FOOTER */ +#footer-container + position: relative + + .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 + + 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..11dcd2f7 --- /dev/null +++ b/src/styles/components/_inputs.sass @@ -0,0 +1,54 @@ +/* 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 diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass new file mode 100644 index 00000000..985ed80d --- /dev/null +++ b/src/styles/components/_jumbotron.sass @@ -0,0 +1,25 @@ +// Mainly overrides bootstrap jumbotron settings +.jumbotron + background-size: cover + border-radius: 0 + padding-top: 12em + padding-bottom: 12em + + // 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) diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass new file mode 100644 index 00000000..a6c846cc --- /dev/null +++ b/src/styles/components/_navbar.sass @@ -0,0 +1,364 @@ +/* Navigation */ +.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 + +.navbar-brand + padding-left: 10px + color: $color-text + + width: 120px // Blender Cloud logo width + + &:hover + color: $color-text-dark-primary + +nav.navbar, +nav.sidebar + align-items: center + background-color: $color-background-nav + border: none + display: flex + 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% + + li + user-select: none + position: relative + + a.navbar-item + align-items: center + color: $color-text + display: flex + user-select: none + padding: $navbar-brand-padding-y + height: 100% + transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out + + +media-sm + padding-left: 10px + padding-right: 10px + + &:hover, &:focus + color: $color-primary + background-color: transparent + box-shadow: inset 0 -3px 0 $color-primary + text-decoration: none + + &:focus + box-shadow: inset 0 -3px 0 $color-primary + + &.active + color: $color-primary + 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 + + .dropdown + position: relative + min-width: 60px + + // Removes angle-down icon from bootstrap, + // since we use a nicer chevron. + a:after + display: none + + span.fa-stack + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + + ul.dropdown-menu + padding: 0 + + li + a + padding: 5px 15px 5px 5px + + &: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 + + +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 + +.navbar+.page-content + padding-top: $navbar-height + + +// Secondary navigation for +.nav-secondary + align-items: center + box-shadow: 0 2px 0 0 $color-background + + .nav-link + color: $color-text + transition: box-shadow 150ms ease-in-out + + &:hover, + &.active + box-shadow: 0 2px 0 0 $color-primary + + .nav-title + font-weight: bold + padding-right: 20px 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..929ecb8d --- /dev/null +++ b/src/styles/components/_search.sass @@ -0,0 +1,92 @@ +#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 + 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..3a317919 --- /dev/null +++ b/src/styles/components/_tooltip.sass @@ -0,0 +1,20 @@ +.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 From 2ded541955a0f5ae36646fb64fd229aa94b91521 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 17:01:43 +0200 Subject: [PATCH 02/29] CSS Cleanup: remove font-body specifics --- src/styles/_notifications.sass | 1 - src/styles/_project-dashboard.sass | 3 +-- src/styles/_project-sharing.sass | 4 ---- src/styles/_project.sass | 10 +--------- src/styles/_search.sass | 5 +---- src/styles/_utils.sass | 6 +++--- src/styles/blog.sass | 6 +----- 7 files changed, 7 insertions(+), 28 deletions(-) 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/_project-dashboard.sass b/src/styles/_project-dashboard.sass index c07c0dca..f63b1b50 100644 --- a/src/styles/_project-dashboard.sass +++ b/src/styles/_project-dashboard.sass @@ -287,9 +287,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..2a71724c 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -607,9 +607,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 @@ -713,9 +710,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 @@ -897,7 +892,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 @@ -1911,7 +1905,6 @@ section.node-children .node_index-collection-name font: - family: $font-body size: 4em weight: 600 margin-bottom: -5px @@ -2034,7 +2027,6 @@ section.node-children color: $color-text-dark font: size: 1.5em - family: $font-body weight: 500 text-decoration: none 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/_utils.sass b/src/styles/_utils.sass index de0ba021..1f06804c 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 @@ -125,7 +124,6 @@ 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 @@ -354,7 +352,6 @@ +clearfix color: darken($color-text-dark, 5%) font: - family: $font-body weight: 300 size: 1.2em @@ -660,3 +657,6 @@ transition: all 1s ease-out img transition: all 1s ease-out + +.cursor-pointer + cursor: pointer diff --git a/src/styles/blog.sass b/src/styles/blog.sass index ff84c52e..fe1fdcbc 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -43,7 +43,6 @@ .form-group position: relative margin: 0 auto 30px auto - font-family: $font-body input, textarea, select +input-generic @@ -257,9 +256,7 @@ .item-title color: $color-text-dark display: block - font: - family: $font-body - size: 1.8em + font-size: 1.8em padding: 10px 25px 10px @@ -541,7 +538,6 @@ font: size: 1.6em weight: 400 - family: $font-body .item-info color: $color-text-dark-secondary From b5535a8773d3ccffa15007b0b8c8051a5619d4c2 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 17:02:07 +0200 Subject: [PATCH 03/29] CSS: New primary color and navbar height --- src/styles/_config.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/_config.sass b/src/styles/_config.sass index c69bc5a4..2cea30a5 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: #065687 !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 @@ -104,7 +104,7 @@ $project-sidebar-width: 50px !default $project_header-height: 50px !default $project_footer-height: 30px !default -$navbar-height: 50px !default +$navbar-height: 42px !default $navbar-backdrop-height: 600px !default $node-type-asset_image: #e87d86 !default From 6ff4ee8fa17036b665f2fe4c7bf050c807600dca Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 17:02:36 +0200 Subject: [PATCH 04/29] Minor Dashboard style tweaks --- src/templates/projects/index_dashboard.pug | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/templates/projects/index_dashboard.pug b/src/templates/projects/index_dashboard.pug index 48c9008c..bb198864 100644 --- a/src/templates/projects/index_dashboard.pug +++ b/src/templates/projects/index_dashboard.pug @@ -213,7 +213,7 @@ style. img.header( src="{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}") .text - .title Projects + h5 Projects .lead span. Create and manage your own personal projects. @@ -223,13 +223,14 @@ style. href="https://cloud.blender.org/blog/introducing-private-projects") | Learn More - section.announcement + section.announcement.mt-3 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 + h5 + a.text-muted(href="https://cloud.blender.org/blog/introducing-blender-sync") + | Textures Browser & Settings Sync .lead span. From d0ff519980c60d5708f92c2e8c4d876e86199e7c Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 17:03:13 +0200 Subject: [PATCH 05/29] Font Pillar: Aliases for CC license icons Also comments about updating the font from fontello.com --- src/styles/font-pillar.sass | 67 ++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) 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") From c35fb6202bd0be91179218f1338abae9638679fb Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 28 Aug 2018 15:51:56 +0200 Subject: [PATCH 06/29] render_secondary_navigation: Bootstrap 4 tweaks --- src/templates/projects/_macros.pug | 77 +++++++++++++++--------------- 1 file changed, 38 insertions(+), 39 deletions(-) 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 %} From b5698293436e43b7406c575dbe4a9339bfd780fb Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 28 Aug 2018 15:52:50 +0200 Subject: [PATCH 07/29] General cleanup --- src/styles/_error.sass | 7 +++---- src/styles/_pages.sass | 4 ---- src/styles/components/_base.sass | 5 +++-- src/styles/components/_card.sass | 2 +- src/styles/theatre.sass | 1 + src/templates/menus/user_base.pug | 18 +++++++----------- 6 files changed, 15 insertions(+), 22 deletions(-) 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/_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/components/_base.sass b/src/styles/components/_base.sass index 027f1b92..51aa3ef4 100644 --- a/src/styles/components/_base.sass +++ b/src/styles/components/_base.sass @@ -28,5 +28,6 @@ body .page-content position: relative flex: 1 - .container-box - +container-box + +.container-box + +container-box diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass index edb993fc..d13003b7 100644 --- a/src/styles/components/_card.sass +++ b/src/styles/components/_card.sass @@ -11,7 +11,7 @@ border: none .card-body - padding: 20px 0 + padding: 15px 0 .card-fade img diff --git a/src/styles/theatre.sass b/src/styles/theatre.sass index 10b95e22..abb97a3a 100644 --- a/src/styles/theatre.sass +++ b/src/styles/theatre.sass @@ -26,6 +26,7 @@ body.theatre .container-page display: flex align-items: center justify-content: center + .page-body height: 100% width: 100% diff --git a/src/templates/menus/user_base.pug b/src/templates/menus/user_base.pug index 079fc589..a3fa6520 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 From 819300f95459b712d4c49c91e0f5b30a0a32ccde Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 28 Aug 2018 15:52:56 +0200 Subject: [PATCH 08/29] Navbar cleanup --- src/styles/components/_navbar.sass | 237 ++++++----------------------- 1 file changed, 49 insertions(+), 188 deletions(-) diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index a6c846cc..f801ece6 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -1,5 +1,7 @@ -/* Navigation */ +// Navigation. .navbar-overlay + +media-lg + display: block bottom: 0 display: none left: 0 @@ -11,87 +13,26 @@ 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 - .navbar-brand padding-left: 10px color: $color-text - width: 120px // Blender Cloud logo width &:hover color: $color-text-dark-primary -nav.navbar, + +nav.navbar + .navbar-collapse + > ul > li > .navbar-item + padding: $navbar-nav-link-padding-x + height: $nav-link-height + +.navbar, nav.sidebar align-items: center background-color: $color-background-nav @@ -110,43 +51,41 @@ nav.sidebar margin: 0 width: 100% + .navbar-item + align-items: center + color: $color-text + display: flex + user-select: none + transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out + + +media-sm + padding-left: 10px + padding-right: 10px + + &:hover, &:focus + color: $color-primary + background-color: transparent + box-shadow: inset 0 -3px 0 $color-primary + text-decoration: none + + &:focus + box-shadow: inset 0 -3px 0 $color-primary + + &.active + color: $color-primary + 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 + li user-select: none position: relative - a.navbar-item - align-items: center - color: $color-text - display: flex - user-select: none - padding: $navbar-brand-padding-y - height: 100% - transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out - - +media-sm - padding-left: 10px - padding-right: 10px - - &:hover, &:focus - color: $color-primary - background-color: transparent - box-shadow: inset 0 -3px 0 $color-primary - text-decoration: none - - &:focus - box-shadow: inset 0 -3px 0 $color-primary - - &.active - color: $color-primary - 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 @@ -159,7 +98,6 @@ nav.sidebar box-shadow: 1px 1px 0 rgba(black, .2) position: relative - .special width: 18px height: 18px @@ -190,8 +128,7 @@ nav.sidebar +position-center-translate .dropdown - position: relative - min-width: 60px + min-width: 60px // navbar avatar size // Removes angle-down icon from bootstrap, // since we use a nicer chevron. @@ -205,41 +142,25 @@ nav.sidebar transform: translate(-50%, -50%) ul.dropdown-menu - padding: 0 - li a - padding: 5px 15px 5px 5px + white-space: nowrap &:hover - color: $color-primary - box-shadow: none + box-shadow: none // removes underline - &.subitem + &.subitem // e.g. "Not Sintel? Log out" font-size: .8em padding-top: 0 text-transform: initial i - width: 35px - text-align: center + width: 30px &.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 @@ -280,71 +201,11 @@ nav.sidebar 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 .navbar+.page-content - padding-top: $navbar-height - + padding-top: $nav-link-height // Secondary navigation for .nav-secondary From 84608500b96ca3dd234f5df3a74d440e4bb949a7 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 28 Aug 2018 15:53:47 +0200 Subject: [PATCH 09/29] CSS: Split dropdown styling --- src/styles/base.sass | 1 + src/styles/components/_dropdown.sass | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/styles/components/_dropdown.sass diff --git a/src/styles/base.sass b/src/styles/base.sass index 9eeaeeb5..eb180f24 100644 --- a/src/styles/base.sass +++ b/src/styles/base.sass @@ -10,6 +10,7 @@ @import components/base @import components/alerts @import components/navbar +@import components/dropdown @import components/footer @import components/shortcode @import components/statusbar diff --git a/src/styles/components/_dropdown.sass b/src/styles/components/_dropdown.sass new file mode 100644 index 00000000..dc322071 --- /dev/null +++ b/src/styles/components/_dropdown.sass @@ -0,0 +1,12 @@ +// Global, we want all menus to look like this. +.dropdown-menu + box-shadow: $dropdown-box-shadow + + > li + > a + padding: $dropdown-item-padding-y + +// Open dropdown on mouse hover dropdowns in the navbar. +nav .dropdown:hover + ul.dropdown-menu + display: block From 40f79af49dce0b53f7f04e24c3fe9902cbac5f84 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 28 Aug 2018 15:54:14 +0200 Subject: [PATCH 10/29] Tooltips: Cleanup --- src/styles/_config.sass | 7 ++++++- src/styles/_utils.sass | 3 +++ src/styles/components/_tooltip.sass | 17 +---------------- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 2cea30a5..cf088754 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -104,7 +104,6 @@ $project-sidebar-width: 50px !default $project_header-height: 50px !default $project_footer-height: 30px !default -$navbar-height: 42px !default $navbar-backdrop-height: 600px !default $node-type-asset_image: #e87d86 !default @@ -125,3 +124,9 @@ $z-index-base: 13 !default @media (min-width: $screen-lg-min) width: 1270px + + +// Tooltips. +$tooltip-font-size: 0.83rem +$tooltip-max-width: auto +$tooltip-opacity: 1 diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index 1f06804c..f68216a0 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -660,3 +660,6 @@ .cursor-pointer cursor: pointer + +.user-select-none + user-select: none diff --git a/src/styles/components/_tooltip.sass b/src/styles/components/_tooltip.sass index 3a317919..8a501463 100644 --- a/src/styles/components/_tooltip.sass +++ b/src/styles/components/_tooltip.sass @@ -1,20 +1,5 @@ .tooltip - transition: opacity 50ms ease-in-out - &.in - opacity: 1 + transition: none .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 From 46b0d6d6639636e5e95d632b70efea1b733bfea5 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 29 Aug 2018 16:30:17 +0200 Subject: [PATCH 11/29] Upgrade npm dependencies Change gulp-uglify for gulp-uglify-es which has support for ES6. New dependencies: * boostrap * jquery * popper.js (required by bootstrap) --- gulpfile.js | 2 +- package.json | 35 ++++++++++++++++++++--------------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 79b9d178..149089f9 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, 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" } } From 814275fc95643937b78b553db436bf802dd9c5d8 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 14:17:39 +0200 Subject: [PATCH 12/29] Gulp: only chmod when running --production --- gulpfile.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 149089f9..1e54113d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -21,6 +21,7 @@ var enabled = { prettyPug: !argv.production, cachify: !argv.production, cleanup: argv.production, + chmod: argv.production, }; var destination = { @@ -67,7 +68,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 +83,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 +95,7 @@ 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())); }); From ac3a599bb6f9366b017fafc508f9c2a38e8e6ba8 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 14:19:09 +0200 Subject: [PATCH 13/29] Gulp: build our own bootstrap js only using the needed modules. At this point we only use tooltip and dropdown code, but we could use tabs or carousels in the future. Just add them to the toUglify list. --- gulpfile.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/gulpfile.js b/gulpfile.js index 1e54113d..aaf4caec 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -30,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() { @@ -101,6 +105,29 @@ gulp.task('scripts_concat_markdown', function() { }); +// Combine all needed Bootstrap JavaScript into a single file. +gulp.task('scripts_concat_bootstrap', function() { + + toUglify = [ + source.popper + 'dist/umd/popper.min.js', + source.bootstrap + 'js/dist/index.js', + source.bootstrap + 'js/dist/util.js', + source.bootstrap + 'js/dist/tooltip.js', + source.bootstrap + 'js/dist/dropdown.js', + ]; + + gulp.src(toUglify) + .pipe(gulpif(enabled.failCheck, plumber())) + .pipe(gulpif(enabled.maps, sourcemaps.init())) + .pipe(concat("bootstrap.min.js")) + .pipe(gulpif(enabled.uglify, uglify())) + .pipe(gulpif(enabled.maps, sourcemaps.write("."))) + .pipe(gulpif(enabled.chmod, chmod(644))) + .pipe(gulp.dest(destination.js)) + .pipe(gulpif(argv.livereload, livereload())); +}); + + // While developing, run 'gulp watch' gulp.task('watch',function() { // Only listen for live reloads if ran with --livereload @@ -138,4 +165,5 @@ gulp.task('default', tasks.concat([ 'scripts', 'scripts_concat_tutti', 'scripts_concat_markdown', + 'scripts_concat_bootstrap', ])); From 2332bc0960477b0bea2a3a0a5b4ba8641a1f1808 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 14:20:59 +0200 Subject: [PATCH 14/29] jQuery: Small utility to set CSS display type Showing elements with jQuery's native .show() sets display as 'inline', but sometimes we need to set 'flex' or 'inline-block'. --- src/scripts/tutti/00_utils.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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)); From 7405e198eb60696600e3c4a9b213c3215f04e40c Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 14:23:23 +0200 Subject: [PATCH 15/29] Use .displayAs() instead of .show() Needed for CSS display to be set as inline-block instead of show()'s inline. --- src/templates/nodes/custom/_scripts.pug | 2 +- src/templates/projects/edit.pug | 3 ++- src/templates/projects/view.pug | 8 ++++---- 3 files changed, 7 insertions(+), 6 deletions(-) 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/projects/edit.pug b/src/templates/projects/edit.pug index e24883f0..77d40c6d 100644 --- a/src/templates/projects/edit.pug +++ b/src/templates/projects/edit.pug @@ -105,7 +105,8 @@ script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets script(type="text/javascript"). - $('.project-mode-edit').show(); + // Show view mode buttons. + $('.project-mode-view').displayAs('inline-block'); ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''}); var convert = new Markdown.getSanitizingConverter().makeHtml; diff --git a/src/templates/projects/view.pug b/src/templates/projects/view.pug index 6626636a..f4669381 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -303,7 +303,7 @@ script. function updateUi(nodeId, mode) { if (mode === 'view') { - $('.project-mode-view').show(); + $('.project-mode-view').displayAs('inline-block'); $('.project-mode-edit').hide(); $("#node-edit-form").unbind("submit"); @@ -311,12 +311,12 @@ script. $("#item_cancel").unbind("click"); } else if (mode === 'edit') { $('.project-mode-view').hide(); - $('.project-mode-edit').show(); + $('.project-mode-edit').displayAs('inline-block'); } else { if (console) console.log('Invalid mode:', mode); } - // Prevent flicker by scrolling to top + // Prevent flicker by scrolling to top. $("#project_context-container").scrollTop(0); // Enable specific items under the Add New dropdown @@ -497,7 +497,7 @@ script. // Handle old-style /p/{url}/#node-ID links, and redirect them to the correct spot. redirectToNode(location.hash.substr(1)); } - $('.project-mode-view').show(); + $('.project-mode-view').displayAs('inline-block'); $('.project-mode-edit').hide(); } else { displayNode(nodeId, false); From 76338b4568aa9d5cc3d6edc852142c2e42c6d86e Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 14:24:25 +0200 Subject: [PATCH 16/29] Sass config: Bootstrap overrides --- src/styles/_config.sass | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/styles/_config.sass b/src/styles/_config.sass index cf088754..04c0831e 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: #065687 !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 @@ -101,11 +101,9 @@ $sidebar-width: 50px !default /* Project specifics */ $project_nav-width: 250px !default $project-sidebar-width: 50px !default -$project_header-height: 50px !default +$project_header-height: 37px !default $project_footer-height: 30px !default -$navbar-backdrop-height: 600px !default - $node-type-asset_image: #e87d86 !default $node-type-asset_file: #CC91C7 !default $node-type-asset_video: #7dc5e8 !default @@ -126,6 +124,26 @@ $z-index-base: 13 !default width: 1270px +// Bootstrap overrides. +$enable-caret: false + +$border-radius: .2rem +$btn-border-radius: $border-radius + +$primary: $color-primary + +$body-bg: $color-background +$body-color: $color-text + +$color-background-nav: #fff +$link-color: $primary + +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" +$font-size-base: .9rem + +$dropdown-border-width: 0 +$dropdown-box-shadow: 0 10px 25px rgba($black, .1) + // Tooltips. $tooltip-font-size: 0.83rem $tooltip-max-width: auto From 33bd2c5880c6d60597976a3ef63d11c58b434e67 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 14:26:42 +0200 Subject: [PATCH 17/29] Sass: Import modules on top level --- src/styles/base.sass | 48 +++++++++++++++++++++++- src/styles/blog.sass | 68 ++++++++++++++++++++++++++++++++- src/styles/main.sass | 73 +++++++++++++++++++++++++++++++++++- src/styles/project-main.sass | 70 +++++++++++++++++++++++++++++++++- 4 files changed, 253 insertions(+), 6 deletions(-) diff --git a/src/styles/base.sass b/src/styles/base.sass index eb180f24..6a5ac813 100644 --- a/src/styles/base.sass +++ b/src/styles/base.sass @@ -1,7 +1,53 @@ -@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 diff --git a/src/styles/blog.sass b/src/styles/blog.sass index fe1fdcbc..e7460a5c 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -1,8 +1,72 @@ -@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 -@import _apps_base +// 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 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/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 From b4acfb89fa3c6082f977e6e4ea86c46e77bb10d2 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 19:31:36 +0200 Subject: [PATCH 18/29] Layout: use bootstrap classes --- src/templates/_macros/_add_new_menu.pug | 15 +++-- src/templates/_macros/_file_uploader_form.pug | 10 +-- .../_macros/_file_uploader_javascript.pug | 6 +- src/templates/_modal.pug | 2 +- src/templates/layout.pug | 7 +- src/templates/menus/user_base.pug | 15 +++-- .../nodes/custom/_node_preview_forbidden.pug | 8 +-- .../nodes/custom/asset/video/view_embed.pug | 2 +- src/templates/nodes/custom/blog/_macros.pug | 12 ++-- .../nodes/custom/comment/list_embed_base.pug | 1 - .../nodes/custom/hdri/view_embed.pug | 2 +- src/templates/nodes/custom/post/create.pug | 4 +- .../nodes/custom/post/view_embed.pug | 2 +- .../nodes/custom/texture/view_embed.pug | 4 +- src/templates/nodes/edit_embed.pug | 14 ++-- src/templates/organizations/index.pug | 2 +- src/templates/organizations/view_embed.pug | 2 +- src/templates/projects/edit.pug | 23 ++++--- src/templates/projects/edit_layout.pug | 15 ++--- .../projects/edit_node_type_embed.pug | 4 +- src/templates/projects/home_images.pug | 2 +- src/templates/projects/home_layout.pug | 34 ++++++---- src/templates/projects/index_dashboard.pug | 48 ++++++++------ src/templates/projects/view.pug | 64 +++++++++---------- src/templates/projects/view_embed.pug | 5 +- src/templates/stats.pug | 2 +- src/templates/users/edit_embed_base.pug | 4 +- src/templates/users/login.pug | 4 +- src/templates/users/settings/base.pug | 2 +- src/templates/users/settings/profile.pug | 2 +- src/templates/users/tasks.pug | 2 +- 31 files changed, 170 insertions(+), 149 deletions(-) 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/_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 a3fa6520..3cbebd77 100644 --- a/src/templates/menus/user_base.pug +++ b/src/templates/menus/user_base.pug @@ -16,27 +16,27 @@ li.dropdown 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 %} @@ -55,8 +55,9 @@ li.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/asset/video/view_embed.pug b/src/templates/nodes/custom/asset/video/view_embed.pug index 72cd5a73..ea587f74 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 index 1fc29fe3..8d9791f9 100644 --- a/src/templates/nodes/custom/blog/_macros.pug +++ b/src/templates/nodes/custom/blog/_macros.pug @@ -8,10 +8,10 @@ a.blog_index-header(href="{{ node.url }}") | {% 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 }} +.blog_index-item.mx-auto + h2.pt-4.px-4 + a.text-muted(href="{{ node.url }}") + | {{ node.name }} ul.meta | {% if node.project.name %} li {{ node.project.name }} @@ -46,7 +46,7 @@ a.blog_index-header(href="{{ node.url }}") i.pi-document-text | {% endif %} - a.item-title( + a.item-title.text-muted( href="{{ node.url }}") | {{node.name}} @@ -66,7 +66,7 @@ a.blog_index-header(href="{{ node.url }}") | {% 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)}}") + a.btn.btn-outline-primary.button-create(href="{{url_for('nodes.posts_create', project_id=project._id)}}") i.pi-plus | Create New Post | {% endif %} 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..10414e29 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.button-create(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..4924162e 100644 --- a/src/templates/nodes/custom/post/view_embed.pug +++ b/src/templates/nodes/custom/post/view_embed.pug @@ -5,7 +5,7 @@ #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)}}") + a.btn.btn-outline-secondary.button-edit(href="{{url_for('nodes.edit', node_id=node._id)}}") i.pi-edit | Edit Post | {% endif %} 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..53c222c4 100644 --- a/src/templates/organizations/index.pug +++ b/src/templates/organizations/index.pug @@ -27,7 +27,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba ul#sub-nav-tabs__list li.result#create_organization_result_panel li.create - button.btn.btn-success(onclick='createNewOrganization(this)') + button.btn.btn-outline-success(onclick='createNewOrganization(this)') i.pi-plus | Create Organization | {% endif %} 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/edit.pug b/src/templates/projects/edit.pug index 77d40c6d..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,8 +108,8 @@ script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets script(type="text/javascript"). - // Show view mode buttons. - $('.project-mode-view').displayAs('inline-block'); + // 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_layout.pug b/src/templates/projects/home_layout.pug index 733f6ae7..58111965 100644 --- a/src/templates/projects/home_layout.pug +++ b/src/templates/projects/home_layout.pug @@ -38,29 +38,35 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba section.dashboard-secondary section.announcement - img.header( - src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}") + a(href="https://cloud.blender.org/blog/introducing-blender-sync") + 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 + h5 + a.text-muted(href="https://cloud.blender.org/blog/introducing-blender-sync") + | Blender Sync .lead - span. + p. Save your settings once. Use them anywhere. Carry your Blender configuration with you, use our free add-on to sync your keymaps and preferences. -
+ #[hr] 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 + .row + .col-md-8 + a.btn.btn-block.btn-outline-success( + href="https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip") + i.pi-download + | Download v{{ config.BLENDER_CLOUD_ADDON_VERSION }} + .col-md-4 + a.btn.btn-link( + href="{{ learn_more_btn_url }}") + | Learn More + i.pi-angle-right | {% endif %} | {% endblock %} diff --git a/src/templates/projects/index_dashboard.pug b/src/templates/projects/index_dashboard.pug index bb198864..fcc50df2 100644 --- a/src/templates/projects/index_dashboard.pug +++ b/src/templates/projects/index_dashboard.pug @@ -59,15 +59,15 @@ style. | {% endif %} | {% if current_user.has_cap('subscriber') %} - li.create#project-create( + li#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") + li + a.btn.btn-outline-success(href="/renew", target="_blank") i.pi-heart | Renew subscription to create a project | {% endif %} @@ -210,44 +210,52 @@ style. section.dashboard-secondary section.announcement - img.header( - src="{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}") + a(href="https://cloud.blender.org/blog/introducing-private-projects") + img.header( + src="{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}") .text - h5 Projects + h5 + a.text-muted(href="https://cloud.blender.org/blog/introducing-private-projects") + | Projects .lead - span. + p. Create and manage your own personal projects. Upload assets and collaborate with other Blender Cloud members. - .buttons - a.btn.btn-default.btn-outline.blue( + + a.btn.btn-link.btn-block( href="https://cloud.blender.org/blog/introducing-private-projects") | Learn More + i.pi-angle-right section.announcement.mt-3 a(href="https://cloud.blender.org/blog/introducing-blender-sync") - img.header( - src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}") + img.header( + src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}") .text h5 a.text-muted(href="https://cloud.blender.org/blog/introducing-blender-sync") | Textures Browser & Settings Sync .lead - span. + p. 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 + .row + .col-md-8 + a.btn.btn-outline-success.btn-block( + href="https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip") + i.pi-download + | Download Add-on v {{ config.BLENDER_CLOUD_ADDON_VERSION }} + .col-md-4 + a.btn.btn-link( + href="https://cloud.blender.org/blog/introducing-blender-sync") + | Learn More + i.pi-angle-right | {% endblock %} diff --git a/src/templates/projects/view.pug b/src/templates/projects/view.pug index f4669381..8151fbe6 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -2,6 +2,7 @@ | {% from '_macros/_add_new_menu.html' import add_new_menu %} | {% block page_title %}{{ project.name }}{% endblock%} +| {% set title = 'project' %} | {% block og %} meta(property="og:type", content="website") @@ -78,15 +79,14 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotke | {% 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 %} | {% block body %} #project-container #project-side-container - #project_sidebar - ul.project-tabs + #project_sidebar.bg-white + ul.project-tabs.p-0 li.tabs-thumbnail(class="{% if project.picture_square %}image{% endif %}") a(href="{{url_for('projects.view', project_url=project.url)}}") #project-loading @@ -96,6 +96,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } | {% else %} i.pi-home | {% endif %} + li.tabs-browse( title="Browse", data-toggle="tooltip", @@ -103,6 +104,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } 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( @@ -135,29 +137,29 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } #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 }} + #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 }} | {% block project_tree %} - #project_tree + #project_tree.bg-white | {% endblock project_tree %} | {% endif %} #project_context-container | {% if project.has_method('PUT') %} - #project_context-header + #project_context-header.bg-white 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") + li.dropdown + button#item_add.project-mode-view.btn.btn-sm.btn-outline-secondary.dropdown-toggle( + type="button", + data-toggle="dropdown", + aria-haspopup="true", + aria-expanded="false") i.button-add-icon.pi-collection-plus | New... @@ -165,52 +167,52 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } | {{ add_new_menu(project.node_types) }} li.button-edit - a#item_edit.project-mode-view( + a#item_edit.project-mode-view.btn.btn-sm.btn-outline-secondary.ml-2( 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( + li.dropdown + button.dropdown-toggle.project-mode-view.btn.btn-sm.btn-outline-secondary.mx-2( type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") - i.pi-more-vertical + i.pi-more-vertical.p-0 ul.dropdown-menu | {% if current_user.has_cap('admin') %} - li.button-featured + li.dropdown-item 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 + i.pi-star | Toggle Featured - li.button-toggle-public + li.dropdown-item 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 + | Toggle Public | {% endif %} - li.button-toggle-projheader + li.dropdown-item 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 + i.pi-star | Toggle Project Header video - li.button-move + li.dropdown-item.button-move a#item_move( href="javascript:void(0);", title="Move into a folder...", @@ -219,7 +221,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } i.button-move-icon.pi-move | Move - li.button-delete + li.dropdown-item.button-delete a#item_delete( href="javascript:void(0);", title="Can be undone within a month", @@ -230,14 +232,14 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } // Edit Mode li.button-cancel - a#item_cancel.project-mode-edit( + a#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.project-mode-edit( + a#item_save.project-mode-edit.btn.btn-outline-success.mx-2( href="javascript:void(0);", title="Save changes") i.button-save-icon.pi-check @@ -272,9 +274,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') } | {% endblock %} -| {% block footer_navigation %}{% endblock %} -| {% block footer %}{% endblock %} - +| {% block footer_container %}{% endblock %} | {% block footer_scripts_pre %} diff --git a/src/templates/projects/view_embed.pug b/src/templates/projects/view_embed.pug index ffa2ac30..e14a2999 100644 --- a/src/templates/projects/view_embed.pug +++ b/src/templates/projects/view_embed.pug @@ -22,9 +22,8 @@ | {% endif %} section.node-details-container.project - .node-details-title - h1 - a(href="{{ url_for( 'projects.view', project_url=project.url) }}") {{ project.name }} + h2.px-3.pt-3 + a(href="{{ url_for( 'projects.view', project_url=project.url) }}") {{ project.name }} | {% if project.description %} .node-details-description diff --git a/src/templates/stats.pug b/src/templates/stats.pug index 2ae14414..e43d1974 100644 --- a/src/templates/stats.pug +++ b/src/templates/stats.pug @@ -49,7 +49,7 @@ h3. Now only $10 per month - .btn.btn-default + .btn.btn-outline-primary | Join the Cloud hr diff --git a/src/templates/users/edit_embed_base.pug b/src/templates/users/edit_embed_base.pug index 52743002..aa66e199 100644 --- a/src/templates/users/edit_embed_base.pug +++ b/src/templates/users/edit_embed_base.pug @@ -72,9 +72,9 @@ | none | {% endif %} - a.btn.btn-default(href="javascript:update_from_bid()") Update from Blender ID + a.btn.btn-outline-secondary(href="javascript:update_from_bid()") Update from Blender ID - input#submit_edit_user.btn.btn-default( + input#submit_edit_user.btn.btn-outline-success( data-user-id="{{user.user_id}}", type="submit" value="Submit") diff --git a/src/templates/users/login.pug b/src/templates/users/login.pug index f01f2868..e0c91e1b 100644 --- a/src/templates/users/login.pug +++ b/src/templates/users/login.pug @@ -18,11 +18,11 @@ .buttons .login-button-container //a.forgot(href="https://blender.org/id/reset") forgot your password? - button.btn.btn-success.btn-block.button-login(type="submit") + button.btn.btn-outline-success.btn-block.button-login(type="submit") i.pi-log-in | Login - //a.btn.btn-default.button-register(href="https://blender.org/id/register", target="_blank") + //a.btn.btn-outline-secondary.button-register(href="https://blender.org/id/register", target="_blank") // i.pi-star-outline // | Create Account diff --git a/src/templates/users/settings/base.pug b/src/templates/users/settings/base.pug index 5b6ad086..5cf350b3 100644 --- a/src/templates/users/settings/base.pug +++ b/src/templates/users/settings/base.pug @@ -3,7 +3,7 @@ //- can provide overrides. | {% block body %} .container - #settings + #settings.d-flex.py-4.flex-xs-column #settings-sidebar | {% block settings_sidebar %} .settings-header diff --git a/src/templates/users/settings/profile.pug b/src/templates/users/settings/profile.pug index ce9c5627..427727dd 100644 --- a/src/templates/users/settings/profile.pug +++ b/src/templates/users/settings/profile.pug @@ -28,7 +28,7 @@ span {{ _("Change Gravatar") }} .buttons - button.btn.btn-default.button-submit(type='submit') + button.btn.btn-outline-success.button-submit(type='submit') i.pi-check | {{ _("Save Changes") }} | {% endblock %} diff --git a/src/templates/users/tasks.pug b/src/templates/users/tasks.pug index 3110ffba..96c76ec9 100644 --- a/src/templates/users/tasks.pug +++ b/src/templates/users/tasks.pug @@ -137,7 +137,7 @@ script(). $('td', row).eq(4).html(render_timing(data.timing)); $('td', row).eq(5).html(render_status_label(data, data.name)); - var view_tag = ' View'; + var view_tag = ' View'; $('td', row).eq(6).html(view_tag); } }); From 9c2ded79dd7670174a065c91274675366e6871b7 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 31 Aug 2018 19:32:17 +0200 Subject: [PATCH 19/29] CSS: Cleanup and simplification Mainly to rely more on bootstrap styling --- src/styles/_comments.sass | 9 + src/styles/_config.sass | 2 +- src/styles/_organizations.sass | 3 - src/styles/_project.sass | 384 +++++---------------------- src/styles/_user.sass | 7 - src/styles/_utils.sass | 21 +- src/styles/blog.sass | 23 +- src/styles/components/_base.sass | 6 +- src/styles/components/_dropdown.sass | 1 + src/styles/components/_footer.sass | 19 +- src/styles/components/_inputs.sass | 16 -- src/styles/components/_navbar.sass | 128 ++++----- src/styles/components/_search.sass | 21 +- src/styles/plugins/_jstree.sass | 10 +- src/styles/theatre.sass | 3 +- 15 files changed, 177 insertions(+), 476 deletions(-) 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 04c0831e..f0f1f1f7 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -132,7 +132,7 @@ $btn-border-radius: $border-radius $primary: $color-primary -$body-bg: $color-background +$body-bg: $white $body-color: $color-text $color-background-nav: #fff diff --git a/src/styles/_organizations.sass b/src/styles/_organizations.sass index 583a8250..f3b82eb0 100644 --- a/src/styles/_organizations.sass +++ b/src/styles/_organizations.sass @@ -5,9 +5,6 @@ body.organizations li.result padding: 10px 20px - li.create - margin-left: auto - .dashboard-secondary .box diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 2a71724c..822380ca 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, @@ -68,11 +67,6 @@ body.blog 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 +79,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 @@ -109,77 +96,41 @@ body.blog border-top: thin solid transparent &:hover - background-color: $color-background-nav-light + background-color: $primary 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: $white a - width: $project-sidebar-width - height: $project-sidebar-width - display: flex align-items: center + display: flex justify-content: center - color: $color-text-light-primary + height: $project-sidebar-width + width: $project-sidebar-width 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%) + background-color: $primary + color: $white a - color: white + color: $white &.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 +150,6 @@ body.blog +media-xs width: initial - background-color: $project-sidebar-background display: block left: 0 position: relative @@ -221,10 +171,6 @@ 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 @@ -232,42 +178,24 @@ body.blog position: fixed top: $project_header-height 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) #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 +206,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 +220,7 @@ span#status-bar &.info color: $color-info &.error - color: $color-danger + color: $danger &.warning color: $color-warning &.success @@ -320,71 +247,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 +296,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 +305,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 @@ -661,7 +433,6 @@ ul.project_nav-edit-list #node-container flex: 1 - color: $color-text-dark background-color: white /* For error messages (403) and other overlaid text*/ @@ -684,8 +455,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 @@ -697,11 +466,10 @@ 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 @@ -820,7 +588,7 @@ $node-preview-max-height-lg: 700px margin-left: auto &.pending - color: $color-danger + color: $danger section.node-preview.texture overflow: hidden @@ -1069,13 +837,6 @@ section.node-preview-forbidden span display: block - a - color: $color-text-light - - &.btn - border-color: white - color: white - hr opacity: .5 @@ -1122,9 +883,6 @@ section.node-preview.group padding: 0 margin: 0 - &.project - .node-details-title - padding: 10px 20px 0 20px .node-details-description +node-details-description @@ -1158,7 +916,7 @@ section.node-preview.group padding-left: 0 &.status-pending - color: $color-danger + color: $danger &.public color: $color-success @@ -1348,7 +1106,7 @@ section.node-details-container opacity: 1 .error-node-type-not-found - color: $color-danger + color: $danger clear: both a.learn-more @@ -2093,15 +1851,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 @@ -2168,7 +1926,7 @@ section.node-children outline: none &.field-error - border-color: $color-danger + border-color: $danger .md-preview-loading position: absolute @@ -2415,7 +2173,7 @@ section.node-children .cancel +button($color-warning, 3px) .delete - +button($color-danger, 3px) + +button($danger, 3px) .toggle margin: 0 20px @@ -2426,7 +2184,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/_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 f68216a0..3bdf374c 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -82,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 @@ -121,23 +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 - 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 diff --git a/src/styles/blog.sass b/src/styles/blog.sass index e7460a5c..550d1edc 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -94,9 +94,6 @@ +media-xs flex-direction: column padding-top: 0 - display: flex - padding: - bottom: 15px video max-width: 100% @@ -278,14 +275,7 @@ width: 100% .blog_index-item - +media-lg - max-width: 780px - +media-md - max-width: 780px - +media-sm - max-width: 780px - - margin: 15px auto + max-width: 780px &:hover .item-info a @@ -317,13 +307,6 @@ +media-lg min-height: 250px - .item-title - color: $color-text-dark - display: block - font-size: 1.8em - - padding: 10px 25px 10px - ul.meta +list-meta font-size: .9em @@ -585,7 +568,7 @@ margin: 0 auto padding: 15px 0 margin: 0 auto - border-bottom: thin solid $color-background + border-bottom: thin solid $color-background-dark &:last-child border-bottom: none @@ -616,7 +599,7 @@ position: absolute top: 20px border-radius: 3px - background-color: $color-background + background-color: $color-background-dark overflow: hidden img diff --git a/src/styles/components/_base.sass b/src/styles/components/_base.sass index 51aa3ef4..b4a8fa0c 100644 --- a/src/styles/components/_base.sass +++ b/src/styles/components/_base.sass @@ -22,12 +22,8 @@ body &.box +container-box -.container-page - background-color: white - .page-content - position: relative - flex: 1 + background-color: $white .container-box +container-box diff --git a/src/styles/components/_dropdown.sass b/src/styles/components/_dropdown.sass index dc322071..f03e38df 100644 --- a/src/styles/components/_dropdown.sass +++ b/src/styles/components/_dropdown.sass @@ -1,6 +1,7 @@ // 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 diff --git a/src/styles/components/_footer.sass b/src/styles/components/_footer.sass index 9af3ba97..46c2b510 100644 --- a/src/styles/components/_footer.sass +++ b/src/styles/components/_footer.sass @@ -1,15 +1,24 @@ /* FOOTER */ -#footer-container +.footer-wrapper + background-color: $color-background position: relative - .row - +media-xs - margin: 0 + &: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 @@ -58,7 +67,7 @@ footer transform: scale(1) -#footer-navigation +.footer-navigation font-size: .85em margin-bottom: 5px color: lighten($color-text, 30%) diff --git a/src/styles/components/_inputs.sass b/src/styles/components/_inputs.sass index 11dcd2f7..2690a549 100644 --- a/src/styles/components/_inputs.sass +++ b/src/styles/components/_inputs.sass @@ -24,23 +24,7 @@ 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 diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index f801ece6..ee13a1d5 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -1,43 +1,8 @@ // Navigation. -.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 - padding-left: 10px - color: $color-text - width: 120px // Blender Cloud logo width - - &:hover - color: $color-text-dark-primary - - -nav.navbar - .navbar-collapse - > ul > li > .navbar-item - padding: $navbar-nav-link-padding-x - height: $nav-link-height - .navbar, nav.sidebar - align-items: center - background-color: $color-background-nav border: none - display: flex + color: $color-text-dark-secondary padding: 0 z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ @@ -53,30 +18,26 @@ nav.sidebar .navbar-item align-items: center - color: $color-text display: flex user-select: none - transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out + color: inherit +media-sm padding-left: 10px padding-right: 10px &:hover, &:focus - color: $color-primary + color: $primary background-color: transparent - box-shadow: inset 0 -3px 0 $color-primary + box-shadow: inset 0 -3px 0 $primary text-decoration: none &:focus - box-shadow: inset 0 -3px 0 $color-primary + box-shadow: inset 0 -3px 0 $primary &.active - color: $color-primary - box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%) - - &:hover - box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%) + color: $primary + box-shadow: inset 0 -3px 0 $primary .pi-angle-down position: relative @@ -86,11 +47,6 @@ nav.sidebar user-select: none position: relative - &.nav-item-sign-in - i - padding-right: 6px - font-size: 1.1em - img.gravatar border-radius: 999em height: 32px @@ -130,11 +86,6 @@ nav.sidebar .dropdown min-width: 60px // navbar avatar size - // Removes angle-down icon from bootstrap, - // since we use a nicer chevron. - a:after - display: none - span.fa-stack position: absolute top: 50% @@ -176,9 +127,51 @@ nav.sidebar font-size: .9em -nav.sidebar - ul li.nav-item-sign-in a.navbar-item - font-size: .8em +// Secondary navigation for +.nav-secondary + align-items: center + box-shadow: 0 2px 0 0 $color-background + + .nav-link + color: $color-text + transition: box-shadow 150ms ease-in-out + + &:hover, + &.active + box-shadow: 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 + padding-left: 10px + color: inherit + width: 120px // Blender Cloud logo width + + &:hover + color: $primary + +nav.navbar + .navbar-collapse + > ul > li > .navbar-item + padding: $navbar-nav-link-padding-x + height: $nav-link-height .navbar-backdrop-container @@ -206,20 +199,3 @@ nav.sidebar .navbar+.page-content padding-top: $nav-link-height - -// Secondary navigation for -.nav-secondary - align-items: center - box-shadow: 0 2px 0 0 $color-background - - .nav-link - color: $color-text - transition: box-shadow 150ms ease-in-out - - &:hover, - &.active - box-shadow: 0 2px 0 0 $color-primary - - .nav-title - font-weight: bold - padding-right: 20px diff --git a/src/styles/components/_search.sass b/src/styles/components/_search.sass index 929ecb8d..62470e6f 100644 --- a/src/styles/components/_search.sass +++ b/src/styles/components/_search.sass @@ -35,30 +35,25 @@ padding: 0 margin: 0 - .search-icon position: absolute - color: white top: 4px left: 10px cursor: pointer &:after - opacity: 0 + @extend .tooltip-inner + 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 + font-style: normal left: -10px - width: 150px - position: absolute - transition: top 150ms ease-in-out, opacity 150ms ease-in-out + opacity: 0 pointer-events: none + position: absolute + top: 30px + transition: top 150ms ease-in-out, opacity 150ms ease-in-out + width: 150px &:hover &:after diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass index b485e69b..a31a343f 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: $color-primary-accent +$tree-color-highlight-background-text: $white .jstree-default /* list item */ @@ -104,8 +103,7 @@ $tree-color-highlight-background-text: white padding-left: 28px padding-right: 10px text-overflow: ellipsis - transition: none - transition: color 50ms ease-in-out, background-color 100ms ease-in-out + transition: background-color 100ms ease-in-out white-space: nowrap width: 100% diff --git a/src/styles/theatre.sass b/src/styles/theatre.sass index abb97a3a..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 From 2777c3708527616968321cda4897ea7ab0008c2d Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:05:45 +0200 Subject: [PATCH 20/29] Style videoplayer. --- src/styles/plugins/_videoplayer.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 278eebd235d5dca04f5621d3b64e7044b52481b7 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:06:14 +0200 Subject: [PATCH 21/29] Style jsTree --- src/styles/plugins/_jstree.sass | 54 ++++++++++++++++----------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass index a31a343f..133f2c6d 100644 --- a/src/styles/plugins/_jstree.sass +++ b/src/styles/plugins/_jstree.sass @@ -1,8 +1,8 @@ /* jsTree overrides */ $tree-color-text: $color-text-dark-primary $tree-color-highlight: $color-primary-accent -$tree-color-highlight-background: $color-primary-accent -$tree-color-highlight-background-text: $white +$tree-color-highlight-background: $white +$tree-color-highlight-background-text: $primary .jstree-default /* list item */ @@ -62,48 +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: background-color 100ms ease-in-out white-space: nowrap width: 100% @@ -111,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 @@ -119,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 @@ -182,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 @@ -267,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, @@ -278,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 From 1821bb6b7dabe4adb3fa919d7ebf498593269fac Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:11:10 +0200 Subject: [PATCH 22/29] CSS general cleanup and minor style tweaks --- src/styles/_config.sass | 2 +- src/styles/_organizations.sass | 13 ---------- src/styles/_project-dashboard.sass | 6 ----- src/styles/_project.sass | 35 +++++++++------------------ src/styles/_utils.sass | 8 ++++++ src/styles/components/_jumbotron.sass | 4 +-- src/styles/components/_navbar.sass | 16 ++++++------ 7 files changed, 31 insertions(+), 53 deletions(-) diff --git a/src/styles/_config.sass b/src/styles/_config.sass index f0f1f1f7..38fe2bd1 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -100,7 +100,7 @@ $sidebar-width: 50px !default /* Project specifics */ $project_nav-width: 250px !default -$project-sidebar-width: 50px !default +$project-sidebar-width: 40px !default $project_header-height: 37px !default $project_footer-height: 30px !default diff --git a/src/styles/_organizations.sass b/src/styles/_organizations.sass index f3b82eb0..b5af8501 100644 --- a/src/styles/_organizations.sass +++ b/src/styles/_organizations.sass @@ -1,17 +1,4 @@ body.organizations - ul#sub-nav-tabs__list - align-items: center - display: flex - - li.result - padding: 10px 20px - - .dashboard-secondary - .box - +container-box - padding: 10px 20px - margin: 0 - #item-details .organization label diff --git a/src/styles/_project-dashboard.sass b/src/styles/_project-dashboard.sass index f63b1b50..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 diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 822380ca..bd1a80d6 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -40,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 @@ -62,6 +58,7 @@ 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% @@ -95,30 +92,21 @@ body.blog &:first-child border-top: thin solid transparent - &:hover - background-color: $primary + &:hover, + &.active cursor: pointer a - color: $white + color: $primary a align-items: center + color: $color-text display: flex justify-content: center height: $project-sidebar-width width: $project-sidebar-width - i - font-size: 1.1em - - &.active - background-color: $primary - color: $white - - a - color: $white - &.tabs-thumbnail img height: $project-sidebar-width @@ -176,13 +164,16 @@ body.blog 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 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 left: 0 position: absolute @@ -432,8 +423,8 @@ ul.project_nav-edit-list padding-top: $project_header-height #node-container - flex: 1 background-color: white + flex: 1 /* For error messages (403) and other overlaid text*/ #node-overlay @@ -466,8 +457,7 @@ ul.project_nav-edit-list +media-xs margin-top: 0 - border-right: thin solid $color-background - margin-top: $project_header-height //so it's right below the project title. + // 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 @@ -816,6 +806,7 @@ section.node-preview-forbidden justify-content: center min-height: 400px position: relative + overflow: hidden img height: 130% @@ -1243,8 +1234,6 @@ a.learn-more section.node-children - background-color: white - &.group, &.storage flex: 1 padding: 10px 0 25px 20px diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index 3bdf374c..be5af072 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -666,3 +666,11 @@ .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/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass index 985ed80d..ffa1a735 100644 --- a/src/styles/components/_jumbotron.sass +++ b/src/styles/components/_jumbotron.sass @@ -2,8 +2,8 @@ .jumbotron background-size: cover border-radius: 0 - padding-top: 12em - padding-bottom: 12em + padding-top: 10em + padding-bottom: 10em // Black-transparent gradient from left to right to better read the overlay text. &.jumbotron-overlay diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index ee13a1d5..a339ccf9 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -1,4 +1,8 @@ // Navigation. + +.navbar + box-shadow: inset 0 -2px $color-background + .navbar, nav.sidebar border: none @@ -39,10 +43,6 @@ nav.sidebar color: $primary box-shadow: inset 0 -3px 0 $primary - .pi-angle-down - position: relative - left: 5px - li user-select: none position: relative @@ -130,15 +130,16 @@ nav.sidebar // Secondary navigation for .nav-secondary align-items: center - box-shadow: 0 2px 0 0 $color-background + 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: 0 2px 0 0 $primary + box-shadow: inset 0 -2px 0 0 $primary .navbar-overlay @@ -160,9 +161,8 @@ nav.sidebar text-shadow: none .navbar-brand - padding-left: 10px color: inherit - width: 120px // Blender Cloud logo width + padding-left: 4px &:hover color: $primary From b0d8da821f9b406d4d6d94367b755f2637f0789c Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:11:18 +0200 Subject: [PATCH 23/29] CSS: Blog cleanup --- src/styles/blog.sass | 300 +++++++++++-------------------------------- 1 file changed, 77 insertions(+), 223 deletions(-) diff --git a/src/styles/blog.sass b/src/styles/blog.sass index 550d1edc..f18e665b 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -87,9 +87,6 @@ @import components/checkbox @import components/overlay -.container-fluid.blog - padding: 0 - #blog_container +media-xs flex-direction: column @@ -244,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 @@ -262,117 +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 - max-width: 780px - - &: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 - - 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 @@ -432,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 @@ -536,104 +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-dark - - &: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 - - .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-dark - 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 @@ -663,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 @@ -697,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 From 4546469d37bd913c642ecd4cff3798453ffd8b3b Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:19:00 +0200 Subject: [PATCH 24/29] Pug: Move blog macros to blender-cloud --- src/templates/nodes/custom/blog/_macros.pug | 142 -------------------- 1 file changed, 142 deletions(-) delete mode 100644 src/templates/nodes/custom/blog/_macros.pug diff --git a/src/templates/nodes/custom/blog/_macros.pug b/src/templates/nodes/custom/blog/_macros.pug deleted file mode 100644 index 8d9791f9..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.mx-auto - h2.pt-4.px-4 - a.text-muted(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.text-muted( - 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-outline-primary.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 %} From d347534fead50eed2bda75f1e974616e1aa4f33e Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:19:28 +0200 Subject: [PATCH 25/29] Pug: Move navigation macro to blender-cloud --- src/templates/_macros/_navigation.pug | 26 -------------------------- 1 file changed, 26 deletions(-) delete mode 100644 src/templates/_macros/_navigation.pug 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 %} From 1500e2029153458f5d018c61400395cc195ccc4a Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:42:37 +0200 Subject: [PATCH 26/29] Blog: cleanup of layout and style Simpler markup reusing bootstrap 4 classes. --- src/styles/components/_jumbotron.sass | 3 +++ .../nodes/custom/blog/archive_main_project.pug | 9 +++------ src/templates/nodes/custom/blog/index.pug | 4 +--- .../nodes/custom/blog/index_main_project.pug | 7 ++----- src/templates/nodes/custom/post/create.pug | 2 +- src/templates/nodes/custom/post/view_embed.pug | 18 ++++-------------- .../nodes/custom/post/view_main_project.pug | 3 +-- 7 files changed, 15 insertions(+), 31 deletions(-) diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass index ffa1a735..88dd15ac 100644 --- a/src/styles/components/_jumbotron.sass +++ b/src/styles/components/_jumbotron.sass @@ -23,3 +23,6 @@ h2, p text-shadow: 1px 1px rgba(black, .2), 1px 1px 25px rgba(black, .5) + + &:hover + text-decoration: none 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/post/create.pug b/src/templates/nodes/custom/post/create.pug index 10414e29..6af4c7a1 100644 --- a/src/templates/nodes/custom/post/create.pug +++ b/src/templates/nodes/custom/post/create.pug @@ -68,7 +68,7 @@ | {% endif %} | {% endfor %} - input.btn.btn-outline-secondary.button-create(type='submit', value='Create {{ node_type.name }}') + input.btn.btn-outline-secondary(type='submit', value='Create {{ node_type.name }}') a.btn.btn-link.button-back(href="{{ url_for('projects.view', project_url=project.url) }}blog") | Back to Blog diff --git a/src/templates/nodes/custom/post/view_embed.pug b/src/templates/nodes/custom/post/view_embed.pug index 4924162e..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-outline-secondary.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 %} From 6b1a5e24e8cfdfb7e2dafad7313823e9df5204ca Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:46:33 +0200 Subject: [PATCH 27/29] Pug: Use templates from blender-cloud Affects the following templates: /projects/view.pug /projects/index_dashboard.pug /organizations/index.pug A lot of this layout is hardcoded for blender-cloud anyway. Eventually Pillar should have its own templates to use as starting point for building other Pillar apps. This should be built using the minimal amount of code possible and rely on styling possible via Bootstrap. --- src/templates/organizations/index.pug | 208 +------ src/templates/projects/index_dashboard.pug | 348 +---------- src/templates/projects/view.pug | 638 +-------------------- 3 files changed, 12 insertions(+), 1182 deletions(-) diff --git a/src/templates/organizations/index.pug b/src/templates/organizations/index.pug index 53c222c4..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-outline-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/projects/index_dashboard.pug b/src/templates/projects/index_dashboard.pug index fcc50df2..ca6d7f22 100644 --- a/src/templates/projects/index_dashboard.pug +++ b/src/templates/projects/index_dashboard.pug @@ -1,356 +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#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 - a.btn.btn-outline-success(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 - a(href="https://cloud.blender.org/blog/introducing-private-projects") - img.header( - src="{{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}}") - .text - h5 - a.text-muted(href="https://cloud.blender.org/blog/introducing-private-projects") - | Projects - .lead - p. - Create and manage your own personal projects. - Upload assets and collaborate with other Blender Cloud members. - - a.btn.btn-link.btn-block( - href="https://cloud.blender.org/blog/introducing-private-projects") - | Learn More - i.pi-angle-right - - section.announcement.mt-3 - a(href="https://cloud.blender.org/blog/introducing-blender-sync") - img.header( - src="{{ url_for('static', filename='assets/img/blender_sync_header.jpg') }}") - .text - h5 - a.text-muted(href="https://cloud.blender.org/blog/introducing-blender-sync") - | Textures Browser & Settings Sync - - .lead - p. - 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 - - .row - .col-md-8 - a.btn.btn-outline-success.btn-block( - href="https://cloud.blender.org/r/downloads/blender_cloud-latest-bundle.zip") - i.pi-download - | Download Add-on v {{ config.BLENDER_CLOUD_ADDON_VERSION }} - .col-md-4 - a.btn.btn-link( - href="https://cloud.blender.org/blog/introducing-blender-sync") - | Learn More - i.pi-angle-right - +.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 8151fbe6..d0b1aeb1 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -1,641 +1,11 @@ | {% extends 'layout.html' %} -| {% from '_macros/_add_new_menu.html' import add_new_menu %} | {% block page_title %}{{ project.name }}{% endblock%} | {% set title = 'project' %} -| {% 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') }}") -| {% 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/project-main.css') }}", rel="stylesheet") -| {% endblock %} - | {% block body %} -#project-container - #project-side-container - #project_sidebar.bg-white - ul.project-tabs.p-0 - 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.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 }} - - | {% block project_tree %} - #project_tree.bg-white - | {% endblock project_tree %} - | {% endif %} - - - #project_context-container - | {% if project.has_method('PUT') %} - #project_context-header.bg-white - span#status-bar - - ul.project-edit-tools.disabled - li.dropdown - button#item_add.project-mode-view.btn.btn-sm.btn-outline-secondary.dropdown-toggle( - 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.btn.btn-sm.btn-outline-secondary.ml-2( - href="javascript:void(0);", - title="Edit", - data-project_id="{{project._id}}") - i.button-edit-icon.pi-edit - | Edit Project - - li.dropdown - button.dropdown-toggle.project-mode-view.btn.btn-sm.btn-outline-secondary.mx-2( - type="button", - data-toggle="dropdown", - aria-haspopup="true", - aria-expanded="false") - i.pi-more-vertical.p-0 - - ul.dropdown-menu - | {% if current_user.has_cap('admin') %} - li.dropdown-item - a#item_featured( - href="javascript:void(0);", - title="Feature on project's homepage", - data-toggle="tooltip", - data-placement="left") - i.pi-star - | Toggle Featured - - li.dropdown-item - 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.dropdown-item - a#item_toggle_projheader( - href="javascript:void(0);", - title="Feature as project's header", - data-toggle="tooltip", - data-placement="left") - i.pi-star - | Toggle Project Header video - - li.dropdown-item.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.dropdown-item.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.btn.btn-outline-secondary( - href="javascript:void(0);", - title="Cancel changes") - i.button-cancel-icon.pi-cancel - | Cancel - - li.button-save - a#item_save.project-mode-edit.btn.btn-outline-success.mx-2( - 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_container %}{% 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').displayAs('inline-block'); - $('.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').displayAs('inline-block'); - } 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($('