diff --git a/.gitmodules b/.gitmodules index 0e163fd..428c3f3 100644 --- a/.gitmodules +++ b/.gitmodules @@ -3,6 +3,7 @@ # Please keep this a publicly accessible URL, as it is used for the # automatic deployment. url = https://projects.blender.org/infrastructure/web-assets.git + branch = v2 [submodule "playbooks/shared"] path = playbooks/shared url = https://projects.blender.org/infrastructure/web-playbooks diff --git a/assets_shared b/assets_shared index 41b3c16..f74960d 160000 --- a/assets_shared +++ b/assets_shared @@ -1 +1 @@ -Subproject commit 41b3c1678602b71a18f0e29f3abc59a03b878beb +Subproject commit f74960d430061fca60cf4cd8a85276bd47990f0f diff --git a/bid_main/static/bid_main/styles/_auth.sass b/bid_main/static/bid_main/styles/_auth.sass index 3098ca3..c17f2ad 100644 --- a/bid_main/static/bid_main/styles/_auth.sass +++ b/bid_main/static/bid_main/styles/_auth.sass @@ -1,5 +1,5 @@ body.is-auth-page - --btn-accent-box-shadow: 0px 4px 10px rgba(0,82,255,.2), 1px 10px 25px rgba(0,82,255,.1) + --btn-accent-box-shadow: 0px var(--spacer-1) var(--spacer-2) rgba(0,82,255,.2), .1rem var(--spacer-2) var(--spacer-4) rgba(0,82,255,.1) .container-main align-items: center @@ -8,26 +8,31 @@ body.is-auth-page height: 100% justify-content: center + .container + max-height: 100% + overflow-y: auto + .box - backdrop-filter: blur(25px) - background-color: rgba(white, .66) - box-shadow: 0 15px 50px rgba(black, .15) - margin-bottom: 6rem - padding: 2rem + @extend .bg-filter-blur + @extend .bg-noise + + box-shadow: 0 var(--spacer) var(--spacer-5) rgba(black, .15) + margin-bottom: var(--spacer-1) + padding: calc(var(--spacer) * 2) .btn-accent - padding-block: .33rem + padding-block: .2rem input.form-control border-color: transparent height: unset &:focus - border-color: var(--color-primary) + border-color: var(--color-accent) .blender-logo - filter: drop-shadow(2px 0px 15px rgba(0,0,0,0.15)) - margin: 1rem auto + filter: drop-shadow(.2rem 0 var(--spacer) rgba(0,0,0,0.15)) + margin: calc(var(--spacer) * 2) auto z-index: 1 form @@ -40,15 +45,15 @@ body.is-auth-page right: 0 z-index: 1 -.page-background +.page-bg background-size: cover - bottom: 0 + height: 100% left: 0 opacity: .8 pointer-events: none - position: fixed - right: 0 + position: absolute top: 0 + width: 100% &::after background-color: transparent @@ -60,12 +65,15 @@ body.is-auth-page .blender-logo display: block - width: 250px + + svg + height: calc(var(--spacer) * 5) + max-width: 100% .auth-notes background-color: rgba(black, .05) border-bottom-right-radius: var(--border-radius) - border-left: 4px solid rgba(black, .2) + border-left: var(--spacer-1) solid rgba(black, .2) border-top-right-radius: var(--border-radius) +margin(3, top) +padding(3, left) diff --git a/bid_main/static/bid_main/styles/main.sass b/bid_main/static/bid_main/styles/main.sass index 3fd52e5..e43398e 100644 --- a/bid_main/static/bid_main/styles/main.sass +++ b/bid_main/static/bid_main/styles/main.sass @@ -1,49 +1,13 @@ @import toastr.min -// Import variables. -@import '../../../../assets_shared/src/styles/_media_queries' -@import '../../../../assets_shared/src/styles/_variables' - -/* Import Bootstrap. */ -@import '../../../../assets_shared/src/styles/bootstrap/_functions' -@import '../../../../assets_shared/src/styles/bootstrap/_variables' -@import '../../../../assets_shared/src/styles/bootstrap/_mixins' -@import '../../../../assets_shared/src/styles/bootstrap/_root' -@import '../../../../assets_shared/src/styles/bootstrap/_reboot' -@import '../../../../assets_shared/src/styles/bootstrap/_images' -@import '../../../../assets_shared/src/styles/bootstrap/_grid' -@import '../../../../assets_shared/src/styles/bootstrap/_forms' -@import '../../../../assets_shared/src/styles/bootstrap/_transitions' -@import '../../../../assets_shared/src/styles/bootstrap/_nav' -@import '../../../../assets_shared/src/styles/bootstrap/_navbar' -@import '../../../../assets_shared/src/styles/bootstrap/_media' -@import '../../../../assets_shared/src/styles/bootstrap/_utilities' - -@import '../../../../assets_shared/src/styles/_mixins' -@import '../../../../assets_shared/src/styles/_utilities' - $font-path: '/static/assets/fonts' -@import '../../../../assets_shared/src/styles/_fonts' -@import '../../../../assets_shared/src/styles/_bootstrap_overrides' - -@import '../../../../assets_shared/src/styles/_alert' -@import '../../../../assets_shared/src/styles/_base' -@import '../../../../assets_shared/src/styles/_box' -@import '../../../../assets_shared/src/styles/_button' -@import '../../../../assets_shared/src/styles/_cards' -@import '../../../../assets_shared/src/styles/_code' -@import '../../../../assets_shared/src/styles/_footer' -@import '../../../../assets_shared/src/styles/_forms' -@import '../../../../assets_shared/src/styles/_hero' -@import '../../../../assets_shared/src/styles/_list' -@import '../../../../assets_shared/src/styles/_navigation' -@import '../../../../assets_shared/src/styles/_navigation_global' -@import '../../../../assets_shared/src/styles/_sidebar' -@import '../../../../assets_shared/src/styles/_type' +/* Import Blender Web Assets. */ +@import '../../../../assets_shared/src/styles/main' @import '_auth' +// TODO: check explicit font-sizes .bid &-user // .bid-user align-items: center @@ -58,7 +22,8 @@ $font-path: '/static/assets/fonts' &-links // .bid-links display: flex - font-size: var(--font-size-small) + font-size: var(--fs-sm) + line-height: var(--lh-sm) justify-content: space-between +list-unstyled margin: var(--spacer) 0 0 0 @@ -75,7 +40,7 @@ $font-path: '/static/assets/fonts' &-header // .bid-header font-size: 1.1em - margin: 10px + margin: var(--spacer-2) &-tokens // .bid-tokens +list-unstyled @@ -94,13 +59,13 @@ $font-path: '/static/assets/fonts' .app-url color: var(--text-color-secondary) - font-size: var(--font-size-small) + font-size: var(--fs-sm) .app-icon border-radius: var(--border-radius) - height: 48px + height: var(--spacer-5) +margin(3, right) - width: 48px + width: var(--spacer-5) .app &-url @@ -113,6 +78,13 @@ $font-path: '/static/assets/fonts' &:hover color: lighten(var(--color-danger), 10%) + &.box + overflow-x: auto + + td, + th + white-space: nowrap + .app-info display: flex flex: 1 @@ -125,7 +97,7 @@ $font-path: '/static/assets/fonts' position: absolute .cke - margin-top: 40px !important + margin-top: var(--spacer-5) !important .authorize padding: 20px @@ -135,32 +107,32 @@ $font-path: '/static/assets/fonts' margin: 0 auto 15px position: relative - img, .authorize__app-image_placeholder + img, .authorize__app-img_placeholder height: 100px width: 100px - .authorize__app-image + .authorize__app-img background: #7596d9 - margin-right: 20px + margin-right: var(--spacer-4) - .authorize__app-image_placeholder + .authorize__app-img_placeholder background: #7596d9 - margin-right: 20px + margin-right: var(--spacer-4) - .authorize__app-image_placeholder_icon + .authorize__app-img_placeholder_icon position: absolute - top: 20px - left: 33px + top: var(--spacer-4) + left: calc(var(--spacer) * 2) color: white - .authorize__person-image + .authorize__person-img background: #afd876 .authorize__pictogram__arrow - margin-top: -98px + margin-top: -98px // TODO: check magic number font-family: FontAwesome - font-size: 70px + font-size: 7.2rem color: white &:before @@ -170,42 +142,42 @@ $font-path: '/static/assets/fonts' &__title - margin-bottom: 10px !important + margin-bottom: var(--spacer-2) !important text-align: center &__blurb max-width: 60% - margin: 20px auto !important - font-size: 16px + margin: var(--spacer-4) auto !important + font-size: 1.6rem text-shadow: none text-align: center &__info - font-size: 13px + font-size: var(-fs-sm) color: #737373 &__review - padding: 20px 0 - margin-bottom: 20px + padding: var(--spacer-4) 0 + margin-bottom: var(--spacer-4) - border-top: 1px solid #dfdfdf - border-bottom: 1px solid #dfdfdf + border-top: .1rem solid #dfdfdf + border-bottom: .1rem solid #dfdfdf h3 - margin: 0 0 10px 15px + margin: 0 0 var(--spacer-2) var(--spacer) ul - padding-left: 15px + padding-left: var(--spacer) li - margin-bottom: 5px + margin-bottom: var(--spacer-1) .btn-chooser - padding-bottom: 20px + padding-bottom: var(--spacer-4) .btn - margin-right: 10px + margin-right: var(--spacer-2) &:last-child margin-right: 0 @@ -215,11 +187,11 @@ $font-path: '/static/assets/fonts' .box__learn-more display: block - font-size: 12px + font-size: 1.2rem text-align: center .profile.address .box - padding: 15px + padding: var(--spacer) .profile.address .box h2 padding: 0 @@ -248,7 +220,7 @@ ul.errorlist @media (min-width: 991px) .box.decent-height - min-height: 400px + min-height: calc(var(--spacer) * 25) .developer-apps form .form-check-input @@ -259,15 +231,15 @@ ul.errorlist h2 i color: var(--color-warning) -.badge-image - --badge-image-size: 64px +.badge-img + --badge-img-size: calc(var(--spacer) * 4) margin: 0 transition: opacity var(--transition-speed-slow) img border-radius: var(--border-radius-lg) - height: var(--badge-image-size) - width: var(--badge-image-size) + height: var(--badge-img-size) + width: var(--badge-img-size) .badge-info flex: 1 @@ -286,7 +258,7 @@ ul.badges +list-unstyled margin: 0 - .badge-image + .badge-img +margin(3, right) li @@ -300,7 +272,7 @@ ul.badges color: var(--text-color-secondary) opacity: .5 - .badge-image + .badge-img opacity: .3 .toggle-group @@ -329,23 +301,23 @@ ul.badges left: -50% .toggle - background-color: var(--color-primary) + background-color: var(--color-accent) border-radius: 999em padding: 0 &:hover - background-color: var(--color-primary) + background-color: var(--color-accent) &.btn - min-height: 30px !important + min-height: calc(var(--spacer) * 2) !important .toggle .toggle-handle background-color: white border: none border-radius: 999em - height: 20px + height: var(--spacer-4) padding: 0 - width: 20px + width: var(--spacer-4) .badge-privacy-toggle align-self: flex-start @@ -367,9 +339,9 @@ ul.badges form .profile-avatar img - height: 150px + height: calc(var(--spacer) * 10) max-width: initial - width: 150px + width: calc(var(--spacer) * 10) .nav-global .profile-avatar @@ -388,17 +360,99 @@ form /* Larger icons */ i.icon.icon-lg svg - width: 32px - height: 32px - max-width: 32px - max-height: 32px + width: calc(var(--spacer) * 2) + height: calc(var(--spacer) * 2) + max-width: calc(var(--spacer) * 2) + max-height: calc(var(--spacer) * 2) /* Bootstrap's outline icons */ svg.bi stroke: none - margin-top: -3px + margin-top: -.3rem // TODO: check magic number .oauth-logo - max-width: 210px - max-height: 85px + // TODO: check magic numbers + max-width: 21.0rem + max-height: 8.5rem width: 100% + +/* Web Assets overrides. */ +// TODO: @web-assets v2 check --input-color-bg-hover +\:root + --input-color-bg: white + --input-color-bg-hover: var(--input-color-bg) + +.btn + justify-content: center + +.footer-pages + line-height: var(--lh-sm) + + a + +padding(0, y) + +padding(2, x) + +form + // TODO: @web-assets check form buttons sizing height + .btn + align-items: center + display: flex + min-height: var(--spacer-5) + +.form-check + align-items: center + display: flex + padding-left: 0 + + // TODO: @web-assets consolidate input checkbox styles + input + &[type="checkbox"] + height: auto + +margin(0, left) + +margin(2, right) + +margin(0, top) + position: static + transform: scale(1.25) + transform-origin: left + + &:hover + cursor: pointer + +.form-group + display: block + +.form-text + ul + +margin(2, top) + +padding(3, left) + ++media-lg + .nav-global-container + max-width: 117.0rem + +/* Utilities. */ +// TODO: make bg filter blur uniform in project +// TODO: @web-assets move to web-assets +.bg-filter-blur + background-color: transparent + backdrop-filter: blur(var(--spacer-4)) + position: relative + + &::before + background-color: var(--box-bg-color) + border-radius: var(--border-radius) + content: "" + height: 100% + left: 0 + opacity: .8 + position: absolute + top: 0 + width: 100% + z-index: -1 + +.bg-noise + // SVG generated at https://fffuel.co/nnnoise + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.102' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='15' specularConstant='0.75' specularExponent='20' lighting-color='%23f5a623' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='100'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='transparent'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23f5a623' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E") + +.mh-0 + min-height: 0 !important diff --git a/bid_main/templates/bid_main/active_sessions.html b/bid_main/templates/bid_main/active_sessions.html index 889c589..74ec971 100644 --- a/bid_main/templates/bid_main/active_sessions.html +++ b/bid_main/templates/bid_main/active_sessions.html @@ -32,10 +32,10 @@ Active Sessions {{ session.ip }} {{ session.device }} - -
+ + {% csrf_token %} - +
diff --git a/bid_main/templates/bid_main/components/oauth_flow_background.html b/bid_main/templates/bid_main/components/oauth_flow_background.html index 8780c7e..68497fa 100644 --- a/bid_main/templates/bid_main/components/oauth_flow_background.html +++ b/bid_main/templates/bid_main/components/oauth_flow_background.html @@ -1,5 +1,5 @@
-
+
diff --git a/bid_main/templates/bid_main/delete_user/components/cannot_request_deletion.html b/bid_main/templates/bid_main/delete_user/components/cannot_request_deletion.html index 552bef9..e66cbef 100644 --- a/bid_main/templates/bid_main/delete_user/components/cannot_request_deletion.html +++ b/bid_main/templates/bid_main/delete_user/components/cannot_request_deletion.html @@ -1,5 +1,5 @@
-

+

diff --git a/bid_main/templates/bid_main/index.html b/bid_main/templates/bid_main/index.html index 87055ec..d070372 100644 --- a/bid_main/templates/bid_main/index.html +++ b/bid_main/templates/bid_main/index.html @@ -39,7 +39,7 @@ Profile {% endif %}

- {% avatar %} + {% avatar %}