From d8ba512f050aeb0bb70b48dc7011cd026e4d1db1 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Mon, 7 Dec 2020 22:33:42 +0300 Subject: [PATCH 1/4] Add timer preview to configuration page --- assets/styles/_sizes.scss | 2 +- assets/styles/components/_timer.scss | 6 +- .../components/configurations/_form.scss | 334 ++++++++------ .../components/configurations/_load.scss | 2 - assets/styles/lib/_breakpoints.scss | 4 +- assets/styles/main.scss | 20 +- controllers/site/timer_controller.rb | 23 +- helpers/configurations_helper.rb | 6 +- locales/en.yaml | 1 + .../site/public/configurations/_form.html.erb | 414 +++++++++--------- .../403.html.erb} | 0 .../404.html.erb} | 0 views/site/public/layout.html.erb | 25 +- 13 files changed, 465 insertions(+), 372 deletions(-) rename views/site/public/configurations/{forbidden.html.erb => errors/403.html.erb} (100%) rename views/site/public/configurations/{not_found.html.erb => errors/404.html.erb} (100%) diff --git a/assets/styles/_sizes.scss b/assets/styles/_sizes.scss index 2c1e4b4..4a11aed 100644 --- a/assets/styles/_sizes.scss +++ b/assets/styles/_sizes.scss @@ -1,5 +1,5 @@ $page_max_width: 800px; -$container_max_width: $page_max_width; // 1200px; +$container_max_width: 1200px; // $icon_size: 1em; diff --git a/assets/styles/components/_timer.scss b/assets/styles/components/_timer.scss index 9536d32..9f0377b 100644 --- a/assets/styles/components/_timer.scss +++ b/assets/styles/components/_timer.scss @@ -1,6 +1,8 @@ .timer { - width: 100vw; - height: 100vh; + width: 100%; + min-width: 100vw; + height: 100%; + min-height: 100vh; margin: 0; display: flex; justify-content: center; diff --git a/assets/styles/components/configurations/_form.scss b/assets/styles/components/configurations/_form.scss index 2065260..6fb2420 100644 --- a/assets/styles/components/configurations/_form.scss +++ b/assets/styles/components/configurations/_form.scss @@ -1,206 +1,264 @@ -.configuration form { - // `max-content` is supported by Firefox - /* stylelint-disable plugin/no-unsupported-browser-features */ - width: max-content; - /* stylelint-enable plugin/no-unsupported-browser-features */ - max-width: 100%; - - .timeline { - display: flex; - flex-direction: column; - align-items: center; - - &, +.configuration.change { + width: 100%; + + form { fieldset { - text-align: center; - } + &.name { + text-align: center; - .only-countup { - display: block; - margin: 0.8em 0 0.6em; - } + input { + width: 100%; + font-size: 1.2em; + text-align: center; + } + } - .arrow { - $color: #c5c5c5; + &.link { + text-align: center; + } - fill: $color; + label { + &.opacity { + > span > * { + vertical-align: middle; + } - line { - stroke: $color; + input { + width: 100%; + max-width: 15em; + } + } } } - > p { - color: $disabled_text_color; - font-size: 1.4em; - margin: 0.8em; + fieldset ~ button { + padding: 0.3em 0.8em; + font-size: 1.1em; } - .endless { - vertical-align: middle; - font-size: 3.2em; - margin: 0; - color: #bbb; + input[type="number"] { + text-align: right; } - > .endless { - font-size: 3.6em; - line-height: 1.05em; + .fieldsets-without-preview, + .fieldsets-beside-preview { + // `max-content` is supported by Firefox + /* stylelint-disable plugin/no-unsupported-browser-features */ + width: max-content; + /* stylelint-enable plugin/no-unsupported-browser-features */ + max-width: 100%; } - > fieldset { - width: 100%; + .fieldsets-without-preview { + margin-left: auto; + margin-right: auto; + } - > label { - display: block; - margin: 0.2em 0 1em; + .fieldsets-with-preview { + display: flex; + + @include media-to(lg) { + flex-direction: column; + align-items: center; + + .preview { + align-self: stretch; + } } - &.countup { - &:not(.display-time) { - .endless { - display: none; + @include media-from(lg) { + > * { + margin: 0 0.5em; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; } } } - input[name*="_text_before"] { - margin-right: 0.4em; + .preview { + flex-grow: 1; + + //// For correct 100% height of `iframe` + display: flex; + flex-direction: column; + + iframe { + display: block; + width: 100%; + //// It's like `height: 100%` for row flexbox + flex-basis: 100%; + height: 50vh; + margin: 0 auto 1em; + } } + } - .endless { - line-height: 0; + .timeline { + display: flex; + flex-direction: column; + align-items: center; + + &, + fieldset { + text-align: center; } - + .arrow { - margin-top: 0.4em; + .only-countup { + display: block; + margin: 0.8em 0 0.6em; } - } - fieldset.time-inputs { - display: inline-block; - vertical-align: middle; - margin: 0; - padding: 0; - border: none; + .arrow { + $color: #c5c5c5; - > label { - display: inline-block; - white-space: nowrap; + fill: $color; - + label { - margin-left: 0.4em; + line { + stroke: $color; } + } - input { - margin-left: 0; - margin-right: 0.2em; + > p { + color: $disabled_text_color; + font-size: 1.4em; + margin: 0.8em; + } - &[max="59"] { - width: 4em; - } + .endless { + vertical-align: middle; + font-size: 3.2em; + margin: 0; + color: #bbb; + } + + > .endless { + font-size: 3.6em; + line-height: 1.05em; + } + + > fieldset { + width: 100%; + + > label { + display: block; + margin: 0.2em 0 1em; + } - &:not([max]) { - width: 6em; + &.countup { + &:not(.display-time) { + .endless { + display: none; + } } } + + input[name*="_text_before"] { + margin-right: 0.4em; + } + + .endless { + line-height: 0; + } + + + .arrow { + margin-top: 0.4em; + } } - @include media-to(sm) { - display: inline-table; + fieldset.time-inputs { + display: inline-block; + vertical-align: middle; + margin: 0; + padding: 0; + border: none; > label { - display: table-row; + display: inline-block; + white-space: nowrap; + + + label { + margin-left: 0.4em; + } - > * { - display: table-cell; - padding-top: calc(var(--fieldset-inner-margin) / 2); - padding-bottom: calc(var(--fieldset-inner-margin) / 2); + input { + margin-left: 0; + margin-right: 0.2em; - &:first-of-type { - text-align: right; + &[max="59"] { + width: 4em; } - &:last-of-type { - text-align: left; + &:not([max]) { + width: 6em; } } } - } - } - fieldset:disabled { - display: none; + @include media-to(xxl) { + @include media-from(lg) { + display: inline-table; - & + .arrow { - display: none; - } - } + > label { + display: table-row; - &.only-countup { - .zero-time { - &, - + .arrow { - display: none; + > * { + display: table-cell; + padding-top: calc(var(--fieldset-inner-margin) / 2); + padding-bottom: calc(var(--fieldset-inner-margin) / 2); + + &:first-of-type { + text-align: right; + } + + &:last-of-type { + text-align: left; + } + } + } + } } } - fieldset.countup .endless { + fieldset:disabled { display: none; + + & + .arrow { + display: none; + } } - } - &:not(.only-countup) { - fieldset.countup { - + .arrow { + &.only-countup { + .zero-time { &, - + .endless { + + .arrow { display: none; } } - } - } - } - - fieldset { - &.name { - text-align: center; - - input { - width: 100%; - font-size: 1.2em; - text-align: center; - } - } - - &.link { - text-align: center; - } - label { - &.opacity { - > span > * { - vertical-align: middle; + fieldset.countup .endless { + display: none; } + } - input { - width: 100%; - max-width: 15em; + &:not(.only-countup) { + fieldset.countup { + + .arrow { + &, + + .endless { + display: none; + } + } } } } - } - - fieldset ~ button { - padding: 0.3em 0.8em; - font-size: 1.1em; - } - input[type="number"] { - text-align: right; - } - - &.delete { - margin: 0.5em auto; + &.delete { + margin: 0.5em auto; + } } } diff --git a/assets/styles/components/configurations/_load.scss b/assets/styles/components/configurations/_load.scss index ed1aa49..f1ff3e1 100644 --- a/assets/styles/components/configurations/_load.scss +++ b/assets/styles/components/configurations/_load.scss @@ -1,6 +1,4 @@ section.load { - width: 100%; - input { width: 100%; } diff --git a/assets/styles/lib/_breakpoints.scss b/assets/styles/lib/_breakpoints.scss index 5cfa06d..25168a3 100644 --- a/assets/styles/lib/_breakpoints.scss +++ b/assets/styles/lib/_breakpoints.scss @@ -8,7 +8,9 @@ $breakpoints: ( // Large devices (desktops, 992px and up) lg: 992px, // Extra large devices (large desktops, 1200px and up) - xl: 1200px + xl: 1200px, + // Extra extra large devices + xxl: 1400px ); @mixin media-to($breakpoint) { diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 6738942..ee4d783 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -36,9 +36,11 @@ html { cursor: not-allowed; } + $container_horizontal_padding: 15px; + .container { max-width: $container_max_width; - padding: 0 15px; + padding: 0 $container_horizontal_padding; margin: 0 auto; } @@ -290,10 +292,18 @@ html { > main { text-align: center; - > .container > section { - width: max-content; - max-width: 100%; - margin: 2em auto 4em; + &, + > .container { + > section { + width: max-content; + max-width: 100%; + margin: 2em auto 4em; + } + } + + > section { + padding-left: $container_horizontal_padding; + padding-right: $container_horizontal_padding; } } diff --git a/controllers/site/timer_controller.rb b/controllers/site/timer_controller.rb index 3cd9343..73d838c 100644 --- a/controllers/site/timer_controller.rb +++ b/controllers/site/timer_controller.rb @@ -4,14 +4,25 @@ module StreamTimer module Site ## Controller for timer page class TimerController < Site::Controller + include ST::ConfigurationsHelper + def index(key) - find_form_outcome = Forms::Configuration::Find.new(key: key).run + configuration = find_configuration key, check_user: false + + view :index, scope: transform_to_view_object(configuration) + end + + def demo + configuration = initialize_configuration_create_form.instance + + view :index, scope: transform_to_view_object(configuration) + end + + private - if find_form_outcome.success? && (configuration = find_form_outcome.result) - view :index, scope: transform_to_view_object(configuration) - else - halt 404 - end + ## For `configuration_params` + def current_user + nil end end end diff --git a/helpers/configurations_helper.rb b/helpers/configurations_helper.rb index cf03edb..b9bd3ff 100644 --- a/helpers/configurations_helper.rb +++ b/helpers/configurations_helper.rb @@ -23,14 +23,14 @@ def initialize_configuration_update_form(key) @form = Forms::Configuration::Update.new(configuration_params, found_configuration) end - def find_configuration(key) + def find_configuration(key, check_user: true) form_outcome = Forms::Configuration::Find.new(key: key).run found = form_outcome.result if form_outcome.success? - halt 404, view(:not_found) unless found + halt 404 unless found - halt 403, view(:forbidden) unless current_user.pk_equal? found.user + halt 403 if check_user && !current_user.pk_equal?(found.user) found end diff --git a/locales/en.yaml b/locales/en.yaml index f7131d9..4156568 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -61,6 +61,7 @@ site: hours: hours minutes: minutes seconds: seconds + preview: Preview label: user_key: User key diff --git a/views/site/public/configurations/_form.html.erb b/views/site/public/configurations/_form.html.erb index 7a48e00..1798329 100644 --- a/views/site/public/configurations/_form.html.erb +++ b/views/site/public/configurations/_form.html.erb @@ -20,223 +20,237 @@ -
- <%= t.label.configuration.name %> - - -
- - <% if (key = @form.instance.key) %> -
- <%= t.label.configuration.timer_link %> - - <% timer_link = url_to ST::Site::TimerController, :index, key: key %> - - -

- <%= - timer_link - %> -

- - - - -

- -

-
- <% end %> - -
- <%= t.site.configurations.form.timeline %> - - - - - - - - - - - - - - -
disabled<% end %>> - <%= t.label.configuration.text.countdown %> - - - - - - <%= render '_form/_time_inputs', countup: false %> - - - required - <% end %> - /> -
+
+
+ <%= t.label.configuration.name %> - <%= render '_form/_arrow' %> - -

- 00:00:00 -

- - <%= render '_form/_arrow' %> - -
- <%= t.label.configuration.text.countup %> - - - - - - - - <%= render '_form/_time_inputs', countup: true %> - - ∞ +
- <%= render '_form/_arrow' %> + <% if (key = @form.instance.key) %> +
+ <%= t.label.configuration.timer_link %> + + <% timer_link = url_to ST::Site::TimerController, :index, key: key %> + + +

+ <%= + timer_link + %> +

+ + + + +

+ +

+
+ <% end %> +
+ +
+
+
+ <%= t.site.configurations.form.timeline %> + + + + + + + + + +
+ checked<% end %> + /> + <%= t.site.configurations.form.only_countup %> + -
- <%= t.label.configuration.style.common %> + + -
- <%= t.label.configuration.style.background.common %> +
disabled<% end %>> + <%= t.label.configuration.text.countdown %> - + - -
-
- <%= t.label.configuration.style.font.common %> + <%= render '_form/_time_inputs', countup: false %> - +
+ + <%= render '_form/_arrow' %> + +

+ 00:00:00 +

+ + <%= render '_form/_arrow' %> + +
+ <%= t.label.configuration.text.countup %> + + + + - -
-
+ + <%= render '_form/_time_inputs', countup: true %> + + ∞ +
+ + <%= render '_form/_arrow' %> + +

+ ∞ +

+
+ +
+ <%= t.label.configuration.style.common %> + +
+ <%= t.label.configuration.style.background.common %> + + + + +
+ +
+ <%= t.label.configuration.style.font.common %> + + + + +
+
+ + +
+

<%= t.site.configurations.form.preview %>

+ + +
+ diff --git a/views/site/public/configurations/forbidden.html.erb b/views/site/public/configurations/errors/403.html.erb similarity index 100% rename from views/site/public/configurations/forbidden.html.erb rename to views/site/public/configurations/errors/403.html.erb diff --git a/views/site/public/configurations/not_found.html.erb b/views/site/public/configurations/errors/404.html.erb similarity index 100% rename from views/site/public/configurations/not_found.html.erb rename to views/site/public/configurations/errors/404.html.erb diff --git a/views/site/public/layout.html.erb b/views/site/public/layout.html.erb index e85f35a..f3ee55a 100644 --- a/views/site/public/layout.html.erb +++ b/views/site/public/layout.html.erb @@ -35,20 +35,17 @@
-
- <% - %i[error warning notice].each do |type| - flash[type].each do |text| - %> -
- <%= text %> -
- <% - end + <% + %i[error warning notice].each do |type| + flash[type].each do |text| + %> +
+ <%= text %> +
+ <% end - %> - - <%= yield %> + end + %> -
+ <%= yield %>
From f0928f69a45d8519142e1aebaa1499888f119768 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Tue, 15 Dec 2020 21:15:45 +0300 Subject: [PATCH 2/4] Replace hard coded breakpoints with custom (inline) `@media` --- assets/styles/components/_header.scss | 4 +- .../components/configurations/_form.scss | 33 ++++++++------- assets/styles/lib/_breakpoints.scss | 40 ------------------- assets/styles/main.scss | 1 - 4 files changed, 18 insertions(+), 60 deletions(-) delete mode 100644 assets/styles/lib/_breakpoints.scss diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss index 7f2ff9b..c4e8242 100644 --- a/assets/styles/components/_header.scss +++ b/assets/styles/components/_header.scss @@ -31,7 +31,7 @@ $mobile_header_logo_height: 42px; > h1 { margin: 0; - @include media-to(md) { + @media screen and (max-width: 800px) { display: none; } } @@ -49,7 +49,7 @@ $mobile_header_logo_height: 42px; font-weight: bold; } - @include media-to(sm) { + @media screen and (max-width: 600px) { padding: 0.4em; } } diff --git a/assets/styles/components/configurations/_form.scss b/assets/styles/components/configurations/_form.scss index 6fb2420..f823720 100644 --- a/assets/styles/components/configurations/_form.scss +++ b/assets/styles/components/configurations/_form.scss @@ -57,7 +57,7 @@ .fieldsets-with-preview { display: flex; - @include media-to(lg) { + @media screen and (max-width: 1400px) { flex-direction: column; align-items: center; @@ -66,7 +66,7 @@ } } - @include media-from(lg) { + @media screen and (min-width: 1000px) { > * { margin: 0 0.5em; @@ -199,25 +199,24 @@ } } - @include media-to(xxl) { - @include media-from(lg) { - display: inline-table; + @media screen and (max-width: 800px), + screen and (min-width: 1400px) and (max-width: 1600px) { + display: inline-table; - > label { - display: table-row; + > label { + display: table-row; - > * { - display: table-cell; - padding-top: calc(var(--fieldset-inner-margin) / 2); - padding-bottom: calc(var(--fieldset-inner-margin) / 2); + > * { + display: table-cell; + padding-top: calc(var(--fieldset-inner-margin) / 2); + padding-bottom: calc(var(--fieldset-inner-margin) / 2); - &:first-of-type { - text-align: right; - } + &:first-of-type { + text-align: right; + } - &:last-of-type { - text-align: left; - } + &:last-of-type { + text-align: left; } } } diff --git a/assets/styles/lib/_breakpoints.scss b/assets/styles/lib/_breakpoints.scss deleted file mode 100644 index 25168a3..0000000 --- a/assets/styles/lib/_breakpoints.scss +++ /dev/null @@ -1,40 +0,0 @@ -$breakpoints: ( - // Extra small devices (portrait phones, less than 576px) - // No media query since this is the default - // Small devices (landscape phones, 576px and up) - sm: 576px, - // Medium devices (tablets, 768px and up) - md: 768px, - // Large devices (desktops, 992px and up) - lg: 992px, - // Extra large devices (large desktops, 1200px and up) - xl: 1200px, - // Extra extra large devices - xxl: 1400px -); - -@mixin media-to($breakpoint) { - @media screen and (max-width: map-get($breakpoints, $breakpoint) - 1px) { - @content; - } -} - -@mixin media-from($breakpoint) { - @media screen and (min-width: map-get($breakpoints, $breakpoint)) { - @content; - } -} - -// @each $breakpoint, $size in $breakpoints { -// .show-to-#{$breakpoint} { -// @include media-from($breakpoint) { -// display: none; -// }; -// } -// -// .show-from-#{$breakpoint} { -// @include media-to($breakpoint) { -// display: none; -// }; -// } -// } diff --git a/assets/styles/main.scss b/assets/styles/main.scss index ee4d783..35eaaed 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -1,4 +1,3 @@ -@import 'lib/breakpoints'; @import 'lib/headings'; @import 'lib/clear_fix'; @import 'lib/inputs_with_types'; From f6f1a99e96b8ad27ecd22d6548ac179f5b73de34 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Tue, 15 Dec 2020 21:18:34 +0300 Subject: [PATCH 3/4] Add chess background for preview `iframe` To see the strength of opacity. --- .../styles/components/configurations/_form.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/assets/styles/components/configurations/_form.scss b/assets/styles/components/configurations/_form.scss index f823720..f4e11de 100644 --- a/assets/styles/components/configurations/_form.scss +++ b/assets/styles/components/configurations/_form.scss @@ -94,6 +94,21 @@ flex-basis: 100%; height: 50vh; margin: 0 auto 1em; + + $chess-color: #999; + $chess-size: 28; + + background-image: + linear-gradient(45deg, #{$chess-color} 25%, transparent 25%), + linear-gradient(-45deg, #{$chess-color} 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #{$chess-color} 75%), + linear-gradient(-45deg, transparent 75%, #{$chess-color} 75%); + background-size: #{$chess-size}px #{$chess-size}px; + background-position: + 0 0, + 0 #{$chess-size / 2}px, + #{$chess-size / 2}px -#{$chess-size / 2}px, + -#{$chess-size / 2}px 0; } } } From e1e608eb7fccee15b2b6c1ccec4dcf452023c878 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Sun, 4 Sep 2022 22:37:17 +0300 Subject: [PATCH 4/4] Resolve new offenses from SASS --- assets/styles/components/configurations/_form.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/assets/styles/components/configurations/_form.scss b/assets/styles/components/configurations/_form.scss index 8b3ecb9..79df6fe 100644 --- a/assets/styles/components/configurations/_form.scss +++ b/assets/styles/components/configurations/_form.scss @@ -90,25 +90,28 @@ iframe { display: block; width: 100%; + //// It's like `height: 100%` for row flexbox flex-basis: 100%; + height: 50vh; margin: 0 auto 1em; + //// Chess background sizes $chess-color: #999; - $chess-size: 28; + $chess-size: 28px; background-image: linear-gradient(45deg, #{$chess-color} 25%, transparent 25%), linear-gradient(-45deg, #{$chess-color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #{$chess-color} 75%), linear-gradient(-45deg, transparent 75%, #{$chess-color} 75%); - background-size: #{$chess-size}px #{$chess-size}px; + background-size: #{$chess-size} #{$chess-size}; background-position: 0 0, - 0 #{$chess-size / 2}px, - #{$chess-size / 2}px -#{$chess-size / 2}px, - -#{$chess-size / 2}px 0; + 0 calc($chess-size / 2), + calc($chess-size / 2) calc($chess-size / 2 * -1), + calc($chess-size / 2 * -1) 0; } } }