@extends('template.'.config('settings.template').'.content.master') @section('head') <title>Home | {{config('settings.name')}}</title> <style> #map { height: 80vh; width: 100%; } .address + .address{ margin-top: .5rem; } #marker-window{ min-width: 100px; } #contents { scrollbar-color: #aaa #f5f5f5; } #contents::-webkit-scrollbar { width: 8px; border-radius: 10px; background-color: #f5f5f5; } #contents::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #aaa; } #contents::-webkit-scrollbar-thumb:hover { background-color: #888; } .address{ cursor: pointer; transition: all .2s; } .address:hover{ background: #eee; } </style> @stop @section('content') <div class="container py-5"> <div class="row mb-5 mt-3"> <div class="col-12"> <h1>{{config('settings.name')}}</h1> <p class="mt-3">{{config('settings.description')}}</p> </div> </div> <div class="row mb-3"> <div class="col-12 col-md rounded-end"> <div class="d-flex"> <div id="filters" class="d-flex"> <template id="filter"> <div class="dropdown me-2 filter"> <button class="btn btn-primary dropdown-toggle btn-sm bg-light" style="color: #212529; background: #e9ecef; border: 1px solid #ced4da;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="filter-name"></span> <span class="caret"></span> </button> <ul class="dropdown-menu checkbox-menu allow-focus p-2 filter-options"></ul> </div> </template> </div> <div class="flex-fill me-2" style="max-width: 400px;"> <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/> </div> <div class="input-group flex-fill me-2" style="max-width: 400px;"> <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche"> <button class="input-group-text bg-primary text-light" id="search-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </button> </div> </div> <div class="mt-2 d-flex"> <div class="d-flex"> <div id="applied-filters" class="d-flex"> <template id="applied-filter"> <button class="btn btn-sm btn-primary me-2 btn applied-filter d-none"> <span class="filter-name"></span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg> </button> </template> </div> <button class="btn btn-sm btn-primary me-2 btn applied-filter" data-field="ort" style="display: none;"> <span class="filter-name"></span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg> </button> <button class="btn btn-sm btn-primary me-2 btn applied-filter" data-field="search" style="display: none;"> <span class="filter-name"></span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg> </button> </div> <button id="reset-filters-button" class="btn btn-danger btn-sm ms-1" style="display: none;">Alle löschen</button> </div> </div> <div class="col-12 col-md-auto pe-0 d-flex align-items-end"> <p class="text-end text-muted small m-0 p-0"><span id="count-items-displayed">0</span> results</p> </div> </div> <div class="row"> <div class="col-12 col-md-8 g-0 ps-md-3 order-md-last"> <div id="map"></div> <div id="marker-window" class="d-none"> <h6 id="firstHeading" class="firstHeading">$title</h6> <div id="bodyContent"> <img class="img-fluid rounded" data-src="$image" alt=""> <p>$description</p> <a data-href="$path" style="outline: none;">Details</a> </div> </div> </div> <div class="col-12 col-md-4 overflow-auto mt-3 mt-md-0" style="height: 80vh;" id="contents"> <div class="card d-none address shadow-sm "> <div class="card-body"> <div class="row"> <div class="col-12 col-md-5"> <img class="img-fluid rounded" data-src="$image" alt=""> </div> <div class="col-12 col-md-7"> <h4 class="fs-6 mt-2 fw-bolder">$title</h4> <p class="mt-2 text-muted small postal-code"> <svg style="fill: #ea4335; width: 10px; margin-right: 4px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/></svg>$postalCode</p> <div style="gap: .25rem;" class="d-flex tags"></div> </div> </div> </div> </div> </div> </div> </div> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <script> const urlBase = "{{url('/')}}"; const type = "{{$_type}}"; const locationField = "{{$_location_field}}"; const tagField = "{{$_tags_field??''}}"; let filterFields = {!! json_encode($_filter_fields) !!}; </script> <script src="{{storage('assets/home/script.js')}}"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script> @stop