archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Project style adjustments.

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-17 17:07:10 +02:00
parent 0aeae2cabd
commit e40ba69872
5 changed files with 53 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/_apps_base.sass
View File

@ -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

5
src/styles/_config.sass
View File

@ -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)

105
src/styles/_project.sass
View File

@ -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

2
src/styles/_utils.sass
View File

@ -512,6 +512,8 @@
margin: 1px 0
padding: 3px 50px
.ribbon
+ribbon
@mixin text-background($text-color, $background-color, $roundness, $padding)
border-radius: $roundness

18
src/styles/components/_navbar.sass
View File

@ -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