scratch-www/src/views/preview/preview.scss

635 lines
14 KiB
SCSS
Raw Normal View History

@import "../../colors";
@import "../../frameless";
/* stage size constants */
$player-width: 482px;
$player-height: 406px;
$stage-width: 480px;
/* override view padding for share banner */
#view {
Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
padding: 0;
width: 100%;
}
.gui {
position: absolute;
top: 0;
margin: 0;
width: 100%;
height: 100%;
/* Setting min height/width makes the UI scroll below those sizes */
/* Copied from GUI playground index.css */
min-width: 1024px;
min-height: 640px; /* Min height to fit sprite/backdrop button */
}
.page-has-admin-panel {
padding-left: 20px;
}
.page-has-admin-panel.admin-panel-open {
padding-left: 250px;
}
.preview {
.inner {
margin: 0 auto;
@media #{$medium-and-smaller} {
max-width: 90%;
2018-09-25 15:31:31 -04:00
}
@media #{$intermediate} {
width: 90%;
2018-10-04 10:51:26 -04:00
min-width: 640px;
2018-09-25 15:31:31 -04:00
}
}
.project-admin-panel {
margin-top: 51px;
border: 0;
padding: 1rem;
overflow: hidden;
}
.project-admin-panel.admin-panel-open {
padding: 0;
width: 250px;
}
.admin-iframe {
position: absolute;
top: 0;
left: 0;
2018-12-05 16:09:04 -05:00
z-index: 100;
margin: 0;
border: 0;
width: 250px;
2018-12-05 16:09:04 -05:00
height: 100%;
}
2018-12-05 17:10:43 -05:00
.admin-iframe.modal-open,
.project-admin-panel.admin-panel-open.modal-open {
2018-12-05 17:10:43 -05:00
background-color: transparent;
width: 100%;
}
.project-title {
font-size: 1.75rem;
font-weight: 500;
&.has-error {
.validation-message {
2018-09-12 17:28:27 -04:00
right: 0;
}
}
&.no-edit {
/* titles of projects you don't own should not
show the full title if this is too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.project-header {
margin-right: 2rem;
min-width: 0;
flex-grow: 1;
justify-content: flex-start;
2018-05-30 10:27:22 -04:00
align-items: flex-start;
flex-wrap: nowrap;
2018-05-30 10:27:22 -04:00
.inplace-input {
height: calc(3rem - 4px);
}
2018-09-14 16:32:57 -04:00
@media #{$medium-and-smaller} {
2018-09-14 16:32:57 -04:00
flex-direction: row;
.inplace-input {
width: calc(100% - 4rem);
}
2018-09-14 16:32:57 -04:00
}
@media #{$small} {
margin-right: 0;
}
}
img {
&.avatar {
border: 0;
border-radius: 5px;
width: 3rem;
2018-05-30 10:27:22 -04:00
height: 3rem;
&.remix {
margin-right: .5em;
2018-05-30 10:27:22 -04:00
width: 2rem;
height: 2rem;
}
}
}
.title {
margin-left: 1rem;
min-width: 0;
text-align: left;
font-size: .8rem;
flex-grow: 1;
@media #{$medium-and-smaller} {
min-width: calc(100% - 2rem);
}
}
2018-08-23 14:31:44 -04:00
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
z-index: 5;
2018-09-12 17:28:27 -04:00
margin-top: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
padding: 1rem;
max-width: 18.75rem;
min-height: 1rem;
overflow: visible;
color: $type-white;
font-size: 1rem;
@media #{$medium-and-smaller} {
margin-top: calc($arrow-border-width / 2);
2018-09-13 10:49:59 -04:00
width: 100%;
}
&:before {
display: block;
position: absolute;
2018-09-13 10:49:59 -04:00
top: -.5rem;
left: calc(50% - calc(#{$arrow-border-width} / 2));
2018-09-12 17:28:27 -04:00
transform: rotate(135deg);
border-bottom: 1px solid $active-gray;
border-left: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
width: $arrow-border-width;
height: $arrow-border-width;
content: "";
@media #{$medium-and-smaller} {
display: none;
}
}
}
.row {
&.has-error {
.inplace-input,
.inplace-textarea {
border: 1px solid $ui-orange;
}
}
.col-sm-9 {
position: relative;
}
}
.project-buttons {
font-weight: bold;
2018-08-30 15:44:17 -04:00
flex-shrink: 0;
}
.button {
margin-left: 1rem;
}
.inplace-textarea::placeholder {
padding: 0;
2018-11-21 13:00:53 -05:00
text-align: start;
}
.comments-container {
2018-09-26 16:45:42 -04:00
padding-right: 1.5rem;
2018-09-17 11:19:22 -04:00
min-width: 65%;
2018-09-26 16:39:37 -04:00
max-width: 100%;
flex: 1;
2018-09-17 11:19:22 -04:00
@media #{$medium-and-smaller} {
2018-09-26 16:39:37 -04:00
padding: 0;
2018-09-26 16:45:42 -04:00
width: 100%;
2018-09-17 11:19:22 -04:00
}
.comment, .comment-top-row, .comment-bottom-row {
2018-09-26 16:45:42 -04:00
flex-direction: row;
2018-09-17 11:19:22 -04:00
}
.comment-bubble {
2018-09-26 16:45:42 -04:00
text-align: left;
2018-09-17 11:19:22 -04:00
}
2018-10-10 15:14:53 -04:00
.comments-turned-off {
border: 1px solid $ui-blue-25percent;
border-radius: .5rem;
background: $ui-blue-10percent;
2018-10-10 15:29:30 -04:00
padding: 1.5rem 0;
2018-10-10 15:14:53 -04:00
width: 100%;
text-align: center;
}
.comments-allowed-input {
margin-right: 3px;
}
}
.remix-button,
.see-inside-button {
margin-top: 0;
border-radius: .25rem;
padding-top: .6875rem;
2018-11-18 11:19:21 -05:00
padding-right: .9375rem;
padding-bottom: .6875rem;
2018-11-18 11:19:21 -05:00
padding-left: .875rem;
height: 2.5rem;
font-size: .875rem;
&:before {
display: inline-block;
margin-top: -2px;
margin-right: .4375rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.125rem;
2018-11-18 11:19:21 -05:00
height: 1.125rem;
vertical-align: middle;
content: "";
}
}
.remix-button {
background-color: $ui-aqua;
&:before {
background-image: url("/svgs/project/remix-white.svg");
}
}
.remix-button.disabled {
opacity: .6;
}
.remix-button.remixing {
&:before {
animation-name: remix-intro, remix-spin;
animation-duration: .25s, .75s;
animation-timing-function: cubic-bezier(.3, -3, .6, 3), ease-out;
animation-delay: 0s, .25s;
animation-iteration-count: 1, infinite;
animation-direction: normal;
width: 1.25rem;
height: 1.25rem;
transform-origin: 55% 55%;
}
@keyframes remix-intro {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes remix-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
}
.see-inside-button {
&:before {
background-image: url("/svgs/project/see-inside-white.svg");
}
}
.preview-row {
margin-top: 1rem;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
&.force-row {
@media #{$medium-and-smaller} {
flex-direction: row;
}
}
.wrappable-item {
margin-bottom: .5rem;
}
}
@media #{$medium-and-smaller} {
.preview-row {
align-items: center;
}
}
.guiPlayer {
display: inline-block;
position: relative;
width: $player-width;
z-index: 1;
$alert-bg: rgba(255, 255, 255, .85);
.project-info-alert {
position: absolute;
2018-12-14 16:47:54 -05:00
z-index: 8; // Below navbar
margin: 60px 15px;
border-radius: .25rem;
background: $alert-bg;
padding: .75rem;
text-align: center;
font-size: .95rem;
}
&.fullscreen {
z-index: 200;
}
@media #{$small} {
2018-09-26 17:26:19 -04:00
width: 100%;
}
}
2018-09-25 17:16:02 -04:00
.force-center {
@media #{$medium-and-smaller} {
2018-09-25 17:16:02 -04:00
align-self: center;
}
}
.project-notes {
margin-left: 1rem;
height: $player-height;
align-items: flex-start;
flex: 1;
flex-flow: column;
@media #{$medium-and-smaller} {
margin-top: .5rem;
margin-left: 0;
width: 100%;
}
> .description-block:first-child {
margin-top: 1rem;
}
}
.remix-credit {
margin-bottom: 1rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: calc(100% - 1rem);
flex-wrap: nowrap;
2018-10-03 10:29:45 -04:00
align-items: center;
@media #{$medium-and-smaller} {
flex-direction: row;
}
}
.credit-text {
font-size: .875rem;
flex-shrink: 1;
}
.description-block {
display: flex;
width: 100%;
min-height: 0;
flex-direction: column;
align-items: flex-start;
flex: 1;
}
.project-textlabel {
margin: 0 0 .5rem 0;
2018-05-30 10:27:22 -04:00
font-size: 1rem;
font-weight: bold;
}
.project-description {
margin-bottom: .75rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: calc(100% - (1rem + 2px));
overflow: auto;
white-space: pre-line;
2018-05-30 10:27:22 -04:00
font-size: 1rem;
line-height: 1.5rem;
flex: 1;
}
.project-description.last {
margin-bottom: 0;
}
.project-description-form {
display: flex;
width: 100%;
flex-grow: 1;
}
.project-description-edit {
display: flex;
2018-05-30 10:27:22 -04:00
margin-bottom: .75rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: 100%;
white-space: pre-line;
// flex-grow
flex: 1;
2018-05-30 10:27:22 -04:00
&.last {
margin-bottom: 0;
}
&.textarea-row {
border: 0;
background-color: inherit;
padding: 0;
}
&.has-error {
.validation-message {
top: 100%;
right: 0;
}
}
& > .grow {
display: flex;
flex: 1;
}
& .inplace-textarea {
line-height: 1.5rem; /* Override 1.75 from form styling */
}
::-webkit-input-placeholder { /* Chrome <=56, Safari < 10 */
transition: opacity .25s;
opacity: 1;
-webkit-transition: opacity .25s;
}
:-moz-placeholder { /* FF 4-18 */
transition: opacity .25s;
opacity: 1;
-moz-transition: opacity .25s;
}
::-moz-placeholder { /* FF 19-51 */
transition: opacity .25s;
opacity: 1;
-moz-transition: opacity .25s;
}
:-ms-input-placeholder { /* IE 10+ */
transition: opacity .25s;
opacity: 1;
-ms-transition: opacity .25s;
}
::placeholder { /* Modern Browsers */
transition: opacity .25s;
opacity: 1;
}
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */
}
Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
.comments-header {
padding: 0 0 1rem 0;
justify-content: space-between;
h4 {
font-size: 1.25rem;
}
}
Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
.project-lower-container {
margin-top: 1rem;
background-color: $ui-blue-10percent;
padding: 1rem 0;
min-height: 6rem;
Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
}
.create-comment {
margin-bottom: 2rem;
}
.load-more-button {
margin-left: 0;
width: 100%;
}
2018-06-13 16:45:06 -04:00
.extension-list {
justify-content: flex-start;
2018-09-21 13:52:42 -04:00
flex-direction: row;
@media #{$medium-and-smaller} {
2018-09-21 13:52:42 -04:00
justify-content: center;
}
2018-06-13 16:45:06 -04:00
}
Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
.remix-list,
.studio-list {
flex-direction: column;
width: 14.625rem;
.list-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.list-header-spacer {
flex: 1 0 1px;
}
2018-08-28 17:01:36 -04:00
.list-title {
2018-08-24 09:25:04 -04:00
margin-left: 1rem;
font-size: 1.2rem;
font-weight: bold;
align-self: flex-start;
line-height: 110%;
text-align: left;
}
.list-header-link {
margin-right: 1rem;
align-self: flex-end;
font-size: .75rem;
line-height: 110%;
text-align: right;
}
.creator-image img {
max-width: 2rem;
max-height: 2rem;
}
.thumbnail-column {
display: inline-block;
width: 100%;
max-width: 300px;
2018-09-27 10:31:32 -04:00
/* TODO: the following can be transferred to
src/components/thumbnailcolumn/thumbnailcolumn.scss
after testing */
@media #{$medium-and-smaller} {
flex-direction: row;
.thumbnail {
display: inline-block;
}
}
}
@media #{$medium-and-smaller} {
margin-top: 1rem;
width: 100%;
}
}
}