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>

20
src/styles/downloads.css
View File

@ -111,13 +111,16 @@
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);
} }
@ -164,12 +167,15 @@
border: solid 1px rgba(255, 255, 255, 0); border: solid 1px rgba(255, 255, 255, 0);
} }
.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper { .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
> .IBMSMSMBSSDEIReactionsElementIconWrapper {
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.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon { .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
> .IBMSMSMBSSDEIReactionsElementIconWrapper
> .IBMSMSMBSSDEIReactionsElementIcon {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
@ -216,6 +222,11 @@
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;
@ -246,4 +257,3 @@
font-weight: 600; font-weight: 600;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }