RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile responsive settings, and fix bug with index.js

Browse source
This commit is contained in:
wearrrrr 2024-02-23 13:56:21 -06:00
parent a9df5402e5
commit 5636a91028
2 changed files with 51 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.js
View file

@ -49,8 +49,10 @@ app.use(
}) })
); );
app.use(function(req, res, next) { app.use(function(req, res, next) {
res.header("Cross-Origin-Embedder-Policy", "require-corp"); if (req.originalUrl.includes("/games")) {
res.header("Cross-Origin-Opener-Policy", "same-origin"); res.header("Cross-Origin-Embedder-Policy", "require-corp");
res.header("Cross-Origin-Opener-Policy", "same-origin");
}
next(); next();
}); });
app.use("/", express.static("dist/client/")); app.use("/", express.static("dist/client/"));

59
src/components/SettingsTablist.astro
View file

@ -385,6 +385,7 @@ const t = useTranslations(lang);
gap: 20px; gap: 20px;
position: relative; position: relative;
z-index: 2; z-index: 2;
flex-wrap: wrap;
} }
.content-setting-header { .content-setting-header {
color: var(--text-color); color: var(--text-color);
@ -460,6 +461,38 @@ const t = useTranslations(lang);
position: relative; position: relative;
gap: 25px; gap: 25px;
} }
@media (max-width: 880px) {
.popup {
flex-direction: column;
min-height: 80%;
max-height: 80%;
}
.tabs {
flex-direction: row;
max-width: 100%;
max-height: 70px;
min-height: 70px;
gap: 0;
align-items: center;
}
label {
width: auto;
margin-left: 0;
}
}
@media (max-width: 500px) {
label {
font-size: 20px;
}
}
@media (max-width: 375px) {
label {
font-size: 18px;
}
}
.setting {
width: 140px
}
.marker { .marker {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -484,16 +517,18 @@ const t = useTranslations(lang);
height: calc(50% - 72px); height: calc(50% - 72px);
border-radius: 0 32px 0 0; border-radius: 0 32px 0 0;
} }
#setting-tab-proxy:checked ~ .marker { @media (min-width: 880px) {
transform: translateY(0%); #setting-tab-proxy:checked ~ .marker {
transform: translateY(0%);
}
#setting-tab-customization:checked ~ .marker {
transform: translateY(13.5%);
}
#setting-tab-cloaking:checked ~ .marker {
transform: translateY(27%);
}
#setting-tab-credits:checked ~ .marker {
transform: translateY(41%);
}
} }
#setting-tab-customization:checked ~ .marker { </style>
transform: translateY(13.5%);
}
#setting-tab-cloaking:checked ~ .marker {
transform: translateY(27%);
}
#setting-tab-credits:checked ~ .marker {
transform: translateY(41%);
}
</style>