data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix account details squished on mobile

Browse source
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">
<div class="account-profile-details-item"> <div class="account-profile-details-item">
<span class="account-profile-details-item-title"> <span class="account-profile-details-item-title">
Toots Toots
</span> </span>
<span class="account-profile-details-item-datum"> <span class="account-profile-details-item-datum">
{{account.statuses_count || 0}} {{account.statuses_count || 0}}
</span> </span>
</div> </div>
<div class="account-profile-details-item"> <div class="account-profile-details-item">
<span class="account-profile-details-item-title"> <span class="account-profile-details-item-title">
Follows Follows
</span> </span>
<span class="account-profile-details-item-datum"> <span class="account-profile-details-item-datum">
{{account.following_count || 0}} {{account.following_count || 0}}
</span> </span>
</div> </div>
<div class="account-profile-details-item"> <div class="account-profile-details-item">
<span class="account-profile-details-item-title"> <span class="account-profile-details-item-title">
Followers Followers
</span> </span>
<span class="account-profile-details-item-datum"> <span class="account-profile-details-item-datum">
{{account.followers_count || 0}} {{account.followers_count || 0}}
</span> </span>
</div> </div>
</div> </div>
<style> <style>
@ -60,4 +60,29 @@
margin-left: 5px; margin-left: 5px;
font-weight: 600; 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> </style>