Skip to content

Commit a2df2a3

Browse files
crod951crod951
committed
style(post-user-data): Updated layout of post user data on mobile to remove whitespace between user data and post body.
1 parent 0ffb5ff commit a2df2a3

File tree

1 file changed

+108
-4
lines changed

1 file changed

+108
-4
lines changed

‎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 {

0 commit comments

Comments
 (0)