Reversible block arrows & key navigation

2022-09-29 22:37:49 +00:00
parent 678977a2a0
commit 03c6a7c54f
6 changed files with 67 additions and 36 deletions
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -111,7 +111,8 @@ h1 {

 .next-previous-blocks {
  font-size: 28px;
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: row;
  @media (min-width: 768px) {
    font-size: 36px;
  }
@@ -125,6 +126,21 @@ h1 {
  }
 }

+.time-ltr .next-previous-blocks {
+  .nav-arrow {
+    transform: rotate(180deg);
+  }
+  .nav-arrow.next {
+    order: 2;
+  }
+  .block-link {
+    order: 1;
+  }
+  .nav-arrow.prev {
+    order: 0;
+  }
+}
+
 .disable {
  font-size: 28px;
  color: #393e5c73;