RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scroller style adjustment

pull/37/head
Varun Patil 2022-09-09 17:10:44 -07:00
parent ff29114429
commit 72ce67ad6b
3 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/memories-main.js
View File

File diff suppressed because one or more lines are too long

2
js/memories-main.js.map
View File

File diff suppressed because one or more lines are too long

22
src/components/Timeline.vue
View File

@ -222,10 +222,10 @@ export default {
// Mobile devices // Mobile devices
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
width += 10; width -= 4;
this.isMobile = true; this.isMobile = true;
} else { } else {
width -= 12; width -= 40;
this.isMobile = false; this.isMobile = false;
} }
@ -234,7 +234,7 @@ export default {
this.numCols = Math.max(MIN_COLS, Math.floor(width / MAX_PHOTO_WIDTH)); this.numCols = Math.max(MIN_COLS, Math.floor(width / MAX_PHOTO_WIDTH));
} }
this.rowHeight = Math.floor(width / this.numCols) - 4; this.rowHeight = Math.floor(width / this.numCols);
// Set heights of rows // Set heights of rows
this.list.filter(r => !r.head).forEach(row => { this.list.filter(r => !r.head).forEach(row => {
@ -896,7 +896,7 @@ export default {
overflow-y: clip; overflow-y: clip;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 40px; width: 36px;
top: 0; right: 0; top: 0; right: 0;
cursor: ns-resize; cursor: ns-resize;
opacity: 0; opacity: 0;
@ -909,8 +909,10 @@ export default {
.timeline-scroll .tick { .timeline-scroll .tick {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
font-size: 0.8em; font-size: 0.75em;
right: 5px; font-weight: 600;
opacity: 0.95;
right: 7px;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; z-index: 1;
} }
@ -920,17 +922,17 @@ export default {
width: 4px; width: 4px;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-main-text); background-color: var(--color-main-text);
opacity: 0.5; opacity: 0.2;
display: block; display: block;
} }
.timeline-scroll .cursor { .timeline-scroll .cursor {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
right: 5px; right: 0;
background-color: var(--color-primary); background-color: var(--color-primary);
min-width: 100%; min-width: 100%;
min-height: 2px; min-height: 1.5px;
} }
.timeline-scroll .cursor.st { .timeline-scroll .cursor.st {
@ -980,7 +982,7 @@ export default {
} }
.timeline-scroll .tick { .timeline-scroll .tick {
background-color: var(--color-main-background); background-color: var(--color-main-background);
padding: 1px 4px; padding: 0px 4px;
border-radius: 4px; border-radius: 4px;
} }
.timeline-scroll .tick.dash { .timeline-scroll .tick.dash {