nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix account details squished on mobile

This commit is contained in:
Nolan Lawson 2018-03-31 17:01:09 -07:00
parent 3c0d543ea1
commit 8c076622eb
1 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
routes/_components/profile/AccountProfileDetails.html
View File

@ -1,27 +1,27 @@
<div class="account-profile-details">
<div class="account-profile-details-item">
<span class="account-profile-details-item-title">
Toots
</span>
<span class="account-profile-details-item-title">
Toots
</span>
<span class="account-profile-details-item-datum">
{{account.statuses_count || 0}}
</span>
{{account.statuses_count || 0}}
</span>
</div>
<div class="account-profile-details-item">
<span class="account-profile-details-item-title">
Follows
</span>
<span class="account-profile-details-item-title">
Follows
</span>
<span class="account-profile-details-item-datum">
{{account.following_count || 0}}
</span>
{{account.following_count || 0}}
</span>
</div>
<div class="account-profile-details-item">
<span class="account-profile-details-item-title">
Followers
</span>
<span class="account-profile-details-item-title">
Followers
</span>
<span class="account-profile-details-item-datum">
{{account.followers_count || 0}}
</span>
{{account.followers_count || 0}}
</span>
</div>
</div>
<style>
@ -60,4 +60,29 @@
margin-left: 5px;
font-weight: 600;
}
@media (max-width: 767px) {
.account-profile-details-item {
flex-direction: column;
margin-left: 5px;
margin-right: 5px;
}
.account-profile-details-item:last-child {
margin-right: 0;
}
.account-profile-details-item:first-child {
margin-left: 0;
}
.account-profile-details-item-title {
margin-right: 0;
text-align: center;
}
.account-profile-details-item-datum {
margin-left: 0;
text-align: center;
}
}
</style>