Merge pull request #111 from samvera-labs/3568-responsive-osd-controls

Make OSD controls more usable in smallest viewports.
samvera-labs · Mar 9, 2023 · e76c9be · e76c9be
2 parents dcd7b45 + 97875aa
commit e76c9be
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/src/components/ImageViewer/Button.styled.tsx b/src/components/ImageViewer/Button.styled.tsx
@@ -13,11 +13,24 @@ const Item = styled("button", {
   color: "white",
   cursor: "pointer",
   marginLeft: "0.618rem",
-  backgroundColor: "#000D",
-  filter: "drop-shadow(5px 5px 5px #0006)",
+  backgroundColor: "$primary",
+  filter: "drop-shadow(2px 2px 5px #0003)",
   transition: "$all",
   boxSizing: "content-box !important",
 
+  "&:first-child": {
+    marginLeft: "0",
+  },
+
+  "@xs": {
+    marginBottom: "0.618rem",
+    marginLeft: "0",
+
+    "&:last-child": {
+      marginBottom: "0",
+    },
+  },
+
   svg: {
     height: "60%",
     width: "60%",

diff --git a/src/components/ImageViewer/Controls.styled.tsx b/src/components/ImageViewer/Controls.styled.tsx
@@ -6,6 +6,11 @@ const Wrapper = styled("div", {
   top: "1rem",
   right: "1rem",
   display: "flex",
+
+  "@xs": {
+    flexDirection: "column",
+    zIndex: "2",
+  },
 });
 
 export { Wrapper };
diff --git a/src/components/ImageViewer/ImageViewer.styled.tsx b/src/components/ImageViewer/ImageViewer.styled.tsx
@@ -20,6 +20,11 @@ const Navigator = styled("div", {
     width: "123px",
     height: "76px",
   },
+
+  "@xs": {
+    width: "100px",
+    height: "61.8px",
+  },
 });
 
 const Viewport = styled("div", {