degmods/degmods.com
6
1
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

feat(download): add download details popup

Browse Source
This commit is contained in:
enes 2025-01-21 17:19:35 +01:00
parent 4bec281ea0
commit d75e3508ea
3 changed files with 163 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/DownloadDetailsPopup.tsx Normal file
View File

@ -0,0 +1,113 @@
import { createPortal } from 'react-dom'
import { DownloadUrl } from '../types'
export const DownloadDetailsPopup = ({
title,
url,
hash,
signatureKey,
malwareScanLink,
modVersion,
customNote,
mediaUrl,
handleClose
}: DownloadUrl & {
handleClose: () => void
}) => {
return createPortal(
<div className='popUpMain'>
<div className='ContainerMain'>
<div className='popUpMainCardWrapper'>
<div className='popUpMainCard'>
<div className='popUpMainCardTop'>
<div className='popUpMainCardTopInfo'>
<h3>{title || 'Authentication Details'}</h3>
</div>
<div className='popUpMainCardTopClose' onClick={handleClose}>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='-96 0 512 512'
width='1em'
height='1em'
fill='currentColor'
style={{ zIndex: 1 }}
>
<path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
</svg>
</div>
</div>
<div className='pUMCB_Zaps'>
<div className='pUMCB_ZapsInside'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTable'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Download URL</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{url}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>SHA-256 hash</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{hash}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Signature from</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{signatureKey}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Scan</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{malwareScanLink}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Mod Version</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{modVersion}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Note</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{customNote}</p>
</div>
</div>
{typeof mediaUrl !== 'undefined' && mediaUrl !== '' && (
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Media</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<img
src={mediaUrl}
className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol_Img'
alt=''
/>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>,
document.body
)
}

67
src/pages/mod/index.tsx
View File

@ -41,6 +41,7 @@ import { RouterLoadingSpinner } from 'components/LoadingSpinner'
import { OriginalAuthor } from 'components/OriginalAuthor' import { OriginalAuthor } from 'components/OriginalAuthor'
import { Viewer } from 'components/Markdown/Viewer' import { Viewer } from 'components/Markdown/Viewer'
import { PostWarnings } from 'components/PostWarning' import { PostWarnings } from 'components/PostWarning'
import { DownloadDetailsPopup } from 'components/DownloadDetailsPopup'
const MOD_REPORT_REASONS = [ const MOD_REPORT_REASONS = [
{ label: 'Actually CP', key: 'actuallyCP' }, { label: 'Actually CP', key: 'actuallyCP' },
@ -566,16 +567,8 @@ const Body = ({
) )
} }
const Download = ({ const Download = (props: DownloadUrl) => {
url, const { url, title, malwareScanLink } = props
title,
hash,
signatureKey,
malwareScanLink,
modVersion,
customNote,
mediaUrl
}: DownloadUrl) => {
const [showAuthDetails, setShowAuthDetails] = useState(false) const [showAuthDetails, setShowAuthDetails] = useState(false)
const [showNotice, setShowNotice] = useState(false) const [showNotice, setShowNotice] = useState(false)
const [showScanNotice, setShowCanNotice] = useState(false) const [showScanNotice, setShowCanNotice] = useState(false)
@ -812,56 +805,10 @@ const Download = ({
Authentication Details Authentication Details
</p> </p>
{showAuthDetails && ( {showAuthDetails && (
<div className='IBMSMSMBSSDownloadsElementInsideAltTable'> <DownloadDetailsPopup
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'> {...props}
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'> handleClose={() => setShowAuthDetails(false)}
<p>Download URL</p> />
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{url}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>SHA-256 hash</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{hash}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Signature from</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{signatureKey}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Scan</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{malwareScanLink}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Mod Version</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{modVersion}</p>
</div>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
<p>Note</p>
</div>
<div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
<p>{customNote}</p>
</div>
</div>
</div>
)} )}
</div> </div>
</div> </div>

76
src/styles/downloads.css
View File

@ -11,7 +11,7 @@
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 15px; grid-gap: 15px;
border: solid 1px rgba(255,255,255,0.05); border: solid 1px rgba(255, 255, 255, 0.05);
overflow: auto; overflow: auto;
max-height: 550px; max-height: 550px;
padding: 15px; padding: 15px;
@ -27,7 +27,7 @@
} }
.IBMSMSMBSSDownloadsTitle { .IBMSMSMBSSDownloadsTitle {
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
} }
.IBMSMSMBSSDownloadsElement { .IBMSMSMBSSDownloadsElement {
@ -36,11 +36,11 @@
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 10px; grid-gap: 10px;
border: solid 1px rgba(255,255,255,0); border: solid 1px rgba(255, 255, 255, 0);
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -50,7 +50,7 @@
} }
.btnMain.IBMSMSMBSSDownloadsElementBtn { .btnMain.IBMSMSMBSSDownloadsElementBtn {
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
} }
@ -62,8 +62,8 @@
} }
.btnMain.IBMSMSMBSSDownloadsElementBtn:hover { .btnMain.IBMSMSMBSSDownloadsElementBtn:hover {
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
} }
.IBMSMSMBSSDownloadsElementInside { .IBMSMSMBSSDownloadsElementInside {
@ -71,7 +71,7 @@
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
align-items: start; align-items: start;
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
grid-gap: 10px; grid-gap: 10px;
} }
@ -97,27 +97,30 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
background: rgba(255,255,255,0); background: rgba(255, 255, 255, 0);
overflow: hidden; overflow: hidden;
border-radius: 10px; border-radius: 10px;
border: solid 1px rgba(255,255,255,0.05); border: solid 1px rgba(255, 255, 255, 0.05);
cursor: pointer; cursor: pointer;
} }
.IBMSMSMBSSDEIReactionsElement:hover { .IBMSMSMBSSDEIReactionsElement:hover {
transition: ease 0.4s; transition: ease 0.4s;
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
color: rgba(255,255,255,0.75); color: rgba(255, 255, 255, 0.75);
border: solid 1px rgba(255,255,255,0); border: solid 1px rgba(255, 255, 255, 0);
} }
.IBMSMSMBSSDEIReactionsElement:hover > .IBMSMSMBSSDEIReactionsElementIconWrapper { .IBMSMSMBSSDEIReactionsElement:hover
> .IBMSMSMBSSDEIReactionsElementIconWrapper {
transition: ease 0.4s; transition: ease 0.4s;
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
border-right: solid 1px rgba(255,255,255,0); border-right: solid 1px rgba(255, 255, 255, 0);
} }
.IBMSMSMBSSDEIReactionsElement:hover > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon { .IBMSMSMBSSDEIReactionsElement:hover
> .IBMSMSMBSSDEIReactionsElementIconWrapper
> .IBMSMSMBSSDEIReactionsElementIcon {
transform: scale(1.1); transform: scale(1.1);
} }
@ -147,9 +150,9 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background: rgba(255,255,255,0); background: rgba(255, 255, 255, 0);
padding: 10px 5px; padding: 10px 5px;
border-right: solid 1px rgba(255,255,255,0.05); border-right: solid 1px rgba(255, 255, 255, 0.05);
} }
.IBMSMSMBSSDownloadsElementInsideDetails { .IBMSMSMBSSDownloadsElementInsideDetails {
@ -160,17 +163,20 @@
} }
.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive { .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive {
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
border: solid 1px rgba(255,255,255,0); border: solid 1px rgba(255, 255, 255, 0);
} }
.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper { .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
background: rgba(255,255,255,0.05); > .IBMSMSMBSSDEIReactionsElementIconWrapper {
border-right: solid 1px rgba(255,255,255,0); background: rgba(255, 255, 255, 0.05);
border-right: solid 1px rgba(255, 255, 255, 0);
} }
.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon { .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
color: rgba(255,255,255,0.75); > .IBMSMSMBSSDEIReactionsElementIconWrapper
> .IBMSMSMBSSDEIReactionsElementIcon {
color: rgba(255, 255, 255, 0.75);
} }
.IBMSMSMBSSDownloadsActions { .IBMSMSMBSSDownloadsActions {
@ -188,7 +194,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 10px; border-radius: 10px;
border: solid 1px rgba(255,255,255,0.1); border: solid 1px rgba(255, 255, 255, 0.1);
overflow: auto; overflow: auto;
grid-gap: 1px; grid-gap: 1px;
} }
@ -202,7 +208,7 @@
.IBMSMSMBSSDownloadsElementInsideAltTableRow:hover { .IBMSMSMBSSDownloadsElementInsideAltTableRow:hover {
transition: ease 0.4s; transition: ease 0.4s;
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
} }
@media (max-width: 576px) { @media (max-width: 576px) {
@ -216,12 +222,17 @@
text-align: start; text-align: start;
padding: 10px 15px; padding: 10px 15px;
} }
.IBMSMSMBSSDownloadsElementInsideAltTableRowCol_Img {
width: 100%;
max-width: 300px;
border-radius: 6px;
}
.IBMSMSMBSSDownloadsElementInsideAltTableRowCol.IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst { .IBMSMSMBSSDownloadsElementInsideAltTableRowCol.IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
max-width: 200px; max-width: 200px;
background: rgba(255,255,255,0.05); background: rgba(255, 255, 255, 0.05);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -237,13 +248,12 @@
transition: ease 0.4s; transition: ease 0.4s;
cursor: pointer; cursor: pointer;
font-weight: 400; font-weight: 400;
color: rgba(255,255,255,0.25); color: rgba(255, 255, 255, 0.25);
} }
.IBMSMSMBSSDownloadsElementInsideAltText:hover { .IBMSMSMBSSDownloadsElementInsideAltText:hover {
transition: ease 0.4s; transition: ease 0.4s;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
color: rgba(255,255,255,0.75); color: rgba(255, 255, 255, 0.75);
} }