carousel sliding direction changed to vertical

This commit is contained in:
s416422 2020-03-03 16:35:27 +01:00
parent 60f28e3ea1
commit dd3f3d5b83
4 changed files with 37 additions and 8 deletions

View File

@ -6867,6 +6867,26 @@ a.close.disabled {
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
} }
.vertical .carousel-item-prev,
.vertical .active.carousel-item-right {
transform: translateY(100%);
transition: transform 0s ease-in-out;
}
.vertical .carousel-item-next,
.vertical .active.carousel-item-left {
transform: translateY(-100%);
transition: transform 0s ease-in-out;
}
.vertical .carousel-control-prev-icon,
.vertical .carousel-control-next-icon {
transform: rotate(90deg);
}
.carousel-control-prev, .carousel-control-next {
display: flex;
flex-direction: column;
justify-content: center;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.carousel-control-prev, .carousel-control-prev,
.carousel-control-next { .carousel-control-next {

View File

@ -17,9 +17,9 @@ div.seatCharts-cell {
outline: none; outline: none;
font-size: 13px; font-size: 13px;
color: #182C4E; color: #182C4E;
height: 90px; height: 100px;
width: 90px; width: 100px;
line-height: 90px; line-height: 100px;
} }
div.seatCharts-seat { div.seatCharts-seat {
@ -40,7 +40,7 @@ div.seatCharts-space {
} }
div.seatCharts-row { div.seatCharts-row {
height: 100px; height: 110px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin: 0 auto; margin: 0 auto;
@ -332,6 +332,15 @@ a.checkout-button {
} }
} }
/*.carousel-item-next.carousel-item-left,*/
/*.carousel-item-prev.carousel-item-right {*/
/*!*-webkit-transform: translate3d(0, 0, 0);*!*/
/*!*transform: translate3d(0, 0, 0);*!*/
/*transform: translateY(0%);*/
/*}*/
@media (max-width: 650px) { @media (max-width: 650px) {
.wrapper { .wrapper {
height: 30%; height: 30%;

View File

@ -23,7 +23,7 @@
<b>sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}</b> <b>sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}</b>
</p> </p>
</div> </div>
<div id="map-carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false"> <div id="map-carousel" class="carousel slide vertical" data-ride="carousel" data-interval="false" data-wrap="false">
<div class="carousel-inner" id="multi_parts-map"> <div class="carousel-inner" id="multi_parts-map">
<input type="hidden" id="multi_parts_number" value="{{ $parts_number }}"> <input type="hidden" id="multi_parts_number" value="{{ $parts_number }}">
@foreach(range(0, $parts_number-1) as $index) @foreach(range(0, $parts_number-1) as $index)
@ -40,11 +40,11 @@
</div> </div>
<a class="carousel-control-prev" href="#map-carousel" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#map-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Pierwsza część</span> <span>Poprzednia część</span>
</a> </a>
<a class="carousel-control-next" href="#map-carousel" role="button" data-slide="next"> <a class="carousel-control-next" href="#map-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Druga część</span> <span>Następna część</span>
</a> </a>
</div> </div>
@else @else

View File

@ -57,7 +57,7 @@
</div> </div>
<div class="seat-chart-wrapper"> <div class="seat-chart-wrapper">
@if($multi_parts) @if($multi_parts)
<div id="map-carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false"> <div id="map-carousel" class="carousel slide vertical" data-ride="carousel" data-interval="false" data-wrap="false">
<div class="carousel-inner" id="multi_parts-map"> <div class="carousel-inner" id="multi_parts-map">
<input type="hidden" id="multi_parts_number" value="{{ $parts_number }}"> <input type="hidden" id="multi_parts_number" value="{{ $parts_number }}">
@foreach(range(0, $parts_number-1) as $index) @foreach(range(0, $parts_number-1) as $index)