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

2
src/styles/_mixins.scss
View file

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