From 388416289ed8037b4261be5cd454f1450072bff6 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Wed, 9 Jun 2021 19:53:48 +0300 Subject: [PATCH] poster hidden if no torrent source --- web/src/components/Add/AddDialog.jsx | 157 ++++++++++++++------------- web/src/components/Add/style.js | 65 +++++++---- web/src/locales/en/translation.json | 3 +- web/src/locales/ru/translation.json | 3 +- 4 files changed, 131 insertions(+), 97 deletions(-) diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 1d43b5d..e87c2d0 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -23,16 +23,17 @@ import { Content, Header, IconWrapper, - LeftSide, + RightSide, Poster, PosterSuggestions, PosterSuggestionsItem, PosterWrapper, - RightSide, - RightSideBottomSectionFileSelected, - RightSideBottomSectionNoFile, - RightSideTopSection, + LeftSide, + LeftSideBottomSectionFileSelected, + LeftSideBottomSectionNoFile, + LeftSideTopSection, TorrentIconWrapper, + RightSideContainer, } from './style' import { checkImageURL, getMoviePosters } from './helpers' @@ -173,72 +174,7 @@ export default function AddDialog({ handleClose }) { - - - - - - {isPosterUrlCorrect ? poster : } - - - - {posterList - ?.filter(url => url !== posterUrl) - .slice(0, 12) - .map(url => ( - userChangesPosterUrl(url)} key={uuidv4()}> - poster - - ))} - - - {currentLang !== 'en' && ( - { - const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en' - setPosterSearchLanguage(newLanguage) - posterSearch(title, newLanguage, { shouldRefreshMainPoster: true }) - }} - showbutton={+isPosterUrlCorrect} - color='primary' - variant='contained' - size='small' - > - {posterSearchLanguage === 'en' ? 'EN' : 'RU'} - - )} - - { - removePoster() - setIsUserInteractedWithPoster(true) - }} - color='primary' - variant='contained' - size='small' - > - {t('Clear')} - - - - - - + - + {selectedFile ? ( - + @@ -263,9 +199,9 @@ export default function AddDialog({ handleClose }) { - + ) : ( - +
{t('AppendFile.Or')}
@@ -273,8 +209,77 @@ export default function AddDialog({ handleClose }) {
{t('AppendFile.ClickOrDrag')}
- + )} + + + + + + + + + + {isPosterUrlCorrect ? poster : } + + + + {posterList + ?.filter(url => url !== posterUrl) + .slice(0, 12) + .map(url => ( + userChangesPosterUrl(url)} key={uuidv4()}> + poster + + ))} + + + {currentLang !== 'en' && ( + { + const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en' + setPosterSearchLanguage(newLanguage) + posterSearch(title, newLanguage, { shouldRefreshMainPoster: true }) + }} + showbutton={+isPosterUrlCorrect} + color='primary' + variant='contained' + size='small' + > + {posterSearchLanguage === 'en' ? 'EN' : 'RU'} + + )} + + { + removePoster() + setIsUserInteractedWithPoster(true) + }} + color='primary' + variant='contained' + size='small' + > + {t('Clear')} + + + + + diff --git a/web/src/components/Add/style.js b/web/src/components/Add/style.js index 9fac09f..9f586b2 100644 --- a/web/src/components/Add/style.js +++ b/web/src/components/Add/style.js @@ -25,24 +25,56 @@ export const Content = styled.div` } ` -export const LeftSide = styled.div` - padding: 0 20px 20px 20px; - border-right: 1px solid rgba(0, 0, 0, 0.12); -` export const RightSide = styled.div` - display: flex; - flex-direction: column; + padding: 0 20px 20px 20px; ` -export const RightSideBottomSectionBasicStyles = css` +export const RightSideContainer = styled.div` + ${({ isHidden, notificationMessage }) => css` + height: 455px; + + ${notificationMessage && + css` + position: relative; + white-space: nowrap; + + :before { + font-size: 20px; + font-weight: 300; + content: '${notificationMessage}'; + display: grid; + place-items: center; + background: #84cda7; + padding: 10px 15px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 5px; + } + `}; + + ${isHidden && + css` + display: none; + `}; + `} +` +export const LeftSide = styled.div` + display: flex; + flex-direction: column; + border-right: 1px solid rgba(0, 0, 0, 0.12); +` + +export const LeftSideBottomSectionBasicStyles = css` transition: transform 0.3s; padding: 20px; height: 100%; display: grid; ` -export const RightSideBottomSectionNoFile = styled.div` - ${RightSideBottomSectionBasicStyles} +export const LeftSideBottomSectionNoFile = styled.div` + ${LeftSideBottomSectionBasicStyles} border: 4px dashed transparent; text-align: center; @@ -66,8 +98,8 @@ export const RightSideBottomSectionNoFile = styled.div` } ` -export const RightSideBottomSectionFileSelected = styled.div` - ${RightSideBottomSectionBasicStyles} +export const LeftSideBottomSectionFileSelected = styled.div` + ${LeftSideBottomSectionBasicStyles} place-items: center; @media (max-width: 930px) { @@ -107,7 +139,7 @@ export const IconWrapper = styled.div` } ` -export const RightSideTopSection = styled.div` +export const LeftSideTopSection = styled.div` background: #e3f2eb; padding: 0 20px 20px 20px; transition: all 0.3s; @@ -141,11 +173,13 @@ export const PosterWrapper = styled.div` export const PosterSuggestions = styled.div` display: grid; grid-area: suggestions; + grid-auto-flow: column; grid-template-columns: repeat(3, max-content); grid-template-rows: repeat(4, max-content); gap: 5px; @media (max-width: 540px) { + grid-auto-flow: row; grid-template-columns: repeat(5, max-content); } @media (max-width: 375px) { @@ -228,8 +262,6 @@ export const ClearPosterButton = styled(Button)` export const PosterLanguageSwitch = styled.div` grid-area: poster; z-index: 5; - /* justify-self: center; */ - /* transform: translateY(-50%); */ position: absolute; top: 0; left: 50%; @@ -244,14 +276,9 @@ export const PosterLanguageSwitch = styled.div` font-weight: 500; cursor: pointer; transition: all 0.3s; - /* padding: 0; */ ${({ showbutton }) => !showbutton && 'display: none'}; - /* @media (max-width: 540px) { - transform: translateY(-140%); - } */ - :hover { filter: brightness(1.1); } diff --git a/web/src/locales/en/translation.json b/web/src/locales/en/translation.json index bbe4607..536a2fa 100644 --- a/web/src/locales/en/translation.json +++ b/web/src/locales/en/translation.json @@ -102,5 +102,6 @@ "ClickOrDrag": "CLICK / DRAG & DROP (.torrent)" }, "TorrentSourceOptions": "magnet / hash / .torrent file link", - "Clear": "Clear" + "Clear": "Clear", + "AddTorrentSourceNotification": "First add your torrent source" } \ No newline at end of file diff --git a/web/src/locales/ru/translation.json b/web/src/locales/ru/translation.json index 15d90eb..d0a9841 100644 --- a/web/src/locales/ru/translation.json +++ b/web/src/locales/ru/translation.json @@ -102,5 +102,6 @@ "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ (.torrent)" }, "TorrentSourceOptions": "магнитная ссылка / хеш / ссылка на .torrent файл", - "Clear": "Очистить" + "Clear": "Очистить", + "AddTorrentSourceNotification": "Сначала добавьте торрент источник" } \ No newline at end of file