Fix menu horizontal scroll when name is too long

[galette.git] / ui / semantic / galette / globals / site.overrides

diff --git a/ui/semantic/galette/globals/site.overrides b/ui/semantic/galette/globals/site.overrides
index e3453f1915f7c3bf544cc4dd433902660f90bfa3..57ec3a4af5c515cd9ad0e2eada44c1bba2b9d74f 100644 (file)
--- a/ui/semantic/galette/globals/site.overrides
+++ b/ui/semantic/galette/globals/site.overrides
@@ -5,10 +5,34 @@
 /*---------------
      Global
 ----------------*/
+/* Content using displaynone is ignored by screen readers */
 .displaynone {
   display: none !important;
 }
 
+.ui.corner.label .icon.btnlegend {
+    cursor: pointer;
+}
+
+/* Content using visually-hidden is read by screen readers */
+.visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  clip: rect(1px,1px,1px,1px);
+  word-wrap: normal;
+  overflow: hidden;
+
+  &.focusable:active,
+  &.focusable:focus {
+      position: static !important;
+      width: auto;
+      height: auto;
+      clip: auto;
+      overflow: visible;
+  }
+}
+
 .exemple,
 .disabled,
 .disabled a {
@@ -41,6 +65,33 @@ a,
     }
 }
 
+/*---------------------------------
+     Go to main content link
+----------------------------------*/
+.skiptocontent {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  color: @invertedTextColor;
+  outline: 0;
+  background-color: @black;
+
+  &.focusable:hover,
+  &.focusable:focus {
+    position: absolute !important;
+    width: 100%;
+    z-index: 102;
+    padding: 1rem .5rem;
+    text-align: center;
+    outline: none;
+  }
+
+  &.focusable:hover {
+    color: @invertedTextColor;
+    text-decoration: underline;
+  }
+}
+
 /*--------------------------------
      Base layout and navigation
 ---------------------------------*/
@@ -53,6 +104,7 @@ html {
       flex-direction: column;
       justify-content: center;
       height: 100%;
+      padding-bottom: 120px;
 
       img.logo {
         margin-top: 1rem;
@@ -61,9 +113,16 @@ html {
   }
 }
 
-body.pushable:not(.loggedin) > .pusher {
+body.pushable:not(.loggedin) {
+  & > .pusher {
     display: flex;
     justify-content: center;
+  }
+  footer.page-footer {
+    position: relative;
+    z-index: 2;
+    margin-top: -120px;
+  }
 }
 
 .loggedin #main {
@@ -114,14 +173,102 @@ aside .ui.vertical.menu {
   max-width: 100%;
 }
 
+aside .ui.small.compact.fluid.menu .ui.item {
+  max-width: 14.688rem;
+}
+
+.loggedin .content {
+  .ui.horizontal.segments.header {
+    flex-direction: row-reverse;
+  }
+}
+
 footer,
 footer .ui.horizontal.list .list > .item,
 footer .ui.horizontal.list > .item{
   font-size: .95rem;
 }
+footer.page-footer {
+  position: relative;
+  background-color: @pageBackground;
+}
+main.pusher ~ footer.page-footer {
+  transition: transform .5s ease;
+  &:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: "";
+    background: @lightTextColor;
+    overflow: hidden;
+    opacity: 0;
+    transition: all .5s;
+    will-change: opacity;
+  }
+}
+main.pusher.dimmed {
+  & ~ footer.page-footer {
+    transform: translate3d(260px, 0, 0);
+    &:after {
+      width: 100% !important;
+      height: 100% !important;
+      opacity: 1 !important;
+    }
+  }
+  &.closing ~ footer.page-footer {
+    transform: translate3d(0, 0, 0);
+    z-index: 1;
+    &:after {
+      opacity: 0 !important;
+    }
+  }
+}
+body:not(.loggedin) main.pusher.dimmed.closing ~ footer.page-footer {
+  z-index: 2;
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  html.public_page .ui.ui.ui.container:not(.fluid) {
+    width: 100%;
+  }
+  .core-lists-properties,
+  .core-fields-properties {
+    display: none !important;
+  }
+  .core-lists-listing,
+  .core-fields-listing {
+    i.arrows.alternate {
+      display: block;
+      margin: 1rem auto;
+      &::before {
+        display: block;
+      }
+    }
+  }
+  .core-lists-listing {
+    span[data-prop-label] {
+      display: block;
+      text-align: center;
+      &::before {
+          display: block;
+          content: attr(data-prop-label);
+          text-align: center;
+          font-weight: bold;
+      }
+    }
+  }
+  .core-fields-listing {
+    span[data-prop-label]::before {
+        display: inline-block;
+        content: attr(data-prop-label);
+        width: 10em;
+        font-weight: bold;
+    }
+  }
+}
 
 @media only screen and (max-width: 991px) {
-  #top-navbar .item:not(.header):not(.toc):not(#recup_mailing) {
+  #top-navbar nav {
     display: none;
   }
   .sidebar.uncover + .fixed.menu .toc i::before {
@@ -143,6 +290,15 @@ footer .ui.horizontal.list > .item{
     padding-top: 0;
   }
 
+  #sidebarmenu {
+    display: none;
+  }
+  .ui.visible.left.sidebar ~ .pusher {
+    transform: translate3d(0, 0, 0) !important;
+    &.dimmed::after {
+      display: none;
+    }
+  }
   #top-navbar div.item a.button.darkmode span {
     display: none;
   }
@@ -207,6 +363,7 @@ footer .ui.horizontal.list > .item{
     display: block;
   }
 
+  html:not(.public_page) body:not(.front-page) footer.page-footer .footer-wrapper,
   body:not(.front-page) section.content {
     margin-left: 260px;
     flex: 1 1 auto;
@@ -253,6 +410,7 @@ footer .ui.horizontal.list > .item{
     width: 350px;
   }
 
+  html:not(.public_page) body:not(.front-page) footer.page-footer .footer-wrapper,
   body:not(.front-page) section.content {
     margin-left: 350px;
   }
@@ -451,6 +609,7 @@ ul.leaders span + span {
   }
 
   .displaynone,
+  .visually-hidden,
   #top-navbar,
   aside.toc,
   #recup_mailing,
@@ -461,9 +620,7 @@ ul.leaders span + span {
   .infoline .right.aligned.segment,
   .actions_row,
   .ui.pagination.menu,
-  section.content .main-content > footer,
-  section.content .main-content + footer,
-  section.vertically.centered .main-content + footer,
+  footer.page-footer,
   #back2top {
     display: none !important;
   }