Commit 4ac18e18 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Node preview fixes

parent df2bc970

dist/css/components/node_preview.css

+79 −23
Original line number Diff line number Diff line 
.node-preview-container {

.node-preview-container.node-preview-container {

  font-size: var(--gin-font-size-xs);

  z-index: 501; /* on top of the Drupal world */

  position: sticky;
@@ -11,7 +11,7 @@ 
}



@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {

  .node-preview-container {

  .node-preview-container.node-preview-container {

    opacity: .999; /* Fix Chrome issue with mask */

    background: rgba(255, 255, 255, .8);

    -webkit-backdrop-filter: blur(12px);
@@ -19,45 +19,73 @@ 
  }

}



.gin--dark-mode .node-preview-container {

.gin--dark-mode .node-preview-container.node-preview-container {

  background: rgba(27, 27, 29, .98);

}



@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {

  .gin--dark-mode .node-preview-container {

  .gin--dark-mode .node-preview-container.node-preview-container {

    background: rgba(22, 22, 23, .9);

  }

}



.gin--high-contrast-mode .node-preview-container {

.gin--high-contrast-mode .node-preview-container.node-preview-container {

  background: var(--gin-bg-app);

  -webkit-backdrop-filter: none;

          backdrop-filter: none;

}



.node-preview-container .node-preview-backlink,

.node-preview-container .node-preview-form-select label {

.gin--navigation .node-preview-container.node-preview-container {

  width: calc(100% - var(--gin-toolbar-x-offset));

}



[dir="ltr"] .gin--navigation .node-preview-container.node-preview-container {

  margin-left: var(--gin-toolbar-x-offset);

}



[dir="rtl"] .gin--navigation .node-preview-container.node-preview-container {

  margin-right: var(--gin-toolbar-x-offset);

}



.node-preview-container.node-preview-container .gin-layout-container {

  box-sizing: border-box;

}



.node-preview-container.node-preview-container .node-preview-backlink,

.node-preview-container.node-preview-container .node-preview-form-select label {

  color: var(--gin-color-text-light);

}



.node-preview-container .node-preview-backlink {

.node-preview-container.node-preview-container .node-preview-backlink {

  all: revert;

  position: relative;

  text-decoration: none;

  font-weight: var(--gin-font-weight-normal);

  color: var(--gin-color-text-light);

  border-radius: var(--gin-border-xxs);

}



[dir="ltr"] .node-preview-container.node-preview-container .node-preview-backlink {

  padding-left: 1.75em;

}



[dir="ltr"] .node-preview-container .node-preview-backlink {

  padding-left: 2em;

[dir="rtl"] .node-preview-container.node-preview-container .node-preview-backlink {

  padding-right: 1.75em;

}



[dir="rtl"] .node-preview-container .node-preview-backlink {

  padding-right: 2em;

.node-preview-container.node-preview-container .node-preview-backlink:hover {

  color: var(--gin-color-primary-hover);

}



.node-preview-container .node-preview-backlink::before {

.node-preview-container.node-preview-container .node-preview-backlink:active {

  color: var(--gin-color-primary-active);

}



.node-preview-container.node-preview-container .node-preview-backlink::before {

  content: "";

  display: inline-block;

  position: absolute;

  top: 50%;

  top: calc(50% - 1px);

  width: var(--gin-icon-size-toolbar-secondary);

  height: var(--gin-icon-size-toolbar-secondary);

  transform: translateY(-50%);
@@ -70,15 +98,26 @@ 
          mask-position: center center;

}



[dir="ltr"] .node-preview-container .node-preview-backlink::before {

[dir="ltr"] .node-preview-container.node-preview-container .node-preview-backlink::before {

  left: 0;

}



[dir="rtl"] .node-preview-container .node-preview-backlink::before {

[dir="rtl"] .node-preview-container.node-preview-container .node-preview-backlink::before {

  right: 0;

}



.node-preview-container .node-preview-form-select {

.node-preview-container.node-preview-container .form-item {

  all: revert;

}



.node-preview-container.node-preview-container .form-item__label {

  font-size: var(--gin-font-size-s);

  font-weight: var(--gin-font-weight-normal);

  color: var(--gin-color-title);

  margin: 0;

}



.node-preview-container.node-preview-container .node-preview-form-select {

  display: flex;

  align-items: center;

  justify-content: space-between;
@@ -89,30 +128,47 @@ 
}



@media (min-width: 48em) {

  .node-preview-container .node-preview-form-select {

  .node-preview-container.node-preview-container .node-preview-form-select {

    margin: 0 var(--gin-spacing-xl);

  }

}



@media (min-width: 61em) {

  .node-preview-container .node-preview-form-select {

  .node-preview-container.node-preview-container .node-preview-form-select {

    margin: 0 min(5vw, var(--gin-spacing-xxl));

  }

}



[dir="ltr"] .node-preview-container .node-preview-form-select label {

[dir="ltr"] .node-preview-container.node-preview-container .node-preview-form-select label {

  padding-right: .5em;

}



[dir="rtl"] .node-preview-container .node-preview-form-select label {

[dir="rtl"] .node-preview-container.node-preview-container .node-preview-form-select label {

  padding-left: .5em;

}



.node-preview-container .js-hide {

.node-preview-container.node-preview-container .form-element {

  all: revert;

  font-size: var(--gin-font-size-s);

  line-height: 1.5;

  color: var(--gin-color-text);

  background-color: var(--gin-bg-input);

  border: 1px solid var(--gin-border-color-form-element);

  border-radius: var(--gin-border-s);

  box-sizing: border-box;

  transition: var(--gin-transition);

}



.node-preview-container.node-preview-container .js-hide {

  display: none;

}



.node-preview-container ~ .gin-secondary-toolbar--frontend {

.node-preview-container.node-preview-container ~ .gin-secondary-toolbar--frontend {

  display: none;

}



.node-preview-container.node-preview-container *:focus {

  outline: none;

  box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);

}

dist/css/layout/classic_toolbar.css

+2 −1
Original line number Diff line number Diff line 
:root {

  --gin-toolbar-height: 39px;

  --gin-toolbar-secondary-height: 0px;

  --gin-toolbar-secondary-height: 48px;

  --gin-scroll-offset: 72px;

  --gin-toolbar-y-offset: var(--gin-toolbar-height);

  --gin-toolbar-x-offset: 0px;
@@ -9,6 +9,7 @@ 


@media (min-width: 64em) {

  :root {

    --gin-toolbar-secondary-height: 64px;

    --gin-icon-size-toolbar: 16px;

    --gin-scroll-offset: 200px;

  }

dist/css/layout/navigation.css

+1 −0
Original line number Diff line number Diff line
@@ -852,6 +852,7 @@ html:not(.navigation-active) .navigation-menu-wrapper { 
}



.gin--navigation .navigation__sidebar {

  top: 0;

  transition: var(--gin-transition-fast);

}

src/GinNavigation.php

+1 −1
Original line number Diff line number Diff line
@@ -219,7 +219,7 @@ class GinNavigation implements ContainerInjectionInterface { 
    $menu['middle']['admin'] = $this->getNavigationAdminMenuItems();

    $menu['bottom']['user'] = $this->getMenuNavigationUserItems();



    return $variables['page_top']['navigation'] = [

    return [

      '#theme' => 'navigation',

      '#menu_top' => $menu['top'],

      '#menu_middle' => $menu['middle'],

styles/components/node_preview.scss

+52 −3
Original line number Diff line number Diff line 
.node-preview-container {

.node-preview-container.node-preview-container {

  font-size: var(--gin-font-size-xs);

  z-index: 501; /* on top of the Drupal world */

  position: sticky;
@@ -28,21 +28,42 @@ 
    backdrop-filter: none;

  }



  .gin--navigation & {

    margin-left: var(--gin-toolbar-x-offset);

    width: calc(100% - var(--gin-toolbar-x-offset));

  }



  .gin-layout-container {

    box-sizing: border-box;

  }



  .node-preview-backlink,

  .node-preview-form-select label {

    color: var(--gin-color-text-light);

  }



  .node-preview-backlink {

    all: revert;

    position: relative;

    padding-left: 2em;

    padding-left: 1.75em;

    text-decoration: none;

    font-weight: var(--gin-font-weight-normal);

    color: var(--gin-color-text-light);

    border-radius: var(--gin-border-xxs);



    &:hover {

      color: var(--gin-color-primary-hover);

    }



    &:active {

      color: var(--gin-color-primary-active);

    }



    &::before {

      content: "";

      display: inline-block;

      position: absolute;

      top: 50%;

      top: calc(50% - 1px);

      left: 0;

      width: var(--gin-icon-size-toolbar-secondary);

      height: var(--gin-icon-size-toolbar-secondary);
@@ -54,6 +75,17 @@ 
    }

  }



  .form-item {

    all: revert;



    &__label {

      font-size: var(--gin-font-size-s);

      font-weight: var(--gin-font-weight-normal);

      color: var(--gin-color-title);

      margin: 0;

    }

  }



  .node-preview-form-select {

    display: flex;

    align-items: center;
@@ -76,6 +108,18 @@ 
    }

  }



  .form-element {

    all: revert;

    font-size: var(--gin-font-size-s);

    line-height: 1.5;

    color: var(--gin-color-text);

    background-color: var(--gin-bg-input);

    border: 1px solid var(--gin-border-color-form-element);

    border-radius: var(--gin-border-s);

    box-sizing: border-box;

    transition: var(--gin-transition);

  }



  .js-hide {

    display: none;

  }
@@ -84,4 +128,9 @@ 
  ~ .gin-secondary-toolbar--frontend {

    display: none;

  }



  *:focus {

    outline: none;

    box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);

  }

}