diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee index 1da3c917..979ea353 100644 --- a/assets/javascripts/app/app.coffee +++ b/assets/javascripts/app/app.coffee @@ -10,7 +10,6 @@ init: -> try @initErrorTracking() catch return unless @browserCheck() - @showLoading() @el = $('._app') @localStorage = new LocalStorageStore @@ -38,8 +37,8 @@ browserCheck: -> return true if @isSupportedBrowser() - document.body.className = '' document.body.innerHTML = app.templates.unsupportedBrowser + @hideLoadingScreen() false initErrorTracking: -> @@ -103,7 +102,7 @@ @initDoc(doc) for doc in @docs.all() @trigger 'ready' @router.start() - @hideLoading() + @hideLoadingScreen() setTimeout => @welcomeBack() unless @doc @removeEvent 'ready bootError' @@ -181,15 +180,9 @@ new app.views.Tip(tip) return - showLoading: -> - document.body.classList.remove '_noscript' - document.body.classList.add '_loading' - return - - hideLoading: -> + hideLoadingScreen: -> document.body.classList.add '_overlay-scrollbars' if $.overlayScrollbarsEnabled() - document.body.classList.remove '_booting' - document.body.classList.remove '_loading' + document.documentElement.classList.remove '_booting' return indexHost: -> @@ -199,7 +192,7 @@ onBootError: (args...) -> @trigger 'bootError' - @hideLoading() + @hideLoadingScreen() return onQuotaExceeded: -> @@ -221,7 +214,7 @@ @onInjectionError() else if @isAppError args... @previousErrorHandler? args... - @hideLoading() + @hideLoadingScreen() @errorNotif or= new app.views.Notif 'Error' @errorNotif.show() return diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss index 0debd669..2295de19 100644 --- a/assets/stylesheets/components/_app.scss +++ b/assets/stylesheets/components/_app.scss @@ -3,13 +3,11 @@ z-index: 1; height: 100%; overflow: hidden; - background: $contentBackground; -webkit-transition: opacity .2s; transition: opacity .2s; @extend %border-box; - ._booting > & { opacity: 0; } - ._noscript > & { display: none; } + ._booting & { opacity: 0; } ._max-width & { margin: 0 auto; @@ -17,29 +15,3 @@ box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder; } } - -._booting { - opacity: 0; - - &._loading, &._loading:before { opacity: 1; } - - &:before { - content: 'Loading\2026'; - position: absolute; - top: 50%; - left: 0; - right: 0; - line-height: 1; - margin-top: -.6em; - font-size: 4rem; - font-weight: 300; - letter-spacing: -.125rem; - color: $loadingText; - text-align: center; - opacity: 0; - -webkit-transition: opacity .1s .3s; - transition: opacity .1s .3s; - } -} - -._noscript { opacity: 1; } diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index f1ebe917..0d8021f8 100644 --- a/assets/stylesheets/components/_content.scss +++ b/assets/stylesheets/components/_content.scss @@ -43,9 +43,24 @@ } } +%loading { + content: 'Loading\2026'; + position: absolute; + top: 50%; + left: 0; + right: 0; + line-height: 1; + margin-top: -.6em; + font-size: 4rem; + font-weight: 300; + letter-spacing: -.125rem; + color: $loadingText; + text-align: center; + cursor: default; +} + ._content-loading:before { - opacity: 1; - @extend ._booting:before; + @extend %loading; } // @@ -54,9 +69,7 @@ ._splash-title { color: $splashText; - cursor: default; - opacity: 1; - @extend ._booting:before, %user-select-none; + @extend %loading, %user-select-none; } // diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index 0663b4a2..ddb7c252 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/assets/stylesheets/components/_mobile.scss @@ -4,7 +4,6 @@ ._mobile { font-size: 100%; - background: $contentBackground; ._hide-on-mobile { display: none; } @@ -12,7 +11,9 @@ body { -ms-overflow-style: -ms-autohiding-scrollbar; } - ._app, ._content { overflow: visible; } + &:not(._booting) { + ._app, ._content { overflow: visible; } + } ._container { margin: 0; @@ -28,7 +29,7 @@ &:before { content: none; } } - ._booting:before, ._content-loading:before { font-size: 3rem; } + ._content-loading:before, ._splash-title { font-size: 3rem; } ._header { position: fixed; } diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index 37b5bc8c..46fadcc1 100644 --- a/assets/stylesheets/global/_base.scss +++ b/assets/stylesheets/global/_base.scss @@ -1,7 +1,7 @@ html { height: 100%; font-size: 100%; - background: $documentBackground; + background: $contentBackground; @media #{$mediumScreen} { font-size: 93.75%; } } diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss index 35db8ebf..002e3be6 100644 --- a/assets/stylesheets/global/_variables-dark.scss +++ b/assets/stylesheets/global/_variables-dark.scss @@ -11,7 +11,6 @@ $sidebarWidth: 20rem; $sidebarMediumWidth: 16rem; $contentBackground: #33373a; -$documentBackground: $contentBackground; $textColor: #cbd0d0; $textColorLight: #9da5ad; diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index 0c9766d4..05426f02 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/assets/stylesheets/global/_variables.scss @@ -11,7 +11,6 @@ $sidebarWidth: 20rem; $sidebarMediumWidth: 16rem; $contentBackground: #fff; -$documentBackground: #fafafa; $textColor: #333; $textColorLight: #666; diff --git a/test/app_test.rb b/test/app_test.rb index 92de6170..5401e3ae 100644 --- a/test/app_test.rb +++ b/test/app_test.rb @@ -43,7 +43,7 @@ class AppTest < MiniTest::Spec it "sets layout from cookie" do set_cookie('layout=foo') get '/' - assert_includes last_response.body, '
' + assert_includes last_response.body, '' end end diff --git a/views/index.erb b/views/index.erb index 31304e8c..1912885e 100644 --- a/views/index.erb +++ b/views/index.erb @@ -1,5 +1,5 @@ - prefix="og: http://ogp.me/ns#" lang="en"> + prefix="og: http://ogp.me/ns#" lang="en" class="_booting"> @@ -31,11 +31,12 @@ - <%= javascript_tag 'application', asset_host: false %> - <%= javascript_tag 'docs' %><% unless App.production? %> - <%= javascript_tag 'debug' %><% end %> -"> +> -<%= erb :app %> +<%= erb :app -%> +<%= javascript_tag 'application', asset_host: false %> +<%= javascript_tag 'docs' %><% unless App.production? %> +<%= javascript_tag 'debug' %><% end %> + diff --git a/views/other.erb b/views/other.erb index 2b24c752..c0466cec 100644 --- a/views/other.erb +++ b/views/other.erb @@ -1,5 +1,5 @@ - + @@ -12,10 +12,11 @@ - <%= javascript_tag 'application', asset_host: false %><% unless App.production? %> - <%= javascript_tag 'debug' %><% end %> -" data-doc="<%= CGI::escape_html @doc.to_json %>"> + data-doc="<%= CGI::escape_html @doc.to_json %>"> -<%= erb :app %> +<%= erb :app -%> +<%= javascript_tag 'application', asset_host: false %><% unless App.production? %> +<%= javascript_tag 'debug' %><% end %> +