wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-04-05 15:54:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

video size fix on mobile

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-10 00:33:31 +05:00
parent 1519ec7bb8
commit ccb733141b
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/static/Placeholders.js
View file

@ -37,12 +37,12 @@ function PlaceholderVid() {
const placeholderRoot = document.createElement("div");
placeholderRoot.dataset.type = "placeholder__video__container";
placeholderRoot.className =
"relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm";
"relative aspect-square w-full h-full rounded-sm flex-shrink-0";
const placeholderVid = document.createElement("video");
placeholderVid.dataset.type = "placeholder__video";
placeholderVid.className =
"relative aspect-square w-full h-full rounded-sm [&:not(:fullscreen)]:object-cover";
"w-full h-full absolute inset-0 aspect-square rounded-sm [&:not(:fullscreen)]:object-cover";
placeholderVid.controls = true;
const placeholderVidLoader = document.createElement("div");

20
src/static/tailwind.css
View file

@ -527,9 +527,6 @@
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.absolute {
position: absolute;
}
@ -692,6 +689,15 @@
.min-w-48 {
min-width: calc(var(--spacing) * 48);
}
.flex-0 {
flex: 0;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.border-collapse {
border-collapse: collapse;
}
@ -707,6 +713,9 @@
.resize {
resize: both;
}
.grid-cols-\[100\%\] {
grid-template-columns: 100%;
}
.grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
@ -900,6 +909,11 @@
grid-template-columns: repeat(auto-fill,minmax(25%,1fr));
}
}
.sm\:grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
@media (width >= 40rem) {
grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
}
.sm\:items-center {
@media (width >= 40rem) {
align-items: center;

2
src/templates/Components/PlaceHolderVid.tsx
View file

@ -2,7 +2,7 @@ export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
return (
<div
data-type="placeholder__video__container"
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm ${
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm flex-shrink-0 ${
props.isMobileHidden ? "hidden xl:block" : ""
}`}
>

2
src/templates/videos.tsx
View file

@ -6,7 +6,7 @@ export default function VideosPage() {
<PageNav path="/videos"/>
<div
id="videos_videos"
className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
className="my-2 overflow-hidden grid grid-cols-[100%] sm:grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
></div>
<PageNav path="/videos"/>
</>