forked from aslan/applicant-site
fixing news section, adding adaptive
This commit is contained in:
parent
3057579f9e
commit
bdf4e7b64c
File diff suppressed because one or more lines are too long
|
|
@ -554,75 +554,171 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Начало новостей --}} <div style="background-image: url({{ URL::to('img/front-page/bakalavr-special/fon1_blok.png') }}); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; ">
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="carouselExampleIndicators" class="carousel slide ">
|
||||
<div class="carousel-inner px-5 pt-5">
|
||||
@php
|
||||
$all_news = array()
|
||||
@endphp
|
||||
@foreach($news as $item)
|
||||
{{-- Начало новостей --}}
|
||||
<div style="background-image: url({{ URL::to('img/front-page/bakalavr-special/fon1_blok.png') }}); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; ">
|
||||
<div class="container-fluid ms-sm-5 pt-5">
|
||||
<div class="row">
|
||||
<div class="display-5 col-12 text-white mb-3 text-center text-md-start "
|
||||
style=" font-weight: 700; letter-spacing: 0em; ">
|
||||
НОВОСТИ
|
||||
</div>
|
||||
</div>
|
||||
<div id="carouselExampleIndicators" class="carousel slide d-lg-block d-none " data-bs-interval="false">
|
||||
<div class="carousel-inner px-5 pt-5">
|
||||
@php
|
||||
$all_news[$item->name]['name'] = $item->name;
|
||||
$all_news[$item->name]['text'] = $item->text;
|
||||
$all_news[$item->name]['url'] = asset($item->photo);
|
||||
$all_news = array()
|
||||
@endphp
|
||||
@endforeach
|
||||
@foreach($news as $item)
|
||||
@php
|
||||
$all_news[$item->name]['name'] = $item->name;
|
||||
$all_news[$item->name]['text'] = $item->text;
|
||||
$all_news[$item->name]['url'] = asset($item->photo);
|
||||
$all_news[$item->name]['id'] = $item->id;
|
||||
@endphp
|
||||
@endforeach
|
||||
|
||||
@php
|
||||
$out = array_chunk($all_news, 4, true);
|
||||
@endphp
|
||||
@foreach($out as $id => $page)
|
||||
<div class="carousel-item @if($id == 1) active @endif \" >
|
||||
<div class="row d-flex align-items-center justify-content-center " >
|
||||
@foreach($page as $item)
|
||||
|
||||
|
||||
<div class="col-xl col-12 " style=" max-width: 20%; ">
|
||||
@php
|
||||
$out = array_chunk($all_news, 4, true);
|
||||
@endphp
|
||||
@foreach($out as $id => $page)
|
||||
<div class="carousel-item @if($id == 1) active @endif \" >
|
||||
<div class="row d-flex align-items-center justify-content-center " >
|
||||
@foreach($page as $item)
|
||||
<div class="col " style="max-width: 20%">
|
||||
<img src="{{$item['url']}}" class="img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px 20px 0px 0px;">
|
||||
<div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 10.5em;">
|
||||
<div class=" p-3" style="">
|
||||
<strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item['name']}} </strong>
|
||||
<br><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalNews-{{$item['id']}}"> читать полностью</button>
|
||||
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item['text']), 100, "...") }} </p>
|
||||
|
||||
|
||||
|
||||
|
||||
<img src="{{$item['url']}}" class="img-fluid">
|
||||
<div class="bg-white " style="border-radius: 20px; height: 8em; overflow-y: auto">
|
||||
<div class="gradient-text p-3" style="">
|
||||
<strong class="fs-5" style="font-family: Geologica-Light"> {{$item['name']}} </strong>
|
||||
<p style="font-family: Geologica-ExtraLight; " > {{$item['text']}} </p>
|
||||
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalNews-{{$item['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item['name']}}</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8">
|
||||
<img src="{{$item['url']}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4"> {{$item['text']}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
<br><br><br><br>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
|
||||
<div class="carousel-indicators mt-5">
|
||||
@for ($i = 0; $i < count($out); $i++)
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" @if($i == 0) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
|
||||
@endfor
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<br><br><br><br>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
<div id="carouselExampleIndicatorsMobile" class="carousel slide d-lg-none d-block" data-bs-interval="false" >
|
||||
<div class="carousel-inner px-5 pt-5">
|
||||
@php $counter = 0; @endphp
|
||||
@foreach($news as $item)
|
||||
@php $counter++ @endphp
|
||||
<div class="carousel-item @if($counter == 1) active @endif \" >
|
||||
<div class="row d-flex align-items-center justify-content-center " >
|
||||
|
||||
<div class="col-12" >
|
||||
<img src="{{asset($item->photo)}}" class="img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px 20px 0px 0px;">
|
||||
<div class="bg-white border border-white border-2" style="border-radius: 0px 0px 20px 20px ; height: 12em;">
|
||||
<div class=" p-3" style="">
|
||||
<strong class="fs-5 gradient-text" style="font-family: Geologica-Light"> {{$item->name}} </strong>
|
||||
<br><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalNewsMobile-{{$item->id}}"> читать полностью</button>
|
||||
<p class="gradient-text" style="font-family: Geologica-ExtraLight;">{{ Str::limit(preg_replace('/<([^>]+)>/', PHP_EOL, $item->text), 100, "...") }} </p>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalNewsMobile-{{$item->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel"> {{$item->name}}</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col">
|
||||
<img src="{{asset($item->photo)}}" class=" img-fluid border border-white border-2" style="background-size: cover; border-radius: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4"> {{$item->text}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<br><br><br><br>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
|
||||
<div class="carousel-indicators mt-5">
|
||||
@for ($i = 0; $i < $counter; $i++)
|
||||
<button type="button" data-bs-target="#carouselExampleIndicatorsMobile" data-bs-slide-to="{{$i}}" @if($i == 1) class="active" @endif aria-current="true" aria-label="Slide {{$i + 1}}"></button>
|
||||
@endfor
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="carousel-indicators mt-5">
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicatorsMobile" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicatorsMobile" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{-- Конец новостей --}}
|
||||
<div style="background-image: url({{ URL::to('img/front-page/bakalavr-special/fon3_blok.png') }}); background-size: cover; ">
|
||||
|
|
|
|||
Loading…
Reference in New Issue