mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-09-10 00:18:49 -06:00
Adding a text body preview and icon for posts with a body. Fixes #617
This commit is contained in:
parent
a497a568db
commit
0ca385deaf
20
ui/src/components/post-listing.tsx
vendored
20
ui/src/components/post-listing.tsx
vendored
@ -20,6 +20,7 @@ import { MomentTime } from './moment-time';
|
|||||||
import { PostForm } from './post-form';
|
import { PostForm } from './post-form';
|
||||||
import { IFramelyCard } from './iframely-card';
|
import { IFramelyCard } from './iframely-card';
|
||||||
import {
|
import {
|
||||||
|
md,
|
||||||
mdToHtml,
|
mdToHtml,
|
||||||
canMod,
|
canMod,
|
||||||
isMod,
|
isMod,
|
||||||
@ -30,6 +31,7 @@ import {
|
|||||||
showAvatars,
|
showAvatars,
|
||||||
pictshareImage,
|
pictshareImage,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
|
previewLines,
|
||||||
} from '../utils';
|
} from '../utils';
|
||||||
import { i18n } from '../i18next';
|
import { i18n } from '../i18next';
|
||||||
|
|
||||||
@ -459,6 +461,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||||||
<MomentTime data={post} />
|
<MomentTime data={post} />
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
|
{post.body && (
|
||||||
|
<>
|
||||||
|
<li className="list-inline-item">•</li>
|
||||||
|
<li className="list-inline-item">
|
||||||
|
{/* Using a link with tippy doesn't work on touch devices unfortunately */}
|
||||||
|
<Link
|
||||||
|
className="text-muted"
|
||||||
|
data-tippy-content={md.render(previewLines(post.body))}
|
||||||
|
data-tippy-allowHtml={true}
|
||||||
|
to={`/post/${post.id}`}
|
||||||
|
>
|
||||||
|
<svg class="mr-1 icon icon-inline">
|
||||||
|
<use xlinkHref="#icon-book-open"></use>
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<li className="list-inline-item">•</li>
|
<li className="list-inline-item">•</li>
|
||||||
{this.state.upvotes !== this.state.score && (
|
{this.state.upvotes !== this.state.score && (
|
||||||
<>
|
<>
|
||||||
|
3
ui/src/components/symbols.tsx
vendored
3
ui/src/components/symbols.tsx
vendored
@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> {
|
|||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<defs>
|
<defs>
|
||||||
|
<symbol id="icon-book-open" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 4v13h-6c-0.728 0-1.412 0.195-2 0.535v-10.535c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879zM11 17.535c-0.588-0.34-1.272-0.535-2-0.535h-6v-13h5c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121zM22 2h-6c-1.38 0-2.632 0.561-3.536 1.464-0.167 0.167-0.322 0.346-0.464 0.536-0.142-0.19-0.297-0.369-0.464-0.536-0.904-0.903-2.156-1.464-3.536-1.464h-6c-0.552 0-1 0.448-1 1v15c0 0.552 0.448 1 1 1h7c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414c0 0.552 0.448 1 1 1s1-0.448 1-1c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h7c0.552 0 1-0.448 1-1v-15c0-0.552-0.448-1-1-1z"></path>
|
||||||
|
</symbol>
|
||||||
<symbol id="icon-alert-triangle" viewBox="0 0 24 24">
|
<symbol id="icon-alert-triangle" viewBox="0 0 24 24">
|
||||||
<path d="M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
|
<path d="M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
|
||||||
</symbol>
|
</symbol>
|
||||||
|
8
ui/src/utils.ts
vendored
8
ui/src/utils.ts
vendored
@ -823,3 +823,11 @@ function hsl(num: number) {
|
|||||||
function randomHsl() {
|
function randomHsl() {
|
||||||
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
|
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function previewLines(text: string, lines: number = 3): string {
|
||||||
|
// Use lines * 2 because markdown requires 2 lines
|
||||||
|
return text
|
||||||
|
.split('\n')
|
||||||
|
.slice(0, lines * 2)
|
||||||
|
.join('\n');
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user