const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person;
return (
- <nav
- className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
- id="navbar"
- >
- <NavLink
- id="navTitle"
- to="/"
- title={siteView?.site.description ?? siteView?.site.name}
- className="d-flex align-items-center navbar-brand me-md-3"
- onMouseUp={linkEvent(this, handleCollapseClick)}
+ <div className="shadow-sm">
+ <nav
+ className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
+ id="navbar"
>
- {siteView?.site.icon && showAvatars() && (
- <PictrsImage src={siteView.site.icon} icon />
- )}
- {siteView?.site.name}
- </NavLink>
- {person && (
- <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
- <li id="navMessages" className="nav-item nav-item-icon">
- <NavLink
- to="/inbox"
- className="p-1 nav-link border-0 nav-messages"
- title={I18NextService.i18n.t("unread_messages", {
- count: Number(this.state.unreadApplicationCountRes.state),
- formattedCount: numToSI(this.unreadInboxCount),
- })}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="bell" />
- {this.unreadInboxCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadInboxCount)}
- </span>
- )}
- </NavLink>
- </li>
- {this.moderatesSomething && (
- <li className="nav-item nav-item-icon">
+ <NavLink
+ id="navTitle"
+ to="/"
+ title={siteView?.site.description ?? siteView?.site.name}
+ className="d-flex align-items-center navbar-brand me-md-3"
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ {siteView?.site.icon && showAvatars() && (
+ <PictrsImage src={siteView.site.icon} icon />
+ )}
+ {siteView?.site.name}
+ </NavLink>
+ {person && (
+ <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
+ <li id="navMessages" className="nav-item nav-item-icon">
<NavLink
- to="/reports"
- className="p-1 nav-link border-0"
- title={I18NextService.i18n.t("unread_reports", {
- count: Number(this.unreadReportCount),
- formattedCount: numToSI(this.unreadReportCount),
+ to="/inbox"
+ className="p-1 nav-link border-0 nav-messages"
+ title={I18NextService.i18n.t("unread_messages", {
+ count: Number(this.state.unreadApplicationCountRes.state),
+ formattedCount: numToSI(this.unreadInboxCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="shield" />
- {this.unreadReportCount > 0 && (
+ <Icon icon="bell" />
+ {this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadReportCount)}
+ {numToSI(this.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
- )}
- {amAdmin() && (
- <li className="nav-item nav-item-icon">
+ {this.moderatesSomething && (
+ <li className="nav-item nav-item-icon">
+ <NavLink
+ to="/reports"
+ className="p-1 nav-link border-0"
+ title={I18NextService.i18n.t("unread_reports", {
+ count: Number(this.unreadReportCount),
+ formattedCount: numToSI(this.unreadReportCount),
+ })}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="shield" />
+ {this.unreadReportCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadReportCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ {amAdmin() && (
+ <li className="nav-item nav-item-icon">
+ <NavLink
+ to="/registration_applications"
+ className="p-1 nav-link border-0"
+ title={I18NextService.i18n.t(
+ "unread_registration_applications",
+ {
+ count: Number(this.unreadApplicationCount),
+ formattedCount: numToSI(this.unreadApplicationCount),
+ }
+ )}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="clipboard" />
+ {this.unreadApplicationCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadApplicationCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ </ul>
+ )}
+ <button
+ className="navbar-toggler border-0 p-1"
+ type="button"
+ aria-label="menu"
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
+ data-bs-toggle="collapse"
+ data-bs-target="#navbarDropdown"
+ aria-controls="navbarDropdown"
+ aria-expanded="false"
+ ref={this.collapseButtonRef}
+ >
+ <Icon icon="menu" />
+ </button>
+ <div
+ className="collapse navbar-collapse my-2"
+ id="navbarDropdown"
+ ref={this.mobileMenuRef}
+ >
+ <ul id="navbarLinks" className="me-auto navbar-nav">
+ <li className="nav-item">
<NavLink
- to="/registration_applications"
- className="p-1 nav-link border-0"
- title={I18NextService.i18n.t(
- "unread_registration_applications",
- {
- count: Number(this.unreadApplicationCount),
- formattedCount: numToSI(this.unreadApplicationCount),
- }
- )}
+ to="/communities"
+ className="nav-link"
+ title={I18NextService.i18n.t("communities")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="clipboard" />
- {this.unreadApplicationCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadApplicationCount)}
- </span>
- )}
+ {I18NextService.i18n.t("communities")}
</NavLink>
</li>
- )}
- </ul>
- )}
- <button
- className="navbar-toggler border-0 p-1"
- type="button"
- aria-label="menu"
- data-tippy-content={I18NextService.i18n.t("expand_here")}
- data-bs-toggle="collapse"
- data-bs-target="#navbarDropdown"
- aria-controls="navbarDropdown"
- aria-expanded="false"
- ref={this.collapseButtonRef}
- >
- <Icon icon="menu" />
- </button>
- <div
- className="collapse navbar-collapse my-2"
- id="navbarDropdown"
- ref={this.mobileMenuRef}
- >
- <ul id="navbarLinks" className="me-auto navbar-nav">
- <li className="nav-item">
- <NavLink
- to="/communities"
- className="nav-link"
- title={I18NextService.i18n.t("communities")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("communities")}
- </NavLink>
- </li>
- <li className="nav-item">
- {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
- <NavLink
- to={{
- pathname: "/create_post",
- search: "",
- hash: "",
- key: "",
- state: { prevPath: this.currentLocation },
- }}
- className="nav-link"
- title={I18NextService.i18n.t("create_post")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("create_post")}
- </NavLink>
- </li>
- {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
+ {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
<NavLink
- to="/create_community"
+ to={{
+ pathname: "/create_post",
+ search: "",
+ hash: "",
+ key: "",
+ state: { prevPath: this.currentLocation },
+ }}
className="nav-link"
- title={I18NextService.i18n.t("create_community")}
+ title={I18NextService.i18n.t("create_post")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- {I18NextService.i18n.t("create_community")}
+ {I18NextService.i18n.t("create_post")}
</NavLink>
</li>
- )}
- <li className="nav-item">
- <a
- className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t("support_lemmy")}
- href={donateLemmyUrl}
- >
- <Icon icon="heart" classes="small" />
- <span className="d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("support_lemmy")}
- </span>
- </a>
- </li>
- </ul>
- <ul id="navbarIcons" className="navbar-nav">
- <li id="navSearch" className="nav-item">
- <NavLink
- to="/search"
- className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t("search")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="search" />
- <span className="d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("search")}
- </span>
- </NavLink>
- </li>
- {amAdmin() && (
- <li id="navAdmin" className="nav-item">
+ {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
+ <li className="nav-item">
+ <NavLink
+ to="/create_community"
+ className="nav-link"
+ title={I18NextService.i18n.t("create_community")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ {I18NextService.i18n.t("create_community")}
+ </NavLink>
+ </li>
+ )}
+ <li className="nav-item">
+ <a
+ className="nav-link d-inline-flex align-items-center d-md-inline-block"
+ title={I18NextService.i18n.t("support_lemmy")}
+ href={donateLemmyUrl}
+ >
+ <Icon icon="heart" classes="small" />
+ <span className="d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t("support_lemmy")}
+ </span>
+ </a>
+ </li>
+ </ul>
+ <ul id="navbarIcons" className="navbar-nav">
+ <li id="navSearch" className="nav-item">
<NavLink
- to="/admin"
+ to="/search"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t("admin_settings")}
+ title={I18NextService.i18n.t("search")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="settings" />
+ <Icon icon="search" />
<span className="d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("admin_settings")}
+ {I18NextService.i18n.t("search")}
</span>
</NavLink>
</li>
- )}
- {person ? (
- <>
- <li id="navMessages" className="nav-item">
+ {amAdmin() && (
+ <li id="navAdmin" className="nav-item">
<NavLink
+ to="/admin"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
- to="/inbox"
- title={I18NextService.i18n.t("unread_messages", {
- count: Number(this.unreadInboxCount),
- formattedCount: numToSI(this.unreadInboxCount),
- })}
+ title={I18NextService.i18n.t("admin_settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="bell" />
- <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("unread_messages", {
- count: Number(this.unreadInboxCount),
- formattedCount: numToSI(this.unreadInboxCount),
- })}
+ <Icon icon="settings" />
+ <span className="d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t("admin_settings")}
</span>
- {this.unreadInboxCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadInboxCount)}
- </span>
- )}
</NavLink>
</li>
- {this.moderatesSomething && (
- <li id="navModeration" className="nav-item">
+ )}
+ {person ? (
+ <>
+ <li id="navMessages" className="nav-item">
<NavLink
className="nav-link d-inline-flex align-items-center d-md-inline-block"
- to="/reports"
- title={I18NextService.i18n.t("unread_reports", {
- count: Number(this.unreadReportCount),
- formattedCount: numToSI(this.unreadReportCount),
+ to="/inbox"
+ title={I18NextService.i18n.t("unread_messages", {
+ count: Number(this.unreadInboxCount),
+ formattedCount: numToSI(this.unreadInboxCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <Icon icon="shield" />
+ <Icon icon="bell" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t("unread_reports", {
- count: Number(this.unreadReportCount),
- formattedCount: numToSI(this.unreadReportCount),
+ {I18NextService.i18n.t("unread_messages", {
+ count: Number(this.unreadInboxCount),
+ formattedCount: numToSI(this.unreadInboxCount),
})}
</span>
- {this.unreadReportCount > 0 && (
+ {this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadReportCount)}
+ {numToSI(this.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
- )}
- {amAdmin() && (
- <li id="navApplications" className="nav-item">
- <NavLink
- to="/registration_applications"
- className="nav-link d-inline-flex align-items-center d-md-inline-block"
- title={I18NextService.i18n.t(
- "unread_registration_applications",
- {
- count: Number(this.unreadApplicationCount),
- formattedCount: numToSI(this.unreadApplicationCount),
- }
- )}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="clipboard" />
- <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
- {I18NextService.i18n.t(
+ {this.moderatesSomething && (
+ <li id="navModeration" className="nav-item">
+ <NavLink
+ className="nav-link d-inline-flex align-items-center d-md-inline-block"
+ to="/reports"
+ title={I18NextService.i18n.t("unread_reports", {
+ count: Number(this.unreadReportCount),
+ formattedCount: numToSI(this.unreadReportCount),
+ })}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="shield" />
+ <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t("unread_reports", {
+ count: Number(this.unreadReportCount),
+ formattedCount: numToSI(this.unreadReportCount),
+ })}
+ </span>
+ {this.unreadReportCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadReportCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ {amAdmin() && (
+ <li id="navApplications" className="nav-item">
+ <NavLink
+ to="/registration_applications"
+ className="nav-link d-inline-flex align-items-center d-md-inline-block"
+ title={I18NextService.i18n.t(
"unread_registration_applications",
{
count: Number(this.unreadApplicationCount),
),
}
)}
- </span>
- {this.unreadApplicationCount > 0 && (
- <span className="mx-1 badge text-bg-light">
- {numToSI(this.unreadApplicationCount)}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="clipboard" />
+ <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+ {I18NextService.i18n.t(
+ "unread_registration_applications",
+ {
+ count: Number(this.unreadApplicationCount),
+ formattedCount: numToSI(
+ this.unreadApplicationCount
+ ),
+ }
+ )}
</span>
- )}
+ {this.unreadApplicationCount > 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {numToSI(this.unreadApplicationCount)}
+ </span>
+ )}
+ </NavLink>
+ </li>
+ )}
+ {person && (
+ <li id="dropdownUser" className="dropdown">
+ <button
+ type="button"
+ className="btn dropdown-toggle"
+ aria-expanded="false"
+ data-bs-toggle="dropdown"
+ >
+ {showAvatars() && person.avatar && (
+ <PictrsImage src={person.avatar} icon />
+ )}
+ {person.display_name ?? person.name}
+ </button>
+ <ul
+ className="dropdown-menu"
+ style={{ "min-width": "fit-content" }}
+ >
+ <li>
+ <NavLink
+ to={`/u/${person.name}`}
+ className="dropdown-item px-2"
+ title={I18NextService.i18n.t("profile")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="user" classes="me-1" />
+ {I18NextService.i18n.t("profile")}
+ </NavLink>
+ </li>
+ <li>
+ <NavLink
+ to="/settings"
+ className="dropdown-item px-2"
+ title={I18NextService.i18n.t("settings")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ <Icon icon="settings" classes="me-1" />
+ {I18NextService.i18n.t("settings")}
+ </NavLink>
+ </li>
+ <li>
+ <hr className="dropdown-divider" />
+ </li>
+ <li>
+ <button
+ className="dropdown-item btn btn-link px-2"
+ onClick={linkEvent(this, handleLogOut)}
+ >
+ <Icon icon="log-out" classes="me-1" />
+ {I18NextService.i18n.t("logout")}
+ </button>
+ </li>
+ </ul>
+ </li>
+ )}
+ </>
+ ) : (
+ <>
+ <li className="nav-item">
+ <NavLink
+ to="/login"
+ className="nav-link"
+ title={I18NextService.i18n.t("login")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
+ >
+ {I18NextService.i18n.t("login")}
</NavLink>
</li>
- )}
- {person && (
- <li id="dropdownUser" className="dropdown">
- <button
- type="button"
- className="btn dropdown-toggle"
- aria-expanded="false"
- data-bs-toggle="dropdown"
- >
- {showAvatars() && person.avatar && (
- <PictrsImage src={person.avatar} icon />
- )}
- {person.display_name ?? person.name}
- </button>
- <ul
- className="dropdown-menu"
- style={{ "min-width": "fit-content" }}
+ <li className="nav-item">
+ <NavLink
+ to="/signup"
+ className="nav-link"
+ title={I18NextService.i18n.t("sign_up")}
+ onMouseUp={linkEvent(this, handleCollapseClick)}
>
- <li>
- <NavLink
- to={`/u/${person.name}`}
- className="dropdown-item px-2"
- title={I18NextService.i18n.t("profile")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="user" classes="me-1" />
- {I18NextService.i18n.t("profile")}
- </NavLink>
- </li>
- <li>
- <NavLink
- to="/settings"
- className="dropdown-item px-2"
- title={I18NextService.i18n.t("settings")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- <Icon icon="settings" classes="me-1" />
- {I18NextService.i18n.t("settings")}
- </NavLink>
- </li>
- <li>
- <hr className="dropdown-divider" />
- </li>
- <li>
- <button
- className="dropdown-item btn btn-link px-2"
- onClick={linkEvent(this, handleLogOut)}
- >
- <Icon icon="log-out" classes="me-1" />
- {I18NextService.i18n.t("logout")}
- </button>
- </li>
- </ul>
+ {I18NextService.i18n.t("sign_up")}
+ </NavLink>
</li>
- )}
- </>
- ) : (
- <>
- <li className="nav-item">
- <NavLink
- to="/login"
- className="nav-link"
- title={I18NextService.i18n.t("login")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("login")}
- </NavLink>
- </li>
- <li className="nav-item">
- <NavLink
- to="/signup"
- className="nav-link"
- title={I18NextService.i18n.t("sign_up")}
- onMouseUp={linkEvent(this, handleCollapseClick)}
- >
- {I18NextService.i18n.t("sign_up")}
- </NavLink>
- </li>
- </>
- )}
- </ul>
- </div>
- </nav>
+ </>
+ )}
+ </ul>
+ </div>
+ </nav>
+ </div>
);
}
PurgeType,
VoteContentType,
} from "../../interfaces";
-import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
+import { mdToHtml, mdToHtmlInline } from "../../markdown";
import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
allLanguages: Language[];
siteLanguages: number[];
showCommunity?: boolean;
+ /**
+ * Controls whether to show both the body *and* the metadata preview card
+ */
showBody?: boolean;
hideImage?: boolean;
enableDownvotes?: boolean;
addModLoading: false,
addAdminLoading: false,
transferLoading: false,
- imageExpanded: false,
});
}
}
<>
{this.listing()}
{this.state.imageExpanded && !this.props.hideImage && this.img}
- {post.url && this.state.showBody && post.embed_title && (
+ {this.showBody && post.url && post.embed_title && (
<MetadataCard post={post} />
)}
{this.showBody && this.body()}
const post_view = this.postView;
return (
<span className="small">
- <PersonListing person={post_view.creator} muted={true} />
+ <PersonListing person={post_view.creator} />
{this.creatorIsMod_ && (
<span className="mx-1 badge text-bg-light">
{I18NextService.i18n.t("mod")}
this.postLink
)}
</h5>
- {(url && isImage(url)) ||
- (post.thumbnail_url && (
- <button
- className="btn btn-sm text-monospace text-muted d-inline-block"
- data-tippy-content={I18NextService.i18n.t("expand_here")}
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
- <Icon
- icon={
- !this.state.imageExpanded ? "plus-square" : "minus-square"
- }
- classes="icon-inline"
- />
- </button>
- ))}
+
+ {/**
+ * If there is a URL, an embed title, and we were not told to show the
+ * body by the parent component, show the MetadataCard/body toggle.
+ */}
+ {!this.props.showBody &&
+ post.url &&
+ post.embed_title &&
+ this.showPreviewButton()}
+
{post.removed && (
<small className="ms-2 badge text-bg-secondary">
{I18NextService.i18n.t("removed")}
</small>
)}
+
{post.deleted && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
<Icon icon="trash" classes="icon-inline text-danger" />
</small>
)}
+
{post.locked && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
+
{post.featured_community && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
)}
+
{post.featured_local && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
+
{post.nsfw && (
<small className="ms-2 badge text-bg-danger">
{I18NextService.i18n.t("nsfw")}
);
}
- showPreviewButton() {
- const post_view = this.postView;
- const body = post_view.post.body;
-
- return (
- <button
- className="btn btn-sm btn-animate text-muted py-0"
- data-tippy-content={body && mdNoImages.render(body)}
- data-tippy-allowHtml={true}
- onClick={linkEvent(this, this.handleShowBody)}
- >
- <Icon
- icon="book-open"
- classes={classNames("icon-inline me-1", {
- "text-success": this.state.showBody,
- })}
- />
- </button>
- );
- }
-
postActions() {
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
// Possible enhancement: Make each button a component.
{this.saveButton}
{this.crossPostButton}
- {/**
- * If there is a URL, or if the post has a body and we were told not to
- * show the body, show the MetadataCard/body toggle.
- */}
- {(post.url || (post.body && !this.props.showBody)) &&
- this.showPreviewButton()}
-
- {this.showBody && post_view.post.body && this.viewSourceButton}
+ {this.props.showBody && post_view.post.body && this.viewSourceButton}
<div className="dropdown">
<button
);
}
- showBodyPreview() {
- const { body, id } = this.postView.post;
-
- return !this.showBody && body ? (
- <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
- <div className="md-div mb-1 preview-lines">{body}</div>
- </Link>
- ) : (
- <></>
+ showPreviewButton() {
+ return (
+ <button
+ type="button"
+ className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
+ onClick={linkEvent(this, this.handleShowBody)}
+ >
+ <Icon
+ icon={!this.state.showBody ? "plus-square" : "minus-square"}
+ classes="icon-inline"
+ />
+ </button>
);
}
{/* If it has a thumbnail, do a right aligned thumbnail */}
{this.mobileThumbnail()}
- {/* Show a preview of the post body */}
- {this.showBodyPreview()}
-
{this.commentsLine(true)}
{this.userActionsLine()}
{this.duplicatesLine()}
<div className="d-none d-sm-block">
<article className="row post-container">
{!this.props.viewOnly && (
- <VoteButtons
- voteContentType={VoteContentType.Post}
- id={this.postView.post.id}
- onVote={this.props.onPostVote}
- enableDownvotes={this.props.enableDownvotes}
- counts={this.postView.counts}
- my_vote={this.postView.my_vote}
- />
+ <div className="col flex-grow-0">
+ <VoteButtons
+ voteContentType={VoteContentType.Post}
+ id={this.postView.post.id}
+ onVote={this.props.onPostVote}
+ enableDownvotes={this.props.enableDownvotes}
+ counts={this.postView.counts}
+ my_vote={this.postView.my_vote}
+ />
+ </div>
)}
- <div className="col-sm-2 pe-0 post-media">
- <div className="">{this.thumbnail()}</div>
- </div>
- <div className="col-12 col-sm-9">
+ <div className="col flex-grow-1">
<div className="row">
- <div className="col-12">
+ <div className="col-sm-3 col-lg-2 pe-0 post-media">
+ <div className="">{this.thumbnail()}</div>
+ </div>
+ <div className="col-12 col-sm-9 col-lg-10">
{this.postTitleLine()}
{this.createdLine()}
- {this.showBodyPreview()}
{this.commentsLine()}
{this.duplicatesLine()}
{this.userActionsLine()}
projects / lemmy-ui.git / commitdiff