diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss index 375ac6227..945d7705c 100644 --- a/src/components/modal/report/modal.scss +++ b/src/components/modal/report/modal.scss @@ -1,6 +1,8 @@ @import "../../../colors"; @import "../../../frameless"; +$medium-and-small: "screen and (max-width : #{$tablet}-1)"; + .mod-report * { box-sizing: border-box; } @@ -58,28 +60,33 @@ .validation-message { $arrow-border-width: 1rem; display: block; - position: absolute; - top: 0; - left: 100%; /* position to the right of parent */ - margin-left: $arrow-border-width; + position: relative; + z-index: 1; + margin-top: $arrow-border-width; + border: 1px solid $active-gray; border-radius: 5px; background-color: $ui-orange; padding: 1rem; min-width: 12rem; - max-width: 18.75rem; min-height: 1rem; overflow: visible; color: $type-white; + @media #{$medium-and-small} { + position: relative; + margin-top: calc($arrow-border-width / 2); + max-width: 100%; + } + /* arrow on box that points to the left */ &:before { display: block; position: absolute; - top: 1rem; - left: -$arrow-border-width / 2; + top: -.5rem; + left: calc(50% - calc(#{$arrow-border-width} / 2)); - transform: rotate(45deg); + transform: rotate(135deg); border-bottom: 1px solid $active-gray; border-left: 1px solid $active-gray; @@ -90,6 +97,10 @@ height: $arrow-border-width; content: ""; + + @media #{$medium-and-small} { + display: none; + } } } } @@ -101,9 +112,12 @@ .form-group.has-error { .textarea, select { border: 1px solid $ui-orange; + margin: 0; } + margin-bottom: 1rem; } .report-text .textarea { margin-bottom: 0; + min-height: 8rem; } diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 2b0e32ac5..392f76c25 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -30,7 +30,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)"; font-weight: 500; &.has-error { - .validation-message { right: 0; } @@ -83,10 +82,10 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)"; } .validation-message { + $arrow-border-width: 1rem; display: block; position: absolute; z-index: 1; - $arrow-border-width: 1rem; margin-top: $arrow-border-width; border: 1px solid $active-gray; border-radius: 5px; @@ -256,28 +255,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)"; } } - .share-date { - margin-right: .75rem; - vertical-align: middle; - line-height: 2rem; - color: $type-gray; - font-size: .875rem; - - @media #{$small} { - margin-top: 1rem; - width: 100%; - order: 100; - } - - } - - .subactions { - margin-left: 1.5rem; - justify-content: flex-end; - align-items: flex-start; - flex: 1; - } - .remix-credit { margin-bottom: 1rem; border: 1px solid $ui-blue-10percent; @@ -361,176 +338,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)"; } } - .copyleft { - display: inline-block; - transform: scale(-1, 1); - margin: 0; - text-align: right; - - @media #{$medium-and-small} { - padding: 0; - } - } - - .stats { - line-height: 2rem; - justify-content: flex-start; - } - - .stats, .subactions, .action-buttons { - @media #{$medium-and-small} { - margin: 0; - justify-content: center; - flex-direction: row; - } - - & > div, .action-button { - @media #{$medium-and-small} { - padding: 0 1rem; - } - } - } - - .stats, .subactions { - @media #{$medium-and-small} { - width: 100%; - } - } - - .subactions { - @media #{$medium-and-small} { - margin-top: 1rem; - } - } - - .project-loves, - .project-favorites, - .project-remixes, - .project-views { - - display: inline; - padding-right: 2rem; - font-size: 1rem; - font-weight: bold; - - &:before { - display: inline-block; - margin-right: .5rem; - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - width: 1.5rem; - height: 1.5rem; - vertical-align: -.25rem; - content: ""; - } - } - - .project-loves { - - cursor: pointer; - - &:before { - opacity: .5; - background-image: url("/svgs/project/love-gray.svg"); - } - } - - .project-loves.loved { - - &:before { - opacity: 1; - background-image: url("/svgs/project/love-red.svg"); - } - } - - .project-favorites { - - cursor: pointer; - - &:before { - opacity: .5; - background-image: url("/svgs/project/fav-gray.svg"); - } - } - - .project-favorites.favorited { - - &:before { - opacity: 1; - background-image: url("/svgs/project/fav-yellow.svg"); - } - } - - .project-remixes { - - &:before { - opacity: .5; - background-image: url("/svgs/project/remix-gray.svg"); - } - } - - .project-views { - - &:before { - opacity: .5; - background-image: url("/svgs/project/views-gray.svg"); - } - } - - .action-buttons { - display: flex; - margin-top: 0; - color: $type-white; - font-size: .8rem; - font-weight: 500; - justify-content: flex-end; - flex-wrap: wrap; - } - - .action-button { - margin: 0 0 0 .5rem; - border-radius: 19px; - background-color: $ui-blue; - padding: 0 .75rem; - height: 2rem; - text-decoration: none; - line-height: .875rem; - font-size: .75rem; - font-weight: normal; - - // &:hover { - // transition: background-color .25s ease; - // border-color: transparent; - // background-color: $active-gray; - // } - // - // &:active { - // border: 0 solid transparent; - // box-shadow: inset 0 0 5px $box-shadow-gray; - // background-color: $active-dark-gray; - // padding: calc(.75em + 1px) calc(1.5em + 1px); - // } - // - // &.report { - // border: 1px solid $ui-coral; - // background-color: $ui-coral; - // - // &:hover { - // transition: background-color .25s ease; - // border-color: transparent; - // background-color: $active-gray; - // } - // - // &:active { - // border: 0 solid transparent; - // box-shadow: inset 0 0 5px $box-shadow-gray; - // background-color: $active-dark-gray; - // padding: calc(.75em + 1px) calc(1.5em + 1px); - // } - // } - } - .comments-header { padding: 0 0 1rem 0; justify-content: space-between; @@ -540,42 +347,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)"; } } - .studio-button, - .copy-link-button, - .report-button { - &:before { - display: inline-block; - margin-right: .25rem; - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - width: .875rem; - height: .875rem; - vertical-align: bottom; - content: ""; - } - } - - .studio-button { - &:before { - background-image: url("/svgs/project/studio-add-white.svg"); - } - } - - .copy-link-button { - &:before { - background-image: url("/svgs/project/copy-link-white.svg"); - } - } - - .report-button { - background-color: $ui-coral; - - &:before { - background-image: url("/svgs/project/report-white.svg"); - } - } - .project-lower-container { margin-top: 1rem; background-color: $ui-blue-10percent; @@ -639,8 +410,3 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)"; } } } - -.report-text textarea { - // override min-height from default settings (for teacher registration) - min-height: 8rem; -} diff --git a/src/views/preview/stats.jsx b/src/views/preview/stats.jsx index e52516c53..2fb08b22c 100644 --- a/src/views/preview/stats.jsx +++ b/src/views/preview/stats.jsx @@ -7,6 +7,8 @@ const approx = require('approximate-number'); const CappedNumber = require('../../components/cappednumber/cappednumber.jsx'); const projectShape = require('./projectshape.jsx').projectShape; +require('./stats.scss'); + const Stats = props => (
div { + @media #{$medium-and-small} { + padding: 0 1rem; + } + } +} + +.project-loves, +.project-favorites, +.project-remixes, +.project-views { + + display: inline; + padding-right: 2rem; + font-size: 1rem; + font-weight: bold; + + &:before { + display: inline-block; + margin-right: .5rem; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + width: 1.5rem; + height: 1.5rem; + vertical-align: -.25rem; + content: ""; + } +} + +.project-loves { + + cursor: pointer; + + &:before { + opacity: .5; + background-image: url("/svgs/project/love-gray.svg"); + } +} + +.project-loves.loved { + + &:before { + opacity: 1; + background-image: url("/svgs/project/love-red.svg"); + } +} + +.project-favorites { + + cursor: pointer; + + &:before { + opacity: .5; + background-image: url("/svgs/project/fav-gray.svg"); + } +} + +.project-favorites.favorited { + + &:before { + opacity: 1; + background-image: url("/svgs/project/fav-yellow.svg"); + } +} + +.project-remixes { + + &:before { + opacity: .5; + background-image: url("/svgs/project/remix-gray.svg"); + } +} + +.project-views { + + &:before { + opacity: .5; + background-image: url("/svgs/project/views-gray.svg"); + } +} diff --git a/src/views/preview/subactions.jsx b/src/views/preview/subactions.jsx index 6a5c2b197..145703883 100644 --- a/src/views/preview/subactions.jsx +++ b/src/views/preview/subactions.jsx @@ -9,6 +9,8 @@ const ReportModal = require('../../components/modal/report/modal.jsx'); const projectShape = require('./projectshape.jsx').projectShape; +require('./subactions.scss'); + const Subactions = props => { const shareDate = ((props.projectInfo.history && props.projectInfo.history.shared)) ? props.projectInfo.history.shared : ''; diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss new file mode 100644 index 000000000..61bc01380 --- /dev/null +++ b/src/views/preview/subactions.scss @@ -0,0 +1,145 @@ +@import "../../colors"; +@import "../../frameless"; + +$small: "screen and (max-width : #{$mobile}-1)"; +$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)"; +$intermediate: "screen and (min-width : #{$tablet}) and (max-width : 941px)"; /* 941 because currently breakpoint of .inner in www is 941 */ +$medium-and-small: "screen and (max-width : #{$tablet}-1)"; + +.subactions { + margin-left: 1.5rem; + justify-content: flex-end; + align-items: flex-start; + flex: 1; + + @media #{$medium-and-small} { + width: 100%; + margin-top: 1rem; + } + + .share-date { + margin-right: .75rem; + vertical-align: middle; + line-height: 2rem; + color: $type-gray; + font-size: .875rem; + + @media #{$small} { + margin-top: 1rem; + width: 100%; + order: 100; + } + + .copyleft { + display: inline-block; + transform: scale(-1, 1); + margin: 0; + text-align: right; + + @media #{$medium-and-small} { + padding: 0; + } + } + } + .action-buttons { + display: flex; + margin-top: 0; + color: $type-white; + font-size: .8rem; + font-weight: 500; + justify-content: flex-end; + flex-wrap: wrap; + + .action-button { + margin: 0 0 0 .5rem; + border-radius: 19px; + background-color: $ui-blue; + padding: 0 .75rem; + height: 2rem; + text-decoration: none; + line-height: .875rem; + font-size: .75rem; + font-weight: normal; + + // &:hover { + // transition: background-color .25s ease; + // border-color: transparent; + // background-color: $active-gray; + // } + // + // &:active { + // border: 0 solid transparent; + // box-shadow: inset 0 0 5px $box-shadow-gray; + // background-color: $active-dark-gray; + // padding: calc(.75em + 1px) calc(1.5em + 1px); + // } + // + // &.report { + // border: 1px solid $ui-coral; + // background-color: $ui-coral; + // + // &:hover { + // transition: background-color .25s ease; + // border-color: transparent; + // background-color: $active-gray; + // } + // + // &:active { + // border: 0 solid transparent; + // box-shadow: inset 0 0 5px $box-shadow-gray; + // background-color: $active-dark-gray; + // padding: calc(.75em + 1px) calc(1.5em + 1px); + // } + // } + &.studio-button, + &.copy-link-button, + &.report-button { + &:before { + display: inline-block; + margin-right: .25rem; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + width: .875rem; + height: .875rem; + vertical-align: bottom; + content: ""; + } + } + + &.studio-button { + &:before { + background-image: url("/svgs/project/studio-add-white.svg"); + } + } + + &.copy-link-button { + &:before { + background-image: url("/svgs/project/copy-link-white.svg"); + } + } + + &.report-button { + background-color: $ui-coral; + + &:before { + background-image: url("/svgs/project/report-white.svg"); + } + } + } + } +} + +.subactions, .subactions .action-buttons { + @media #{$medium-and-small} { + margin: 0; + justify-content: center; + flex-direction: row; + } + + & > div, .action-button { + @media #{$medium-and-small} { + padding: 0 1rem; + } + } +}