mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 18:44:16 +00:00
improve posts layout
This commit is contained in:
parent
d0003ca7f2
commit
f038784e78
@ -2,13 +2,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 35vw;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
|
||||
//min-height: 165px;
|
||||
height: 100%;
|
||||
max-width: 800px;
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
|
||||
|
||||
@ -7,6 +7,10 @@ import mimetypes from "mime"
|
||||
|
||||
import ContentFailed from "../contentFailed"
|
||||
|
||||
import BearCarousel, { BearSlideCard } from "bear-react-carousel"
|
||||
|
||||
|
||||
import "bear-react-carousel/dist/index.css"
|
||||
import "react-responsive-carousel/lib/styles/carousel.min.css"
|
||||
import "plyr-react/dist/plyr.css"
|
||||
import "./index.less"
|
||||
@ -125,60 +129,40 @@ const Attachment = React.memo((props) => {
|
||||
})
|
||||
|
||||
export default React.memo((props) => {
|
||||
const carouselRef = React.useRef(null)
|
||||
const [attachmentIndex, setAttachmentIndex] = React.useState(0)
|
||||
|
||||
const handleAttachmentChange = (index) => {
|
||||
const currentAttachmentIndex = carouselRef.current.state.selectedItem
|
||||
const currentAttachment = carouselRef.current.itemsRef[currentAttachmentIndex].querySelector("video, audio")
|
||||
|
||||
if (currentAttachmentIndex !== index) {
|
||||
// if the attachment is a video, pause it
|
||||
if (currentAttachment) {
|
||||
currentAttachment.pause()
|
||||
}
|
||||
} else {
|
||||
// else if the attachment is a video, play it
|
||||
if (currentAttachment) {
|
||||
currentAttachment.play()
|
||||
}
|
||||
}
|
||||
|
||||
setAttachmentIndex(index)
|
||||
}
|
||||
const [controller, setController] = React.useState()
|
||||
const [carouselState, setCarouselState] = React.useState()
|
||||
|
||||
React.useEffect(() => {
|
||||
// get attachment index from query string
|
||||
const attachmentIndex = parseInt(new URLSearchParams(window.location.search).get("attachment"))
|
||||
|
||||
if (attachmentIndex) {
|
||||
setAttachmentIndex(attachmentIndex)
|
||||
controller?.slideToPage(attachmentIndex)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <div className="post_attachments">
|
||||
<Carousel
|
||||
ref={carouselRef}
|
||||
showArrows={true}
|
||||
showStatus={false}
|
||||
showThumbs={false}
|
||||
showIndicators={props.attachments?.length > 1 ?? false}
|
||||
selectedItem={attachmentIndex}
|
||||
onChange={handleAttachmentChange}
|
||||
transitionTime={150}
|
||||
stopOnHover={true}
|
||||
>
|
||||
{
|
||||
props.attachments?.length > 0 && props.attachments.map((attachment, index) => {
|
||||
props.attachments?.length > 0 && <BearCarousel
|
||||
data={props.attachments.map((attachment, index) => {
|
||||
if (typeof attachment !== "object") {
|
||||
return null
|
||||
}
|
||||
|
||||
return <React.Fragment key={index}>
|
||||
return {
|
||||
key: index,
|
||||
children: <React.Fragment key={index}>
|
||||
<Attachment index={index} attachment={attachment} />
|
||||
</React.Fragment>
|
||||
})
|
||||
}
|
||||
</Carousel>
|
||||
})}
|
||||
isEnableNavButton
|
||||
isEnableMouseMove
|
||||
isEnablePagination
|
||||
setController={setController}
|
||||
onSlideChange={setCarouselState}
|
||||
isDebug
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
})
|
||||
@ -1,91 +1,44 @@
|
||||
.post_attachments {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.carousel-root {
|
||||
position: relative;
|
||||
|
||||
font-family: "DM Mono", monospace;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
.carousel {
|
||||
display: flex;
|
||||
background-color: black;
|
||||
border-radius: 8px;
|
||||
|
||||
.slider-wrapper {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.control-prev,
|
||||
.control-next {
|
||||
color: #ffffff;
|
||||
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
width: 50px;
|
||||
}
|
||||
.bear-react-carousel__root {
|
||||
font-family: "DM Mono", monospace;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.5);
|
||||
background-color: transparent;
|
||||
}
|
||||
border-radius: 12px;
|
||||
|
||||
::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
|
||||
.control-arrow {
|
||||
z-index: 50;
|
||||
}
|
||||
background-color: black;
|
||||
|
||||
.control-dots {
|
||||
.bear-react-carousel__pagination-group {
|
||||
top: 0;
|
||||
height: fit-content;
|
||||
margin: 0;
|
||||
bottom: unset;
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
height: 8px;
|
||||
width: 20px;
|
||||
}
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
height: 3px;
|
||||
width: 15px;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-status {
|
||||
padding: 10px;
|
||||
.bear-react-carousel__pagination-group:not([data-page-content="true"]) .bear-react-carousel__pagination-button[data-active] {
|
||||
background-color: var(--colorPrimary);
|
||||
}
|
||||
}
|
||||
|
||||
.attachment {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: 15px;
|
||||
|
||||
.user {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -157,15 +157,15 @@ export default class PostCard extends React.PureComponent {
|
||||
return <div
|
||||
key={this.props.index}
|
||||
id={this.props.data._id}
|
||||
style={this.props.style}
|
||||
user-id={this.props.data.user_id}
|
||||
context-menu={"postCard-context"}
|
||||
className={classnames(
|
||||
"postCard",
|
||||
"post_card",
|
||||
{
|
||||
["open"]: this.state.open,
|
||||
}
|
||||
)}
|
||||
style={this.props.style}
|
||||
context-menu={"postCard-context"}
|
||||
user-id={this.props.data.user_id}
|
||||
>
|
||||
<PostHeader
|
||||
postData={this.props.data}
|
||||
@ -176,9 +176,6 @@ export default class PostCard extends React.PureComponent {
|
||||
id="post_content"
|
||||
className={classnames(
|
||||
"post_content",
|
||||
{
|
||||
["nsfw"]: this.state.isNsfw && !this.state.nsfwAccepted,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
@ -205,7 +202,6 @@ export default class PostCard extends React.PureComponent {
|
||||
attachments={this.props.data.attachments}
|
||||
/>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<PostActions
|
||||
|
||||
89
packages/app/src/components/PostCard/index.less
Executable file → Normal file
89
packages/app/src/components/PostCard/index.less
Executable file → Normal file
@ -1,45 +1,22 @@
|
||||
.postCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 35vw;
|
||||
min-width: 300px;
|
||||
max-width: 800px;
|
||||
|
||||
//max-width: 600px;
|
||||
//min-height: 165px;
|
||||
//height: 100%;
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
padding: 17px;
|
||||
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
|
||||
padding-bottom: 10px;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
.post_content {
|
||||
.post_card {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
padding: 0 10px 10px 10px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
|
||||
gap: 15px;
|
||||
padding: 17px 17px 0px 17px;
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
|
||||
color: rgba(var(--background-color-contrast));
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
z-index: 190;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@ -51,19 +28,23 @@
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.nsfw {
|
||||
.message {
|
||||
filter: blur(10px);
|
||||
}
|
||||
.post_content {
|
||||
position: relative;
|
||||
|
||||
.post_attachments {
|
||||
filter: blur(25px);
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
color: var(--text-color);
|
||||
|
||||
.nsfw_alert {
|
||||
position: absolute;
|
||||
|
||||
z-index: 200;
|
||||
|
||||
padding: 10px 0;
|
||||
|
||||
display: flex;
|
||||
@ -75,36 +56,17 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// -webkit-backdrop-filter: blur(25px);
|
||||
// backdrop-filter: blur(25px);
|
||||
//background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
z-index: 200;
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 100%;
|
||||
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
|
||||
color: var(--background-color-contrast);
|
||||
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
>div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@ -117,6 +79,5 @@
|
||||
border-bottom-right-radius: 8px;
|
||||
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -17,7 +17,7 @@ const LoadingComponent = () => {
|
||||
return <antd.Skeleton avatar
|
||||
style={{
|
||||
padding: "20px",
|
||||
width: "35vw",
|
||||
width: "100%",
|
||||
height: "160px",
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -34,6 +34,8 @@ html {
|
||||
}
|
||||
|
||||
.post-list_wrapper {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -42,6 +44,7 @@ html {
|
||||
width: fit-content;
|
||||
|
||||
//overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
|
||||
height: 100%;
|
||||
@ -52,7 +55,8 @@ html {
|
||||
position: relative;
|
||||
|
||||
// WARN: Only use if is a performance issue (If is using virtualized list)
|
||||
//will-change: transform;
|
||||
will-change: transform;
|
||||
|
||||
overflow: hidden;
|
||||
overflow-y: overlay;
|
||||
|
||||
@ -66,17 +70,20 @@ html {
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
margin: auto;
|
||||
//margin: auto;
|
||||
z-index: 150;
|
||||
|
||||
.postCard {
|
||||
width: 100%;
|
||||
min-width: none;
|
||||
min-width: 0;
|
||||
// FIXME: This is a walkaround for a bug when a post contains multiple attachments cause a overflow
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.playlistTimelineEntry {
|
||||
width: 100%;
|
||||
min-width: none;
|
||||
min-width: 0;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -103,8 +110,8 @@ html {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 35vw;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
//min-width: 300px;
|
||||
max-width: 800px;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
@ -124,20 +124,40 @@ html {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@media screen and (max-width:2000px) {
|
||||
max-width: 1000px;
|
||||
.post_card {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 2000px) {
|
||||
max-width: 1100px;
|
||||
|
||||
.post_card {
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1444px) {
|
||||
max-width: 800px;
|
||||
|
||||
.post_card {
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1170px) {
|
||||
max-width: 700px;
|
||||
|
||||
.post_card {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
max-width: 600px;
|
||||
|
||||
.post_card {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user