feat: implement flexbox container for fixed buttons
Major architectural improvement for button management: Desktop Layout (left side, vertical): - Created .fixed-buttons-container positioned left: 2rem, bottom: 2rem - Buttons stack vertically with flex-direction: column - Order (bottom to top): Info → Shortcuts → Zoom → Print → Download - 1rem (16px) gap between buttons - All buttons 50×50px with consistent styling - Easy to add/remove buttons - just add template to container Mobile Layout (bottom center, horizontal): - Container switches to flex-direction: row at @media (max-width: 900px) - Centered with left: 50% and transform: translateX(-50%) - 10px gap between buttons - Zoom button hidden on mobile (display: none) - 4 visible buttons: Info, Shortcuts, Print, Download Benefits: ✅ Single source of truth - container manages all buttons ✅ Easy to add/remove buttons - no manual position calculations ✅ Responsive - automatic reflow from vertical to horizontal ✅ Maintainable - changes in one place affect all buttons ✅ Consistent spacing - gap property ensures even distribution ✅ Future-proof - adding button = adding template to container Technical Implementation: - Container uses position: fixed with flexbox - Buttons use position: relative inside container (not fixed individually) - All positioning managed by flexbox (gap, flex-direction, align-items) - Hover states preserved with color-coded backgrounds per button - Back-to-top button remains separate (not in container) This replaces individual fixed positioning with a scalable flex layout.
This commit is contained in:
juanatsap
+108
-52
@@ -2823,13 +2823,32 @@ html {
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Info Button (Bottom Left)
|
||||
Fixed Buttons Container - Flexbox Layout
|
||||
======================================== */
|
||||
|
||||
.info-button {
|
||||
.fixed-buttons-container {
|
||||
position: fixed;
|
||||
left: 2rem; /* LEFT SIDE - buttons grow bottom to top */
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* 16px gap between buttons */
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* All buttons inside container - shared styles */
|
||||
.fixed-buttons-container > button,
|
||||
.fixed-buttons-container .info-button,
|
||||
.fixed-buttons-container .shortcuts-btn,
|
||||
.fixed-buttons-container .zoom-toggle-btn,
|
||||
.fixed-buttons-container .print-friendly-btn,
|
||||
.fixed-buttons-container .download-btn {
|
||||
position: relative !important; /* Override fixed positioning */
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--black-bar);
|
||||
@@ -2841,9 +2860,15 @@ html {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.6; /* Increased from 0.2 for better discoverability */
|
||||
opacity: 0.6;
|
||||
margin: 0; /* Remove any margins */
|
||||
}
|
||||
|
||||
/* Legacy selector for backwards compatibility */
|
||||
.info-button {
|
||||
background: var(--black-bar);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info-button:hover {
|
||||
@@ -2863,71 +2888,102 @@ html {
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Mobile adjustments - Flexbox button layout at bottom center */
|
||||
/* Hover states for all buttons in container */
|
||||
.fixed-buttons-container .info-button:hover,
|
||||
.fixed-buttons-container .info-button.at-bottom {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.fixed-buttons-container .shortcuts-btn:hover,
|
||||
.fixed-buttons-container .shortcuts-btn.at-bottom {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #f39c12; /* Orange */
|
||||
}
|
||||
|
||||
.fixed-buttons-container .zoom-toggle-btn:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #3498db; /* Blue */
|
||||
}
|
||||
|
||||
.fixed-buttons-container .print-friendly-btn:hover,
|
||||
.fixed-buttons-container .print-friendly-btn.print-hover-sync {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: white;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.fixed-buttons-container .print-friendly-btn:hover iconify-icon,
|
||||
.fixed-buttons-container .print-friendly-btn.print-hover-sync iconify-icon {
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.fixed-buttons-container .download-btn:hover,
|
||||
.fixed-buttons-container .download-btn.pdf-hover-sync {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #cd6060; /* PDF red */
|
||||
}
|
||||
|
||||
.fixed-buttons-container .download-btn iconify-icon {
|
||||
filter: brightness(0) invert(1); /* Always white */
|
||||
}
|
||||
|
||||
/* Mobile adjustments - Horizontal flexbox layout at bottom center */
|
||||
@media (max-width: 900px) {
|
||||
/* Hide only zoom control on mobile */
|
||||
/* Hide only zoom button and control on mobile */
|
||||
.fixed-buttons-container .zoom-toggle-btn,
|
||||
.zoom-toggle-btn,
|
||||
.zoom-control {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Reset fixed positioning for all buttons on mobile */
|
||||
.download-btn,
|
||||
.print-friendly-btn,
|
||||
.shortcuts-btn,
|
||||
.info-button,
|
||||
.back-to-top {
|
||||
position: fixed !important;
|
||||
bottom: 1.5rem !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
/* Change container to horizontal layout at bottom center */
|
||||
.fixed-buttons-container {
|
||||
flex-direction: row; /* Horizontal on mobile */
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); /* Center the container */
|
||||
bottom: 1.5rem;
|
||||
gap: 10px; /* Smaller gap on mobile */
|
||||
}
|
||||
|
||||
/* Buttons maintain same size and styles from desktop */
|
||||
.fixed-buttons-container > button,
|
||||
.fixed-buttons-container .info-button,
|
||||
.fixed-buttons-container .shortcuts-btn,
|
||||
.fixed-buttons-container .print-friendly-btn,
|
||||
.fixed-buttons-container .download-btn {
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
opacity: 0.7 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Flexbox container behavior - buttons arrange themselves */
|
||||
/* Buttons will be positioned using JavaScript or individual positioning */
|
||||
/* For now, use fixed spacing from center */
|
||||
|
||||
/* 4 buttons: Download, Print, Shortcuts, Info */
|
||||
/* Spacing: 10px gap between buttons, centered horizontally */
|
||||
/* Total width: 4 * 50px + 3 * 10px = 230px */
|
||||
/* Start position: 50% - 115px */
|
||||
|
||||
.download-btn {
|
||||
left: calc(50% - 115px) !important; /* First button: center - (230px/2) */
|
||||
}
|
||||
|
||||
.print-friendly-btn {
|
||||
left: calc(50% - 55px) !important; /* Second button: center - (230px/2) + 50px + 10px */
|
||||
}
|
||||
|
||||
.shortcuts-btn {
|
||||
left: calc(50% + 5px) !important; /* Third button: center - (230px/2) + 110px + 20px */
|
||||
}
|
||||
|
||||
.info-button {
|
||||
left: calc(50% + 65px) !important; /* Fourth button: center - (230px/2) + 170px + 30px */
|
||||
}
|
||||
|
||||
/* Hover effects - only Y transform */
|
||||
.download-btn:hover,
|
||||
/* Hover effects */
|
||||
.fixed-buttons-container > button:hover,
|
||||
.fixed-buttons-container .info-button:hover,
|
||||
.fixed-buttons-container .shortcuts-btn:hover,
|
||||
.fixed-buttons-container .print-friendly-btn:hover,
|
||||
.fixed-buttons-container .download-btn:hover,
|
||||
.download-btn.pdf-hover-sync,
|
||||
.print-friendly-btn:hover,
|
||||
.print-friendly-btn.print-hover-sync,
|
||||
.shortcuts-btn:hover,
|
||||
.info-button:hover {
|
||||
transform: translateY(-3px) !important;
|
||||
.print-friendly-btn.print-hover-sync {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(-3px) !important;
|
||||
}
|
||||
|
||||
/* Keep at-bottom state without transform */
|
||||
/* At-bottom state */
|
||||
.info-button.at-bottom,
|
||||
.shortcuts-btn.at-bottom {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -136,12 +136,15 @@
|
||||
</div> <!-- End zoom-wrapper -->
|
||||
|
||||
{{template "error-toast" .}}
|
||||
<!-- Fixed buttons container - Flexbox layout (desktop: right side bottom-to-top, mobile: bottom center horizontal) -->
|
||||
<div class="fixed-buttons-container">
|
||||
{{template "info-button" .}}
|
||||
{{template "shortcuts-button" .}}
|
||||
{{template "zoom-toggle-button" .}}
|
||||
{{template "print-friendly-button" .}}
|
||||
{{template "download-button" .}}
|
||||
</div>
|
||||
{{template "back-to-top" .}}
|
||||
{{template "info-button" .}}
|
||||
{{template "download-button" .}}
|
||||
{{template "print-friendly-button" .}}
|
||||
{{template "zoom-toggle-button" .}}
|
||||
{{template "shortcuts-button" .}}
|
||||
{{template "info-modal" .}}
|
||||
{{template "shortcuts-modal" .}}
|
||||
{{template "pdf-modal" .}}
|
||||
|
||||
Reference in New Issue
Block a user