moving styling and views to be more consistent and for gallery view to be less cumbersome.
This commit is contained in:
Bryan Van Deusen
+278
-3
@@ -378,14 +378,25 @@ header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: calc(100% - 300px); /* Account for tag editor */
|
||||
height: calc(100vh - 140px);
|
||||
max-height: calc(100vh - 140px);
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
.modal-image-wrapper.zoomed { overflow: auto; cursor: grab; }
|
||||
.modal-image-wrapper.zoomed {
|
||||
overflow: auto;
|
||||
cursor: grab;
|
||||
/* Enable scrolling by removing flex centering when zoomed */
|
||||
display: block;
|
||||
}
|
||||
.modal-image-wrapper.zoomed img {
|
||||
width: auto; height: auto; max-width: none; max-height: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
cursor: grab;
|
||||
}
|
||||
.modal-image-wrapper img {
|
||||
max-width: 100%;
|
||||
@@ -404,6 +415,15 @@ header {
|
||||
width: 90vw; height: auto; max-height: none;
|
||||
}
|
||||
|
||||
/* On smaller screens, full width for image wrapper */
|
||||
@media (max-width: 900px) {
|
||||
.modal-image-wrapper {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal navigation buttons - cleaner pill style */
|
||||
.modal-button {
|
||||
position: absolute;
|
||||
@@ -1191,3 +1211,258 @@ select.form-input optgroup {
|
||||
overflow-wrap: anywhere; /* allows breaking long tokens */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
Gallery Infinite Scroll Layout
|
||||
------------------------------------------------------------------------------*/
|
||||
.gallery-infinite-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Timeline Sidebar - positioned relative to gallery container */
|
||||
.timeline-sidebar {
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-right: 1px solid rgba(255,255,255,0.08);
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
||||
}
|
||||
.timeline-sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.timeline-sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.timeline-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.timeline-track {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.timeline-loading {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timeline-year-group {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
padding: 0.5rem 0.25rem 0.25rem;
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom, rgba(10,10,10,0.95), rgba(10,10,10,0.8));
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.timeline-months {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.timeline-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
.timeline-month:hover {
|
||||
background: rgba(255,255,255,0.12);
|
||||
color: var(--text);
|
||||
}
|
||||
.timeline-month.active {
|
||||
background: var(--btn-primary);
|
||||
color: white;
|
||||
}
|
||||
.timeline-month.loaded {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.timeline-month-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.timeline-month-count {
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Main gallery area - flex child next to timeline */
|
||||
.gallery-main {
|
||||
flex: 1;
|
||||
padding: 0 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.gallery-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.gallery-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.active-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 999px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.filter-tag {
|
||||
color: var(--link);
|
||||
font-weight: 500;
|
||||
}
|
||||
.clear-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.clear-filter:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Gallery content area */
|
||||
.gallery-infinite {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.gallery-empty {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Date sections */
|
||||
.date-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 0.5rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 85%, transparent 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.date-divider-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.date-divider-count {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
background: rgba(255,255,255,0.08);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Loading indicator */
|
||||
.gallery-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
border-top-color: var(--btn-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.gallery-end {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* Play overlay with triangle icon */
|
||||
.play-overlay::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 20px 0 20px 35px;
|
||||
border-color: transparent transparent transparent rgba(255,255,255,0.9);
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
/* Mobile: hide timeline sidebar */
|
||||
@media (max-width: 768px) {
|
||||
.timeline-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.date-divider {
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user