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

Improve mobile sizing

pull/162/head
Varun Patil 2022-10-31 21:34:40 -07:00
parent 500a2efe66
commit 1bd9e79445
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Timeline.vue
View File

@ -153,7 +153,7 @@ import TopMatter from "./top-matter/TopMatter.vue";
const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
const DESKTOP_ROW_HEIGHT = 200; // Height of row on desktop const DESKTOP_ROW_HEIGHT = 200; // Height of row on desktop
const MOBILE_NUM_COLS = 3; // Number of columns on phone const MOBILE_ROW_HEIGHT = 120; // Approx row height on mobile
@Component({ @Component({
components: { components: {
@ -255,8 +255,12 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
return window.innerWidth <= 768; return window.innerWidth <= 768;
} }
isMobileLayout() {
return window.innerWidth <= 600;
}
allowBreakout() { allowBreakout() {
return this.isMobile() && !this.config_squareThumbs; return this.isMobileLayout() && !this.config_squareThumbs;
} }
/** Create new state */ /** Create new state */
@ -353,14 +357,16 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
return; return;
} }
if (this.isMobile()) { if (this.isMobileLayout()) {
// Mobile // Mobile
this.numCols = MOBILE_NUM_COLS; this.numCols = Math.max(
3,
Math.floor(this.rowWidth / MOBILE_ROW_HEIGHT)
);
this.rowHeight = Math.floor(this.rowWidth / this.numCols); this.rowHeight = Math.floor(this.rowWidth / this.numCols);
} else { } else {
// Desktop // Desktop
if (this.config_squareThumbs) { if (this.config_squareThumbs) {
// Set columns first, then height
this.numCols = Math.max( this.numCols = Math.max(
3, 3,
Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT) Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT)
@ -883,7 +889,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
} }
// Force all to square // Force all to square
const squareMode = this.isMobile() || this.config_squareThumbs; const squareMode = this.isMobileLayout() || this.config_squareThumbs;
// Create justified layout with correct params // Create justified layout with correct params
const justify = getLayout( const justify = getLayout(