Merge pull request #1016 from violetforest/feature/objkt-display-fixes

Feature/embed-objkt-display-fixes
hicetnunc2000 · Jul 24, 2021 · 7b9f2e5 · 7b9f2e5
2 parents f72bec9 + a5d0011
commit 7b9f2e5
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 31 deletions.
diff --git a/src/components/media-types/html/styles.module.scss b/src/components/media-types/html/styles.module.scss
@@ -1,13 +1,8 @@
 @import '../../../styles/layout.scss';
-@import '../../../styles/layout.scss';
+@import '../../../styles/mixins.scss';
 
 .html {
-  width: calc(100vh - 285px);
-  height: calc(100vh - 285px);
-  position: relative;
-  display: block;
-  margin: 0 auto; 
-  border : none;
+  @include embedObjktViewSizes;
 }
 
 .container {

diff --git a/src/components/media-types/styles.module.scss b/src/components/media-types/styles.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/layout.scss';
+
 .container {
   position: relative;
   display: block;
@@ -36,13 +38,12 @@
     right: 10px;
     width: 30px;
     height: 30px;
-    background-color: var(--background-color);
+    opacity: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1;
     cursor: pointer;
-    opacity: 0.2;
     background-color: #000;
     border-radius: 1000px;
     transition: opacity 0.3s ease-in-out;
@@ -61,7 +62,7 @@
   }
   &:hover {
     .icon {
-      opacity: 1;
+      opacity: 0.5;
     }
   }
 }
diff --git a/src/components/media-types/vector/styles.module.scss b/src/components/media-types/vector/styles.module.scss
@@ -1,17 +1,8 @@
 @import '../../../styles/layout.scss';
+@import '../../../styles/mixins.scss';
 
 .vector {
-  position: relative;
-  width: calc(100vh - 285px);
-  height: calc(100vh - 285px);
-  display: block;
-  margin: 0 auto; 
-  border : none;
-
-  @include respond-to('desktop') {
-    // width: 50% !important;
-  }
-
+  @include embedObjktViewSizes;
 }
 
 .display {

diff --git a/src/pages/objkt-display/style.css b/src/pages/objkt-display/style.css
@@ -1,7 +1,26 @@
+/* copy embedObjktViewSizes in mixins.scss */
+
 .objktview-zipembed.objktview {
   position: relative;
   display: block;
-  margin: auto;
-  width: calc(100vh - 285px);
-  height: calc(100vh - 285px);
+  margin: 0 auto; 
+  border : none;
+  width: 100vw;
+  height: 100vw;
+}
+
+@media (min-width: 600px) {
+  .objktview-zipembed.objktview {
+    width: 550px;
+    height: 550px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .objktview-zipembed.objktview {
+    min-height: 550px;
+    min-width: 550px;
+    width: calc(100vh - 280px);
+    height: calc(100vh - 280px);
+  }
 }
diff --git a/src/pages/objkt-display/styles.module.scss b/src/pages/objkt-display/styles.module.scss
@@ -9,13 +9,8 @@
   justify-content: center;
 
   @include respond-to('tablet') {
-    width : 100%;
-    height: 60vh;
-  }
-
-  @include respond-to('desktop') {
     width : 60vh;
-    margin: 0 auto;
     height: 60vh;
+    margin: 0 auto;
   }
 }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
@@ -1,11 +1,12 @@
 // breakpoints
+$PHONE: 0px;
 $TABLET: 600px;
 $DESKTOP: 1024px;
 
 $breakpoints: (
   'desktop': $DESKTOP,
   'tablet': $TABLET,
-  'phone': 0px,
+  'phone': $PHONE,
 ) !default;
 
 @mixin respond-to($breakpoint) {

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -1,4 +1,6 @@
 // mixin to reset <button>
+@import './layout.scss';
+
 @mixin resetButton() {
   border: 0;
   padding: 0;
@@ -12,6 +14,27 @@
   }
 }
 
+@mixin embedObjktViewSizes() {
+  position: relative;
+  display: block;
+  margin: 0 auto; 
+  border : none;
+  width: 100vw;
+  height: 100vw;
+
+  @include respond-to('tablet') {
+    width: 550px;
+    height: 550px;
+  }
+
+  @include respond-to('desktop') {
+    min-height: 550px;
+    min-width: 550px;
+    width: calc(100vh - 280px);
+    height: calc(100vh - 280px);
+  }
+}
+
 // mixins for touch hover state on press
 @mixin media-pointer {
   @media (pointer: fine) {