STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

mobile support for carousel

Browse Source
This commit is contained in:
James Collins
2023-01-25 08:34:45 +10:00
parent 6053d82c31
commit fd161eeb75
2 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/SMCarousel.vue
View File

@@ -132,7 +132,7 @@ const disconnectMutationObserver = () => {
position: relative; position: relative;
height: 26rem; height: 26rem;
background: #eee; background: #eee;
// overflow: hidden; overflow: hidden;
&:hover { &:hover {
.carousel-slide-prev, .carousel-slide-prev,

34
resources/js/components/SMCarouselSlide.vue
View File

@@ -7,10 +7,12 @@
</div> </div>
<div v-else class="carousel-slide-body"> <div v-else class="carousel-slide-body">
<div class="carousel-slide-content"> <div class="carousel-slide-content">
<h3>{{ title }}</h3> <div class="carousel-slide-content-inner">
<p v-if="content">{{ content }}</p> <h3>{{ title }}</h3>
<div class="carousel-slide-body-buttons"> <p v-if="content">{{ content }}</p>
<SMButton v-if="url" :to="url" :label="cta" /> <div class="carousel-slide-body-buttons">
<SMButton v-if="url" :to="url" :label="cta" />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -97,11 +99,17 @@ handleLoad();
padding: 1rem; padding: 1rem;
.carousel-slide-content { .carousel-slide-content {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75);
width: auto;
height: auto;
max-width: 800px; max-width: 800px;
padding: 2rem 3rem 1.5rem 3rem; padding: 2rem 3rem 1.5rem 3rem;
margin-bottom: 2rem; margin-bottom: 2rem;
border-radius: 12px; border-radius: 12px;
margin-left: 3rem;
} }
h3 { h3 {
@@ -136,4 +144,22 @@ handleLoad();
} }
} }
} }
@media (max-width: 768px) {
.carousel-slide {
.carousel-slide-body {
padding: 0;
.carousel-slide-content {
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
padding-left: 5rem;
padding-right: 5rem;
border-radius: 0;
}
}
}
}
</style> </style>