-
+
@@ -1113,6 +1141,9 @@ export default { $postWidth__mobile: calc(100vw - 2rem); .post-body { + @include break-mobile-sm { + padding-top: 0.5rem; + } white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; @@ -1362,6 +1393,10 @@ ad-viewer { .post-user { // width: $postUserWidth; flex: 0 0 $postUserWidth; + @include break-mobile-sm { + display: flex; + flex: 0 0 calc(#{$postUserWidth}/1.25); + } margin-right: $postUserMargin; font-size: $font-size-tiny; text-align: center; @@ -1375,6 +1410,10 @@ ad-viewer { background: no-repeat center center; position: relative; margin-bottom: 1rem; + @include break-mobile-sm { + margin-bottom: 0; + margin-right: 0.5rem; + } width: $postUserWidth; height: $postUserWidth; @@ -1427,6 +1466,11 @@ ad-viewer { text-align: center; text-transform: uppercase; width: 100%; + @include break-mobile-sm { + text-align: left; + margin-bottom: 0; + width: auto; + } &-value { font-weight: 600; @@ -1445,6 +1489,66 @@ ad-viewer { } } } + + .post-title-mobile { + color: $secondary-font-color; + display: flex; + flex-direction: column; + align-items: left; + margin-bottom: 0.25rem; + width: 100%; + text-transform: none; + + .post-title-user { + display: flex; + align-items: center; + flex: 2 1 auto; + flex-wrap: wrap; + gap: 0.25rem; + padding-bottom: 0.1rem; + } + + span.username { + margin-right: 0.25rem; + color: $base-font-color; + font-size: $font-size-sm; + font-weight: 600; + &:hover { + color: $color-primary; + } + } + + .user-role { + @include truncate-ellipsis; + background-color: transparent; + border: 1px solid $secondary-font-color; + border-radius: 2px; + color: $secondary-font-color-dark; + display: inline-block; + font-size: $font-size-xs; + font-weight: 400; + line-height: 1.1; + margin-right: 0.5rem; + max-width: 140px; + padding: 0px 6px; + text-align: center; + } + + .user-activity-mobile { + display: flex; + gap: 0.5rem; + } + + .timestamp, .display-name { + display: flex; + color: $secondary-font-color; + font-size: $font-size-xs; + font-weight: 400; + } + .display-name { + color: $secondary-font-color-dark; + } + } } .post-content { @@ -1603,10 +1707,6 @@ ad-viewer { width: $postWidth__mobile; } } - - @include break-mobile-sm { - padding-bottom: 3rem; - } } .thread-title { diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 678ce3d7..42ca9042 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -72,16 +72,16 @@
+ Posts {{ user.post_count || 0 }} - Posts
Last Active - {{ humanDate(user.last_active, true) }} + {{ humanDate(user.last_active, true) }}
Created - {{ humanDate(user.created_at, true) }} + {{ humanDate(user.created_at, true) }}
@@ -496,7 +496,7 @@ export default { a { color: $text-gray-med; text-decoration: underline; } } } - .signature-block { display: flex; margin-bottom: 1rem; } + .signature-block { display: grid; margin-bottom: 1rem; } .signature { @include truncate-ellipsis; font-size: $font-size-xs; @@ -511,7 +511,11 @@ export default { } .profile-user-stats { display: flex; - margin-bottom: 2rem; + margin-bottom: 1rem; + column-gap: 0.5rem; + @include break-mobile-med { + justify-content: center; + } .stats { border: $border; border-radius: 6px; @@ -520,17 +524,23 @@ export default { flex-direction: column; align-items: center; justify-content: center; - margin-right: 1rem; padding: 0.5rem; text-align: center; - width: 100px; - max-width: 120px; - .label { font-size: $font-size-xs; } + width: auto; + white-space: nowrap; + @include break-mobile-med { + width: 100px; + max-width: 120px; + white-space: normal; + } + .label { + margin-bottom: 0.25rem; + font-size: $font-size-xs; + } .stat-text { - font-size: 2rem; + font-size: $font-size-lg; font-weight: 600; margin-bottom: 0.25rem; - &-sm { font-size: 21px; font-weight: 600; } } } } @@ -538,13 +548,12 @@ export default { align-items: center; flex-direction: column; .profile-avatar { - margin-bottom: 3rem; margin-right: 0; } .profile-user-details { .profile-user-name-role { flex-direction: column; - margin-bottom: 1.5rem; + margin-bottom: 1rem; h1, .username-screen, .user-role { margin-bottom: 0.25rem; } @@ -554,12 +563,16 @@ export default { .trust-profile { .trust-link { white-space: nowrap; } } } } -.profile-threads-posts { grid-area: main; } +.profile-threads-posts { + grid-area: main; + @include break-mobile-med { + border-top: $border; + } +} .profile-sidebar { color: $text-gray-dark; grid-area: sidebar; .actions-panel { - border-bottom: $border; line-height: 1.5; margin-bottom: 1rem; padding-bottom: 1rem; diff --git a/src/views/Threads.vue b/src/views/Threads.vue index 27e81e9a..7f6165ae 100644 --- a/src/views/Threads.vue +++ b/src/views/Threads.vue @@ -32,7 +32,7 @@ {{childBoard.total_post_count}} - posts, + posts, {{childBoard.total_thread_count}} threads @@ -191,7 +191,7 @@ on {{ humanDate(thread.created_at)}}
-
+
@@ -207,6 +207,11 @@ posted on {{humanDate(thread.last_post_created_at)}}. (Last unread post) + +
+ +
+ @@ -763,7 +768,7 @@ export default { margin-bottom: 2rem; td { - padding-bottom: 0; + padding-bottom: 0.1rem; } td:last-child { @@ -978,7 +983,7 @@ export default { border-bottom: 0; line-height: 20px; margin-bottom: 0; - padding-bottom: 0;; + padding-bottom: 0.1rem; } } }