sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 21:46:11 +05:00
Code Issues Packages Projects Releases Wiki Activity

divider added

Browse Source
This commit is contained in:
Daniel Shleifman
2021-05-29 00:57:56 +03:00
parent 64c13ec299
commit 8c49647aa2
2 changed files with 77 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/components/DialogTorrentDetailsContent/index.jsx
View File

@@ -20,7 +20,8 @@ import TorrentCache from './TorrentCache'
import { import {
DetailedTorrentCacheViewWrapper, DetailedTorrentCacheViewWrapper,
DialogContentGrid, DialogContentGrid,
TorrentMainSection, MainSection,
MainSectionButtonGroup,
Poster, Poster,
SectionTitle, SectionTitle,
SectionSubName, SectionSubName,
@@ -31,6 +32,8 @@ import {
CacheSection, CacheSection,
ButtonSectionButton, ButtonSectionButton,
TorrentFilesSection, TorrentFilesSection,
Divider,
SmallLabel,
} from './style' } from './style'
import StatisticsField from './StatisticsField' import StatisticsField from './StatisticsField'
@@ -112,7 +115,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
</DetailedTorrentCacheViewWrapper> </DetailedTorrentCacheViewWrapper>
) : ( ) : (
<DialogContentGrid> <DialogContentGrid>
<TorrentMainSection> <MainSection>
<Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster> <Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
<div> <div>
@@ -158,8 +161,51 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
icon={ViewAgendaIcon} icon={ViewAgendaIcon}
/> />
</StatisticsWrapper> </StatisticsWrapper>
<Divider />
<SmallLabel>Download Playlist</SmallLabel>
<MainSectionButtonGroup>
<Button variant='contained' color='primary' size='large'>
full
</Button>
<Button variant='contained' color='primary' size='large'>
latest
</Button>
</MainSectionButtonGroup>
<SmallLabel>More</SmallLabel>
<MainSectionButtonGroup>
<Button variant='contained' color='primary' size='large'>
copy hash
</Button>
<Button variant='contained' color='primary' size='large'>
remove views
</Button>
<Button variant='contained' color='primary' size='large'>
drop torrent
</Button>
</MainSectionButtonGroup>
{/* <MainSectionButtonGroup>
<Button variant='contained' color='primary' size='large'>
copy hash
</Button>
<Button variant='contained' color='primary' size='large'>
remove views
</Button>
<Button variant='contained' color='primary' size='large'>
drop torrent
</Button>
<Button variant='contained' color='primary' size='large'>
download full playlist
</Button>
<Button variant='contained' color='primary' size='large'>
download playlist after last view
</Button>
</MainSectionButtonGroup> */}
</div> </div>
</TorrentMainSection> </MainSection>
<CacheSection> <CacheSection>
<SectionHeader> <SectionHeader>
@@ -200,7 +246,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
<ButtonSectionButton onClick={() => dropTorrent()}>drop torrent</ButtonSectionButton> <ButtonSectionButton onClick={() => dropTorrent()}>drop torrent</ButtonSectionButton>
<ButtonSectionButton>download playlist</ButtonSectionButton> <ButtonSectionButton>download full playlist</ButtonSectionButton>
<ButtonSectionButton>download playlist after last view</ButtonSectionButton> <ButtonSectionButton>download playlist after last view</ButtonSectionButton>
</ButtonSection> </ButtonSection>

30
web/src/components/DialogTorrentDetailsContent/style.js
View File

@@ -14,6 +14,7 @@ export const Poster = styled.div`
height: 400px; height: 400px;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
align-self: center;
${poster ${poster
? css` ? css`
@@ -34,7 +35,7 @@ export const Poster = styled.div`
`} `}
`} `}
` `
export const TorrentMainSection = styled.section` export const MainSection = styled.section`
grid-area: main; grid-area: main;
padding: 40px; padding: 40px;
display: grid; display: grid;
@@ -43,6 +44,16 @@ export const TorrentMainSection = styled.section`
background: linear-gradient(145deg, #e4f6ed, #b5dec9); background: linear-gradient(145deg, #e4f6ed, #b5dec9);
` `
export const MainSectionButtonGroup = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
:not(:last-child) {
margin-bottom: 30px;
}
`
export const CacheSection = styled.section` export const CacheSection = styled.section`
grid-area: cache; grid-area: cache;
padding: 40px; padding: 40px;
@@ -120,7 +131,7 @@ export const DetailedTorrentCacheViewWrapper = styled.div`
export const StatisticsWrapper = styled.div` export const StatisticsWrapper = styled.div`
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, min-content)); grid-template-columns: repeat(auto-fit, minmax(210px, min-content));
gap: 20px; gap: 20px;
` `
@@ -157,7 +168,7 @@ export const StatisticsFieldIcon = styled.div`
export const StatisticsFieldValue = styled.div` export const StatisticsFieldValue = styled.div`
${({ bgColor }) => css` ${({ bgColor }) => css`
grid-area: value; grid-area: value;
min-width: 150px; min-width: 170px;
padding: 0 20px; padding: 0 20px;
color: #fff; color: #fff;
font-size: 25px; font-size: 25px;
@@ -189,3 +200,16 @@ export const LoadingProgress = styled.div.attrs(({ value, fullAmount }) => {
} }
`} `}
` `
export const Divider = styled.div`
height: 1px;
background-color: rgba(0, 0, 0, 0.12);
margin: 30px 0;
`
export const SmallLabel = styled.div`
font-size: 20px;
margin-bottom: 10px;
font-weight: 300;
line-height: 1;
`