beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Cleanup comment metadata to support word-breaks on longer usernames in comments.

Browse source
This commit is contained in:
Allan Cole 2019-10-21 16:53:47 -04:00
parent c2c6a75db8
commit adf9e66933
3 changed files with 74 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
varia/sass/components/comments/_comments.scss
View file

@ -81,28 +81,20 @@
margin-right: calc( $avatar-size + (0.5 * #{map-deep-get($config-global, "spacing", "horizontal")}) );
@include media(mobile) {
margin-right: inherit;
}
.comment-author {
@include media(mobile) {
display: flex;
align-items: center;
max-width: calc(100% - #{3 * map-deep-get($config-global, "spacing", "horizontal")});
.fn {
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.avatar {
display: block;
position: absolute;
right: 0;
@include media(mobile) {
margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
display: inherit;
position: inherit;
right: inherit;
}
}
}
@ -121,9 +113,32 @@
}
@include media(mobile) {
margin-right: inherit;
align-items: center;
display: flex;
justify-content: space-between;
.comment-author {
display: flex;
align-items: center;
max-width: inherit;
flex: 0 1 auto;
.fn {
padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
}
.avatar {
margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
display: inherit;
position: inherit;
right: inherit;
}
}
.comment-metadata {
flex: 0 1 auto;
}
}
}

20
varia/style-rtl.css
View file

@ -2969,6 +2969,16 @@ body:not(.fse-enabled) .footer-menu a {
}
}
.comment-meta .comment-author {
max-width: calc(100% - 48px);
}
.comment-meta .comment-author .fn {
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
@media only screen and (min-width: 560px) {
.comment-meta .comment-author {
display: flex;
@ -3009,6 +3019,16 @@ body:not(.fse-enabled) .footer-menu a {
display: flex;
justify-content: space-between;
}
.comment-meta .comment-author {
max-width: inherit;
flex: 0 1 auto;
}
.comment-meta .comment-author .fn {
padding-left: 16px;
}
.comment-meta .comment-metadata {
flex: 0 1 auto;
}
}
.comment-metadata,

43
varia/style.css
View file

@ -2980,17 +2980,14 @@ body:not(.fse-enabled) .footer-menu a {
margin-right: calc( $avatar-size + (0.5 * 16px));
}
@media only screen and (min-width: 560px) {
.comment-meta {
margin-right: inherit;
}
.comment-meta .comment-author {
max-width: calc(100% - 48px);
}
@media only screen and (min-width: 560px) {
.comment-meta .comment-author {
display: flex;
align-items: center;
}
.comment-meta .comment-author .fn {
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.comment-meta .comment-author .avatar {
@ -2999,15 +2996,6 @@ body:not(.fse-enabled) .footer-menu a {
right: 0;
}
@media only screen and (min-width: 560px) {
.comment-meta .comment-author .avatar {
margin-right: 16px;
display: inherit;
position: inherit;
right: inherit;
}
}
.comment-meta .comment-metadata {
color: #444444;
}
@ -3022,10 +3010,29 @@ body:not(.fse-enabled) .footer-menu a {
@media only screen and (min-width: 560px) {
.comment-meta {
margin-right: inherit;
align-items: center;
display: flex;
justify-content: space-between;
}
.comment-meta .comment-author {
display: flex;
align-items: center;
max-width: inherit;
flex: 0 1 auto;
}
.comment-meta .comment-author .fn {
padding-right: 16px;
}
.comment-meta .comment-author .avatar {
margin-right: 16px;
display: inherit;
position: inherit;
right: inherit;
}
.comment-meta .comment-metadata {
flex: 0 1 auto;
}
}
.comment-metadata,