From 3a500f3ea326c922d746ef64733509924a9f4bf6 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 12 Jun 2017 16:49:43 +0200 Subject: [PATCH] Simplify Errors (404 & 403) TODO: Use a generic error template and pass error/text --- src/styles/_error.sass | 175 ++++++---------------------- src/styles/_project.sass | 1 + src/styles/_utils.sass | 1 + src/styles/base.sass | 1 + src/templates/errors/403_embed.jade | 98 +++++----------- src/templates/errors/404.jade | 18 +-- src/templates/errors/404_embed.jade | 23 ++-- src/templates/errors/layout.jade | 2 +- 8 files changed, 88 insertions(+), 231 deletions(-) diff --git a/src/styles/_error.sass b/src/styles/_error.sass index 5b27a146..02c20aa7 100644 --- a/src/styles/_error.sass +++ b/src/styles/_error.sass @@ -1,180 +1,73 @@ -body.error - width: 100% - height: 100% - -.error-watchamissing - padding: 0 15px - - h2 - color: $color-danger - font-size: 1.5em - - h3 - margin-top: 5px - font-size: 1.4em - p - color: $color-text-light-primary - font-size: .95em - - a:hover - text-decoration: none - h3 - color: lighten($color-primary, 10%) - p - color: $color-text-light - -#error_container +#error-container display: flex justify-content: center align-items: center - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 + height: 100% + padding: 0 15px - &.standalone - width: 100% - height: 100% - position: fixed - - #error_box - padding: 25px - .error-lead - padding: 10px 10px - - p - display: block - - &.extra - padding-top: 0 - - a - color: $color-primary - - #error_box - min-width: 60% - width: 100% - max-width: 800px + #error-box display: flex justify-content: center - align-items: center flex-direction: column + min-width: 300px - +container-box - - box-shadow: 0 0 15px rgba(black, .2) - padding: 0 - background-color: $color-background-nav - border-top-left-radius: 3px - border-top-right-radius: 3px - overflow: hidden + border: thin solid $color-background-dark + background-color: $color-background-light + box-shadow: 1px 1px 2px rgba(black, .1) + border-radius: 3px .error-top-container position: relative - width: 100% - background-color: $color-background-nav - - .error-top-header-overlay - background: repeating-linear-gradient(-45deg, rgba(white, .1), rgba(white, .1) 10px, transparent 10px, transparent 20px) - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - width: 100% - z-index: 1 - - - .error-top-header - width: 100% - position: absolute - top: 0 - bottom: 0 - background: - size: cover - position-y: 12% - z-index: 0 + padding: 25px 25px 0 .error-title - position: relative - z-index: 2 - width: auto - display: flex - margin: 0 auto - padding: 25px 0 10px 0 - color: white font: size: 1.8em weight: 300 - span.icon - display: flex - align-items: center - font-size: 2em - - span.text - display: flex - align-items: center - text-align: left - line-height: 1.2em - margin-right: auto - - .error-lead - position: relative - z-index: 1 - display: block - width: 100% line-height: 1.6em - color: $color-text-light-secondary - font: - size: .9em - weight: 300 - a text-decoration: none &:hover text-decoration: underline &.extra - padding: 15px + color: $color-text-dark-primary + border-top: thin solid $color-background-dark + background-color: lighten($color-background, 2%) + padding: 10px 25px font-size: .9em - color: $color-text-light-secondary - hr - margin: 0 0 + margin: 10px 0 width: 100% border: none - height: 3px - background-color: lighten($color-background-nav, 5%) - - .buttons - position: relative - z-index: 2 - margin: 5px 0 20px 5px + height: 1px + background-color: $color-background-dark + .error-cta + padding: 10px 25px a - font-size: 1.2em - margin: 0 15px + margin: 0 15px 0 0 + padding: 5px + text-decoration: none &.sign-up +button($color-primary, 3px, true) &.sign-in - +button($color-background, 3px) - border-color: transparent - + +button($color-text-dark-primary, 3px) #node-overlay - #error_container - @include overlay(rgba($color-background-nav, .8), 0%, transparent, 60%) + #error-container + position: fixed + top: $navbar-height + align-items: flex-start - #error_box - top: 50px - position: absolute - left: 50% - transform: translateX(-50%) - border-radius: 3px - box-shadow: 0 0 100px rgba(black, .85) - overflow: hidden + #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 + position: relative + width: 100% diff --git a/src/styles/_project.sass b/src/styles/_project.sass index dfc8a73a..a2823eac 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -688,6 +688,7 @@ ul.project_nav-edit-list transition: opacity 250ms ease-in-out &.active opacity: 1 + display: block !important #comments-embed padding: 5px 20px 20px 20px diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index e19ddd6d..f0eb000d 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -23,6 +23,7 @@ +clearfix @mixin button($mixin-color, $roundness, $filled: false) + display: inline-flex font-family: $font-body text-transform: uppercase padding: diff --git a/src/styles/base.sass b/src/styles/base.sass index 63495520..0c8b213f 100644 --- a/src/styles/base.sass +++ b/src/styles/base.sass @@ -14,6 +14,7 @@ html -moz-osx-font-smoothing: grayscale body + height: 100% font: family: $font-body, sans-serif size: $font-size diff --git a/src/templates/errors/403_embed.jade b/src/templates/errors/403_embed.jade index e25c4c23..981f5dc9 100644 --- a/src/templates/errors/403_embed.jade +++ b/src/templates/errors/403_embed.jade @@ -1,75 +1,35 @@ -#error_container.403 - #error_box +#error-container(class="error-403") + #error-box .error-top-container - .error-top-header-overlay - .error-top-header( - style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_agent327_02.jpg')}})") + .error-title Forbidden. + .error-lead + p You don't have access to this content. - .error-title - span.icon - i.pi-lock-open - span.text Get this and more with your
Blender Cloud subscription. - - .buttons - a.sign-up.btn.btn-outline(href="https://store.blender.org/product/membership/") - i.pi-check - | Subscribe - - | {% if not current_user.is_authenticated %} - a.sign-in.btn.btn-empty(href="{{ url_for('users.login') }}") - i.pi-log-in - | Log in + | {% if current_user.is_authenticated %} + | {% if current_user.has_role('demo') %} + | {% set subscription = 'demo' %} + | {% elif current_user.has_role('subscriber') %} + | {% set subscription = 'subscriber' %} + | {% else %} + | {% set subscription = 'none' %} | {% endif %} - hr + | {% if subscription == 'none' %} + hr + p + | Support Blender and get awesome stuff.  + a(href="https://store.blender.org/product/membership/") Subscribe Now + | {% endif %} - section.error-watchamissing - h2 Support Blender and get awesome stuff. + | {% else %} + p + a(href="{{ url_for('users.login') }}") Login + | {% endif %} - .row - .col-md-4 - a(href="{{ url_for('main.training') }}") - h3 Training & Tutorials - p. - Character modeling, 3D printing, VFX, rigging and more. We offer - 12 complete training series with +100 hours of training. - - .col-md-4 - a(href="{{ url_for('main.open_projects') }}") - h3 Open Projects - p. - The iconic Blender Institute Open Movies, - featuring all the production files, assets, artwork, and never-seen-before content. - - .col-md-4 - a(href="{{ url_for('main.services') }}") - h3 Services & Tools - p. - Create your personal projects, collaborate with other members, store - and sync your Blender settings across multiple workstations. - - .row - .col-md-4 - a(href="{{ url_for('projects.view', project_url='textures') }}") - h3 Textures - p. - More than 1500 texture maps to browse online or within Blender via our awesome add-on. - Create your own Texture libraries! - - .col-md-4 - a(href="{{ url_for('projects.view', project_url='hdri') }}") - h3 HDRI - p. - Up to 8K and 18 EVs (extremely high) HDR images to light your renders. - - .col-md-4 - a(href="{{ url_for('projects.view', project_url='characters') }}") - h3 Characters - p. - Production quality, fully rigged and shaded characters ready to animate. - - hr - - .error-lead.extra. - If you have just subscribed, please log out and in again. - For any other issue get in touch via cloudsupport@blender.org + .error-lead.extra + | {% if current_user.is_authenticated %} + p. + If you have just subscribed, please log out and in again. + | {% endif %} + p. + Need help? Get in touch via e-mail. diff --git a/src/templates/errors/404.jade b/src/templates/errors/404.jade index 75a01ee2..e1216177 100644 --- a/src/templates/errors/404.jade +++ b/src/templates/errors/404.jade @@ -1,17 +1,17 @@ | {% extends "errors/layout.html" %} | {% block body %} -#error_container.404.standalone - #error_box +#error-container(class="error-404") + #error-box .error-top-container .error-title Not found. - .error-lead - p. - The error has been logged and we're working on getting it fixed. - hr + .error-lead + p Whatever you're looking for, it's not here. + + .error-lead.extra p. Looking for the Open Movies? Check out Blender Foundation's YouTube channel.
Were you looking for tutorials instead? blender.org has a good selection. + p. + Is this content missing? Let us know on Twitter + or e-mail. - - .error-lead.extra. - We'll be back soon, in the meantime follow @Blender_Cloud for updates. | {% endblock %} diff --git a/src/templates/errors/404_embed.jade b/src/templates/errors/404_embed.jade index c78f4f3f..4c19ea50 100644 --- a/src/templates/errors/404_embed.jade +++ b/src/templates/errors/404_embed.jade @@ -1,12 +1,13 @@ -#error_container.404 - #error_box - .error-title 404. Not Found. +#error-container(class="error-404") + #error-box + .error-top-container + .error-title Not found. + .error-lead + p {{ description | default("Whatever you're looking for, it's not here.", True) }} - .error-lead. - {{ description | default("Whatever you're looking for, it's not here.", True) }} - - hr - - .error-lead.extra. - Is this content missing? Let us know on Twitter - or email cloudsupport@blender.org + .error-lead.extra + p. + Looking for the Open Movies? Check out Blender Foundation's YouTube channel.
Were you looking for tutorials instead? blender.org has a good selection. + p. + Is this content missing? Let us know on Twitter + or e-mail. diff --git a/src/templates/errors/layout.jade b/src/templates/errors/layout.jade index bb492c5d..0335f77b 100644 --- a/src/templates/errors/layout.jade +++ b/src/templates/errors/layout.jade @@ -7,8 +7,8 @@ html(lang="en") link(href="{{ url_for('static_pillar', filename='assets/ico/favicon.png') }}", rel="shortcut icon") link(href="{{ url_for('static_pillar', filename='assets/ico/apple-touch-icon-precomposed.png') }}", rel="icon apple-touch-icon-precomposed", sizes="192x192") + 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/main.css') }}", rel="stylesheet") link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css') body.error