Skip to content

Commit d734f8c

Browse files
akinseyakinsey
authored
Merge pull request #64 from epochtalk/mobile-layout
Mobile Layout Updates
2 parents 7b872da + a2df2a3 commit d734f8c

File tree

4 files changed

+127
-16
lines changed

4 files changed

+127
-16
lines changed

‎src/components/layout/Pagination.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</div>
1111
</div>
1212
</li>
13-
<span v-for="pageKey in paginationKeys" :key="pageKey.val">
13+
<span v-for="pageKey in paginationKeys" :key="pageKey.key">
1414
<li :class="pageKey.class">
1515
<a href="#" @click.stop.prevent="changePage(pageKey.page)" v-html="pageKey.val"></a>
1616
</li>
@@ -69,23 +69,23 @@ export default {
6969
7070
// Case 2: Truncate Tail
7171
// 1 2 3 4 5 [6] 7 8 ... 14 15 16
72-
if (truncate && v.currentPage <= 6)
72+
if (truncate && (v.mobile ? v.currentPage <= 3 : v.currentPage <= 6))
7373
if (v.mobile)
7474
ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
7575
else
7676
ellipsis = [{ index: 9, nextIndex: v.pageCount - 2 }]
7777
7878
// Case 3: Truncate Head
7979
// 1 2 3 ... 9 10 [11] 12 13 14 15 16
80-
else if (truncate && v.currentPage >= v.pageCount - 5)
80+
else if (truncate && (v.mobile ? v.currentPage >= v.pageCount - 2 : v.currentPage >= v.pageCount - 5))
8181
if (v.mobile)
8282
ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
8383
else
8484
ellipsis = [{ index: 4, nextIndex: v.pageCount - 8 }]
8585
8686
// Case 4: Truncate Head and Tail
8787
// 1 2 3 ... 7 8 [9] 10 11 ... 14 15 16
88-
else if (truncate && v.currentPage > 6 && v.currentPage < v.pageCount - 5)
88+
else if (truncate && (v.mobile ? v.currentPage > 3 : v.currentPage > 6) && (v.mobile ? v.currentPage < v.pageCount - 2 : v.currentPage < v.pageCount - 5))
8989
if (v.mobile)
9090
ellipsis = [
9191
{ index: 2, nextIndex: v.currentPage - 1 },
@@ -102,7 +102,7 @@ export default {
102102
103103
const generatePageKeys = (ellipsis) => {
104104
// Add Previous Button
105-
let prevBtnKey = { val: '&#10094;' }
105+
let prevBtnKey = { key: 'prev', val: '&#10094;' }
106106
if (v.currentPage > 1) {
107107
prevBtnKey.class = 'arrow'
108108
prevBtnKey.page = v.currentPage - 1
@@ -122,6 +122,7 @@ export default {
122122
// Insert ellipsis if index matches
123123
if (ellipsis && ellipsis[ellipsisIndex] && ellipsis[ellipsisIndex].index === index) {
124124
pageKey = {
125+
key: index,
125126
val: '&hellip;',
126127
page: null,
127128
class: 'unavailable'
@@ -132,6 +133,7 @@ export default {
132133
// Otherwise generate page key
133134
else {
134135
pageKey = {
136+
key: index,
135137
val: index,
136138
page: index,
137139
class: index === v.currentPage ? 'current' : null
@@ -142,7 +144,7 @@ export default {
142144
}
143145
144146
// Add Next Button
145-
let nextBtnKey = { val: '&#10095;' }
147+
let nextBtnKey = { key: 'next', val: '&#10095;' }
146148
if (v.currentPage < v.pageCount) {
147149
nextBtnKey.class = 'arrow'
148150
nextBtnKey.page = v.currentPage + 1

‎src/views/Boards.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
<div class="view-count">
5555
<p class="view-count-posts">
5656
<span class="view-count-number">{{board.total_post_count}}</span>
57-
<span class="label"> posts,</span>
57+
<span class="label"> posts, </span>
5858
</p>
5959
<p class="view-count-threads">
6060
<span class="view-count-number">{{board.total_thread_count}}</span>
@@ -170,7 +170,7 @@ img.avatar-small {
170170
border-radius: 100px;
171171
border: 1px solid #444;
172172
opacity: 1;
173-
margin: 0 0.1rem;
173+
margin: 0 0.2rem 0 0;
174174
height: 1rem;
175175
width: 1rem;
176176
object-fit: cover;

‎src/views/Posts.vue‎

Lines changed: 108 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
<img :src="post.avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
136136
</router-link>
137137
</div>
138-
<router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
138+
<router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
139139
<div class="original-poster" v-if="post.user.original_poster">OP</div>
140140
<div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
141141
<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>
@@ -147,18 +147,46 @@
147147
<trust-display :user="post.user" />
148148
</div>
149149

150-
<div class="user-rank">
151-
<rank-display v-if="postData?.data?.metadata" :user="{ ...post.user, metadata: {...postData.data.metadata } }" />
150+
<div v-if="postData?.data?.metadata" class="user-rank">
151+
<rank-display :user="{ ...post.user, metadata: {...postData.data.metadata } }" />
152152
</div>
153153
<div v-if="loggedIn && post.user.id !== authedUser.id" class="ignore-directive">
154154
<a href="" @click.prevent="toggleIgnoredPosts(post)" v-html="post.user._ignored ? 'Unignore Posts' : 'Ignore Posts'"></a>
155155
</div>
156+
157+
<div class="show-mobile">
158+
<div class="post-title-mobile">
159+
<div class="post-title-user">
160+
<span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
161+
<span v-html="post.user.username"></span>
162+
</router-link></span>
163+
<div :title="post.user.name" v-if="post.user.name" class="display-name">
164+
<span>{{truncate(post.user.name, 33)}}</span>
165+
<span class="hide-mobile">&nbsp;&mdash;&nbsp;</span>
166+
</div>
167+
<div :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
168+
</div>
169+
<router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }" class="user-activity-mobile">
170+
<div class="original-poster" v-if="post.user.original_poster">OP</div>
171+
<div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
172+
<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>
173+
<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>
174+
</router-link>
175+
<div class="timestamp">
176+
<span>{{humanDate(post.created_at)}}</span>
177+
<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>
178+
<span v-if="showEditDate(post) && !post.metadata?.edited_by_username">{{'&nbsp;&mdash;&nbsp;Edited ' + humanDate(post.updated_at)}}</span>
179+
<span v-if="post.metadata?.locked_by_username">{{'&nbsp;&mdash;&nbsp;Locked ' + humanDate(post.metadata.locked_at) + ' by '}}</span>
180+
<a v-if="post.metadata?.locked_by_username" href="#">{{post.metadata.locked_by_username}}</a>
181+
</div>
182+
</div>
183+
</div>
156184
</div>
157185

158186
<!-- Post Body Section -->
159187
<div :id="(i + 1) === postData.data.posts.length ? 'last' : ''" class="post-content">
160188
<!-- Post Title -->
161-
<div class="post-title">
189+
<div class="hide-mobile post-title">
162190
<div class="post-title-user">
163191
<span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
164192
<span v-html="post.user.username"></span>
@@ -1113,6 +1141,9 @@ export default {
11131141
11141142
$postWidth__mobile: calc(100vw - 2rem);
11151143
.post-body {
1144+
@include break-mobile-sm {
1145+
padding-top: 0.5rem;
1146+
}
11161147
white-space: pre-wrap;
11171148
word-wrap: break-word;
11181149
overflow-wrap: break-word;
@@ -1362,6 +1393,10 @@ ad-viewer {
13621393
.post-user {
13631394
// width: $postUserWidth;
13641395
flex: 0 0 $postUserWidth;
1396+
@include break-mobile-sm {
1397+
display: flex;
1398+
flex: 0 0 calc(#{$postUserWidth}/1.25);
1399+
}
13651400
margin-right: $postUserMargin;
13661401
font-size: $font-size-tiny;
13671402
text-align: center;
@@ -1375,6 +1410,10 @@ ad-viewer {
13751410
background: no-repeat center center;
13761411
position: relative;
13771412
margin-bottom: 1rem;
1413+
@include break-mobile-sm {
1414+
margin-bottom: 0;
1415+
margin-right: 0.5rem;
1416+
}
13781417
width: $postUserWidth;
13791418
height: $postUserWidth;
13801419
@@ -1427,6 +1466,11 @@ ad-viewer {
14271466
text-align: center;
14281467
text-transform: uppercase;
14291468
width: 100%;
1469+
@include break-mobile-sm {
1470+
text-align: left;
1471+
margin-bottom: 0;
1472+
width: auto;
1473+
}
14301474
14311475
&-value {
14321476
font-weight: 600;
@@ -1445,6 +1489,66 @@ ad-viewer {
14451489
}
14461490
}
14471491
}
1492+
1493+
.post-title-mobile {
1494+
color: $secondary-font-color;
1495+
display: flex;
1496+
flex-direction: column;
1497+
align-items: left;
1498+
margin-bottom: 0.25rem;
1499+
width: 100%;
1500+
text-transform: none;
1501+
1502+
.post-title-user {
1503+
display: flex;
1504+
align-items: center;
1505+
flex: 2 1 auto;
1506+
flex-wrap: wrap;
1507+
gap: 0.25rem;
1508+
padding-bottom: 0.1rem;
1509+
}
1510+
1511+
span.username {
1512+
margin-right: 0.25rem;
1513+
color: $base-font-color;
1514+
font-size: $font-size-sm;
1515+
font-weight: 600;
1516+
&:hover {
1517+
color: $color-primary;
1518+
}
1519+
}
1520+
1521+
.user-role {
1522+
@include truncate-ellipsis;
1523+
background-color: transparent;
1524+
border: 1px solid $secondary-font-color;
1525+
border-radius: 2px;
1526+
color: $secondary-font-color-dark;
1527+
display: inline-block;
1528+
font-size: $font-size-xs;
1529+
font-weight: 400;
1530+
line-height: 1.1;
1531+
margin-right: 0.5rem;
1532+
max-width: 140px;
1533+
padding: 0px 6px;
1534+
text-align: center;
1535+
}
1536+
1537+
.user-activity-mobile {
1538+
display: flex;
1539+
gap: 0.5rem;
1540+
}
1541+
1542+
.timestamp, .display-name {
1543+
display: flex;
1544+
color: $secondary-font-color;
1545+
font-size: $font-size-xs;
1546+
font-weight: 400;
1547+
}
1548+
.display-name {
1549+
color: $secondary-font-color-dark;
1550+
}
1551+
}
14481552
}
14491553
14501554
.post-content {

‎src/views/Threads.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</td>
3333
<td class="views">
3434
<span class="views-number">{{childBoard.total_post_count}}</span>
35-
<span class="label"> posts,</span>
35+
<span class="label"> posts, </span>
3636
<span class="views-number">{{childBoard.total_thread_count}}</span>
3737
<span class="label"> threads</span>
3838
</td>
@@ -194,7 +194,7 @@
194194
<span> on {{ humanDate(thread.created_at)}}</span>
195195
</div>
196196

197-
<div v-if="thread.post_count > posts_per_page" class="thread-pagination">
197+
<div v-if="thread.post_count > posts_per_page" class="hide-mobile thread-pagination">
198198
<thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
199199
</div>
200200
</td>
@@ -210,6 +210,11 @@
210210
<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>
211211
<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>
212212
</td>
213+
<td class="show-mobile">
214+
<div v-if="thread.post_count > posts_per_page" class="thread-pagination">
215+
<thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
216+
</div>
217+
</td>
213218
</tr>
214219
</tbody>
215220
</table>
@@ -766,7 +771,7 @@ export default {
766771
margin-bottom: 2rem;
767772
768773
td {
769-
padding-bottom: 0;
774+
padding-bottom: 0.1rem;
770775
}
771776
772777
td:last-child {
@@ -981,7 +986,7 @@ export default {
981986
border-bottom: 0;
982987
line-height: 20px;
983988
margin-bottom: 0;
984-
padding-bottom: 0;;
989+
padding-bottom: 0.1rem;
985990
}
986991
}
987992
}

0 commit comments

Comments
 (0)