Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Mobile optimizations.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-06-01 17:35:00 +03:00
parent 807c0d1464
commit d063607b9d
1 changed files with 47 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/status/status.vue
View file

@ -45,7 +45,7 @@
<div class="user-content"> <div class="user-content">
<div class="media-heading"> <div class="media-heading">
<div class="name-and-links"> <div class="name-and-links">
<h4>{{status.user.name}}</h4> <h4 class="user-name">{{status.user.name}}</h4>
<div class="links"> <div class="links">
<h4> <h4>
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@ -159,7 +159,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.links { .links {
margin-right: -4em;
} }
} }
} }
@ -226,7 +226,7 @@
display: flex; display: flex;
div, favorite-button { div, favorite-button {
max-width: 5.5em; max-width: 6em;
flex: 1; flex: 1;
} }
} }
@ -304,4 +304,48 @@
flex: 1; flex: 1;
} }
@media all and (max-width: 960px) {
.status-el {
.name-and-links {
margin-left: -0.25em;
.user-name {
flex: 100%;
}
}
.status-content {
margin-top: 0.5em;
margin-left: -3.7em;
margin-right: 0;
}
.status-actions {
margin-left: -3.7em;
}
}
.status {
max-width: 100%;
}
.status .avatar {
width: 40px;
height: 40px;
&.retweeted {
width: 34px;
height: 34px;
margin-right: 8px;
margin-bottom: 8px;
}
}
.status img.avatar-retweeter {
width: 22px;
height: 22px;
position: absolute;
margin-left: 18px;
margin-top: 18px;
}
}
</style> </style>