Skip to content

Mobile Layout Updates #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 29, 2024
Merged

Mobile Layout Updates #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1df11e0
style(threads): Moved thread pagination to bottom of each thread on m…
crod951 Nov 27, 2024
01c53fa
style(boards-avatar-small): Removed left margin and increased right m…
crod951 Nov 27, 2024
0ffb5ff
fix(pagination): Fixed pagination display bug when current page doesn…
crod951 Nov 27, 2024
a2df2a3
style(post-user-data): Updated layout of post user data on mobile to …
crod951 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/components/layout/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</div>
</div>
</li>
<span v-for="pageKey in paginationKeys" :key="pageKey.val">
<span v-for="pageKey in paginationKeys" :key="pageKey.key">
<li :class="pageKey.class">
<a href="#" @click.stop.prevent="changePage(pageKey.page)" v-html="pageKey.val"></a>
</li>
Expand Down Expand Up @@ -69,23 +69,23 @@ export default {

// Case 2: Truncate Tail
// 1 2 3 4 5 [6] 7 8 ... 14 15 16
if (truncate && v.currentPage <= 6)
if (truncate && (v.mobile ? v.currentPage <= 3 : v.currentPage <= 6))
if (v.mobile)
ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
else
ellipsis = [{ index: 9, nextIndex: v.pageCount - 2 }]

// Case 3: Truncate Head
// 1 2 3 ... 9 10 [11] 12 13 14 15 16
else if (truncate && v.currentPage >= v.pageCount - 5)
else if (truncate && (v.mobile ? v.currentPage >= v.pageCount - 2 : v.currentPage >= v.pageCount - 5))
if (v.mobile)
ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
else
ellipsis = [{ index: 4, nextIndex: v.pageCount - 8 }]

// Case 4: Truncate Head and Tail
// 1 2 3 ... 7 8 [9] 10 11 ... 14 15 16
else if (truncate && v.currentPage > 6 && v.currentPage < v.pageCount - 5)
else if (truncate && (v.mobile ? v.currentPage > 3 : v.currentPage > 6) && (v.mobile ? v.currentPage < v.pageCount - 2 : v.currentPage < v.pageCount - 5))
if (v.mobile)
ellipsis = [
{ index: 2, nextIndex: v.currentPage - 1 },
Expand All @@ -102,7 +102,7 @@ export default {

const generatePageKeys = (ellipsis) => {
// Add Previous Button
let prevBtnKey = { val: '&#10094;' }
let prevBtnKey = { key: 'prev', val: '&#10094;' }
if (v.currentPage > 1) {
prevBtnKey.class = 'arrow'
prevBtnKey.page = v.currentPage - 1
Expand All @@ -122,6 +122,7 @@ export default {
// Insert ellipsis if index matches
if (ellipsis && ellipsis[ellipsisIndex] && ellipsis[ellipsisIndex].index === index) {
pageKey = {
key: index,
val: '&hellip;',
page: null,
class: 'unavailable'
Expand All @@ -132,6 +133,7 @@ export default {
// Otherwise generate page key
else {
pageKey = {
key: index,
val: index,
page: index,
class: index === v.currentPage ? 'current' : null
Expand All @@ -142,7 +144,7 @@ export default {
}

// Add Next Button
let nextBtnKey = { val: '&#10095;' }
let nextBtnKey = { key: 'next', val: '&#10095;' }
if (v.currentPage < v.pageCount) {
nextBtnKey.class = 'arrow'
nextBtnKey.page = v.currentPage + 1
Expand Down
4 changes: 2 additions & 2 deletions src/views/Boards.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<div class="view-count">
<p class="view-count-posts">
<span class="view-count-number">{{board.total_post_count}}</span>
<span class="label"> posts,</span>
<span class="label"> posts, </span>
</p>
<p class="view-count-threads">
<span class="view-count-number">{{board.total_thread_count}}</span>
Expand Down Expand Up @@ -170,7 +170,7 @@ img.avatar-small {
border-radius: 100px;
border: 1px solid #444;
opacity: 1;
margin: 0 0.1rem;
margin: 0 0.2rem 0 0;
height: 1rem;
width: 1rem;
object-fit: cover;
Expand Down
112 changes: 108 additions & 4 deletions src/views/Posts.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
<img :src="post.avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
</router-link>
</div>
<router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
<router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
<div class="original-poster" v-if="post.user.original_poster">OP</div>
<div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
<div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
Expand All @@ -147,18 +147,46 @@
<trust-display :user="post.user" />
</div>

<div class="user-rank">
<rank-display v-if="postData?.data?.metadata" :user="{ ...post.user, metadata: {...postData.data.metadata } }" />
<div v-if="postData?.data?.metadata" class="user-rank">
<rank-display :user="{ ...post.user, metadata: {...postData.data.metadata } }" />
</div>
<div v-if="loggedIn && post.user.id !== authedUser.id" class="ignore-directive">
<a href="" @click.prevent="toggleIgnoredPosts(post)" v-html="post.user._ignored ? 'Unignore Posts' : 'Ignore Posts'"></a>
</div>

<div class="show-mobile">
<div class="post-title-mobile">
<div class="post-title-user">
<span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
<span v-html="post.user.username"></span>
</router-link></span>
<div :title="post.user.name" v-if="post.user.name" class="display-name">
<span>{{truncate(post.user.name, 33)}}</span>
<span class="hide-mobile">&nbsp;&mdash;&nbsp;</span>
</div>
<div :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
</div>
<router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }" class="user-activity-mobile">
<div class="original-poster" v-if="post.user.original_poster">OP</div>
<div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
<div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
<div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Act: <span class="user-activity-value">{{post.user.activity}}</span></div>
</router-link>
<div class="timestamp">
<span>{{humanDate(post.created_at)}}</span>
<span v-if="showEditDate(post) && post.metadata?.edited_by_username">{{'&nbsp;&mdash;&nbsp;Edited ' + humanDate(post.updated_at) + ' by '}}</span><a v-if="showEditDate(post) && post.metadata?.edited_by_username" href="#">{{post.metadata.edited_by_username}}</a>
<span v-if="showEditDate(post) && !post.metadata?.edited_by_username">{{'&nbsp;&mdash;&nbsp;Edited ' + humanDate(post.updated_at)}}</span>
<span v-if="post.metadata?.locked_by_username">{{'&nbsp;&mdash;&nbsp;Locked ' + humanDate(post.metadata.locked_at) + ' by '}}</span>
<a v-if="post.metadata?.locked_by_username" href="#">{{post.metadata.locked_by_username}}</a>
</div>
</div>
</div>
</div>

<!-- Post Body Section -->
<div :id="(i + 1) === postData.data.posts.length ? 'last' : ''" class="post-content">
<!-- Post Title -->
<div class="post-title">
<div class="hide-mobile post-title">
<div class="post-title-user">
<span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
<span v-html="post.user.username"></span>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;

Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
13 changes: 9 additions & 4 deletions src/views/Threads.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</td>
<td class="views">
<span class="views-number">{{childBoard.total_post_count}}</span>
<span class="label"> posts,</span>
<span class="label"> posts, </span>
<span class="views-number">{{childBoard.total_thread_count}}</span>
<span class="label"> threads</span>
</td>
Expand Down Expand Up @@ -194,7 +194,7 @@
<span> on {{ humanDate(thread.created_at)}}</span>
</div>

<div v-if="thread.post_count > posts_per_page" class="thread-pagination">
<div v-if="thread.post_count > posts_per_page" class="hide-mobile thread-pagination">
<thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
</div>
</td>
Expand All @@ -210,6 +210,11 @@
<router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase() }"><span v-html="thread.last_post_username"></span></router-link> posted on <router-link :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.last_post_position }, hash: '#' + thread.last_post_id }"><span>{{humanDate(thread.last_post_created_at)}}</span>.</router-link>
<router-link v-if="thread.has_new_post" :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.latest_unread_position }, hash: '#' + thread.latest_unread_post_id }">(Last unread post)</router-link>
</td>
<td class="show-mobile">
<div v-if="thread.post_count > posts_per_page" class="thread-pagination">
<thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
</div>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -766,7 +771,7 @@ export default {
margin-bottom: 2rem;

td {
padding-bottom: 0;
padding-bottom: 0.1rem;
}

td:last-child {
Expand Down Expand Up @@ -981,7 +986,7 @@ export default {
border-bottom: 0;
line-height: 20px;
margin-bottom: 0;
padding-bottom: 0;;
padding-bottom: 0.1rem;
}
}
}
Expand Down