Améliore la barre d'outils du nouvel éditeur

zestedesavoir · Jun 13, 2021 · 699091a · 699091a
1 parent 836d6b8
commit 699091a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/assets/scss/components/_editor-new.scss b/assets/scss/components/_editor-new.scss
@@ -8,23 +8,31 @@
 
         .editor-toolbar {
             border: 0;
+            background-color: $color-body-background;
 
+            /* Let the toolbar stay on screen when writing long texts */
+            /* Disabled on mobile or when the editor is fullscreen */
             @include tablet {
-                position: sticky;
-                top: 0;
-                z-index: 2;
-                background-color: $color-body-background;
-                border-bottom: $length-1 solid $grey-200;
-
-                @at-root body.has-top-banner & {
-                    top: $length-24;
-                }
+                &:not(.fullscreen) {
+                    position: sticky;
+                    z-index: 2;
+
+                    top: 0;
+                    @at-root body.has-top-banner & {
+                        top: $length-24;
+                    }
 
-                ~ .CodeMirror {
-                    border-top: 0;
+                    border-bottom: $length-1 solid $grey-200;
+                    ~ .CodeMirror {
+                        border-top: 0;
+                    }
                 }
             }
 
+            &.fullscreen {
+                z-index: 22; /* needs to be above #very-top-banner (_very-top-banner.scss) */
+            }
+
             &.disabled-for-textarea-mode {
                 button {
                     &.disable-for-textarea-mode {

diff --git a/assets/scss/components/_very-top-banner.scss b/assets/scss/components/_very-top-banner.scss
@@ -20,7 +20,7 @@
     border-color: var(--very-top-banner-border-color);
     color: var(--very-top-banner-color);
 
-    z-index: 21;
+    z-index: 21; /* needs to be below .editor-toolbar (_editor-new.scss) */
 
     span {
         flex: 12;