Add mobile-responsive CSS to Decap CMS admin interface
Mobile optimizations (max-width: 768px): - Collapsible sidebar (80% width, off-canvas) - Full-width main content on mobile - Larger touch targets (44px min-height for buttons/inputs) - Single-column layout for collection cards - Stacked editor (no side-by-side panes) - Wrapped toolbar items - 16px font size to prevent iOS zoom - Better spacing and padding for small screens Extra small devices (max-width: 480px): - Full-width sidebar - Reduced padding throughout - Compact font sizes Result: firefrostgaming.com/admin now mobile-friendly for task management on phone
This commit is contained in:
Claude
192
admin/index.html
192
admin/index.html
@@ -415,6 +415,198 @@
|
||||
background: var(--ff-dark) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
📱 MOBILE RESPONSIVE OPTIMIZATIONS
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Sidebar - Collapsible on mobile */
|
||||
aside,
|
||||
[class*="Sidebar"] {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
height: 100vh !important;
|
||||
z-index: 1000 !important;
|
||||
transform: translateX(-100%) !important;
|
||||
transition: transform 0.3s ease !important;
|
||||
width: 80% !important;
|
||||
max-width: 300px !important;
|
||||
}
|
||||
|
||||
/* Show sidebar when open */
|
||||
aside.open,
|
||||
[class*="Sidebar"].open {
|
||||
transform: translateX(0) !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;
|
||||
}
|
||||
|
||||
/* Scrollbars - Thinner on mobile */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
/* Sidebar - Full width on tiny screens */
|
||||
aside,
|
||||
[class*="Sidebar"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Reduce all padding */
|
||||
main,
|
||||
[class*="MainContent"] {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
[class*="ListCard"],
|
||||
[class*="EntryCard"] {
|
||||
padding: 12px 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user