From 9bcd6cec89cabc55b3111b5f4dbf34bcc134fa68 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 18:18:15 +0200 Subject: [PATCH] Cleanup and minor tweaks for apps with a sidebar Like Attract or Flamenco --- src/scripts/tutti/0_navbar.js | 3 +- src/scripts/tutti/1_project-navigation.js | 4 +- src/styles/_apps_base.sass | 23 ++---- src/styles/_config.sass | 5 +- src/styles/_project.sass | 95 +---------------------- src/styles/_utils.sass | 4 +- src/styles/components/_jumbotron.sass | 1 + src/templates/nodes/edit_embed.pug | 2 +- src/templates/projects/edit_layout.pug | 6 -- 9 files changed, 20 insertions(+), 123 deletions(-) diff --git a/src/scripts/tutti/0_navbar.js b/src/scripts/tutti/0_navbar.js index cb64a5f3..40fdf8a8 100644 --- a/src/scripts/tutti/0_navbar.js +++ b/src/scripts/tutti/0_navbar.js @@ -32,7 +32,7 @@ var DocumentTitleAPI = { }; -/* Status Bar */ +/* Status Bar * DEPRECATED * USE TOASTR INSTEAD */ function statusBarClear(delay_class, delay_html){ var statusBar = $("#status-bar"); @@ -54,6 +54,7 @@ function statusBarClear(delay_class, delay_html){ } } +/* Status Bar * DEPRECATED - USE TOASTR INSTEAD * */ function statusBarSet(classes, html, icon_name, time){ /* Utility to notify the user by temporarily flashing text on the project header Usage: diff --git a/src/scripts/tutti/1_project-navigation.js b/src/scripts/tutti/1_project-navigation.js index 9befe318..d929f28c 100644 --- a/src/scripts/tutti/1_project-navigation.js +++ b/src/scripts/tutti/1_project-navigation.js @@ -66,7 +66,9 @@ function containerResizeY(window_height){ var project_container = document.getElementById('project-container'); var container_offset = project_container.offsetTop; - var nav_header_height = $('#project_nav-header').height(); + // TODO (pablo) - see if it's used at all + // var nav_header_height = $('#project_context-header').height(); + var nav_header_height = 40; var container_height = window_height - container_offset.top; var container_height_wheader = window_height - container_offset.top - nav_header_height; var window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass index 7216faa8..41eab8aa 100644 --- a/src/styles/_apps_base.sass +++ b/src/styles/_apps_base.sass @@ -143,12 +143,17 @@ nav.sidebar left: 0 width: $sidebar-width height: 100% - background-color: $color-background-nav display: flex flex-direction: column + > ul > li > .navbar-item + padding-top: 10px + padding-bottom: 10px + background: red + .dropdown min-width: $sidebar-width + .dropdown-menu top: initial bottom: 3px @@ -159,7 +164,7 @@ nav.sidebar li a justify-content: flex-start - ul + > ul width: 100% margin: 0 padding: 0 @@ -172,25 +177,11 @@ nav.sidebar a.navbar-item, button display: flex - color: $color-text-light-hint - font-size: 1.5em align-items: center justify-content: center - padding: 10px 0 background: transparent border: none width: 100% - text-decoration: none - - &:hover - color: $color-text-light-primary - &:active - outline: none - - &.cloud - i - position: relative - left: -4px a.dropdown-toggle padding: 0 diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 38fe2bd1..80609dae 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -96,13 +96,12 @@ $screen-xs-max: $screen-sm-min - 1 !default $screen-sm-max: $screen-md-min - 1 !default $screen-md-max: $screen-lg-min - 1 !default -$sidebar-width: 50px !default +$sidebar-width: 40px !default /* Project specifics */ $project_nav-width: 250px !default $project-sidebar-width: 40px !default -$project_header-height: 37px !default -$project_footer-height: 30px !default +$project_header-height: 40px !default $node-type-asset_image: #e87d86 !default $node-type-asset_file: #CC91C7 !default diff --git a/src/styles/_project.sass b/src/styles/_project.sass index bd1a80d6..53e4d2a4 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -22,6 +22,7 @@ body.blog #project-container display: flex flex-direction: row + margin-top: $project_header-height min-height: 300px position: relative z-index: $z-index-base @@ -36,9 +37,6 @@ body.blog +media-xs flex-direction: column-reverse -#project-side-container+#project_context-header - width: 100% - left: 0 #project_nav-container +media-lg @@ -112,13 +110,6 @@ body.blog height: $project-sidebar-width width: $project-sidebar-width - #project-loading - align-items: center - display: flex - height: $project-sidebar-width - justify-content: center - width: $project-sidebar-width - #search-container #project_sidebar ul.project-tabs li.tabs-thumbnail background-color: $color-background-nav-dark @@ -150,78 +141,13 @@ body.blog /* Header with name and node edit tools */ -#project_nav-header, #project_context-header - align-items: center - color: white - display: flex - position: relative - -#project_context-header - align-items: center - color: $color-text-dark-secondary - display: flex - height: $project_header-height - min-height: $project_header-height - position: fixed - 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 - top: 0 - width: 100% - z-index: $z-index-base + 3 - - /* Name of the project */ - .project-title - +text-overflow-ellipsis - height: 100% - max-width: 100% - width: 100% - -span#status-bar - position: absolute - left: 0 - top: 10px - min-width: 33% - padding: 5px 15px - color: $color-text-dark - opacity: 0 - z-index: 1 - font-weight: 400 - white-space: nowrap - transition: all 250ms ease-in-out - - +media-xs - left: 0 - min-width: 100% - - i - margin-right: 5px - - &.info - color: $color-info - &.error - color: $danger - &.warning - color: $color-warning - &.success - color: $color-success - &.default - color: $color-text-light - - &.active - opacity: 1 - span#project-edit-title position: absolute padding: 15px 20px @@ -238,17 +164,6 @@ span#project-edit-title display: none ul.project-edit-tools - align-items: center - display: flex - list-style-type: none - margin: 0 0 0 auto - padding: 0 - - +media-xs - width: 100% - margin: 0 auto - justify-content: space-around - li a, button padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2) @@ -353,13 +268,9 @@ ul.project-edit-tools background-color: rgba($color-background-nav-dark, .7) opacity: 1 - i - +spin - animation-duration: .5s -#project-header+#project_tree, -#project-header+#project_context-container - margin-top: $project_header-height +#project-container + ul.project_nav-edit-list diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index be5af072..8ddfbddf 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -642,9 +642,7 @@ #{$property}: $color-status-review =sidebar-button-active - background-color: $color-background-nav - box-shadow: inset 2px 0 0 $color-primary - color: white + color: $primary .flash-on background-color: lighten($color-success, 50%) !important diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass index 88dd15ac..90be99f8 100644 --- a/src/styles/components/_jumbotron.sass +++ b/src/styles/components/_jumbotron.sass @@ -2,6 +2,7 @@ .jumbotron background-size: cover border-radius: 0 + margin-bottom: 0 padding-top: 10em padding-bottom: 10em diff --git a/src/templates/nodes/edit_embed.pug b/src/templates/nodes/edit_embed.pug index bd78fdf8..c94d2f56 100644 --- a/src/templates/nodes/edit_embed.pug +++ b/src/templates/nodes/edit_embed.pug @@ -71,7 +71,7 @@ hr - ul.project-edit-tools.justify-content-end.h-auto + ul.project-edit-tools.disabled.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end li.button-cancel a#item_cancel.item-cancel.project-mode-edit.btn.btn-outline-secondary( href="javascript:void(0);", diff --git a/src/templates/projects/edit_layout.pug b/src/templates/projects/edit_layout.pug index 1809f4bc..388c3a15 100644 --- a/src/templates/projects/edit_layout.pug +++ b/src/templates/projects/edit_layout.pug @@ -51,11 +51,6 @@ #project_nav #project_nav-container - #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.bg-white ul.project_nav-edit-list @@ -80,7 +75,6 @@ #project_context-container #project_context-header.bg-white - span#status-bar | {% block project_context_header %} | {% endblock %}