FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Fix text overflow in post header

Browse source
This commit is contained in:
silverpill 2021-11-29 22:47:38 +00:00
parent 120d5119b8
commit 48a3de16c6
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Post.vue
View file

@ -338,20 +338,29 @@ export default class PostComponent extends Vue {
color: $secondary-text-color;
display: flex;
flex-direction: row;
gap: $block-inner-padding / 2;
padding: $block-inner-padding $block-inner-padding 0;
.floating-avatar {
@include floating-avatar;
@media screen and (min-width: $screen-breakpoint-medium + 1) {
margin-right: -$block-inner-padding / 2;
}
}
.display-name {
color: $text-color;
font-weight: bold;
margin-right: $block-inner-padding / 2;
overflow-x: hidden;
text-overflow: ellipsis;
}
.username {
flex-grow: 1;
min-width: 15%;
overflow-x: hidden;
text-overflow: ellipsis;
}
.timestamp {
@ -385,7 +394,7 @@ export default class PostComponent extends Vue {
align-items: center;
display: flex;
flex-direction: row;
gap: $block-inner-padding / 2 0;
gap: $block-inner-padding / 2;
padding: 0 $block-inner-padding $block-inner-padding;
.icon {
@ -408,10 +417,10 @@ export default class PostComponent extends Vue {
.crypto-widget {
display: flex;
flex-grow: 1;
gap: $block-inner-padding / 2;
justify-content: right;
.crypto-address {
margin-right: 10px;
max-width: 200px;
width: 100%;
}

2
src/styles/_mixins.scss
View file

@ -17,7 +17,6 @@
float: none;
height: $icon-size;
margin-left: 0;
margin-right: $icon-size / 2;
margin-top: 0;
width: $icon-size;
}
@ -46,7 +45,6 @@
color: $secondary-text-color;
display: flex;
gap: 0.25em;
margin-right: $icon-size / 2;
img {
filter: $secondary-text-colorizer;