From e40ba69872859b4725a19586648e1ee2c2f9ea4c Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 17 Sep 2018 17:07:10 +0200 Subject: [PATCH] Project style adjustments. --- src/styles/_apps_base.sass | 2 +- src/styles/_config.sass | 5 +- src/styles/_project.sass | 105 ++++++++++------------------- src/styles/_utils.sass | 2 + src/styles/components/_navbar.sass | 18 +++-- 5 files changed, 53 insertions(+), 79 deletions(-) diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass index 8a1d4d14..4d3979c7 100644 --- a/src/styles/_apps_base.sass +++ b/src/styles/_apps_base.sass @@ -403,7 +403,7 @@ nav.sidebar $loader-bar-width: 100px $loader-bar-height: 2px .loader-bar - bottom: 0 + bottom: -$loader-bar-height content: '' display: none height: 0 diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 6548955e..17ce9671 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -101,7 +101,8 @@ $screen-md-max: $screen-lg-min - 1 !default $sidebar-width: 40px !default /* Project specifics */ -$project_nav-width: 275px !default +$project_nav-width: 250px !default +$project_nav-width-xl: $project_nav-width * 1.4 !default $project_nav-width-lg: $project_nav-width * 1.2 !default $project_nav-width-md: $project_nav-width $project_nav-width-sm: $project_nav-width * 0.8 !default @@ -160,4 +161,6 @@ $nav-link-height: 37px $navbar-padding-x: 0 $navbar-padding-y: 0 +$btn-padding-y-sm: 0.1rem + $grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 1060px,xl: 1500px, xxl: 1800px) diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 644f360a..a7638703 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -1,10 +1,17 @@ $node-latest-thumbnail-size: 160px -body.open-projects, -body.courses, -body.workshops - #project-container - +container-behavior +/* Dark navbar when browsing a project. */ +body.project + nav.navbar + @extend .bg-dark + box-shadow: 0 2px $gray-700 + + .nav-link, .text-muted + color: $gray-400 !important + + .nav-main .nav-link + @extend .text-dark + #project-container display: flex @@ -26,22 +33,26 @@ body.workshops #project_nav, +#project_tree, #project_nav-container - +media-lg - width: $project_nav-width-lg - +media-sm - width: $project_nav-width-sm +media-xs width: $project_nav-width-xs + +media-sm + width: $project_nav-width-sm + +media-md + width: $project_nav-width-md + +media-lg + width: $project_nav-width-lg + +media-xl + width: $project_nav-width-xl width: $project_nav-width #project_nav-container +media-xs display: block - width: 100% - position: relative height: initial !important + position: relative position: fixed z-index: $z-index-base + 5 @@ -94,36 +105,11 @@ body.workshops width: $project-sidebar-width -#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail - background-color: $color-background-nav-dark - &:hover - background-color: $color-background-nav-light - #project-nav, #project_context-container flex: 1 -/* Container for navigation on the left */ -#project_nav - +media-lg - width: $project_nav-width-lg - +media-sm - width: $project_nav-width-sm - +media-xs - width: $project_nav-width-xs - - display: block - left: 0 - position: relative - visibility: visible - width: $project_nav-width - - &.about - display: none - visibility: hidden - - /* Header with name and node edit tools */ #project_context-header right: 0 @@ -494,40 +480,28 @@ $node-preview-max-height-lg: 700px text-transform: uppercase section.node-preview - +media-md - max-height: $node-preview-max-height-md - +media-lg - max-height: $node-preview-max-height-lg - - align-items: center background-color: black color: $color-text-light-primary - // display: flex - justify-content: center - max-height: 500px - // min-height: 200px - // overflow: hidden + flex-shrink: 0 // prevents content/comments to make preview dissappear + max-height: calc((9 / 16) * 133vh) + min-height: 200px + overflow: hidden iframe width: 100% img - display: block - max-height: $node-preview-max-height-lg + @extend .d-block + @extend .mx-auto max-width: 100% object-fit: scale-down + flex: 1 +media-xs width: 100% - +media-md - max-height: $node-preview-max-height-md - +media-lg - max-height: $node-preview-max-height-lg - &.image cursor: zoom-in - display: flex overflow: hidden &.video @@ -583,19 +557,10 @@ section.node-preview color: $color-warning margin-right: 10px - &.project - background-color: black - width: 100% - - img - max-height: 800px - max-width: 100% - object-fit: cover - width: 100% section.node-preview-forbidden align-items: center - background-color: $color-background-nav + background-color: $primary color: $color-text-light cursor: default display: flex @@ -1033,7 +998,7 @@ a.learn-more width: auto height: auto background: black - box-shadow: 1px 1px 1px rgba(black, .5), 2px 2px 15px rgba(black, .5) + box-shadow: 1px 1px 1px rgba(black, .5), 2px 2px 25px rgba(black, .25) visibility: hidden display: none @@ -1070,7 +1035,7 @@ a.learn-more top: 0 left: 0 right: 0 - @include overlay(rgba($color-background-nav, .9), 0%, transparent, 25%) + @include overlay(rgba(black, .9), 0%, transparent, 25%) +text-overflow-ellipsis @@ -1290,13 +1255,13 @@ a.learn-more .list-node-children-item-thumbnail height: $list-node-children-item-width - background-color: $color-background-nav + background-color: black &:hover opacity: 1 img - opacity: .15 + opacity: .5 .list-node-children-item-name opacity: 1 @@ -2021,5 +1986,3 @@ a.learn-more padding: 5px 35px text-align: center -.ribbon - +ribbon diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index aa2fc22f..e12b3a9f 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -512,6 +512,8 @@ margin: 1px 0 padding: 3px 50px +.ribbon + +ribbon @mixin text-background($text-color, $background-color, $roundness, $padding) border-radius: $roundness diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index a52df028..c5492a91 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -1,6 +1,6 @@ /* Top level navigation bar. */ .navbar - box-shadow: inset 0 -2px $color-background + box-shadow: 0 2px $color-background .nav border: none @@ -119,22 +119,22 @@ &:focus box-shadow: inset 0 -3px 0 $primary - &.active - color: $primary - box-shadow: inset 0 -3px 0 $primary - /* Secondary navigation. */ $nav-secondary-bar-size: -2px .nav-secondary align-items: center - box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background .nav-link color: $color-text cursor: pointer + margin-bottom: 2px transition: color 150ms ease-in-out + span + position: relative + top: 2px + &:after background-color: transparent bottom: 0 @@ -155,6 +155,7 @@ $nav-secondary-bar-size: -2px background-image: linear-gradient(to right, $primary-accent 70%, $primary) height: 2px width: 100% + bottom: -2px span +active-gradient @@ -162,6 +163,9 @@ $nav-secondary-bar-size: -2px i color: $primary-accent + .nav-link.active + font-weight: bold + &.nav-secondary-vertical align-items: flex-start flex-direction: column @@ -186,6 +190,8 @@ $nav-secondary-bar-size: -2px // Big navigation dropdown. .nav-main + min-width: initial + .nav-secondary .nav-link @extend .pr-5