diff --git a/assets/styles/_sizes.scss b/assets/styles/_sizes.scss index 7fd3ccd..32b5fe0 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/_header.scss b/assets/styles/components/_header.scss index 92e3e10..e5863c3 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/_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 32dc83f..79df6fe 100644 --- a/assets/styles/components/configurations/_form.scss +++ b/assets/styles/components/configurations/_form.scss @@ -1,215 +1,290 @@ -.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; + + @media screen and (max-width: 1400px) { + flex-direction: column; + align-items: center; + + .preview { + align-self: stretch; + } } - &.countup { - &:not(.display-time) { - .endless { - display: none; + @media screen and (min-width: 1000px) { + > * { + margin: 0 0.5em; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; } } } - input[name*="_text_before"] { - vertical-align: middle; - 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; + + //// Chess background sizes + $chess-color: #999; + $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} #{$chess-size}; + background-position: + 0 0, + 0 calc($chess-size / 2), + calc($chess-size / 2) calc($chess-size / 2 * -1), + calc($chess-size / 2 * -1) 0; + } + } + } + + .timeline { + display: flex; + flex-direction: column; + align-items: center; + + &, + fieldset { + text-align: center; + } + + .only-countup { + display: block; + margin: 0.8em 0 0.6em; + } + + .arrow { + $color: #c5c5c5; + + fill: $color; + + line { + stroke: $color; + } + } + + > p { + color: $disabled-text-color; + font-size: 1.4em; + margin: 0.8em; } input[name*="countdown_text_before"] { - @include media-to(md) { + @media screen and (max-width: 800px) { margin-top: 0.4em; margin-bottom: 0.4em; } } .endless { - line-height: 0; + vertical-align: middle; + font-size: 3.2em; + margin: 0; + color: #bbb; } - + .arrow { - margin-top: 0.4em; + > .endless { + font-size: 3.6em; + line-height: 1.05em; } - } - fieldset.time-inputs { - display: inline-block; - vertical-align: middle; - margin: 0; - padding: 0; - border: none; + > fieldset { + width: 100%; - > label { - display: inline-block; - white-space: nowrap; + > label { + display: block; + margin: 0.2em 0 1em; + } - + label { - margin-left: 0.4em; + &.countup { + &:not(.display-time) { + .endless { + display: none; + } + } } - input { - margin-left: 0; - margin-right: 0.2em; + input[name*="_text_before"] { + vertical-align: middle; + margin-right: 0.4em; + } - &[max="59"] { - width: 4em; - } + .endless { + line-height: 0; + } - &:not([max]) { - width: 6em; - } + + .arrow { + margin-top: 0.4em; } } - @include media-to(md) { - 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: 0.2em; - padding-bottom: 0.2em; + 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; + @media screen and (max-width: 800px), + screen and (min-width: 1400px) and (max-width: 1600px) { + display: inline-table; - & + .arrow { - display: none; - } - } + > label { + display: table-row; - &.only-countup { - .zero-time { - &, - + .arrow { - display: none; + > * { + display: table-cell; + padding-top: 0.2em; + padding-bottom: 0.2em; + + &: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; + } } p.hint { 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 deleted file mode 100644 index 1f6b32c..0000000 --- a/assets/styles/lib/_breakpoints.scss +++ /dev/null @@ -1,41 +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 -); - -@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; - } -} - -// https://github.com/stylelint-scss/stylelint-scss/pull/607 -// stylelint-disable scss/comment-no-empty -// @each $breakpoint, $size in $breakpoints { -// .show-to-#{$breakpoint} { -// @include media-from($breakpoint) { -// display: none; -// }; -// } -// -// .show-from-#{$breakpoint} { -// @include media-to($breakpoint) { -// display: none; -// }; -// } -// } -// stylelint-enable scss/comment-no-empty diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 7c78686..7a53ba0 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -1,7 +1,6 @@ @use "sass:color"; @use "sass:list"; -@import "lib/breakpoints"; @import "lib/headings"; @import "lib/clear-fix"; @import "lib/inputs-with-types"; @@ -40,9 +39,12 @@ html { cursor: not-allowed; } + // Base horizontal padding for containers + $container-horizontal-padding: 15px; + .container { max-width: $container-max-width; - padding: 0 15px; + padding: 0 $container-horizontal-padding; margin: 0 auto; } @@ -293,10 +295,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 904ee13..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:).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 71b036a..80a94d2 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:).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 463e2ed..288fca6 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -63,6 +63,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 e06d268..bc8fc24 100644 --- a/views/site/public/configurations/_form.html.erb +++ b/views/site/public/configurations/_form.html.erb @@ -20,231 +20,245 @@ -
- <%= 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.site.configurations.form.hint_about_space_in_text %> -

-
+
+
+ <%= t.label.configuration.name %> - <%= render '_form/_arrow' %> - -

- 00:00:00 -

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

- <%= t.site.configurations.form.hint_about_space_in_text %> -

+
- <%= 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 %> + + ∞ + +

+ <%= t.site.configurations.form.hint_about_space_in_text %> +

+
+ + <%= 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 %>