fixing news section, adding adaptive

This commit is contained in:
ROMANGOLIENKO 2024-04-16 14:22:45 +03:00
parent 3057579f9e
commit bdf4e7b64c
2 changed files with 146 additions and 50 deletions

File diff suppressed because one or more lines are too long

View File

@ -554,12 +554,16 @@
</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 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 = array()
@ -569,6 +573,7 @@
$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
@ -579,22 +584,46 @@
<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%; ">
<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>
</div>
@endforeach
@ -605,10 +634,10 @@
<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>
@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>
@ -622,7 +651,74 @@
<span class="visually-hidden">Next</span>
</button>
</div>
<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>
<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>
</div>
</div>
{{-- Конец новостей --}}
<div style="background-image: url({{ URL::to('img/front-page/bakalavr-special/fon3_blok.png') }}); background-size: cover; ">