diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less index 67cfabb34..24c1d053d 100644 --- a/src/common/EventModal/styles.less +++ b/src/common/EventModal/styles.less @@ -19,26 +19,30 @@ flex-direction: column; align-items: center; overflow: visible; + position: relative; - .modal-dialog-content { + .body-container { overflow-y: visible; } - + .image { - width: 100%; - height: 100%; - margin-top: -10rem; + position: absolute; + top: -10rem; + left: 50%; + transform: translateX(-50%); + object-fit: cover; + width: 30rem; + height: 30rem; } - + .info-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; - padding: 1rem 4rem; - margin-top: -7rem; - + padding: 10rem 4rem 0; + .title-container { display: flex; flex-direction: column; @@ -50,7 +54,7 @@ text-align: center; padding: 0 6rem; } - + .label { color: var(--primary-foreground-color); font-size: 1rem; @@ -58,7 +62,7 @@ opacity: 0.5; } } - + .addon-container { display: flex; align-items: center; @@ -76,19 +80,19 @@ color: var(--primary-foreground-color); } } - + .action-button { background-color: var(--primary-foreground-color); border: 2px solid var(--primary-foreground-color); padding: 0.8rem 2rem; border-radius: 2rem; - + .button-label { color: var(--primary-accent-color); font-size: 1rem; font-weight: 700; } - + &:hover { background-color: transparent; } @@ -96,15 +100,34 @@ } } } +} - @media only screen and (max-width: @minimum) { +@media (orientation: landscape) and (max-height: @xsmall) { + .event-modal { .modal-dialog-container { .modal-dialog-content { - .image { - height: 125%; - width: 125%; + overflow-y: auto; + + .body-container { + overflow-y: auto; } + .image { + display: none; + } + + .info-container { + padding: 1rem 4rem 0; + } + } + } + } +} + +@media only screen and (max-width: @minimum) { + .event-modal { + .modal-dialog-container { + .modal-dialog-content { .info-container { .title-container { .title { @@ -120,4 +143,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/common/MainNavBars/MainNavBars.js b/src/common/MainNavBars/MainNavBars.js index 3ccf200ec..6bcde9031 100644 --- a/src/common/MainNavBars/MainNavBars.js +++ b/src/common/MainNavBars/MainNavBars.js @@ -24,7 +24,6 @@ const MainNavBars = React.memo(({ className, route, query, children }) => { query={query} backButton={false} searchBar={true} - addonsButton={true} fullscreenButton={true} navMenu={true} /> diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js index 7a992fb45..0df4e833f 100644 --- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js +++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js @@ -13,7 +13,7 @@ const NavMenu = require('./NavMenu'); const styles = require('./styles'); const { t } = require('i18next'); -const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => { +const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => { const backButtonOnClick = React.useCallback(() => { window.history.back(); }, []); @@ -54,14 +54,6 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto null }