Merge pull request #118 from cynack/feat/hotspot_close_button

style: カメラの位置を初期位置に戻すボタンのスタイルを変更

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - *panel*のサイズを調整
 - CSS で指定したカスタム色が影響を及ぼす範囲を拡大
+- カメラの位置を初期位置に戻すボタンのスタイルを変更
 
 ### Deprecated
 

index.html

@@ -60,7 +60,7 @@ <h4>タイトル</h4>
           visible-state="neutral"
         >
           クローズアップ2
-          <div slot="panel" place="middle center">
+          <div slot="panel" place="right bottom">
             <img src="https://admin.figni.io//sample/suitcase/caption_1.png" />
             <h4>タイトル</h4>
             <p>文章</p>

src/figni-viewer.js

@@ -917,7 +917,7 @@ export default class FigniViewerElement extends HTMLElement {
                 }px - 0.5rem)`
                 panel.style.maxHeight = `calc(${
                   (baseHeight - hotspotHeight) / 2
-                }px - 0.75rem)`
+                }px - 2.25rem)`
               } else if (v === 'middle' && h == 'center') {
                 panel.style.maxWidth = `${baseWidth / 2}px`
                 panel.style.maxHeight = `calc(${baseHeight}px - 4rem)`
@@ -937,7 +937,7 @@ export default class FigniViewerElement extends HTMLElement {
                 }px - 0.5rem)`
                 panel.style.maxHeight = `calc(${
                   (baseHeight - hotspotHeight) / 2
-                }px - 3.25rem)`
+                }px - 2.25rem)`
               }
               panel.classList.toggle('figni-viewer-panel-hide')
             })

src/style.scss

@@ -223,12 +223,12 @@ figni-viewer * {
   align-items: center;
   width: 2.5rem;
   height: 2.5rem;
-  bottom: 0.5rem;
-  right: 0.5rem;
+  top: 0.5rem;
+  left: 0.5rem;
   border-radius: 0.5rem;
   border: none;
   color: white;
-  background-color: var(--figni-viewer-primary);
+  background-color: var(--figni-viewer-error);
   z-index: 9995;
   transition: 1s cubic-bezier(0, 1, 0.3, 1) all;
   -webkit-tap-highlight-color: transparent;