openproject/app/assets/stylesheets/content/_grid.sass

$grid--gap-width: 20px
$grid--header-width: 20px

$grid--widget-padding: 20px 20px 20px 20px

@import openproject/mixins

@mixin grid--commons
  display: grid

.grid--container
  @include grid--commons

.grid--area
  position: relative
  overflow: hidden
  min-height: 30px

  &.-drop-target
    background-color: $gray-light

  &.-widgeted
    z-index: 10
    @include widget-box--style
    margin: 0

    .widget-box
      min-height: 200px
      padding: $grid--widget-padding

    &:hover icon-triggered-context-menu
      visibility: visible

  &.-resizing
    @include modifying--placeholder
    z-index: 1000

  &.-addable
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

  &.-placeholder
    @include modifying--placeholder
    z-index: 30

  &.-dragged
    display: none

  &.-passive
    pointer-events: none

  &.-gap
    &.-row
      height: $grid--gap-width
      min-height: $grid--gap-width

    &.-column
      width: $grid--gap-width

  .widget-box--header
    display: flex

  icon-triggered-context-menu
    visibility: hidden

  &.-drop-target,
  &.-passive
    opacity: 0.5
    border-width: 1px
    border-style: solid
    border-color: $secondary-color
    transition: border-color 0.5s ease
    z-index: 20
    background: transparent

  &.-resize-target
    z-index: 1000

.grid--resizer
  position: absolute
  height: 20px
  color: #888
  cursor: nwse-resize
  opacity: 0
  right: 0
  bottom: 0

  i
    padding: 0 3px 3px 0

  .grid--area.-widgeted:hover &
    opacity: 1

.grid--area-drag-handle
  margin-left: -19px
  padding-right: 1px
  padding-top: 4px
  margin-top: 5px
  opacity: 0
  cursor: grab
  float: left

  &:before
    padding: 0
    color: #888

  .grid--area.-widgeted:hover &
    opacity: 1

.grid--area-content
  height: 100%

  ng-component, widget-wp-graph
    display: flex
    flex-direction: column
    height: 100%

  &.cdk-drag-preview
    overflow: hidden
    background: white
    padding: $grid--widget-padding
    @include widget-box--style
    margin: 0

.grid--widget-content
  height: 100%
  overflow-x: auto
  overflow-y: auto

  &.-no-overflow
    overflow-x: hidden
    overflow-y: hidden
    display: block

  // styles specific to the custom-text widget
  &.-custom-text
    a.inplace-editing--trigger-link
      color: inherit
      text-decoration: none

    .op-ckeditor--wrapper
      margin-bottom: 0

    .ck-editor__top
      position: sticky
      top: 0

    .inplace-edit--controls
      position: initial

      i
        float: initial
        padding: 0

    edit-field-controls
      display: flex
      position: sticky
      bottom: 0
      justify-content: flex-end

    .textarea-wrapper
      margin-bottom: 0

.grid--widget-limited-text
  max-height: 5rem
  position: relative
  overflow: hidden

  &:before
    content: ''
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background: linear-gradient(to bottom, rgba($body-background, 0) 60%, rgba($body-background, 1))

.grid--widget-add
  padding: 15px
  background-color: $gray
  border-radius: 50%
  opacity: 0

  &:before
    @include icon-font-common
    @include icon-mixin-add

  &.-gap
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    align-items: center
    padding: 0
    border-radius: initial
    
    &:before
      font-size: 0.75rem

  .grid--area.-addable:hover &, .grid--area.-addable.-help-mode &
    opacity: 1
    transition: opacity 1s ease

  .grid--area.-addable:hover &
    transition-delay: 0.3s

.grid--widget-remove
  float: right
  margin-top: -10px
  margin-right: -10px
  cursor: pointer

  &:before
    @include icon-font-common
    @include icon-mixin-remove
    font-size: 0.75em

.grid--addable-widget
  min-width: 400px
  padding: 20px 5px
  border-bottom: 1px solid $gray
  cursor: pointer
  background: none
  transition: background 4s ease

  &:hover
    background: $gray-light
    transition: background 1s ease

  &:last-of-type
    border-bottom: none

.cdk-drag-preview
  background: white
  padding: $grid--widget-padding
  @include widget-box--style
  margin-left: -$grid--widget-padding
  margin-top: -$grid--widget-padding

.grid--add-widget-ee
  .notification-box
    position: sticky
    bottom: 0
    margin-bottom: 0
have column/row headers 6 years ago			`$grid--gap-width: 20px`
adding columns to grid & moving widgets accordingly 6 years ago			`$grid--header-width: 20px`
have column/row headers 6 years ago
New grid layout (#7765) * Set grid background color * Decrease and widen widget title font * Symetric top left margins for widget titles * Widget box shadow instead of border * Remove icons from widget header * Remove white background from mobile toolbar Disclaimer: I don't understand why it had been there in the first place * Change widget titles to uppercase * Remove grid configuration on mobile * Reduce padding for widget cards * Use light gray grid background for homescreen * Remove icons from homescreen widget cards * Reapply widget box header styles to homescreen by generalizing them Before they were trapped in a component's style * Use gray grid-background for my-page, too. * Fix: Remove widget icon input left overs * Unify duplicated styles * Make homescreen desing distinct from dashboard also improve footer slightly slightly by removing box and applying the hover color to the icon, too. * Remove white borders from grid panels for adding widgets * Increase padding top of widget boxes to achieve asymmetric title margins * Unify styles for passive widgets while dragging or resizing [ci skip] 5 years ago			`$grid--widget-padding: 20px 20px 20px 20px`
auto height for grid-areas 5 years ago
add custom text widget to dashboard 5 years ago			`@import openproject/mixins`

have column/row headers 6 years ago			`@mixin grid--commons`
introduce grid_blocks 6 years ago			`display: grid`
have column/row headers 6 years ago
			`.grid--container`
			`@include grid--commons`
introduce grid_blocks 6 years ago
start extracting d&d classes into separate file 5 years ago			`.grid--area`
Fix position of grid resizer 5 years ago			`position: relative`
stabilize d&d 6 years ago			`overflow: hidden`
auto height for grid-areas 5 years ago			`min-height: 30px`
stabilize d&d 6 years ago
use color variables 6 years ago			`&.-drop-target`
less massive gird area design 6 years ago			`background-color: $gray-light`
start on resizing 6 years ago
			`&.-widgeted`
			`z-index: 10`
style grid-areas 6 years ago			`@include widget-box--style`
introduce Grid data layer 6 years ago			`margin: 0`
enlarge component via resizing 6 years ago
refactoring grid component 6 years ago			`.widget-box`
auto height for grid-areas 5 years ago			`min-height: 200px`
Take care that dragged element keeps its size 5 years ago			`padding: $grid--widget-padding`
refactoring grid component 6 years ago
use icon context menu in grid 5 years ago			`&:hover icon-triggered-context-menu`
			`visibility: visible`

enlarge component via resizing 6 years ago			`&.-resizing`
start extracting d&d classes into separate file 5 years ago			`@include modifying--placeholder`
increase z-index of resizing indicator 5 years ago			`z-index: 1000`
style grid-areas 6 years ago
display an add icon on unclaimed areas 6 years ago			`&.-addable`
			`display: flex`
			`flex-direction: column`
			`justify-content: center`
			`align-items: center`

fixes grid d&d behaviour * moving overlapping widgets down * moving widgets within the area it spanned before dragging 6 years ago			`&.-placeholder`
start extracting d&d classes into separate file 5 years ago			`@include modifying--placeholder`
display possible drop zones on d&d of widget 5 years ago			`z-index: 30`
fixes grid d&d behaviour * moving overlapping widgets down * moving widgets within the area it spanned before dragging 6 years ago
			`&.-dragged`
			`display: none`

show grid on resizing 5 years ago			`&.-passive`
auto height for grid-areas 5 years ago			`pointer-events: none`

			`&.-gap`
			`&.-row`
			`height: $grid--gap-width`
			`min-height: $grid--gap-width`

			`&.-column`
			`width: $grid--gap-width`

use icon context menu in grid 5 years ago			`.widget-box--header`
			`display: flex`

			`icon-triggered-context-menu`
			`visibility: hidden`

New grid layout (#7765) * Set grid background color * Decrease and widen widget title font * Symetric top left margins for widget titles * Widget box shadow instead of border * Remove icons from widget header * Remove white background from mobile toolbar Disclaimer: I don't understand why it had been there in the first place * Change widget titles to uppercase * Remove grid configuration on mobile * Reduce padding for widget cards * Use light gray grid background for homescreen * Remove icons from homescreen widget cards * Reapply widget box header styles to homescreen by generalizing them Before they were trapped in a component's style * Use gray grid-background for my-page, too. * Fix: Remove widget icon input left overs * Unify duplicated styles * Make homescreen desing distinct from dashboard also improve footer slightly slightly by removing box and applying the hover color to the icon, too. * Remove white borders from grid panels for adding widgets * Increase padding top of widget boxes to achieve asymmetric title margins * Unify styles for passive widgets while dragging or resizing [ci skip] 5 years ago			`&.-drop-target,`
			`&.-passive`
			`opacity: 0.5`
show grid on resizing 5 years ago			`border-width: 1px`
			`border-style: solid`
			`border-color: $secondary-color`
			`transition: border-color 0.5s ease`
display possible drop zones on d&d of widget 5 years ago			`z-index: 20`
			`background: transparent`

show grid on resizing 5 years ago			`&.-resize-target`
			`z-index: 1000`

display grid resizer only on hover 5 years ago			`.grid--resizer`
Fix position of grid resizer 5 years ago			`position: absolute`
			`height: 20px`
use custom resize icon 5 years ago			`color: #888`
			`cursor: nwse-resize`
display grid resizer only on hover 5 years ago			`opacity: 0`
Fix position of grid resizer 5 years ago			`right: 0`
			`bottom: 0`
display grid resizer only on hover 5 years ago
use custom resize icon 5 years ago			`i`
			`padding: 0 3px 3px 0`

display grid resizer only on hover 5 years ago			`.grid--area.-widgeted:hover &`
			`opacity: 1`

allow setting a custom title 6 years ago			`.grid--area-drag-handle`
			`margin-left: -19px`
			`padding-right: 1px`
New grid layout (#7765) * Set grid background color * Decrease and widen widget title font * Symetric top left margins for widget titles * Widget box shadow instead of border * Remove icons from widget header * Remove white background from mobile toolbar Disclaimer: I don't understand why it had been there in the first place * Change widget titles to uppercase * Remove grid configuration on mobile * Reduce padding for widget cards * Use light gray grid background for homescreen * Remove icons from homescreen widget cards * Reapply widget box header styles to homescreen by generalizing them Before they were trapped in a component's style * Use gray grid-background for my-page, too. * Fix: Remove widget icon input left overs * Unify duplicated styles * Make homescreen desing distinct from dashboard also improve footer slightly slightly by removing box and applying the hover color to the icon, too. * Remove white borders from grid panels for adding widgets * Increase padding top of widget boxes to achieve asymmetric title margins * Unify styles for passive widgets while dragging or resizing [ci skip] 5 years ago			`padding-top: 4px`
			`margin-top: 5px`
allow setting a custom title 6 years ago			`opacity: 0`
			`cursor: grab`
start extracting d&d classes into separate file 5 years ago			`float: left`
allow setting a custom title 6 years ago
			`&:before`
			`padding: 0`
			`color: #888`

			`.grid--area.-widgeted:hover &`
			`opacity: 1`

implement time entries widget 6 years ago			`.grid--area-content`
			`height: 100%`

add work packages overview widget 5 years ago			`ng-component, widget-wp-graph`
implement time entries widget 6 years ago			`display: flex`
			`flex-direction: column`
			`height: 100%`

start extracting d&d classes into separate file 5 years ago			`&.cdk-drag-preview`
			`overflow: hidden`
			`background: white`
			`padding: $grid--widget-padding`
			`@include widget-box--style`
Take care that dragged element keeps its size 5 years ago			`margin: 0`
start extracting d&d classes into separate file 5 years ago
add documents widget 6 years ago			`.grid--widget-content`
			`height: 100%`
			`overflow-x: auto`
			`overflow-y: auto`

add work packages overview widget 5 years ago			`&.-no-overflow`
			`overflow-x: hidden`
			`overflow-y: hidden`
			`display: block`

add custom text widget to dashboard 5 years ago			`// styles specific to the custom-text widget`
			`&.-custom-text`
			`a.inplace-editing--trigger-link`
			`color: inherit`
			`text-decoration: none`

			`.op-ckeditor--wrapper`
			`margin-bottom: 0`

			`.ck-editor__top`
			`position: sticky`
			`top: 0`

			`.inplace-edit--controls`
			`position: initial`

			`i`
			`float: initial`
			`padding: 0`

			`edit-field-controls`
			`display: flex`
			`position: sticky`
			`bottom: 0`
			`justify-content: flex-end`

			`.textarea-wrapper`
			`margin-bottom: 0`

add documents widget 6 years ago			`.grid--widget-limited-text`
			`max-height: 5rem`
			`position: relative`
			`overflow: hidden`

			`&:before`
			`content: ''`
			`width: 100%`
			`height: 100%`
			`position: absolute`
			`left: 0`
			`top: 0`
			`background: linear-gradient(to bottom, rgba($body-background, 0) 60%, rgba($body-background, 1))`

display an add icon on unclaimed areas 6 years ago			`.grid--widget-add`
use color variables 6 years ago			`padding: 15px`
			`background-color: $gray`
have a circle for widget add 6 years ago			`border-radius: 50%`
ease in the add widget icons with some delay 5 years ago			`opacity: 0`
display an add icon on unclaimed areas 6 years ago
			`&:before`
			`@include icon-font-common`
			`@include icon-mixin-add`
widget deletion 6 years ago
auto height for grid-areas 5 years ago			`&.-gap`
			`width: 100%`
			`height: 100%`
			`display: flex`
			`justify-content: center`
			`align-items: center`
			`padding: 0`
			`border-radius: initial`
New grid layout (#7765) * Set grid background color * Decrease and widen widget title font * Symetric top left margins for widget titles * Widget box shadow instead of border * Remove icons from widget header * Remove white background from mobile toolbar Disclaimer: I don't understand why it had been there in the first place * Change widget titles to uppercase * Remove grid configuration on mobile * Reduce padding for widget cards * Use light gray grid background for homescreen * Remove icons from homescreen widget cards * Reapply widget box header styles to homescreen by generalizing them Before they were trapped in a component's style * Use gray grid-background for my-page, too. * Fix: Remove widget icon input left overs * Unify duplicated styles * Make homescreen desing distinct from dashboard also improve footer slightly slightly by removing box and applying the hover color to the icon, too. * Remove white borders from grid panels for adding widgets * Increase padding top of widget boxes to achieve asymmetric title margins * Unify styles for passive widgets while dragging or resizing [ci skip] 5 years ago
auto height for grid-areas 5 years ago			`&:before`
			`font-size: 0.75rem`

add button to highlight edit capabilities 5 years ago			`.grid--area.-addable:hover &, .grid--area.-addable.-help-mode &`
ease in the add widget icons with some delay 5 years ago			`opacity: 1`
			`transition: opacity 1s ease`
add button to highlight edit capabilities 5 years ago
			`.grid--area.-addable:hover &`
			`transition-delay: 0.3s`
ease in the add widget icons with some delay 5 years ago
widget deletion 6 years ago			`.grid--widget-remove`
			`float: right`
			`margin-top: -10px`
			`margin-right: -10px`
			`cursor: pointer`

			`&:before`
			`@include icon-font-common`
			`@include icon-mixin-remove`
			`font-size: 0.75em`
have column/row headers 6 years ago
pretty up widget selection 6 years ago			`.grid--addable-widget`
			`min-width: 400px`
			`padding: 20px 5px`
use color variables 6 years ago			`border-bottom: 1px solid $gray`
pretty up widget selection 6 years ago			`cursor: pointer`
			`background: none`
			`transition: background 4s ease`

			`&:hover`
use color variables 6 years ago			`background: $gray-light`
pretty up widget selection 6 years ago			`transition: background 1s ease`

			`&:last-of-type`
			`border-bottom: none`
use icon context menu in grid 5 years ago
increase mass of dragging placeholder 5 years ago			`.cdk-drag-preview`
			`background: white`
			`padding: $grid--widget-padding`
			`@include widget-box--style`
			`margin-left: -$grid--widget-padding`
			`margin-top: -$grid--widget-padding`
avoid add widget modal being too high for viewport The ee notification is now placed within the part that determines the height and is made sticky to ensure that it is always visible. This is a quick fix as it is planned to restyle the add modal. 5 years ago
			`.grid--add-widget-ee`
			`.notification-box`
			`position: sticky`
			`bottom: 0`
			`margin-bottom: 0`