Merge pull request #3 from chienhsiang-hung/floating-btn

Floating btn

README.md

@@ -18,12 +18,8 @@
 
 利用國家中醫藥研究所與中醫師公會全國聯合會合作建置公費清冠一號醫療資訊平台 - **公費清冠一號 (供全台民眾查詢)**，供中醫視訊診療需求之COVID-19確診病患、家屬透過 [臺灣清冠一號地圖 Taiwan NRICM101 Map](https://chienhsiang-hung.github.io/NRICM101-map/) ，查詢提供公費清冠ㄧ號之中醫醫療院所名單及當日公費清冠ㄧ號庫存量，以利民眾獲得所需醫療資訊。
 
-[臺灣清冠一號地圖 Taiwan NRICM101 Map](https://chienhsiang-hung.github.io/NRICM101-map/) 搭配資料來源 [「清冠一號動態表」](https://docs.google.com/spreadsheets/d/e/2PACX-1vQjf_HNeEZKM-XJX-q5v4cfNrB3kcv4gOT8kFbV9rurfoX_H5Qv9112Pv0PgYNFSzbReyNlQkLrJib3/pubhtml)
-
 如有任何使用建議歡迎[到此提出](https://github.com/chienhsiang-hung/NRICM101-map/issues)
 
-網站聲明請參閱[免責聲明| 臺灣清冠一號地圖 Taiwan NRICM101 Map](https://chienhsiang-hung.github.io/NRICM101-map/immunity.html)
-
 
 ## 使用API獲取清冠地圖
 [清冠地圖API](https://nricm101-map.chienhsiang-hung.eu.org/api/get) 開放給民眾免費使用
@@ -33,6 +29,21 @@
 因資料量大 [清冠地圖API](https://nricm101-map.chienhsiang-hung.eu.org/api/get) 平均讀取時間為數秒。已開放`'Access-Control-Allow-Origin'` to `'*'` ，歡迎其他前端接取免費測試。
 
 
+## #Resources
+
+[臺灣清冠一號地圖 Taiwan NRICM101 Map](https://chienhsiang-hung.github.io/NRICM101-map/) 搭配資料來源 [「清冠一號動態表」](https://docs.google.com/spreadsheets/d/e/2PACX-1vQjf_HNeEZKM-XJX-q5v4cfNrB3kcv4gOT8kFbV9rurfoX_H5Qv9112Pv0PgYNFSzbReyNlQkLrJib3/pubhtml)
+
+[Leaflet - a JavaScript library for interactive maps](https://leafletjs.com/)
+
+[Copied icon PNG and SVG Vector](https://uxwing.com/copied-icon/)
+
+[Instruction icon PNG and SVG Vector](https://uxwing.com/instruction-icon/)
+
+[Modal · Bootstrap](https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes)
+
+網站聲明請參閱[免責聲明| 臺灣清冠一號地圖 Taiwan NRICM101 Map](https://chienhsiang-hung.github.io/NRICM101-map/immunity.html)
+
+
 ## 一杯咖啡支持更新
 感謝有您的支持讓地圖能夠穩定持續更新。
 

src/css/floatingbtn.css

@@ -0,0 +1,99 @@
+  #floating-button{
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    background: white;
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    cursor: pointer;
+    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
+    text-align: center;
+  }
+
+  #floating-button img {
+    width: 35px;
+    height: 35px;
+  }
+
+  .plus{
+    color: black;
+    position: absolute;
+    top: 10px;
+    display: block;
+    bottom: 0;
+    left: 10px;
+    right: 0;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    line-height: 55px;
+    font-size: 38px;
+    font-family: 'Roboto';
+    font-weight: 300;
+    animation: plus-out 0.3s;
+    transition: all 0.3s;
+  }
+
+  #container-floating{
+    position: fixed;
+    width: 70px;
+    height: 70px;
+    bottom: 30px;
+    right: 30px;
+    z-index: 50px;
+  }
+
+  #container-floating:hover{
+    height: 400px;
+    width: 90px;
+    padding: 30px;
+  }
+
+  #container-floating:hover .plus{
+    animation: plus-in 0.15s linear;
+    animation-fill-mode: forwards;
+  }
+
+  .edit{
+    position: absolute;
+    top: 0;
+    display: block;
+    bottom: 0;
+    left: 0;
+    display: block;
+    right: 0;
+    padding: 0;
+    opacity: 0;
+    margin: auto;
+    line-height: 65px;
+    transform: rotate(-70deg);
+    transition: all 0.3s;
+    animation: edit-out 0.3s;
+  }
+
+  #container-floating:hover .edit{
+    animation: edit-in 0.2s;
+    animation-delay: 0.1s;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes edit-in{
+      from {opacity: 0; transform: rotate(-70deg);}
+      to {opacity: 1; transform: rotate(0deg);}
+  }
+
+  @keyframes edit-out{
+      from {opacity: 1; transform: rotate(0deg);}
+      to {opacity: 0; transform: rotate(-70deg);}
+  }
+
+  @keyframes plus-in{
+      from {opacity: 1; transform: rotate(0deg);}
+      to {opacity: 0; transform: rotate(180deg);}
+  }
+
+  @keyframes plus-out{
+      from {opacity: 0; transform: rotate(180deg);}
+      to {opacity: 1; transform: rotate(0deg);}
+  }

src/main.css → src/css/main.css

@@ -3,7 +3,7 @@
         height: 100%;
       }
       #map {
-        height: cal(100% - 42px);
+        height: 100%;
       }
       a, a:hover {color: inherit;}
 
@@ -21,3 +21,13 @@
         transform: translate(-50%, -50%);
         z-index: 10000;
       }
+
+      .bottom-right-screen {
+        position: absolute;
+        bottom: 1%;
+        left: 99%;
+        margin-right: -50%;
+        transform: translate(-50%, -50%);
+        z-index: 10000;
+      }
+      #exampleModalLong { z-index: 10001; }