diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 2c92b0cd2..cd2efcbaf 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -49,7 +49,7 @@ const Board = () => { return ( ); } diff --git a/src/routes/Board/BoardRow/styles.less b/src/routes/Board/BoardRow/styles.less index a12d6e38c..6b199d1cd 100644 --- a/src/routes/Board/BoardRow/styles.less +++ b/src/routes/Board/BoardRow/styles.less @@ -1,87 +1,89 @@ -.board-row-container { - display: grid; - grid-template-columns: 6fr minmax(12rem, 1fr); - grid-template-areas: - "title-area title-area" - "message-area message-area" - "meta-items-area see-all-area"; - - .title-container { - grid-area: title-area; - max-height: 2.4em; +.board-container { + .board-row-container { + display: grid; + grid-template-columns: 6fr minmax(12rem, 1fr); + grid-template-areas: + "title-area title-area" + "message-area message-area" + "meta-items-area see-all-area"; padding: 0 1rem; - font-size: 1.5rem; - color: var(--color-surfacelighter); - text-transform: capitalize; - } - .message-container { - grid-area: message-area; - max-height: 3.6em; - margin: 1rem 0; - padding: 0 1rem; - font-size: 1.3rem; - color: var(--color-surfacelighter); - } + .title-container { + grid-area: title-area; + max-height: 2.4em; + padding: 0 1rem; + font-size: 1.5rem; + color: var(--color-surfacelighter); + } - .meta-items-container { - grid-area: meta-items-area; - display: flex; - flex-direction: row; - align-items: stretch; + .message-container { + grid-area: message-area; + max-height: 3.6em; + margin: 1rem 0; + padding: 0 1rem; + font-size: 1.3rem; + color: var(--color-surfacelighter); + } - .meta-item { - margin: 1rem; + .meta-items-container { + grid-area: meta-items-area; + display: flex; + flex-direction: row; + align-items: stretch; - &.poster-shape-square { - flex: 1; - } + .meta-item { + margin: 1rem; - &.poster-shape-landscape { - flex: calc(1 / var(--landscape-shape-ratio)); - } + &.poster-shape-square { + flex: 1; + } - &.poster-shape-poster { - flex: calc(1 / var(--poster-shape-ratio)); + &.poster-shape-landscape { + flex: calc(1 / var(--landscape-shape-ratio)); + } + + &.poster-shape-poster { + flex: calc(1 / var(--poster-shape-ratio)); + } } } - } - .see-all-container { - grid-area: see-all-area; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - margin: 1rem; - padding: 0.5rem; - background-color: var(--color-backgroundlight); + .see-all-container { + grid-area: see-all-area; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 1rem; + padding: 0.5rem; + background-color: var(--color-backgroundlight); - &:hover, &:focus { - background-color: var(--color-backgroundlighter); + &:hover, &:focus { + background-color: var(--color-backgroundlighter); + + .label { + color: var(--color-surfacelighter); + } + + .icon { + fill: var(--color-surfacelighter); + } + } .label { - color: var(--color-surfacelighter); + font-size: 1.2rem; + max-height: 2.4em; + color: var(--color-surfacelight); + text-align: center; } .icon { - fill: var(--color-surfacelighter); + flex: none; + width: 1.3rem; + height: 1.3rem; + margin-left: 0.3rem; + fill: var(--color-surfacelight); } } - - .label { - font-size: 1.2rem; - max-height: 3.6em; - color: var(--color-surfacelight); - text-align: center; - } - - .icon { - flex: none; - width: 1.3rem; - height: 1.3rem; - margin-left: 0.3rem; - fill: var(--color-surfacelight); - } } } \ No newline at end of file diff --git a/src/routes/Board/BoardRowPlaceholder/styles.less b/src/routes/Board/BoardRowPlaceholder/styles.less index c65abc64c..01bfb5a92 100644 --- a/src/routes/Board/BoardRowPlaceholder/styles.less +++ b/src/routes/Board/BoardRowPlaceholder/styles.less @@ -1,22 +1,26 @@ -.board-row-placeholder-container { - .title-container { - width: 60%; - height: 2.4rem; - margin: 0 1rem; - background-color: var(--color-backgroundlighter); - } +.board-container { + .board-row-placeholder-container { + padding: 0 1rem; - .meta-items-container { - display: flex; - flex-direction: row; - - .meta-item { - flex: 1; - margin: 1rem; + .title-container { + width: 60%; + height: 2.4rem; + margin: 0 1rem; background-color: var(--color-backgroundlighter); + } - .meta-item-poster { - padding-top: calc(100% * var(--poster-shape-ratio)); + .meta-items-container { + display: flex; + flex-direction: row; + + .meta-item { + flex: 1; + margin: 1rem; + background-color: var(--color-backgroundlighter); + + .meta-item-poster { + padding-top: calc(100% * var(--poster-shape-ratio)); + } } } } diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 01a1fefc8..a115c7da4 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -17,9 +17,8 @@ align-self: stretch; overflow-y: auto; - .board-row { + .board-row, .board-row-placeholder { margin: 2rem 0; - padding: 0 1rem; } } } @@ -27,7 +26,7 @@ @media only screen and (min-width: @large) { .board-container { .board-content { - .board-row { + .board-row, .board-row-placeholder { .meta-item:nth-child(n+9) { display: none; } @@ -39,7 +38,7 @@ @media only screen and (max-width: @large) { .board-container { .board-content { - .board-row { + .board-row, .board-row-placeholder { .meta-item:nth-child(n+8) { display: none; } @@ -51,7 +50,7 @@ @media only screen and (max-width: @medium) { .board-container { .board-content { - .board-row { + .board-row, .board-row-placeholder { .meta-item:nth-child(n+7) { display: none; } @@ -63,7 +62,7 @@ @media only screen and (max-width: @small) { .board-container { .board-content { - .board-row { + .board-row, .board-row-placeholder { .meta-item:nth-child(n+6) { display: none; } @@ -75,7 +74,7 @@ @media only screen and (max-width: @xsmall) { .board-container { .board-content { - .board-row { + .board-row, .board-row-placeholder { .meta-item:nth-child(n+5) { display: none; }