daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-11 12:23:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

panel padding fixes

Browse Source
This commit is contained in:
BFlat authored and Brandon Thomas committed 2023-10-18 04:15:11 -04:00
1 parent 60f494db1b
commit 7566d8760c
2 files changed
+84 -64
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou.com/src/scss/site-refresh.scss
+14
View File
@@ -299,6 +299,15 @@ styles with important tags:
0 10px 8px rgb(0 0 0 / 3%), 0 4px 4px rgb(0 0 0 / 2%),
0 2px 2px rgb(0 0 0 / 1%) !important;
&.panel-clear {
padding-left: 1rem;
padding-right: 1rem;
background-color: transparent;
border: none;
border-color: transparent !important;
box-shadow: none !important;
}
.panel-inner {
background-color: lighten($panel, 4%);
}
@@ -1531,6 +1540,11 @@ textarea {
.panel {
border-radius: 0.5rem;
&.panel-clear {
padding-left: 0rem;
padding-right: 0rem;
}
}
ul.patrons-list {
packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx
+70 -64
View File
@@ -97,8 +97,10 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
);
case MediaType.Video:
return (
<div className="panel ratio ratio-16x9">
<MediaVideoComponent mediaData={data} />
<div className="panel panel-clear">
<div className="ratio ratio-16x9">
<MediaVideoComponent mediaData={data} />
</div>
</div>
);
@@ -297,74 +299,78 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
</div>
</Container>
<Container type="padded">
<div className="row g-4 mb-4">
<div className="col-12 col-xl-8">
<div className="media-wrapper">
{renderMediaComponent(mediaData)}
</div>
<div className="panel p-3 py-4 p-md-4 mt-4 d-none d-xl-block">
<h4 className="fw-semibold mb-3">Comments</h4>
<CommentComponent
entityType="user"
entityToken={mediaData.token}
sessionWrapper={sessionWrapper}
/>
</div>
</div>
<div className="col-12 col-xl-4 d-flex flex-column gap-4">
<div className="d-flex gap-2">
<Gravatar
size={48}
username={mediaData.maybe_creator_user.display_name}
avatarIndex={
mediaData.maybe_creator_user.default_avatar.image_index
}
backgroundIndex={
mediaData.maybe_creator_user.default_avatar.color_index
}
/>
<div className="d-flex flex-column">
<Link
className="fw-medium"
to={`/profile/${mediaData.maybe_creator_user.display_name}`}
>
{mediaData.maybe_creator_user.display_name}
</Link>
{timeCreated}
<Container type="panel">
<div className="container-panel">
<div className="row g-4 mb-4">
<div className="col-12 col-xl-8">
<div className="media-wrapper">
{renderMediaComponent(mediaData)}
</div>
</div>
<div className="d-flex gap-2 flex-wrap">
<Button
icon={faArrowDownToLine}
label="Download"
onClick={() => {}}
className="flex-grow-1"
/>
<div className="d-flex gap-2">
<Button
square={true}
variant="secondary"
icon={faCirclePlay}
onClick={() => {}}
tooltip="Create"
/>
<Button
square={true}
variant="secondary"
icon={faShare}
onClick={() => {}}
tooltip="Share"
<div className="panel p-3 py-4 p-md-4 mt-4 d-none d-xl-block">
<h4 className="fw-semibold mb-3">Comments</h4>
<CommentComponent
entityType="user"
entityToken={mediaData.token}
sessionWrapper={sessionWrapper}
/>
</div>
</div>
<div className="col-12 col-xl-4">
<div className="panel panel-clear d-flex flex-column gap-4">
<div className="d-flex gap-2">
<Gravatar
size={48}
username={mediaData.maybe_creator_user.display_name}
avatarIndex={
mediaData.maybe_creator_user.default_avatar.image_index
}
backgroundIndex={
mediaData.maybe_creator_user.default_avatar.color_index
}
/>
<div className="d-flex flex-column">
<Link
className="fw-medium"
to={`/profile/${mediaData.maybe_creator_user.display_name}`}
>
{mediaData.maybe_creator_user.display_name}
</Link>
{timeCreated}
</div>
</div>
<Accordion>
{mediaDetails}
{modMediaDetails}
</Accordion>
<div className="d-flex gap-2 flex-wrap">
<Button
icon={faArrowDownToLine}
label="Download"
onClick={() => {}}
className="flex-grow-1"
/>
<div className="d-flex gap-2">
<Button
square={true}
variant="secondary"
icon={faCirclePlay}
onClick={() => {}}
tooltip="Create"
/>
<Button
square={true}
variant="secondary"
icon={faShare}
onClick={() => {}}
tooltip="Share"
/>
</div>
</div>
<Accordion>
{mediaDetails}
{modMediaDetails}
</Accordion>
</div>
</div>
</div>
</div>
</Container>