diff --git a/src/components/MainMenu/MainMenu.vue b/src/components/MainMenu/MainMenu.vue index 6d74631..81caa19 100644 --- a/src/components/MainMenu/MainMenu.vue +++ b/src/components/MainMenu/MainMenu.vue @@ -44,10 +44,12 @@ - -
- -
Log in
+
+ +
- +
@@ -107,6 +107,7 @@ export default defineComponent({ @media screen and (max-width: $phone) { .page-header { + padding: .4rem 1rem; .logo { display: block; position: absolute; diff --git a/src/components/Post/HeroPost.vue b/src/components/Post/HeroPost.vue index 1b94493..f8ed6a3 100644 --- a/src/components/Post/HeroPost.vue +++ b/src/components/Post/HeroPost.vue @@ -127,8 +127,8 @@ export default { }, }, methods: { - formatPostDate(ts) { - const date = new Date(ts) + formatPostDate(timestamp) { + const date = new Date(timestamp) const month = this.$t(MONTHS[date.getMonth()]) const sameYear = date.getFullYear() === (new Date().getFullYear()) @@ -136,8 +136,8 @@ export default { return `${date.getDate()} ${month}${year}` }, - formatPostTime(ts) { - const date = new Date(ts) + formatPostTime(timestamp) { + const date = new Date(timestamp) return `${date.getHours()}:${date.getMinutes()}` } } diff --git a/src/components/Post/ListPost.vue b/src/components/Post/ListPost.vue index 36f8955..c79c206 100644 --- a/src/components/Post/ListPost.vue +++ b/src/components/Post/ListPost.vue @@ -18,16 +18,14 @@

· - {{ moment(post.createdAt).fromNow() }} + {{ formatPostDate(post.createdAt) }}

Replying to {{ shorten(ancestor) }}

-

- -

+
@@ -135,7 +133,23 @@ export default { }, }, methods: { - moment, + formatPostDate(timestamp) { + return this.$q.screen.lt.md + ? this.shortDateFromNow(timestamp) + : moment(timestamp).fromNow() + }, + shortDateFromNow(timestamp) { + const now = Date.now() + const diff = Math.round(Math.max(now - timestamp, 0) / 1000) + const formatDiff = (div, offset) => Math.max(Math.floor((diff + offset) / div), 1) + + if (diff < 45) return `${formatDiff(1, 0)}s` + if (diff < 60 * 45) return `${formatDiff(60, 15)}m` + if (diff < 60 * 60 * 22) return `${formatDiff(60 * 60, 60 * 15)}h` + if (diff < 60 * 60 * 24 * 26) return `${formatDiff(60 * 60 * 24, 60 * 60 * 2)}d` + if (diff < 60 * 60 * 24 * 30 * 320) return `${formatDiff(60 * 60 * 24 * 30, 60 * 60 * 24 * 4)}mo` + return `${formatDiff(60 * 60 * 24 * 30 * 365, 60 * 60 * 24 * 45)}y` + } }, } @@ -175,10 +189,13 @@ export default { } &-content { margin-left: 12px; - padding: 1rem 0; + padding: 1rem 0 .4rem; flex-grow: 1; max-width: 570px; &-header { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; .in-reply-to { color: $color-dark-gray; a { @@ -212,25 +229,7 @@ export default { } &-body { color: #fff; - &-images { - &-wrapper { - border-radius: 10px; - overflow: hidden; - border: $border-light; - display: flex; - .post-content-image-item { - cursor: zoom-in; - & + .post-content-image-item { - border-left: $border-light; - } - flex-grow: 1; - img { - vertical-align: middle; - width: 100%; - } - } - } - } + margin-bottom: 1rem; } &-actions { display: flex; @@ -287,18 +286,11 @@ export default { } } } + @media screen and (max-width: $phone) { - .post{ + .post { &-content { &-header { - span{ - display: none; - } - .created-at { - display: block; - color: rgba($color: $color-dark-gray, $alpha: 0.5); - margin: 5px 0; - } .nip05 { display: unset; color: $color-dark-gray; diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 6d0f5a1..a330c50 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -10,7 +10,7 @@
- + @@ -31,6 +31,7 @@ >
+
@@ -66,14 +67,19 @@ export default defineComponent({ setup () { const $q = useQuasar() - // const cachedPages = ref(['feed', 'notifications', 'messages']) - + $q.screen.setSizes({ + // FIXME Needs to be in sync with assets/variables.scss + sm: 414, + md: 755, + lg: 1113, + xl: 1310, + }) return $q }, data() { return { - cachedPages: ['Feed', 'Notifications', 'Messages'], + cachedPages: ['Feed', 'Notifications', 'Messages', 'Inbox', 'Settings', 'DevTools'], middlePagePos: {}, broadcastChannel: new BroadcastChannel('hamstr'), activeWindow: false, @@ -118,8 +124,8 @@ export default defineComponent({ // setup scrolling // document.querySelector('#left-drawer').addEventListener('wheel', this.redirectScroll) - this.$router.beforeEach((to, from) => { this.preserveScrollPos(to, from) }) - this.$router.afterEach((to, from) => { this.restoreScrollPos(to, from) }) + // this.$router.beforeEach((to, from) => { this.preserveScrollPos(to, from) }) + // this.$router.afterEach((to, from) => { this.restoreScrollPos(to, from) }) // destroy streams before unloading window window.onbeforeunload = async () => { @@ -147,7 +153,7 @@ export default defineComponent({ }, scrollToRect(rect) { - let offset = Math.max(rect.top, 0) - 78 + let offset = Math.max(rect.top, 0) setVerticalScrollPosition(this.scrollingContainer, offset, 0) }, @@ -355,6 +361,12 @@ export default defineComponent({ fill: #fff; } } + .mobile-menu-backdrop { + z-index: 750; + pointer-events: all; + outline: 0; + background: rgba(0, 0, 0, 0.4); + } } } diff --git a/src/pages/Feed.vue b/src/pages/Feed.vue index 408a698..6a63ec8 100644 --- a/src/pages/Feed.vue +++ b/src/pages/Feed.vue @@ -1,24 +1,28 @@