Skip to content

Fix Footer Sticky and Fix mobile view of compat page #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
medievalshell merged 2 commits into from
Mar 19, 2026
Merged

Fix Footer Sticky and Fix mobile view of compat page #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
edffca3
Fix Footer Sticky and Fix mobile view of compat page
medievalshell Mar 19, 2026
a20004b
Merge branch 'ARMSX2:main' into main
medievalshell Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 42 additions & 40 deletions src/components/CompatibilityList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,9 +410,9 @@ const CompatibilityList = ({
</div>
) : (
<div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 items-start">
{paginatedGames.length === 0 ? (
<div className="col-span-2 text-center py-12">
<div className="col-span-full text-center py-12">
<div className="text-xl text-gray-400">
No games found matching the current filters.
</div>
Expand All @@ -423,51 +423,53 @@ const CompatibilityList = ({
const latestSubmission = submissions[submissions.length - 1];
const reporter = latestSubmission?.submittedBy || "community";
const submissionCount = game.submissionCount || submissions.length || 1;
const globalScore =
typeof game.globalScore === "number" ? game.globalScore.toFixed(2) : "—";
const globalScore = typeof game.globalScore === "number" ? game.globalScore.toFixed(2) : "—";

return (
<div
key={index}
onClick={() => handleGameClick(game)}
className="bg-[#1a1a1f] rounded-lg p-6 shadow-lg hover:shadow-xl transition-all duration-200 hover:bg-[#1f1f24] flex flex-col h-full"
className="bg-[#1a1a1f] rounded-lg p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-200 hover:bg-[#1f1f24] flex flex-col h-auto min-h-0 cursor-pointer border border-white/5"
>
<div className="flex justify-between items-start gap-4">
<div className="flex-1">
<h2 className="text-2xl text-white font-bold mb-3">
{game.title}
</h2>
<p className="text-gray-400 text-base mb-2 flex items-center gap-2">
<span>Region: {game.region}</span>
<img
src={getFlagIcon(game.region)}
alt={`${game.region} flag`}
className="w-5 h-5 shadow-md forceSlightRound -mt-0.5"
/>
</p>
<p className="text-gray-400 text-base mb-2">
Title ID: {game["title-id"]}
</p>
<p className="text-gray-400 text-base">
Latest note by @{reporter}: {game.notes || "No notes yet."}
</p>
<div className="flex flex-col sm:flex-row justify-between items-start gap-3 sm:gap-4">
<div className="flex-1 w-full">
<div className="flex items-start justify-between sm:justify-start sm:gap-3 mb-2">
<h2 className="text-xl md:text-2xl text-white font-bold leading-tight line-clamp-2">
{game.title}
</h2>
</div>

<div className="space-y-1 mb-3">
<p className="text-gray-400 text-sm md:text-base flex items-center gap-2">
<span>Region: {game.region}</span>
<img
src={getFlagIcon(game.region)}
alt=""
className="w-4 h-4 shadow-sm rounded-sm"
/>
</p>
<p className="text-gray-400 text-sm md:text-base">
Title ID: <span className="font-mono text-xs opacity-80">{game["title-id"]}</span>
</p>
<p className="text-gray-400 text-xs md:text-sm italic line-clamp-2">
Latest note by @{reporter}: {game.notes || "No notes yet."}
</p>
</div>
</div>
<div className="text-right">

<div className="flex flex-row sm:flex-col items-center sm:items-end justify-between w-full sm:w-auto pt-3 sm:pt-0 border-t border-white/5 sm:border-none">
<span
className={`${getcorrespondingColor(
game.status
)} font-bold text-lg inline-block px-5 py-2 rounded-md`}
className={`${getcorrespondingColor(game.status)} font-bold text-sm md:text-lg inline-block tracking-wide px-5 py-2 rounded-md`}
>
{game.status.replace(
/(^|-)(\w)/g,
(_, sep, char) => sep + char.toUpperCase()
)}
{game.status}
</span>
<div className="text-sm text-blue-300 mt-2">
Global score: {globalScore} / 5
</div>
<div className="text-xs text-gray-500">
{submissionCount} report{submissionCount !== 1 ? "s" : ""}
<div className="text-right">
<div className="text-[10px] md:text-sm text-blue-300 font-medium sm:mt-2">
Score: {globalScore} / 5
</div>
<div className="text-[9px] md:text-xs text-gray-500">
{submissionCount} report{submissionCount !== 1 ? "s" : ""}
</div>
</div>
</div>
</div>
Expand All @@ -477,11 +479,11 @@ const CompatibilityList = ({
)}
</div>
{totalPages > 1 && (
<div className="flex flex-wrap justify-center items-center mt-10 gap-1 md:gap-2">
<div className="flex flex-wrap justify-center items-center mt-6 md:mt-10 mb-8 gap-1.5">
<button
onClick={prevPage}
disabled={currentPage === 1}
className="px-4 py-2 rounded-lg bg-[#2a2a2f] text-white disabled:opacity-30 disabled:cursor-not-allowed hover:bg-[#323237] transition-colors text-sm"
className="px-3 py-2 rounded-lg bg-[#2a2a2f] text-white disabled:opacity-30 text-xs font-semibold hover:bg-[#323237] transition-colors"
>
Previous
</button>
Expand Down Expand Up @@ -529,7 +531,7 @@ const CompatibilityList = ({
<button
onClick={nextPage}
disabled={currentPage === totalPages}
className="px-4 py-2 mx-1 rounded-lg bg-[#2a2a2f] text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#323237] transition-colors"
className="px-3 py-2 rounded-lg bg-[#2a2a2f] text-white disabled:opacity-30 text-xs font-semibold hover:bg-[#323237] transition-colors"
>
Next
</button>
Expand Down
14 changes: 9 additions & 5 deletions src/components/Index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,16 @@ const Index = ({ onNavigate, isthetransitioninghappening, isEntering }) => {
isModalOpen={isVersionSwapperOpen}
/>
<div
className={`relative overflow-x-hidden transition-all duration-500 ease-out main-scroll-container ${isthetransitioninghappening
className={`relative overflow-x-hidden transition-all duration-500 ease-out main-scroll-container ${
isthetransitioninghappening
? "opacity-0 transform translate-x-12 scale-95 blur-sm"
: isEntering
? "opacity-100 transform translate-x-0 scale-100 blur-0"
: "opacity-100 transform translate-x-0 scale-100 blur-0"
} md:overflow-y-auto md:scroll-smooth md:snap-y md:snap-mandatory md:touch-pan-y h-screen }`}
: "opacity-100 transform translate-x-0 scale-100 blur-0"
}
overflow-y-auto
md:scroll-smooth
snap-y snap-proximity
md:snap-mandatory
h-dvh pb-20`}
>
<div className="pointer-events-none fixed -left-24 -top-24 h-96 w-96 rounded-full bg-gradient-to-br from-[#8d76cc]/40 to-[#3e4d84]/30 bloom" />
<div className="pointer-events-none fixed left-40 top-64 h-[34rem] w-[34rem] rounded-full bg-gradient-to-tr from-[#3e4d84]/25 to-[#8d76cc]/25 bloom-strong" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/MobileFooter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ const MobileFooter = ({ handleTransitionAndNavigate }) => {
}

return (
<div className="text-center py-4 text-white/70 text-sm bg-transparent">
<div className="fixed bottom-0 left-0 w-full z-[100] text-center py-4 text-white/70 text-sm bg-black/40 backdrop-blur-md border-t border-white/5 safe-area-bottom">
<a
href="https://github.com/tanosshi"
target="_blank"
rel="noopener noreferrer"
className="hover:text-white/90 transition-colors"
>
©{new Date().getFullYear()} ARMSX2 All rights reserved, site by tanos
©{new Date().getFullYear()} ARMSX2, site by tanos
</a>
<span className="mx-2">•</span>
<button
Expand Down
9 changes: 9 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,9 @@ button {
.carousel {
transform: perspective(1000px) rotateY(-6deg);
}
.main-scroll-container {
scroll-snap-type: y proximity !important;
}
}

@media (max-width: 1211px) {
Expand Down Expand Up @@ -362,3 +365,9 @@ body.modal-open {
#ft-reg-bubble {
display: none !important;
}

.main-scroll-container {
-webkit-overflow-scrolling: touch;
scroll-padding-bottom: 5rem;
height: 100dvh;
}
Loading