diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-05-03 02:04:16 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-05-03 02:04:16 +0200 |
commit | f5bf5ebb82e3af420dcd23d602b1be6cc86838e1 (patch) | |
tree | 92eef08642a038cf44ccbc6d16a884293e7a0814 /app/javascript/styles | |
parent | 26bc5915727e0a0173c03cb49f5193dd612fb888 (diff) |
Replace sprockets/browserify with Webpack (#2617)
* Replace browserify with webpack
* Add react-intl-translations-manager
* Do not minify in development, add offline-plugin for ServiceWorker background cache updates
* Adjust tests and dependencies
* Fix production deployments
* Fix tests
* More optimizations
* Improve travis cache for npm stuff
* Re-run travis
* Add back support for custom.scss as before
* Remove offline-plugin and babili
* Fix issue with Immutable.List().unshift(...values) not working as expected
* Make travis load schema instead of running all migrations in sequence
* Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of
React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in
<UI />
* Add react definitions to places that use JSX
* Add Procfile.dev for running rails, webpack and streaming API at the same time
Diffstat (limited to 'app/javascript/styles')
21 files changed, 5535 insertions, 0 deletions
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss new file mode 100644 index 00000000000..b1139b86ff8 --- /dev/null +++ b/app/javascript/styles/about.scss @@ -0,0 +1,374 @@ +.about-body { + .wrapper { + max-width: 600px; + margin: 0 auto; + color: $color3; + padding-top: 50px; + padding-bottom: 50px; + + &.thicc { + max-width: 700px; + } + } + + h1 { + font: 46px/52px 'Roboto', sans-serif; + font-weight: 600; + margin-bottom: 20px; + color: $color4; + padding: 20px 0; + + img { + margin-bottom: -5px; + margin-right: 5px; + width: 46px; + height: 46px; + } + } + + h2 { + font-family: 'Montserrat', sans-serif; + font-size: 24px; + line-height: 28px; + font-weight: 400; + margin-bottom: 20px; + color: $color5; + } + + h3 { + font-family: 'Montserrat', sans-serif; + font-size: 20px; + line-height: 28px; + font-weight: 400; + margin-bottom: 20px; + color: $color2; + } + + ul, ol { + list-style: inherit; + margin-left: 20px; + + &[type='a'] { + list-style-type: lower-alpha; + } + + &[type='i'] { + list-style-type: lower-roman; + } + } + + li > ol, li > ul { + margin-top: 20px; + } + + p, li { + font: 16px/28px 'Montserrat', sans-serif; + font-weight: 400; + margin-bottom: 12px; + + a { + color: $color4; + text-decoration: underline; + } + } + + em { + display: inline-block; + padding: 7px 7px 5px 7px; + margin: 0 2px; + background: $color3; + color: $color1; + font: 16px/16px 'Montserrat', sans-serif; + font-weight: 300; + } + + .screenshot { + box-shadow: 0 0 15px rgba($color8, 0.4); + margin-bottom: 26px; + + img { + max-width: 100%; + height: auto; + display: block; + } + } + + .actions { + overflow: hidden; + margin-bottom: 20px; + + .info { + float: right; + text-align: right; + line-height: 36px; + + a { + color: $color3; + text-decoration: underline; + } + } + } + + @media screen and (max-width: 625px) { + .wrapper { + padding: 20px; + } + + .features-list { + display: block; + } + } +} + +.information-board { + margin: 20px 0; + display: flex; + justify-content: space-between; + border-top: 1px solid lighten($color1, 10%); + border-bottom: 1px solid lighten($color1, 10%); + padding-right: 14px; + + .section { + flex: 1 0 0; + padding: 14px; + text-align: right; + font: 16px/28px 'Montserrat', sans-serif; + + span, strong { + display: block; + } + + span { + font-size: 16px; + + &:last-child { + color: $color2; + font-size: 14px; + } + } + + strong { + font-weight: 500; + font-size: 32px; + line-height: 48px; + color: $color5; + } + } + + @media screen and (max-width: 500px) { + flex-direction: column; + + .section { + text-align: left; + } + } +} + +.owner { + text-align: center; + + .avatar { + width: 80px; + height: 80px; + margin: 0 auto; + margin-bottom: 15px; + + img { + display: block; + width: 80px; + height: 80px; + border-radius: 48px; + } + } + + .name { + font-size: 14px; + + a { + display: block; + color: $color5; + text-decoration: none; + + &:hover { + .display_name { + text-decoration: underline; + } + } + } + + .username { + display: block; + color: $color3; + } + } +} + +.contact-email { + text-align: center; + margin: 40px 0; + + strong { + display: block; + color: $color5; + word-break: break-word; + } +} + +.sidebar-layout { + display: flex; + + .main { + flex: 1 1 auto; + padding: 14px 0; + + .panel { + padding-right: 14px; + } + } + + .sidebar { + border-left: 1px solid lighten($color1, 10%); + width: 180px; + flex: 0 0 auto; + } + + .panel { + .panel-header { + background: lighten($color1, 10%); + padding: 7px 14px; + text-transform: uppercase; + font-size: 12px; + font-weight: 500; + } + + .panel-body { + padding: 14px; + } + + .panel-list { + ul { + list-style: none; + margin: 0; + + li { + margin: 0; + font-family: inherit; + font-size: 13px; + line-height: 18px; + + a { + display: block; + padding: 7px 14px; + color: rgba($color5, 0.7); + text-decoration: none; + transition: all 200ms linear; + + i.fa { + margin-right: 5px; + } + + &:hover { + color: $color5; + background-color: darken($color1, 5%); + transition: all 100ms linear; + } + + &.selected { + color: $color5; + background-color: $color4; + + &:hover { + background-color: lighten($color4, 5%); + } + } + } + } + } + } + } + + @media screen and (max-width: 625px) { + flex-direction: column; + + .sidebar { + border: 1px solid lighten($color1, 10%); + width: auto; + } + } +} + +.features-list { + display: flex; + margin-bottom: 20px; + + .features-list__column { + flex: 1 1 0; + + ul { + list-style: none; + } + + li { + margin: 0; + } + } +} + +.screenshot-with-signup { + display: flex; + margin-bottom: 20px; + + .mascot { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + img { + display: block; + margin: 0 auto; + max-width: 100%; + height: auto; + } + } + + .simple_form, .closed-registrations-message { + width: 300px; + flex: 0 0 auto; + background: rgba(darken($color1, 7%), 0.5); + padding: 14px; + border-radius: 4px; + box-shadow: 0 0 15px rgba($color8, 0.4); + + .actions { + margin-bottom: 0; + } + + .info { + text-align: center; + + a { + color: $color2; + } + } + } + + @media screen and (max-width: 625px) { + .mascot { + display: none; + } + + .simple_form, .closed-registrations-message { + flex: auto; + } + } +} + +.closed-registrations-message { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss new file mode 100644 index 00000000000..99af9c98206 --- /dev/null +++ b/app/javascript/styles/accounts.scss @@ -0,0 +1,391 @@ +.card { + background: $color1; + background-size: cover; + padding: 60px 0; + padding-bottom: 0; + border-radius: 4px 4px 0 0; + box-shadow: 0 0 15px rgba($color8, 0.2); + overflow: hidden; + position: relative; + + @media screen and (max-width: 700px) { + border-radius: 0; + box-shadow: none; + } + + &:after { + background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8)); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } + + .name { + display: block; + font-size: 20px; + line-height: 18px * 1.5; + color: $color5; + font-weight: 500; + text-align: center; + position: relative; + z-index: 2; + text-shadow: 0 0 2px $color8; + + small { + display: block; + font-size: 14px; + color: $color4; + font-weight: 400; + } + } + + .avatar { + width: 120px; + margin: 0 auto; + margin-bottom: 15px; + position: relative; + z-index: 2; + + img { + width: 120px; + height: 120px; + display: block; + border-radius: 120px; + } + } + + .controls { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + } + + .details { + display: flex; + margin-top: 30px; + position: relative; + z-index: 2; + flex-direction: row; + } + + .details-counters { + display: flex; + flex-direction: row; + order: 0; + } + + .counter { + width: 80px; + color: $color3; + padding: 5px 10px 0px; + margin-bottom: 10px; + border-right: 1px solid $color3; + cursor: default; + position: relative; + + a { + display: block; + } + + &:after { + display: block; + content: ""; + position: absolute; + bottom: -10px; + left: 0; + width: 100%; + border-bottom: 4px solid $color3; + opacity: 0.5; + transition: all 0.8s ease; + } + + &.active { + &:after { + border-bottom: 4px solid $color4; + opacity: 1; + } + } + + &:hover { + &:after { + opacity: 1; + transition-duration: 0.2s; + } + } + + a { + text-decoration: none; + color: inherit; + } + + .counter-label { + font-size: 12px; + text-transform: uppercase; + display: block; + margin-bottom: 5px; + text-shadow: 0 0 2px $color8; + } + + .counter-number { + font-weight: 500; + font-size: 18px; + color: $color5; + } + } + + .bio { + flex: 1; + font-size: 14px; + line-height: 18px; + padding: 5px 10px; + color: $color2; + order: 1; + } + + @media screen and (max-width: 480px) { + .details { + display: block; + } + + .bio { + text-align: center; + margin-bottom: 20px; + } + + .counter { + flex: 1 1 auto; + } + + .counter:last-child { + border-right: none; + } + } +} + +.pagination { + padding: 30px 0; + text-align: center; + overflow: hidden; + + a, .current, .next, .prev, .page, .gap { + font-size: 14px; + color: $color5; + font-weight: 500; + display: inline-block; + padding: 6px 10px; + text-decoration: none; + } + + .current { + background: $color5; + border-radius: 100px; + color: $color1; + cursor: default; + margin: 0 10px; + } + + .gap { + cursor: default; + } + + .prev, .next { + text-transform: uppercase; + color: $color2; + } + + .prev { + float: left; + padding-left: 0; + + .fa { + display: inline-block; + margin-right: 5px; + } + } + + .next { + float: right; + padding-right: 0; + + .fa { + display: inline-block; + margin-left: 5px; + } + } + + .disabled { + cursor: default; + color: lighten($color1, 10%); + } + + @media screen and (max-width: 360px) { + padding: 30px 20px; + + a, .current, .next, .prev, .gap { + display: none; + } + + .next, .prev { + display: inline-block; + } + } +} + +.accounts-grid { + box-shadow: 0 0 15px rgba($color8, 0.2); + background: $color5; + border-radius: 0 0 4px 4px; + padding: 20px 10px; + padding-bottom: 10px; + overflow: hidden; + display: flex; + flex-wrap: wrap; + + @media screen and (max-width: 700px) { + border-radius: 0; + box-shadow: none; + } + + .account-grid-card { + box-sizing: border-box; + width: 335px; + border: 1px solid $color2; + border-radius: 4px; + color: $color1; + margin-bottom: 10px; + + &:nth-child(odd) { + margin-right: 10px; + } + + .account-grid-card__header { + overflow: hidden; + padding: 10px; + border-bottom: 1px solid $color2; + } + + .avatar { + width: 60px; + height: 60px; + float: left; + margin-right: 15px; + + img { + display: block; + width: 60px; + height: 60px; + border-radius: 60px; + } + } + + .name { + padding-top: 10px; + + a { + display: block; + color: $color1; + text-decoration: none; + + &:hover { + .display_name { + text-decoration: underline; + } + } + } + } + + .display_name { + font-size: 14px; + display: block; + } + + .username { + color: $color4; + } + + .note { + padding: 10px; + padding-top: 15px; + color: $color3; + word-wrap: break-word; + } + } +} + +.nothing-here { + color: $color3; + font-size: 14px; + font-weight: 500; + text-align: center; + padding: 15px 0; + padding-bottom: 25px; + cursor: default; +} + +.account-card { + padding: 14px 10px; + background: $color5; + border-radius: 4px; + text-align: left; + box-shadow: 0 0 15px rgba($color8, 0.2); + + .detailed-status__display-name { + display: block; + overflow: hidden; + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + + & > div { + float: left; + margin-right: 10px; + width: 48px; + height: 48px; + } + + .avatar { + display: block; + border-radius: 4px; + } + + .display-name { + display: block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + cursor: default; + + strong { + font-weight: 500; + color: $color1; + } + + span { + font-size: 14px; + color: $color3; + } + } + + &:hover { + .display-name { + strong { + text-decoration: none; + } + } + } + } + + .account__header__content { + font-size: 14px; + color: $color1; + } +} diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss new file mode 100644 index 00000000000..6d246ded26d --- /dev/null +++ b/app/javascript/styles/admin.scss @@ -0,0 +1,245 @@ +.admin-wrapper { + display: flex; + justify-content: center; + height: 100%; + + .sidebar-wrapper { + flex: 1; + height: 100%; + background: $color1; + display: flex; + justify-content: flex-end; + } + + .sidebar { + width: 240px; + height: 100%; + padding: 0; |