RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

use Image component

Browse Source
This commit is contained in:
srgooglo 2022-06-01 22:43:37 +02:00
parent 54c5472d86
commit 17596ea54a
3 changed files with 92 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app/src/components/PostCard/index.jsx
View File

@ -2,7 +2,7 @@ import React from "react"
import * as antd from "antd" import * as antd from "antd"
import { Swiper } from "antd-mobile" import { Swiper } from "antd-mobile"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import { LikeButton } from "components" import { Image, LikeButton } from "components"
import moment from "moment" import moment from "moment"
import classnames from "classnames" import classnames from "classnames"
import loadable from "@loadable/component" import loadable from "@loadable/component"
@ -52,7 +52,10 @@ function PostHeader(props) {
return <div className="postHeader"> return <div className="postHeader">
<div className="userInfo"> <div className="userInfo">
<div className="avatar"> <div className="avatar">
<antd.Avatar shape="square" src={props.postData.user?.avatar} /> <Image
alt="Avatar"
src={props.postData.user?.avatar}
/>
</div> </div>
<div className="info"> <div className="info">
<div> <div>

151
packages/app/src/components/PostCard/index.less
View File

@ -1,14 +1,14 @@
.postCard { .postCard {
display : inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width : 100%; width: 100%;
max-width: 600px; max-width: 600px;
filter: drop-shadow(3px 3px 2px var(--shadow-color)); filter: drop-shadow(3px 3px 2px var(--shadow-color));
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
border-radius : 8px; border-radius: 8px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@ -17,29 +17,29 @@
outline-color: transparent; outline-color: transparent;
&.liked { &.liked {
filter : drop-shadow(0px 0px 2px var(--primaryColor)); filter: drop-shadow(0px 0px 2px var(--primaryColor));
outline-color: var(--primaryColor); outline-color: var(--primaryColor);
} }
.wrapper { .wrapper {
display : inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items : center; align-items: center;
width : 100%; width: 100%;
padding: 17px; padding: 17px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
.postHeader { .postHeader {
display : inline-flex; display: inline-flex;
flex-direction : row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
.userInfo { .userInfo {
display : inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items : center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
@ -48,14 +48,27 @@
} }
svg { svg {
fill : var(--appColor); fill: var(--appColor);
margin-left: 6px; margin-left: 6px;
} }
.avatar {
width: 40px;
height: 40px;
img {
object-fit: cover;
width: 40px;
height: 40px;
border-radius: 8px;
}
}
.info { .info {
display : inline-flex; display: inline-flex;
flex-direction : column; flex-direction: column;
align-items : center; align-items: center;
justify-content: start; justify-content: start;
text-align: start; text-align: start;
@ -65,11 +78,11 @@
color: var(--background-color-contrast); color: var(--background-color-contrast);
h1 { h1 {
color : var(--background-color-contrast); color: var(--background-color-contrast);
margin : 0; margin: 0;
font-family: "DM Mono", monospace; font-family: "DM Mono", monospace;
align-self : start; align-self: start;
cursor : pointer; cursor: pointer;
} }
>div { >div {
@ -79,71 +92,71 @@
} }
.postStatistics { .postStatistics {
display : inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
font-size : 16px; font-size: 16px;
color : var(--background-color-contrast); color: var(--background-color-contrast);
height: fit-content; height: fit-content;
.item { .item {
display : inline-flex; display: inline-flex;
align-items : center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
height : fit-content; height: fit-content;
margin-left : 20px; margin-left: 20px;
margin-bottom: 5px; margin-bottom: 5px;
.icon { .icon {
&.filled { &.filled {
color: var(--primaryColor); color: var(--primaryColor);
fill : var(--primaryColor); fill: var(--primaryColor);
} }
} }
.value { .value {
font-family: "DM Mono", monospace; font-family: "DM Mono", monospace;
font-size : 14px; font-size: 14px;
} }
} }
} }
} }
.content { .content {
display : inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items : flex-start; align-items: flex-start;
//background-color: var(--background-color-primary); //background-color: var(--background-color-primary);
padding : 0 10px 10px 10px; padding: 0 10px 10px 10px;
border-radius: 8px; border-radius: 8px;
font-size : 14px; font-size: 14px;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
color: var(--background-color-contrast); color: var(--background-color-contrast);
overflow : hidden; overflow: hidden;
word-break : break-all; word-break: break-all;
user-select: text; user-select: text;
.additions { .additions {
width: 100%; width: 100%;
.addition { .addition {
width: 100%; width: 100%;
// fixtures for media content // fixtures for media content
img { img {
width : 100%; width: 100%;
border-radius: 12px; border-radius: 12px;
} }
video { video {
border-radius: 12px; border-radius: 12px;
width : 100%; width: 100%;
} }
audio { audio {
@ -159,26 +172,26 @@
} }
.actionsIndicatorWrapper { .actionsIndicatorWrapper {
display : flex; display: flex;
flex-direction : row; flex-direction: row;
align-items : center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.actionsIndicator { .actionsIndicator {
display : flex; display: flex;
flex-direction : row; flex-direction: row;
align-items : center; align-items: center;
justify-content: center; justify-content: center;
width : 10vw; width: 10vw;
padding: 2px; padding: 2px;
border-radius : 8px 8px 0 0; border-radius: 8px 8px 0 0;
background-color: var(--background-color-primary); background-color: var(--background-color-primary);
color : var(--background-color-contrast); color: var(--background-color-contrast);
font-size: 18px; font-size: 18px;
@ -190,33 +203,33 @@
} }
.actionsWrapper { .actionsWrapper {
display : flex; display: flex;
flex-direction : row; flex-direction: row;
align-items : center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
bottom : 0; bottom: 0;
left : 0; left: 0;
opacity: 0; opacity: 0;
width : 100%; width: 100%;
height: 40px; height: 40px;
margin-top: 15px; margin-top: 15px;
padding : 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
transition : all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
background-color: var(--background-color-primary); background-color: var(--background-color-primary);
} }
.actions { .actions {
display : inline-flex; display: inline-flex;
flex-direction : row; flex-direction: row;
align-items : center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 80%; width: 80%;
@ -226,13 +239,13 @@
color: var(--background-color-contrast); color: var(--background-color-contrast);
.action { .action {
display : inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
.icon { .icon {
cursor : pointer; cursor: pointer;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
svg { svg {
@ -242,12 +255,12 @@
.value { .value {
position: absolute; position: absolute;
bottom : 0; bottom: 0;
font-size : 14px; font-size: 14px;
font-family: "DM Mono", monospace; font-family: "DM Mono", monospace;
transform : translate(0, 50%); transform: translate(0, 50%);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
} }
@ -265,20 +278,20 @@
} }
>div { >div {
display : flex; display: flex;
flex-direction : row; flex-direction: row;
align-items : center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 360px; border-radius: 360px;
width : 55px; width: 55px;
height : 55px; height: 55px;
font-size: 20px; font-size: 20px;
padding : 2px; padding: 2px;
background-color: var(--background-color-primary); background-color: var(--background-color-primary);
transform : translate(0, -15px); transform: translate(0, -15px);
} }
} }
} }

7
packages/app/src/pages/account/index.jsx
View File

@ -4,7 +4,7 @@ import classnames from "classnames"
import moment from "moment" import moment from "moment"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import { Skeleton, PostsFeed, FollowButton, FollowersList } from "components" import { Image, Skeleton, PostsFeed, FollowButton, FollowersList } from "components"
import { Session, User } from "models" import { Session, User } from "models"
import "./index.less" import "./index.less"
@ -154,7 +154,10 @@ export default class Account extends React.Component {
<div className="title"> <div className="title">
<div className="field"> <div className="field">
<div className="avatar"> <div className="avatar">
<img src={user.avatar} /> <Image
alt="ProfileImage"
src={user.avatar}
/>
</div> </div>
</div> </div>