mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-15 10:02:47 +03:00
fixed display of excessively long blog and post titles
This commit is contained in:
parent
f8b6b762a1
commit
91feafadf2
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}}>
|
||||
|
@ -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}}>
|
||||
|
Loading…
Reference in New Issue
Block a user