- Fix border style of snap zoom bar

- Fix style of react-iv-viewer

package.json

@@ -13,6 +13,7 @@
     "build": "yarn build-core && yarn build-react"
   },
   "devDependencies": {
+    "@parcel/transformer-sass": "2.12.0",
     "all-contributors-cli": "^6.26.1"
   }
 }

packages/iv-viewer/dist/iv-viewer.css

@@ -87,7 +87,7 @@
 .iv-snap-handle {
   box-sizing: border-box;
   position: absolute;
-  border: 1px solid #fff;
+  border: 1px solid #aaa;
   transform: translate3d(0, 0, 0);
   box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.5);
   cursor: pointer;
@@ -103,7 +103,7 @@
   top: 150px;
   left: -1px;
   height: 20px;
-  border: 1px solid #fff;
+  border: 1px solid #aaa;
   border-top: 0;
   background: rgba(0, 0, 0, 0.3);
 }

packages/iv-viewer/example/container-mode/example.js

@@ -1,17 +1,26 @@
 import ImageViewer from '../../src/ImageViewer';
+import image1 from '../images/1.jpg';
+import image1Big from '../images/1_big.jpg';
+import image2 from '../images/2.jpg';
+import image2Big from '../images/2_big.jpg';
+import image3 from '../images/3.jpg';
+import image3Big from '../images/3_big.jpg';
+import image4 from '../images/4.jpg';
+import image4Big from '../images/4_big.jpg';
+
 
 const images = [{
-  small: '../images/1.jpg',
-  big: '../images/1_big.jpg',
+  small: image1,
+  big: image1Big,
 }, {
-  small: '../images/2.jpg',
-  big: '../images/2_big.jpg',
+  small: image2,
+  big: image2Big,
 }, {
-  small: '../images/3.jpg',
-  big: '../images/3_big.jpg',
+  small: image3,
+  big: image3Big,
 }, {
-  small: '../images/4.jpg',
-  big: '../images/4_big.jpg',
+  small: image4,
+  big: image4Big,
 }];
 
 let curImageIdx = 1;

packages/iv-viewer/lib/iv-viewer.css

@@ -87,7 +87,7 @@
 .iv-snap-handle {
   box-sizing: border-box;
   position: absolute;
-  border: 1px solid #fff;
+  border: 1px solid #aaa;
   transform: translate3d(0, 0, 0);
   box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.5);
   cursor: pointer;
@@ -103,7 +103,7 @@
   top: 150px;
   left: -1px;
   height: 20px;
-  border: 1px solid #fff;
+  border: 1px solid #aaa;
   border-top: 0;
   background: rgba(0, 0, 0, 0.3);
 }

packages/iv-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iv-viewer",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A zooming and panning plugin inspired by google photos for your web images.",
   "main": "lib/index.js",
   "repository": {
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/s-yadav/iv-viewer#readme",
   "scripts": {
-    "start": "yarn copy-assets & parcel example/index.html --out-dir temp",
+    "start": "yarn copy-assets & parcel example/index.html",
     "copy-assets": "cp -R example/ temp",
     "bundle": "cross-env yarn compile && yarn build-css && yarn bundle-dist",
     "bundle-dist": "cross-env rollup -c rollup.config.mjs",

packages/iv-viewer/src/scss/_variables.scss

@@ -21,7 +21,7 @@ $iv-snap-view-on-left: true !default;
 $iv-zoom-slider-height: 20px !default;
 $iv-zoom-handle-height: $iv-zoom-slider-height !default;
 $iv-zoom-handle-width: 20px !default;
-$iv-zoom-handle-border: 1px solid $iv-handle-color !default;
+$iv-zoom-handle-border: 1px solid $iv-light-gray !default;
 $iv-zoom-button-width: 24px !default;
 $iv-zoom-button-icon-height: 2px !default;
 $iv-zoom-button-icon-width: 10px !default;

packages/react-iv-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-iv-viewer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "manav",
   "module": "dist/react-iv-viewer.esm.js",
   "size-limit": [

packages/react-iv-viewer/src/stories/FullScreenImageViewer.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { FullScreenViewer } from '../FullScreenViewer';
+import '../../dist/react-iv-viewer.css';
 import image1 from './assets/img.jpg';
 import image2 from './assets/hiResImg.jpg';
 

packages/react-iv-viewer/src/stories/ImageViewer.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ImageViewer } from '../ImageViewer';
+import '../../dist/react-iv-viewer.css';
 import image1 from './assets/img.jpg';
 import image2 from './assets/hiResImg.jpg';
 

packages/react-iv-viewer/src/style.scss

@@ -1,8 +1,8 @@
 @import '~iv-viewer/src/scss/build.scss';
-$react-container-max-height: 300px;
+$react-container-min-height: 300px;
 .iv {
   &-container {
-    max-height: $react-container-max-height;
+    min-height: $react-container-min-height;
     background-color: black;
   }
 }