From 9c841680faa73dc3c2f9df56724b8f50a866ad70 Mon Sep 17 00:00:00 2001
From: Oliver Tacke <o.tacke@posteo.de>
Date: Fri, 22 Dec 2023 18:15:53 +0100
Subject: [PATCH] Clean up some CSS

---
 src/scripts/app.js                          |  6 +-
 src/scripts/components/sidebar/sidebar.scss | 16 +++++
 src/scripts/components/statusbar.scss       | 22 ++++++
 src/styles/h5p-portfolio.scss               | 77 ---------------------
 4 files changed, 39 insertions(+), 82 deletions(-)

diff --git a/src/scripts/app.js b/src/scripts/app.js
index d020def..9db6af4 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -18,11 +18,7 @@ import '@styles/h5p-portfolio.scss';
  * chapter transition and sizing. It is okay for Interactive Book, but now that
  * there can be a hotspots navigation, a header and a footer with different
  * needs, it's not. The pagecontent DOM should be refactored to not use absolute
- * positioning and heights set in CSS.
- *
- * Rename CSS classes to reflect the JavaScript class name/filename
- *
- * Change em to rem
+ * positioning and heights set in CSS. Grid is a hot candidate
  */
 
 export default class Portfolio extends H5P.EventDispatcher {
diff --git a/src/scripts/components/sidebar/sidebar.scss b/src/scripts/components/sidebar/sidebar.scss
index 801d0de..279f25a 100644
--- a/src/scripts/components/sidebar/sidebar.scss
+++ b/src/scripts/components/sidebar/sidebar.scss
@@ -153,6 +153,22 @@
       opacity: 0;
       visibility: none;
     }
+
+    &.icon-expanded {
+      &::before {
+        content: '\e901';
+        width: 1.5rem;
+        display: inline-block;
+      }
+    }
+
+    &.icon-collapsed {
+      &::before {
+        content: '\e902';
+        width: 1.5rem;
+        display: inline-block;
+      }
+    }
   }
 
   &.h5p-portfolio-navigation-chapter-content {
diff --git a/src/scripts/components/statusbar.scss b/src/scripts/components/statusbar.scss
index 0276e67..944feaa 100644
--- a/src/scripts/components/statusbar.scss
+++ b/src/scripts/components/statusbar.scss
@@ -80,6 +80,10 @@
     color: var(--color-base, $base-color);
     font-size: 1.5rem;
     margin: auto;
+
+    &::before {
+      content: '\e906';
+    }
   }
 
   &.h5p-portfolio-status-menu-active {
@@ -201,6 +205,24 @@
     color: var(--color-base, $base-color);
     font-size: 1.5rem;
     margin: auto;
+
+    &.icon-previous {
+      &::before {
+        content: '\e907';
+      }
+    }
+
+    &.icon-next {
+      &::before {
+        content: '\e908';
+      }
+    }
+
+    &.icon-up {
+      &::before {
+        content: '\e909';
+      }
+    }
   }
 
   &.disabled .navigation-button {
diff --git a/src/styles/h5p-portfolio.scss b/src/styles/h5p-portfolio.scss
index 4112da6..66b313f 100644
--- a/src/styles/h5p-portfolio.scss
+++ b/src/styles/h5p-portfolio.scss
@@ -128,7 +128,6 @@
 @media (max-width: 40rem) {
   .h5p-portfolio {
     .h5p-portfolio-main {
-
       &.h5p-portfolio-navigation-open {
 
         .h5p-portfolio-navigation {
@@ -164,79 +163,3 @@
     }
   }
 }
-
-.icon-expanded {
-  &::before {
-    content: '\e901';
-    width: 1.5rem;
-    display: inline-block;
-  }
-}
-
-.icon-collapsed {
-  &::before {
-    content: '\e902';
-    width: 1.5rem;
-    display: inline-block;
-  }
-}
-
-.icon-menu {
-  &::before {
-    content: '\e906';
-  }
-}
-
-.icon-previous {
-  &::before {
-    content: '\e907';
-  }
-}
-
-.icon-next {
-  &::before {
-    content: '\e908';
-  }
-}
-
-.icon-up {
-  &::before {
-    content: '\e909';
-  }
-}
-
-.icon-question-answered {
-  &::before {
-    content: '\e90a';
-  }
-}
-
-.icon-enable-fullscreen {
-  &::before {
-    content: '\e90b';
-  }
-}
-
-.icon-disable-fullscreen {
-  &::before {
-    content: '\e90c';
-  }
-}
-
-.icon-restart {
-  &::before {
-    content: '\e90d';
-  }
-}
-
-.icon-paper-pencil {
-  &::before {
-    content: '\e90e';
-  }
-}
-
-.icon-paper {
-  &::before {
-    content: '\e90f';
-  }
-}