Skip to content

Commit 314e5e4

Browse files
akinseyakinsey
authoredDec 3, 2024··
Merge pull request #68 from epochtalk/server-migration
Server migration
2 parents d3df955 + 7b074a9 commit 314e5e4

File tree

7 files changed

+158
-38
lines changed

7 files changed

+158
-38
lines changed
 

‎src/components/layout/HeaderComponent.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1113,6 +1113,6 @@ header {
11131113
}
11141114
11151115
@include break-mobile-sm {
1116-
#header-spacer { margin-bottom: 1.5rem; }
1116+
#header-spacer { margin-bottom: 3.5rem; }
11171117
}
11181118
</style>

‎src/components/layout/Pagination.vue

+8-6
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/components/users/UserPosts.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ export default {
253253
}
254254
&.closed {
255255
width: 100%;
256-
max-height: 18px;
256+
max-height: 2.5rem;
257257
white-space: pre-wrap;
258258
overflow: hidden;
259259
text-overflow: ellipsis;

‎src/views/Boards.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<div class="view-count">
5757
<p class="view-count-posts">
5858
<span class="view-count-number">{{board.total_post_count}}</span>
59-
<span class="label"> posts,</span>
59+
<span class="label"> posts, </span>
6060
</p>
6161
<p class="view-count-threads">
6262
<span class="view-count-number">{{board.total_thread_count}}</span>
@@ -172,7 +172,7 @@ img.avatar-small {
172172
border-radius: 100px;
173173
border: 1px solid #444;
174174
opacity: 1;
175-
margin: 0 0.1rem;
175+
margin: 0 0.2rem 0 0;
176176
height: 1rem;
177177
width: 1rem;
178178
object-fit: cover;

‎src/views/Posts.vue

+109-9
Original file line numberDiff line numberDiff line change
@@ -135,30 +135,58 @@
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(), query: { id: post.user.id } }">
138+
<router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
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>
141+
<div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity}}</span></div>
141142
<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>
142-
<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>
143143
</router-link>
144144
</router-link>
145145

146146
<div class="user-trust" v-if="loggedIn && postData.data.thread.trust_visible">
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.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity}}</span></div>
173+
<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>
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(), query: { id: post.user.id } }">
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 {
@@ -1603,10 +1707,6 @@ ad-viewer {
16031707
width: $postWidth__mobile;
16041708
}
16051709
}
1606-
1607-
@include break-mobile-sm {
1608-
padding-bottom: 3rem;
1609-
}
16101710
}
16111711
16121712
.thread-title {

‎src/views/Profile.vue

+28-15
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,16 @@
7272

7373
<div class="profile-user-stats">
7474
<div class="stats">
75+
<span class="label">Posts </span>
7576
<span class="stat-text">{{ user.post_count || 0 }}</span>
76-
<span class="label">Posts</span>
7777
</div>
7878
<div v-if="user.last_active" class="stats">
7979
<span class="label">Last Active </span>
80-
<span class="stat-text-sm">{{ humanDate(user.last_active, true) }}</span>
80+
<span class="stat-text">{{ humanDate(user.last_active, true) }}</span>
8181
</div>
8282
<div class="stats">
8383
<span class="label">Created </span>
84-
<span class="stat-text-sm">{{ humanDate(user.created_at, true) }}</span>
84+
<span class="stat-text">{{ humanDate(user.created_at, true) }}</span>
8585
</div>
8686
</div>
8787
</div>
@@ -496,7 +496,7 @@ export default {
496496
a { color: $text-gray-med; text-decoration: underline; }
497497
}
498498
}
499-
.signature-block { display: flex; margin-bottom: 1rem; }
499+
.signature-block { display: grid; margin-bottom: 1rem; }
500500
.signature {
501501
@include truncate-ellipsis;
502502
font-size: $font-size-xs;
@@ -511,7 +511,11 @@ export default {
511511
}
512512
.profile-user-stats {
513513
display: flex;
514-
margin-bottom: 2rem;
514+
margin-bottom: 1rem;
515+
column-gap: 0.5rem;
516+
@include break-mobile-med {
517+
justify-content: center;
518+
}
515519
.stats {
516520
border: $border;
517521
border-radius: 6px;
@@ -520,31 +524,36 @@ export default {
520524
flex-direction: column;
521525
align-items: center;
522526
justify-content: center;
523-
margin-right: 1rem;
524527
padding: 0.5rem;
525528
text-align: center;
526-
width: 100px;
527-
max-width: 120px;
528-
.label { font-size: $font-size-xs; }
529+
width: auto;
530+
white-space: nowrap;
531+
@include break-mobile-med {
532+
width: 100px;
533+
max-width: 120px;
534+
white-space: normal;
535+
}
536+
.label {
537+
margin-bottom: 0.25rem;
538+
font-size: $font-size-xs;
539+
}
529540
.stat-text {
530-
font-size: 2rem;
541+
font-size: $font-size-lg;
531542
font-weight: 600;
532543
margin-bottom: 0.25rem;
533-
&-sm { font-size: 21px; font-weight: 600; }
534544
}
535545
}
536546
}
537547
@include break-mobile-med {
538548
align-items: center;
539549
flex-direction: column;
540550
.profile-avatar {
541-
margin-bottom: 3rem;
542551
margin-right: 0;
543552
}
544553
.profile-user-details {
545554
.profile-user-name-role {
546555
flex-direction: column;
547-
margin-bottom: 1.5rem;
556+
margin-bottom: 1rem;
548557
h1, .username-screen, .user-role {
549558
margin-bottom: 0.25rem;
550559
}
@@ -554,12 +563,16 @@ export default {
554563
.trust-profile { .trust-link { white-space: nowrap; } }
555564
}
556565
}
557-
.profile-threads-posts { grid-area: main; }
566+
.profile-threads-posts {
567+
grid-area: main;
568+
@include break-mobile-med {
569+
border-top: $border;
570+
}
571+
}
558572
.profile-sidebar {
559573
color: $text-gray-dark;
560574
grid-area: sidebar;
561575
.actions-panel {
562-
border-bottom: $border;
563576
line-height: 1.5;
564577
margin-bottom: 1rem;
565578
padding-bottom: 1rem;

‎src/views/Threads.vue

+9-4
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>
@@ -191,7 +191,7 @@
191191
<span> on {{ humanDate(thread.created_at)}}</span>
192192
</div>
193193

194-
<div v-if="thread.post_count > posts_per_page" class="thread-pagination">
194+
<div v-if="thread.post_count > posts_per_page" class="hide-mobile thread-pagination">
195195
<thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
196196
</div>
197197
</td>
@@ -207,6 +207,11 @@
207207
<router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }"><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>
208208
<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>
209209
</td>
210+
<td class="show-mobile">
211+
<div v-if="thread.post_count > posts_per_page" class="thread-pagination">
212+
<thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
213+
</div>
214+
</td>
210215
</tr>
211216
</tbody>
212217
</table>
@@ -763,7 +768,7 @@ export default {
763768
margin-bottom: 2rem;
764769
765770
td {
766-
padding-bottom: 0;
771+
padding-bottom: 0.1rem;
767772
}
768773
769774
td:last-child {
@@ -978,7 +983,7 @@ export default {
978983
border-bottom: 0;
979984
line-height: 20px;
980985
margin-bottom: 0;
981-
padding-bottom: 0;;
986+
padding-bottom: 0.1rem;
982987
}
983988
}
984989
}

0 commit comments

Comments
 (0)
Please sign in to comment.