diff --git a/src/routes/Discover/PickerMenu/PickerMenu.js b/src/routes/Discover/PickerMenu/PickerMenu.js index 0c48c117b..df4bf6678 100644 --- a/src/routes/Discover/PickerMenu/PickerMenu.js +++ b/src/routes/Discover/PickerMenu/PickerMenu.js @@ -23,12 +23,12 @@ const PickerMenu = ({ className, name = '', value = '', options = [], onSelect } onCloseRequest={closeMenu} renderLabel={(ref) => ( )} renderMenu={() => ( -
+
{ Array.isArray(options) ? options.map(({ label, value }) => ( diff --git a/src/routes/Discover/PickerMenu/styles.less b/src/routes/Discover/PickerMenu/styles.less index ff423cf40..8bdbf296d 100644 --- a/src/routes/Discover/PickerMenu/styles.less +++ b/src/routes/Discover/PickerMenu/styles.less @@ -13,7 +13,7 @@ &.active { background-color: var(--color-surfacelight); - .label { + .picker-label { color: var(--color-backgrounddarker); } @@ -22,7 +22,7 @@ } } - .label { + .picker-label { flex: 1; font-size: 1.1rem; max-height: 2.4em; @@ -39,8 +39,7 @@ } } -.discover-picker-menu-container { - width: 100%; +.picker-menu-container { background-color: var(--color-backgroundlighter); .picker-option-container { diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 12c61e28e..94d6bfe94 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -17,23 +17,21 @@ align-self: stretch; display: grid; grid-template-columns: 1fr 26rem; - grid-template-rows: fit-content(13rem) 1fr; + grid-template-rows: fit-content(15rem) 1fr; grid-template-areas: "pickers-area meta-preview-area" "meta-items-area meta-preview-area"; .pickers-container { grid-area: pickers-area; - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding: 0.7rem; + display: grid; + grid-gap: 1rem; + margin: 2rem 0; + padding: 0 2rem; overflow-y: auto; .picker { - flex-basis: 17rem; height: 3rem; - margin: 0.7rem; } } @@ -41,16 +39,12 @@ grid-area: meta-items-area; display: grid; grid-auto-rows: max-content; - grid-gap: 1.4rem; + grid-gap: 1.5rem; align-items: center; - padding: 0 1.4rem; + padding: 0 2rem; overflow-y: auto; .meta-item { - &:hover, &:focus, &:global(.active) { - outline-offset: calc(-1 * var(--focus-outline-size)); - } - &.selected { outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter); outline-offset: calc(-1.5 * var(--focus-outline-size)); @@ -68,6 +62,10 @@ @media only screen and (min-width: @xxlarge) { .discover-container { .discover-content { + .pickers-container { + grid-template-columns: repeat(auto-fill, 17rem); + } + .meta-items-container { grid-template-columns: repeat(8, auto); } @@ -78,6 +76,10 @@ @media only screen and (max-width: @xxlarge) { .discover-container { .discover-content { + .pickers-container { + grid-template-columns: repeat(6, 1fr); + } + .meta-items-container { grid-template-columns: repeat(7, auto); } @@ -88,6 +90,10 @@ @media only screen and (max-width: @normal) { .discover-container { .discover-content { + .pickers-container { + grid-template-columns: repeat(5, 1fr); + } + .meta-items-container { grid-template-columns: repeat(6, auto); } @@ -98,6 +104,10 @@ @media only screen and (max-width: @medium) { .discover-container { .discover-content { + .pickers-container { + grid-template-columns: repeat(4, 1fr); + } + .meta-items-container { grid-template-columns: repeat(5, auto); } @@ -108,6 +118,10 @@ @media only screen and (max-width: @small) { .discover-container { .discover-content { + .pickers-container { + grid-template-columns: repeat(3, 1fr); + } + .meta-items-container { grid-template-columns: repeat(4, auto); } @@ -124,6 +138,10 @@ "pickers-area" "meta-items-area"; + .pickers-container { + grid-template-columns: repeat(4, 1fr); + } + .meta-items-container { grid-template-columns: repeat(5, auto); } @@ -133,4 +151,15 @@ } } } +} + + +@media only screen and (max-width: @minimum) { + .discover-container { + .discover-content { + .pickers-container { + grid-template-columns: repeat(3, 1fr); + } + } + } } \ No newline at end of file