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

thiday: mobile layout

old-stable24
Varun Patil 2022-10-18 11:11:04 -07:00
parent 1baf07e65a
commit eda3116f6a
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/top-matter/OnThisDay.vue
View File

@ -104,7 +104,7 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
this.years.push({ this.years.push({
year, year,
url: '', url: '',
preview: photo, preview: null,
photos: [], photos: [],
text: utils.getFromNowStr(dateTaken), text: utils.getFromNowStr(dateTaken),
}); });
@ -122,9 +122,14 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
// Choose preview photo // Choose preview photo
for (const year of this.years) { for (const year of this.years) {
// Try to prioritize landscape photos // Try to prioritize landscape photos on desktop
const landscape = year.photos.filter(p => p.w > p.h); if (window.innerWidth <= 600) {
year.preview = utils.randomChoice(landscape) || utils.randomChoice(year.photos); const landscape = year.photos.filter(p => p.w > p.h);
year.preview = utils.randomChoice(landscape)
}
// Get random photo
year.preview ||= utils.randomChoice(year.photos);
year.url = getPreviewUrl(year.preview.fileid, year.preview.etag, false, 512); year.url = getPreviewUrl(year.preview.fileid, year.preview.etag, false, 512);
} }
@ -167,6 +172,7 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
<style lang="scss" scoped> <style lang="scss" scoped>
$height: 200px; $height: 200px;
$mobHeight: 150px;
.outer { .outer {
width: calc(100% - 50px); width: calc(100% - 50px);
@ -177,7 +183,7 @@ $height: 200px;
// Sloppy: ideally this should be done in Timeline // Sloppy: ideally this should be done in Timeline
// to put a gap between the title and this // to put a gap between the title and this
margin-top: 8px; margin-top: 10px;
.inner { .inner {
height: calc(100% + 20px); height: calc(100% + 20px);
@ -205,6 +211,9 @@ $height: 200px;
.inner { padding: 0 8px; } .inner { padding: 0 8px; }
.dir-btn { display: none; } .dir-btn { display: none; }
} }
@media (max-width: 600px) {
height: $mobHeight;
}
} }
.group { .group {
@ -214,7 +223,7 @@ $height: 200px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:not(:last-of-type) { margin-right: 6px; } &:not(:last-of-type) { margin-right: 8px; }
img { img {
cursor: inherit; cursor: inherit;
@ -237,9 +246,8 @@ $height: 200px;
justify-content: center; justify-content: center;
color: white; color: white;
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; padding: 5%;
padding-bottom: 5%; white-space: normal;
text-shadow: 0 0 2px black;
cursor: inherit; cursor: inherit;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
} }
@ -247,6 +255,12 @@ $height: 200px;
&:hover .overlay { &:hover .overlay {
background-color: transparent; background-color: transparent;
} }
@media (max-width: 600px) {
aspect-ratio: 3/4;
height: $mobHeight;
.overlay { font-size: 1.1em; }
}
} }
</style> </style>