e81922ef91
Issue: Collections sidebar was overlapping main content on mobile screens Fix: Hide sidebar completely on mobile (display: none) Mobile users navigate via the top navigation/breadcrumbs instead. Content now takes full width without sidebar overlap.
192 lines
5.1 KiB
HTML
192 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="robots" content="noindex" />
|
|
<title>Firefrost CMS</title>
|
|
<style>
|
|
/* ═══════════════════════════════════════════════════════════
|
|
FIREFROST GAMING - DECAP CMS MOBILE OPTIMIZATIONS
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
/* Basic mobile viewport setup */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════
|
|
📱 MOBILE RESPONSIVE OPTIMIZATIONS
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
@media (max-width: 768px) {
|
|
/* Sidebar - HIDDEN by default on mobile */
|
|
aside,
|
|
[class*="Sidebar"],
|
|
nav[class*="Sidebar"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Main content takes full width */
|
|
main,
|
|
[class*="MainContent"],
|
|
[class*="Content"] {
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
padding: 16px 12px !important;
|
|
}
|
|
|
|
/* Header adjustments */
|
|
header,
|
|
[class*="AppHeader"] {
|
|
padding: 12px !important;
|
|
}
|
|
|
|
/* Collection cards - Stack vertically, larger touch targets */
|
|
[class*="ListCard"],
|
|
[class*="EntryCard"],
|
|
li[class*="Entry"] {
|
|
padding: 16px 12px !important;
|
|
margin: 12px 0 !important;
|
|
min-height: 60px !important;
|
|
}
|
|
|
|
/* Buttons - Larger touch targets */
|
|
button {
|
|
min-height: 44px !important;
|
|
padding: 12px 20px !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
/* Input fields - Larger, easier to tap */
|
|
input,
|
|
textarea,
|
|
select {
|
|
min-height: 44px !important;
|
|
font-size: 16px !important;
|
|
padding: 10px 12px !important;
|
|
}
|
|
|
|
/* Text areas - More vertical space */
|
|
textarea {
|
|
min-height: 120px !important;
|
|
}
|
|
|
|
/* Search box */
|
|
input[type="search"],
|
|
input[placeholder*="Search"] {
|
|
width: 100% !important;
|
|
margin: 8px 0 !important;
|
|
}
|
|
|
|
/* Collection grid - Single column on mobile */
|
|
[class*="CardGrid"],
|
|
[class*="Grid"] {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Editor - Full width, no side-by-side */
|
|
[class*="EditorContainer"],
|
|
[class*="SplitPane"] {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
[class*="ControlPane"],
|
|
[class*="PreviewPane"] {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* Toolbar - Wrap items, don't overflow */
|
|
[class*="Toolbar"],
|
|
[class*="EditorToolbar"] {
|
|
flex-wrap: wrap !important;
|
|
padding: 8px !important;
|
|
}
|
|
|
|
[class*="Toolbar"] button {
|
|
margin: 4px !important;
|
|
}
|
|
|
|
/* Dropdowns and modals - Full width */
|
|
[class*="Dropdown"],
|
|
[class*="Modal"],
|
|
[class*="Dialog"] {
|
|
max-width: 95vw !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
/* Collection header */
|
|
h1 {
|
|
font-size: 24px !important;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
/* List items - Better spacing */
|
|
ul[class*="List"] > li {
|
|
margin: 12px 0 !important;
|
|
}
|
|
|
|
/* Reduce padding on small screens */
|
|
[class*="Container"],
|
|
[class*="Wrapper"] {
|
|
padding: 12px !important;
|
|
}
|
|
|
|
/* Form fields - Stack vertically */
|
|
[class*="FormControl"],
|
|
[class*="FieldWrapper"] {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
/* Labels - Clearer */
|
|
label {
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
margin-bottom: 8px !important;
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
/* Extra small devices - even more compact */
|
|
body {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
/* Reduce all padding */
|
|
main,
|
|
[class*="MainContent"] {
|
|
padding: 8px !important;
|
|
}
|
|
|
|
[class*="ListCard"],
|
|
[class*="EntryCard"] {
|
|
padding: 12px 8px !important;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
|
|
</body>
|
|
</html>
|