Commit 1ba97c36 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Issue #3379992: Header region sticky on top in mobile.

parent 9537a239

dist/css/base/gin.css

+35 −41
Original line number Diff line number Diff line
@@ -160,6 +160,9 @@ button.link:active, 
  z-index: 101;

  padding: 0;

  width: 100%;

  display: flex;

  align-items: center;

  min-height: var(--gin-height-sticky);

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

  box-sizing: border-box;

  transition: var(--gin-transition);
@@ -177,14 +180,6 @@ button.link:active, 
  }

}



@media (min-width: 64em) {

  .region-sticky {

    top: -1px;

    width: 100%;

    height: var(--gin-height-sticky);

    padding: var(--gin-spacing-s) 0;

  }



.region-sticky-watcher {

  position: sticky;

  top: -1px;
@@ -211,26 +206,31 @@ button.link:active, 
          backdrop-filter: none;

}



  .gin--navigation .region-sticky, .gin--vertical-toolbar .region-sticky, .gin--horizontal-toolbar .region-sticky, .gin--classic-toolbar .region-sticky {

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

  }



.gin--classic-toolbar:not(.gin--edit-form) .region-sticky {

  position: static;

}



@media (min-width: 64em) {

  .region-sticky {

    top: -1px;

    padding: var(--gin-spacing-s) 0;

    height: var(--gin-height-sticky);

    margin-bottom: 0;

  }



.region-sticky__items {

  display: flex;

  align-items: center;

  margin-bottom: var(--gin-spacing-m);

  .gin--navigation .region-sticky, .gin--vertical-toolbar .region-sticky, .gin--horizontal-toolbar .region-sticky, .gin--classic-toolbar .region-sticky {

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

  }

}



@media (min-width: 48em) {

.region-sticky__items {

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

}



@media (min-width: 48em) {

  .region-sticky__items .settings-tray-editable {

    flex-shrink: 0;

  }
@@ -524,12 +524,6 @@ body:not(.toolbar-tray-open) .layout-container { 
  background-color: var(--gin-bg-unpublished);

}



@media (max-width: 60.99em) {

  .gin--edit-form .region-sticky--is-sticky .block-page-title-block {

    visibility: hidden;

  }

}



.block-page-title-block:last-child {

  margin-bottom: 0;

}

dist/css/layout/classic_toolbar.css

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

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

  --gin-toolbar-height: 39px;

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

  --gin-scroll-offset: 72px;

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

  --gin-toolbar-x-offset: 0px;
@@ -33,10 +33,20 @@ 
}



.toolbar .toolbar-bar {

  position: fixed;

  width: 100%;

  background: #100f10;

  box-shadow: none;

}



[dir="ltr"] .toolbar .toolbar-bar {

  left: 0;

}



[dir="rtl"] .toolbar .toolbar-bar {

  right: 0;

}



.toolbar .toolbar-menu,

.toolbar-horizontal .menu-item > .toolbar-menu,

.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,

dist/css/layout/horizontal_toolbar.css

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

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

  --gin-toolbar-height: 39px;

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

  --gin-scroll-offset: 72px;

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

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


@media (min-width: 61em) {

  :root {

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

    --gin-toolbar-height: 53px;

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

    --gin-scroll-offset: 180px;

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

    --gin-sticky-offset: var(--gin-height-sticky);
@@ -22,10 +22,20 @@ 
}



.toolbar .toolbar-bar {

  position: fixed;

  width: 100%;

  background: #100f10;

  box-shadow: none;

}



[dir="ltr"] .toolbar .toolbar-bar {

  left: 0;

}



[dir="rtl"] .toolbar .toolbar-bar {

  right: 0;

}



@media (min-width: 61em) {

  .toolbar .toolbar-bar {

    display: flex;

dist/css/layout/navigation.css

+19 −2
Original line number Diff line number Diff line
@@ -787,17 +787,20 @@ html:not(.navigation-active) .navigation-menu-wrapper { 
}



:root {

  --gin-toolbar-height: 39px;

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

  --gin-scroll-offset: 72px;

  --gin-toolbar-y-offset: 0px;

  --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);

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

  --gin-toolbar-x-offset: 0px;

  --gin-sticky-offset: 0px;

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

}



@media (min-width: 61em) {

  :root {

    --gin-toolbar-height: 0px;

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

    --gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);

    --gin-scroll-offset: 130px;

    --gin-sticky-offset: var(--gin-height-sticky);

  }
@@ -809,6 +812,20 @@ html:not(.navigation-active) .navigation-menu-wrapper { 
  }

}



@media (max-width: 60.99em) {

  body.gin--navigation {

    padding-top: var(--gin-toolbar-y-offset) !important;

  }



  [dir="ltr"] body.gin--navigation {

    padding-left: var(--gin-toolbar-x-offset, 39px) !important;

  }



  [dir="rtl"] body.gin--navigation {

    padding-right: var(--gin-toolbar-x-offset, 39px) !important;

  }

}



.gin--navigation .gin-secondary-toolbar--frontend {

  z-index: 102;

  -webkit-margin-start: var(--gin-toolbar-x-offset);

dist/css/layout/toolbar.css

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

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

  --gin-toolbar-height: 39px;

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

  --gin-scroll-offset: 72px;

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

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


@media (min-width: 61em) {

  :root {

    --gin-toolbar-height: 0px;

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

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

    --gin-scroll-offset: 130px;

    --gin-toolbar-y-offset: 0px;

    --gin-toolbar-x-offset: var(--gin-toolbar-width-collapsed);

    --gin-sticky-offset: var(--gin-height-sticky);

  }