@extends("app.layout.base") @section("title") Vejledninger @endsection @section("content") <style> div.card { margin-top: 1rem; margin-bottom: 30px; width: auto; heigt: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: flex; flex-direction: row; border-radius: 10px; } div.header { background-color: #00788a; color: white; padding: 8px; font-size: 10px; text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; border-radius: 10px 0px 0px 10px; } div.container { padding: 8px; line-height: 1.5; } .select2-container--default .select2-results > .select2-results__options { max-height: 120px !important; } .select2-results__option, .select2-search__field { color: black; } </style> <script src="{{ asset("/js/jquery-3.2.1.min.js") }}"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> <script> // In your Javascript (external .js resource or <script> tag) $(document).ready(function() { $('.js-example-basic-single').select2(); }); </script> <main style="min-height: calc(100% - 61.34px);"> <h1 class="text-center sde-blue mt-0 mb-2rem">{{__('msg.vejledning')}}</h1> @if(!$guides->isEmpty()) @if (count(\App\GuidesCategory::query()->get()) > 1) <h4 class="mt-0 mb-0">{{ __("msg.kategorier") }}</h4> <select id="categorySelect" class="js-example-basic-single mb-2rem" name="state"> <option value="All" selected>{{ __("msg.allekategorier") }}</option> @foreach (\App\GuidesCategory::query()->get() as $Category) <option value="{{ $Category->id }}">{{ $Category->guidesCategoryName }}</option> @endforeach </select> @endif <div id="main"> @foreach($guides as $guide) <div class="card"> @if($guide->resource_id !== null) <div class="header bs-cover bp-center" style="background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $guide->resource_id)->first()->filename) }}');"> </div> @else <div class="header d-flex justify-content-center"> <img alt="Image" src="{{ asset('/images/icons/image.svg') }}" style="width: calc(100% - 20px)"> </div> @endif <div class="container w-100"> <div class="row justify-content-center"> <h4>{{ $guide->name}}</h4> </div> <div class="row justify-content-center"> <a class="text-center m-none p-none bold sde-blue" href="{{route("guides.show", ["guide" => $guide->id ])}}">{{__('msg.læsmere')}}</a> </div> </div> </div> @endforeach </div> @else <p class="mb-auto text-center">{{__('msg.dereringenvejledninger')}}.</p> @endif </main> <script> $('#categorySelect').on('change', function () { $value = $(this).val(); $.ajax({ type: 'get', url: '{{ route("guides.showCategory") }}', data: { 'category':$value }, success:function (data) { $('#main').html(data); }, error:function (data) { console.log(data); } }); }) </script> @endsection