検索できるようにした

kure-kosen · Jun 21, 2018 · 851aa71 · 851aa71
1 parent f032c9b
commit 851aa71
Show file tree

Hide file tree

Showing 5 changed files with 406 additions and 359 deletions.
diff --git a/assets/css/map-design.css b/assets/css/map-design.css
@@ -28,16 +28,16 @@ ul {
 /* .ol-full-screenと.ol-zoomはol.cssのを上書きされている。!importantを使わず、読み込み順で上書きしている */
 .ol-full-screen {
   right: 0.5em;
-  top: calc( 0.5em + 3em);
+  top: calc(0.5em + 3em);
 }
 
 .ol-zoom {
   left: 0.5em;
-  top: calc( 3em + 0.5em);
+  top: calc(3em + 0.5em);
 }
 
 .ol-zoomslider {
-  top: calc( 1.375em + 3em + 0.5em);
+  top: calc(1.375em + 3em + 0.5em);
 }
 
 /* メニューを閉じるボタン */
@@ -57,7 +57,7 @@ ul {
   height: 100%;
   top: 0;
   right: 0;
-  background-color: rgba(245, 245, 245, .8);
+  background-color: rgba(245, 245, 245, 0.8);
   /* 100vhを超えればスクロールできるのでそれがわかるようにする */
   overflow: auto;
 }
@@ -83,11 +83,11 @@ ul {
 
 .menu li {
   list-style-type: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
 }
 
 .menu li:hover {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .menu .menu-nohover {
@@ -104,12 +104,13 @@ ul {
 
 .menu .menu-buildings {
   /* 高さはどう指定? */
-  height: calc( 100vh - 20em);
+  height: calc(100vh - 20em);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-.menu .menu-content, .menu .menu-content a {
+.menu .menu-content,
+.menu .menu-content a {
   color: #c81e00;
 }
 
@@ -122,7 +123,6 @@ ul {
   text-align: right;
 }
 
-
 /* ポップアップの表 */
 .ol-popup table {
   border: 0;
@@ -135,18 +135,14 @@ ul {
 }
 
 /* 検索ボックスのフォーム */
-form.search {
-  width: calc( 100vw - 4em);
+.search {
+  width: calc(100vw - 4em);
   max-width: 500px;
-  position: relative;
+  /* [x]のrightの基準 */
+  margin: 0.5em 0.5em 0 0.5em;
+  position: absolute;
   top: 0;
   left: 0;
-}
-
-form .search-box {
-  margin: .5em .5em 0 .5em;
-  position: relative;
-  /* [x]のrightの基準 */
   display: flex;
   align-items: center;
   /* [x]を縦で中央に */
@@ -158,56 +154,60 @@ form .search-box {
   border-radius: 5px 5px 0 0;
 }
 
-form input[type="text"] {
-  width: calc( 100vw - 3em);
+input[type="search"] {
+  width: calc(100vw - 3em);
   border: 0;
   border-radius: 5px;
-  height: calc( 2.5em - 2px - 8px);
+  height: calc(2.5em - 10px);
   background-color: #fafafa;
-  margin: 0 3.5em 0 1em;
+  padding: 0 3.5em 0 1em;
   /*  height: calc( 2.5em - 2px ); Safariで入力欄が縦に長いのでもう少し低くする */
   /*  font-size: 1.5em; Safariで入力欄が縦に長くなるのでfont-sizeは使わない */
 }
 
-input[type="text"]:focus {
+input[type="search"]:focus {
   outline: 0;
 }
 
-form input[type="reset"] {
+input[type="reset"] {
   position: absolute;
+  top: 0;
   right: 0;
   width: 2.5em;
   height: 2.5em;
   border: 0;
   border-radius: 5px;
   background-color: #eee;
   padding: 0;
+  z-index: 10;
   /* ボタンクリック時に文字が右下へ下がるのを防ぐため */
 }
 
-form input[type="reset"]:hover {
+input[type="reset"]:hover {
   background-color: #ccc;
 }
 
 /* 検索ボックス・メニューが開いている時 */
-form.search.menuactive {
+.search.menuactive {
   /*  width: calc( 100% - 270px ); Safariで確認してみると、幅が短かった */
-  width: calc( 100vw - 48% - 1.5em);
+  width: calc(100vw - 48% - 1.5em);
 }
 
 .result {
+  visibility: hidden;
   margin: 0 0.5em;
-  position: relative;
+  position: absolute;
+  top: 41px;
+  left: -8px;
   align-items: center;
-  height: 100%;
+  width: 100%;
   border-bottom: 1px solid rgba(72, 72, 72, 0.7);
   background-color: #fafafa;
-  /*box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);*/
+  box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);
   border-radius: 0 0 5px 5px;
 }
 
 .result ul {
-  padding-top: 1em;
   list-style: none;
   display: block;
 }
@@ -216,10 +216,10 @@ form.search.menuactive {
   padding-left: 1em;
   display: inline-block;
   width: calc(100% - 1em);
-  /*border: .1px solid;*/
   line-height: 1.6em;
 }
 
-.result li:hover {
-  background-color: rgba(230,230,230,.8);
+.result li:hover,
+.select {
+  background-color: rgba(230, 230, 230, 0.8);
 }
diff --git a/assets/libs/ol3-search/searchcontrol.css b/assets/libs/ol3-search/searchcontrol.css
@@ -17,7 +17,7 @@
   float: left;
 }
 
-.ol-search input {
+/* .ol-search input {
   display: inline-block;
   border: 0;
   margin: 1px 1px 1px 2px;
@@ -26,13 +26,15 @@
   height: 1.375em;
   box-sizing: border-box;
   transition: all 0.1s;
-}
+} */
 
-.ol-touch .ol-search input, .ol-touch .ol-search ul {
+.ol-touch .ol-search input,
+.ol-touch .ol-search ul {
   font-size: 1.5em;
 }
 
-.ol-control.ol-search.ol-collapsed ul, .ol-control.ol-search.ol-collapsed input {
+.ol-control.ol-search.ol-collapsed ul,
+.ol-control.ol-search.ol-collapsed input {
   display: none;
 }
 
@@ -47,14 +49,11 @@
   overflow-x: hidden;
 }
 
-
-/*
-.ol-control.ol-search ul
-{	position: absolute;
-	background: #fff;
-	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-}
-*/
+/* .ol-control.ol-search ul {
+  position: absolute;
+  background: #fff;
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
+} */
 
 .ol-control.ol-search ul li {
   padding: 0.1em 0.5em;
@@ -66,7 +65,8 @@
   text-overflow: ellipsis;
 }
 
-.ol-search ul li.select, .ol-search ul li:hover {
-  background-color: rgba(0, 60, 136, .5);
+.ol-search ul li.select,
+.ol-search ul li:hover {
+  background-color: rgba(0, 60, 136, 0.5);
   color: #fff;
-}
+}