Areya
/
maps-theme
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

added list scrollbar

master
Gustavo Luigi 2023-05-18 14:44:25 -03:00
parent 7851bb54b8
commit a2b8af637c
1 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
content/index.blade.php
View File

@ -5,7 +5,6 @@
#map { #map {
height: 80vh; height: 80vh;
width: 100%; width: 100%;
border-radius: 0.375rem;
} }
.address + .address{ .address + .address{
margin-top: .5rem; margin-top: .5rem;
@ -13,6 +12,34 @@
#marker-window{ #marker-window{
min-width: 100px; min-width: 100px;
} }
#contents {
scrollbar-color: #aaa #f5f5f5;
}

#contents::-webkit-scrollbar {
width: 8px;
background-color: #f5f5f5;
}

#contents::-webkit-scrollbar-thumb {
background-color: #aaa;
}

#contents::-webkit-scrollbar-thumb:hover {
background-color: #666;
}

#contents::-moz-scrollbar {
background-color: #f5f5f5;
}

#contents::-moz-scrollbar-thumb {
background-color: #aaa;
}

#contents::-moz-scrollbar-thumb:hover {
background-color: #666;
}
</style> </style>
@stop @stop
@section('content') @section('content')
@ -55,7 +82,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4" id="contents"> <div class="col-4 overflow-auto" style="height: 80vh;" id="contents">
<div class="card d-none address"> <div class="card d-none address">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -76,14 +103,13 @@
<h6 id="firstHeading" class="firstHeading">$title</h6> <h6 id="firstHeading" class="firstHeading">$title</h6>
<div id="bodyContent"> <div id="bodyContent">
<p>$description</p> <p>$description</p>
<a data-href="$path">Details</a> <a data-href="$path" style="outline: none;">Details</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
<!-- <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script> <script>
const contentUrl = "{{url('/api/types/locations/contents')}}"; const contentUrl = "{{url('/api/types/locations/contents')}}";
@ -183,6 +209,7 @@
newElement.removeClass('d-none'); newElement.removeClass('d-none');


newElement.on('click', function () { newElement.on('click', function () {
var bounds = new google.maps.LatLngBounds(); var bounds = new google.maps.LatLngBounds();
bounds.extend(marker.getPosition()); bounds.extend(marker.getPosition());
map.fitBounds(bounds); map.fitBounds(bounds);