fixed display of excessively long blog and post titles

This commit is contained in:
Isaac Visintainer 2019-07-16 12:29:28 -07:00
parent f8b6b762a1
commit 91feafadf2
9 changed files with 37 additions and 15 deletions

View File

@ -130,6 +130,10 @@ h4 {
width: 688px;
}
.mw-336 {
max-width: 336px;
}
.mw-688 {
max-width: 688px;
}
@ -228,7 +232,7 @@ h4 {
background-color: #B1B2B3;
}
.title-preview {
.two-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
@ -236,10 +240,17 @@ h4 {
overflow: hidden;
}
.body-preview {
.five-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
-webkit-line-clamp: 5;
overflow: hidden;
}
.one-line {
word-wrap: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

View File

@ -299,7 +299,9 @@ export class Blog extends Component {
<div className="absolute w-100"
style={{top:124, marginLeft: 16, marginRight: 16, marginTop: 32}}>
<div className="flex-col">
<h2>{data.blogTitle}</h2>
<h2 style={{wordBreak: "break-word", marginRight:32}}>
{data.blogTitle}
</h2>
<div className="flex" style={{marginTop: 22}}>
<div className="flex-col" style={{flexBasis: 160, marginRight:16}}>
<p className="gray-50 label-small-2 b">Host</p>

View File

@ -71,7 +71,7 @@ export class PathControl extends Component {
path.push(
<Link to={seg.url} key={key++}
className="fl gray-30 label-regular" style={style}>
className="fl gray-30 label-regular one-line mw-336" style={style}>
{seg.text}
</Link>
);

View File

@ -16,7 +16,7 @@ export class PostSnippet extends Component {
: elem.c[0];
return (
<p className="body-regular-400 body-preview"
<p className="body-regular-400 five-lines"
style={{WebkitBoxOrient: "vertical"}}>
{string}
</p>

View File

@ -57,7 +57,8 @@ export class RecentPreview extends Component {
{comments}
</p>
<Link to={collLink}>
<p className="body-regular gray-50">
<p className="body-regular gray-50 one-line mw-336"
style={{WebkitBoxOrient: "vertical"}}>
{this.props.post.collectionTitle}
</p>
</Link>

View File

@ -8,7 +8,7 @@ export class TitleSnippet extends Component {
render() {
return (
<p className="body-large b title-preview"
<p className="body-large b two-lines"
style={{WebkitBoxOrient: "vertical"}}>
{this.props.title}
</p>

View File

@ -410,7 +410,7 @@ export class Post extends Component {
<div className="absolute w-100" style={{top:124}}>
<div className="mw-688 center mt4 flex-col" style={{flexBasis: 688}}>
<Link to={blogLink}>
<p className="body-regular">
<p className="body-regular one-line mw-688">
{blogLinkText}
</p>
</Link>

View File

@ -58,9 +58,11 @@ export class Pubs extends Component {
let cls = "w-100 flex " + bg;
return (
<div className={cls} key={i}>
<div className="fl body-regular-400" style={{flexBasis: 336}}>
<div className="fl body-regular-400 mw-336 w-336 pr3">
<Link to={data.url}>
<p className="one-line mw-336">
{data.title}
</p>
</Link>
</div>
<p className="fl body-regular-400" style={{flexBasis:336}}>

View File

@ -108,9 +108,11 @@ export class Subs extends Component {
if (data.type === 'regular') {
return (
<div className={cls} key={i}>
<div className="fl body-regular-400" style={{flexBasis: 336}}>
<div className="fl mw-336" style={{flexBasis: 336}}>
<Link to={data.url}>
<p className="body-regular-400 one-line pr3">
{data.title}
</p>
</Link>
</div>
<p className="fl body-regular-400" style={{flexBasis:336}}>
@ -131,9 +133,13 @@ export class Subs extends Component {
<div className={cls} key={i}>
<div className="fl body-regular-400" style={{flexBasis: 336}}>
<Link to={data.url}>
<div className="mw-336 one-line pr3">
<span className="body-large green-medium"></span>
<span className="body-regular-400">Invite to</span>
<span className="body-regular">{data.title}</span>
<span className="body-regular">
{data.title}
</span>
</div>
</Link>
</div>
<p className="fl body-regular-400" style={{flexBasis:336}}>