From f5bf5ebb82e3af420dcd23d602b1be6cc86838e1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 3 May 2017 02:04:16 +0200 Subject: 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 * Add react definitions to places that use JSX * Add Procfile.dev for running rails, webpack and streaming API at the same time --- app/javascript/styles/stream_entries.scss | 372 ++++++++++++++++++++++++++++++ 1 file changed, 372 insertions(+) create mode 100644 app/javascript/styles/stream_entries.scss (limited to 'app/javascript/styles/stream_entries.scss') diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss new file mode 100644 index 000000000..fac4703b9 --- /dev/null +++ b/app/javascript/styles/stream_entries.scss @@ -0,0 +1,372 @@ +.activity-stream { + clear: both; + box-shadow: 0 0 15px rgba($color8, 0.2); + + .entry { + background: $color5; + + .detailed-status.light, .status.light { + border-bottom: 1px solid $color2; + } + + &:last-child { + &, .detailed-status.light, .status.light { + border-bottom: 0; + border-radius: 0 0 4px 4px; + } + } + + &:first-child { + &, .detailed-status.light, .status.light { + border-radius: 4px 4px 0 0; + } + + &:last-child { + &, .detailed-status.light, .status.light { + border-radius: 4px; + } + } + } + } + + .status.light { + padding: 14px 14px 14px (48px + 14px*2); + position: relative; + min-height: 48px; + cursor: default; + + .status__header { + font-size: 15px; + + .status__meta { + float: right; + font-size: 14px; + + .status__relative-time { + color: $color4; + } + } + } + + .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; + color: $color1; + } + + .status__avatar { + position: absolute; + left: 14px; + top: 14px; + width: 48px; + height: 48px; + + & > div { + width: 48px; + height: 48px; + } + + img { + display: block; + border-radius: 4px; + } + } + + .display-name { + display: block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + strong { + font-weight: 500; + color: $color1; + } + + span { + font-size: 14px; + color: $color4; + } + } + + .status__content { + color: $color1; + + a { + color: $color4; + } + + a.status__content__spoiler-link { + color: $color5; + background: $color3; + + &:hover { + background: lighten($color3, 8%); + } + } + } + + .status__attachments { + margin-top: 8px; + overflow: hidden; + width: 100%; + box-sizing: border-box; + position: relative; + + .status__attachments__inner { + display: flex; + height: 214px; + } + } + } + + .detailed-status.light { + padding: 14px; + background: $color5; + cursor: default; + + .detailed-status__display-name { + display: block; + overflow: hidden; + margin-bottom: 15px; + + & > div { + float: left; + margin-right: 10px; + } + + .display-name { + display: block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + strong { + font-weight: 500; + color: $color1; + } + + span { + font-size: 14px; + color: $color3; + } + } + } + + .avatar { + width: 48px; + height: 48px; + + img { + display: block; + border-radius: 4px; + } + } + + .status__content { + color: $color1; + + a { + color: $color4; + } + + a.status__content__spoiler-link { + color: $color5; + background: $color3; + + &:hover { + background: lighten($color3, 8%); + } + } + } + + .detailed-status__meta { + margin-top: 15px; + color: $color3; + font-size: 14px; + line-height: 18px; + + a { + color: inherit; + } + + span > span { + font-weight: 500; + font-size: 12px; + margin-left: 6px; + display: inline-block; + } + } + + .detailed-status__attachments { + margin-top: 8px; + overflow: hidden; + width: 100%; + box-sizing: border-box; + position: relative; + + .status__attachments__inner { + display: flex; + height: 360px; + } + } + + .video-player { + margin-top: 8px; + height: 300px; + overflow: hidden; + position: relative; + + video { + position: relative; + z-index: 1; + width: 100%; + height: 100%; + object-fit: cover; + top: 50%; + transform: translateY(-50%); + } + } + } + + .media-item, .video-item { + box-sizing: border-box; + position: relative; + left: auto; + top: auto; + right: auto; + bottom: auto; + float: left; + border: medium none; + display: block; + flex: 1 1 auto; + height: 100%; + margin-right: 2px; + + &:last-child { + margin-right: 0; + } + + a { + display: block; + width: 100%; + height: 100%; + background: no-repeat scroll center center / cover; + text-decoration: none; + cursor: zoom-in; + } + + video { + position: relative; + z-index: 1; + width: 100%; + height: 100%; + object-fit: cover; + top: 50%; + transform: translateY(-50%); + } + } + + .video-item { + a { + cursor: pointer; + } + + .video-item__play { + position: absolute; + top: 50%; + left: 50%; + font-size: 36px; + transform: translate(-50%, -50%); + padding: 5px; + border-radius: 100px; + color: rgba($color5, 0.8); + z-index: 1; + } + } + + .media-spoiler { + background: $color3; + width: 100%; + height: 100%; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + transition: all 100ms linear; + z-index: 2; + + &:hover { + background: darken($color3, 5%); + } + + span { + display: block; + + &:first-child { + font-size: 14px; + } + + &:last-child { + font-size: 11px; + font-weight: 500; + } + } + } + + .pre-header { + padding: 14px 0px; + padding-left: (48px + 14px*2); + padding-bottom: 0; + margin-bottom: -4px; + color: $color3; + font-size: 14px; + position: relative; + + .pre-header__icon { + position: absolute; + left: (48px + 14px*2 - 30px); + } + + .status__display-name.muted strong { + color: $color3; + } + } + + .open-in-web-link { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.embed { + .activity-stream { + border-radius: 4px; + box-shadow: none; + + .entry { + &:last-child { + border-radius: 0 0 4px 4px; + } + + &:first-child { + border-radius: 4px 4px 0 0; + + &:last-child { + border-radius: 4px; + } + } + } + } +} -- cgit