hart-estate-widget 0.0.62 → 0.0.65

package/build/assets/sass/components/rotation.sass

@@ -0,0 +1,202 @@
+@import '../mixin'
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__rotation
+      width: 100%
+      height: 100%
+      &-start
+        @include customButton
+        position: absolute
+        left: 50%
+        bottom: 35px
+        transform: translateX(-50%)
+        display: flex
+        align-items: center
+        justify-content: center
+        padding: 0 25px 0 10px
+        background-color: $gray
+        border-radius: 38px
+        height: 72px
+        width: 202px
+        @include media($tablet)
+          height: 60px
+          width: 166px
+          padding: 0 20px 0 8px
+          bottom: 35px
+        @include media($mobile)
+          height: 44px
+          width: 115px
+          padding: 0 10px 0 6px
+        @include media($smallMobile)
+          height: 36px
+          width: 85px
+          padding: 0 8px 0 6px
+          bottom: 30px
+        &-icon
+          display: flex
+          align-items: center
+          justify-content: center
+          border-radius: 50%
+          background-color: $white
+          margin-right: 18px
+          padding: 10px
+          @include media($tablet)
+            padding: 7px
+            margin-right: 15px
+          @include media($mobile)
+            margin-right: 7px
+          @include media($smallMobile)
+            padding: 6px
+            margin-right: 5px
+          img
+            display: block
+            position: relative
+            top: 2px
+            width: 34px
+            @include media($tablet)
+              width: 30px
+              top: 1px
+            @include media($mobile)
+              width: 19px
+              top: 0
+            @include media($smallMobile)
+              width: 15px
+        span
+          font-size: 24px
+          font-weight: bold
+          color: $text-dark
+          text-transform: uppercase
+          width: 100%
+          display: block
+          text-align: center
+          position: relative
+          top: 1px
+          @include media($tablet)
+            font-size: 20px
+          @include media($mobile)
+            font-size: 14px
+          @include media($smallMobile)
+            font-size: 10px
+            top: 0
+
+    &__threesixty,
+    &__isometry
+      width: 100%
+      height: 100%
+      @include noTouch
+      &-container
+        width: 100% !important
+        height: 100% !important
+        position: relative
+        background-image: none !important
+        img
+          position: absolute
+          left: 50%
+          top: 50%
+          transform: translate(-50%, -50%)
+          max-width: 100%
+          max-height: 100%
+          width: 600px
+          height: 600px
+          object-fit: contain
+          opacity: 0
+          pointer-events: none
+          @include noSelect
+          &.active
+            opacity: 1
+
+    &__threesixty
+      &--active
+        cursor: move
+
+    &__isometry
+      &-arrows
+        position: absolute
+        z-index: 3
+        left: 50%
+        bottom: 35px
+        transform: translateX(-50%)
+        height: 72px
+        display: flex
+        align-items: center
+        justify-content: center
+        @include media($tablet)
+          bottom: 35px
+          height: 60px
+        @include media($mobile)
+          height: 44px
+        @include media($smallMobile)
+          bottom: 30px
+          height: 36px
+        span
+          font-size: 28px
+          font-weight: bold
+          display: block
+          margin: 0 9px
+          @include media($tablet)
+            font-size: 22px
+          @include media($mobile)
+            font-size: 17px
+            margin: 0 3px
+          @include media($smallMobile)
+            font-size: 14px
+            margin: 0
+      &-arrow
+        @include customButton
+        display: flex
+        align-items: center
+        justify-content: center
+        padding: 5px
+        img
+          width: 32px
+          @include media($tablet)
+            width: 24px
+          @include media($mobile)
+            width: 18px
+          @include media($smallMobile)
+            width: 14px
+      &-buttons
+        position: absolute
+        z-index: 3
+        left: 44px
+        bottom: 35px
+        display: flex
+        align-items: center
+        justify-content: flex-end
+        @include media($tablet)
+          left: 20px
+          bottom: 35px
+        @include media($smallMobile)
+          bottom: 30px
+      &-button
+        @include customButton
+        width: 72px
+        height: 72px
+        border-radius: 50%
+        display: flex
+        align-items: center
+        justify-content: center
+        background-color: $gray
+        margin-top: 40px
+        @include media($tablet)
+          margin-top: 20px
+          width: 60px
+          height: 60px
+        @include media($mobile)
+          margin-top: 10px
+          width: 44px
+          height: 44px
+        @include media($smallMobile)
+          width: 36px
+          height: 36px
+        img
+          display: block
+          width: 50px
+          @include media($tablet)
+            width: 40px
+          @include media($mobile)
+            width: 30px
+          @include media($smallMobile)
+            width: 25px

package/build/assets/sass/components/tabs.sass

@@ -10,10 +10,10 @@
     display: flex
     align-items: center
     justify-content: flex-end
-    @media #{$tablet}
+    @include media($tablet)
       right: 20px
       bottom: 35px
-    @media #{$w-374}
+    @include media($smallMobile)
       bottom: 30px
   .widget-tab-button
     @include customButton
@@ -29,17 +29,17 @@
     line-height: 120%
     font-weight: bold
     margin-left: 40px
-    @media #{$tablet}
+    @include media($tablet)
       margin-left: 20px
       width: 60px
       height: 60px
       font-size: 22px
-    @media #{$mobile}
+    @include media($mobile)
       margin-left: 10px
       font-size: 17px
       width: 44px
       height: 44px
-    @media #{$w-374}
+    @include media($smallMobile)
       width: 36px
       height: 36px
       font-size: 14px
@@ -53,114 +53,8 @@
     align-items: center
     justify-content: center
     padding: 60px 30px
-    @media (max-width: 630px)
+    @include media($smallMobile)
       padding: 60px 20px
-    &__image
-      max-width: 100%
-      max-height: 100%
-      object-fit: contain
-      display: block
-    &__threesixty
-      width: 100%
-      height: 100%
-      @include noTouch
-      &-start
-        @include customButton
-        position: absolute
-        left: 50%
-        bottom: 35px
-        transform: translateX(-50%)
-        display: flex
-        align-items: center
-        justify-content: center
-        padding: 0 25px 0 10px
-        background-color: $gray
-        border-radius: 38px
-        height: 72px
-        width: 202px
-        @media #{$tablet}
-          height: 60px
-          width: 166px
-          padding: 0 20px 0 8px
-          bottom: 35px
-        @media #{$mobile}
-          height: 44px
-          width: 115px
-          padding: 0 10px 0 6px
-        @media #{$w-374}
-          height: 36px
-          width: 94px
-          padding: 0 8px 0 6px
-          bottom: 30px
-        &-icon
-          display: flex
-          align-items: center
-          justify-content: center
-          border-radius: 50%
-          background-color: $white
-          margin-right: 18px
-          padding: 10px
-          @media #{$tablet}
-            padding: 7px
-            margin-right: 15px
-          @media #{$mobile}
-            margin-right: 7px
-          @media #{$w-374}
-            padding: 6px
-            margin-right: 5px
-          img
-            display: block
-            position: relative
-            top: 2px
-            width: 34px
-            @media #{$tablet}
-              width: 30px
-              top: 1px
-            @media #{$mobile}
-              width: 19px
-              top: 0
-            @media #{$w-374}
-              width: 15px
-        span
-          font-size: 24px
-          font-weight: bold
-          color: $text-dark
-          text-transform: uppercase
-          width: 100%
-          display: block
-          text-align: center
-          position: relative
-          top: 1px
-          @media #{$tablet}
-            font-size: 20px
-          @media #{$mobile}
-            font-size: 14px
-          @media #{$w-374}
-            font-size: 12px
-      &-container
-        width: 100% !important
-        height: 100% !important
-        position: relative
-        background-image: none !important
-        img
-          position: absolute
-          left: 50%
-          top: 50%
-          transform: translate(-50%, -50%)
-          max-width: 100%
-          max-height: 100%
-          width: 600px
-          height: 600px
-          object-fit: contain
-          opacity: 0
-          pointer-events: none
-          @include noSelect
-          &.active
-            opacity: 1
-      &--active
-        .widget-tab__threesixty-container
-          cursor: move
-
     &-menu
       position: absolute
       z-index: 3

package/build/assets/sass/index.sass

@@ -2,10 +2,9 @@
 @import './mixin'
 
 .widget-application
-  --vh: 100vh
-
   width: 100%
-  height: calc(100 * var(--vh))
+  height: 100%
+  flex: none
   overflow: hidden
   position: relative
   z-index: 1
@@ -30,10 +29,10 @@
     left: 45px
     top: 30px
     z-index: 3
-    @media #{$tablet}
+    @include media($tablet)
       left: 20px
       top: 30px
-    @media #{$w-374}
+    @include media($smallMobile)
       top: 25px
     img
       display: block
@@ -41,52 +40,26 @@
       height: 82px
       object-fit: contain
       object-position: center
-      @media #{$tablet}
+      @include media($tablet)
         width: 65px
         height: 65px
-      @media #{$mobile}
+      @include media($mobile)
         width: 42px
         height: 42px
-      @media #{$w-374}
+      @include media($smallMobile)
         width: 36px
         height: 36px
 
-  .widget-tab__panorama-close-map,
-  .widget-enter-fullscreen,
+  .widget-tab__panorama-close-map
+    @include rightActionButton
+  .widget-enter-fullscreen
+    @include rightActionButton
   .widget-exit-fullscreen
-    position: absolute
-    right: 45px
-    top: 36px
-    z-index: 3
-    padding: 10px
-    touch-action: none
-    @include customButton
-    @media #{$tablet}
-      right: 17px
-      top: 35px
-    @media #{$mobile}
-      padding: 5px
-      right: 20px
-    @media #{$w-374}
-      top: 25px
-    img
-      display: block
-      width: 50px
-      height: 50px
-      object-fit: contain
-      object-position: center
-      @media #{$tablet}
-        width: 40px
-        height: 40px
-      @media #{$mobile}
-        width: 32px
-        height: 32px
-      @media #{$w-374}
-        width: 26px
-        height: 26px
+    @include rightActionButton
 
 @import './components/tabs'
 @import './components/instructions'
 @import './components/panorama'
+@import './components/rotation'
 @import './components/loader'
 @import './components/model'

package/build/assets/sass/mixin.sass

@@ -9,4 +9,40 @@
   backdrop-filter: blur($blur)
   -moz-backdrop-filter: blur($blur)
   -webkit-backdrop-filter: blur($blur)
-  
+
+@mixin media($device)
+  $this: &
+  @at-root .widget-application--#{$device}#{$this}
+    @content
+
+@mixin rightActionButton
+  position: absolute
+  right: 45px
+  top: 36px
+  z-index: 3
+  padding: 10px
+  touch-action: none
+  @include customButton
+  @include media($tablet)
+    right: 17px
+    top: 35px
+  @include media($mobile)
+    padding: 5px
+    right: 20px
+  @include media($smallMobile)
+    top: 25px
+  img
+    display: block
+    width: 50px
+    height: 50px
+    object-fit: contain
+    object-position: center
+    @include media($tablet)
+      width: 40px
+      height: 40px
+    @include media($mobile)
+      width: 32px
+      height: 32px
+    @include media($smallMobile)
+      width: 26px
+      height: 26px

package/build/assets/sass/vars.sass

@@ -1,8 +1,7 @@
-$w-374: "only screen and (max-width: 374px)"
-$mobile: "only screen and (max-width: 545px)"
-$tablet: "only screen and (max-width: 900px)"
-$laptop: "only screen and (max-width: 1440px)"
-$desktop: "only screen and (min-width: 1441px)"
+$smallMobile: "smallMobile"
+$mobile: "mobile"
+$tablet: "tablet"
+$laptop: "laptop"
 
 $white: #FFFFFF
 $black: #000000

package/build/components/Application.js

@@ -15,6 +15,8 @@ var _store = _interopRequireDefault(require("../store"));
 
 var _fullScreenStore = _interopRequireDefault(require("../store/fullScreenStore"));
 
+var _deviceWidth = require("../enums/deviceWidth");
+
 var _RotationTab = _interopRequireDefault(require("./RotationTab"));
 
 var _PanoramaTab = _interopRequireDefault(require("./PanoramaTab"));
@@ -43,13 +45,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Application = (0, _mobxReactLite.observer)(function (_ref) {
-  var width = _ref.width,
-      height = _ref.height;
+var Application = (0, _mobxReactLite.observer)(function () {
   var config = _store.default.config;
   var appStyle = {
-    width: width,
-    height: height
+    width: config.width,
+    height: config.height
   };
 
   var _useState = (0, _react.useState)(config.tabs[0]),
@@ -59,18 +59,21 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
 
   var tabsList = {
     'rotation': /*#__PURE__*/_react.default.createElement(_RotationTab.default, {
+      disabled: !config.rotationImages[0],
+      topViewImage: config.topViewImage,
       images: config.rotationImages,
-      disabled: !config.rotationImages[0]
+      planImage: config.planImage,
+      mode: config.rotationMode
     }),
     'panorama': /*#__PURE__*/_react.default.createElement(_PanoramaTab.default, {
-      json: config.json,
-      planImage: config.planImage,
+      disabled: !config.panoramaImages.length,
       images: config.panoramaImages,
-      disabled: !config.panoramaImages.length
+      planImage: config.planImage,
+      json: config.json
     }),
     'model': /*#__PURE__*/_react.default.createElement(_ModelTab.default, {
-      json: config.json,
-      disabled: !config.json
+      disabled: !config.json,
+      json: config.json
     })
   };
   var tabButtons = [{
@@ -80,16 +83,8 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
     tab: 'panorama',
     text: '3D'
   }];
-
-  var setWindowHeight = function setWindowHeight() {
-    document.querySelector('.widget-application').style.setProperty('--vh', window.innerHeight / 100 + 'px');
-  };
-
   (0, _react.useEffect)(function () {
     _fullScreenStore.default.init();
-
-    window.addEventListener('resize', setWindowHeight);
-    setWindowHeight();
   }, []);
   (0, _react.useEffect)(function () {
     if (config.tabs.some(function (tab) {
@@ -111,8 +106,15 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
     });
   };
 
+  var getAppClass = function getAppClass() {
+    var className = (0, _deviceWidth.getDevicesByWidth)(config.width).reduce(function (acc, device) {
+      return acc += " widget-application--".concat(device);
+    }, 'widget-application');
+    return className;
+  };
+
   return /*#__PURE__*/_react.default.createElement("main", {
-    className: "widget-application",
+    className: getAppClass(),
     id: "widget-application",
     style: appStyle
   }, /*#__PURE__*/_react.default.createElement("section", {