📱 improvement for small screens

alexfriesen · Nov 16, 2023 · 4f0d5ce · 4f0d5ce
1 parent a5dbf4c
commit 4f0d5ce
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 60 deletions.
diff --git a/src/app/components/pages/pages.component.scss b/src/app/components/pages/pages.component.scss
@@ -53,3 +53,9 @@ button.remove {
 .list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+@media only screen and (max-width: 599px) {
+  .item {
+    max-width: 160px;
+  }
+}
diff --git a/src/app/components/preview/preview.component.scss b/src/app/components/preview/preview.component.scss
@@ -2,63 +2,3 @@
   position: relative;
   text-align: center;
 }
-
-.empty {
-  margin: 3rem;
-
-  mat-icon {
-    width: 9rem;
-    height: 9rem;
-    font-size: 9rem;
-  }
-}
-
-.list {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  box-sizing: border-box;
-}
-
-.item {
-  position: relative;
-  border-radius: 0.25rem;
-  border: grey solid 2px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-
-  margin: 0.5rem;
-  max-width: 200px;
-
-  &:hover {
-    border-color: #3f51b5;
-  }
-}
-
-button.remove {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}