aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #67 from 0hAodha/searchbarCSS

Browse Source 
Added CSS to searchbar
This commit is contained in:
Conor McNamara
2023-03-23 14:23:04 +00:00
committed by GitHub
parent 9b1b95e8ea 6f9c1aa2ad
commit 587e202bcf
1 changed files with 65 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/MapPage.vue
View File

@ -1,6 +1,11 @@
<template>
<input type="text" v-model="searchinput" placeholder="Search Trains" />
<Navbar />
<div id="mapCover">
<div id="searchContainer">
<input id="searchBar" type="text" v-model="searchinput" placeholder="Search Trains" />
</div>
</div>
<div id="preferenceDropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
@ -498,6 +503,13 @@ export default {
</script>
<style scoped>
#mapCover{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.overlay-content {
width: 1%;
}
@ -532,6 +544,30 @@ export default {
font-size: 14.6px;
}
#searchContainer{
position: absolute;
top: 11%;
background-color: #ffffff;
width: 190px;
height: 40px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
color: black;
box-shadow: 0 0 5px 2px #6e757dbe;
border-radius: 6%;
}
#searchBar{
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border: none;
border-bottom: 1px solid black;
z-index: 3;
}
#preferenceDropdown {
position: absolute;
z-index: 3;
@ -610,5 +646,33 @@ export default {
left:5%;
top: 18%;
}
#mapCover{
height: 100%;
width: 100%;
display: flex;
justify-content: left;
z-index: 3;
}
#searchBar{
width: 100px;
}
#searchContainer{
position: absolute;
top: 11%;
left: 10px;
background-color: #ffffff;
width: 120px;
height: 40px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
color: black;
box-shadow: 0 0 5px 2px #6e757dbe;
border-radius: 6%;
}
}
</style>