diff --git a/images-src/error-loading.svg b/images-src/error-loading.svg new file mode 100644 index 0000000..082e497 --- /dev/null +++ b/images-src/error-loading.svg @@ -0,0 +1,278 @@ + + + + diff --git a/images/error-loading.png b/images/error-loading.png new file mode 100644 index 0000000..4400d09 Binary files /dev/null and b/images/error-loading.png differ diff --git a/js/default.js b/js/default.js index e334f5e..0252a7b 100644 --- a/js/default.js +++ b/js/default.js @@ -43,6 +43,10 @@ //$('.navbar-collapse').collapse('hide'); }); + $('#status a.close-button').click(function () { + $(this).parent().slideUp(); + }); + // Callback for when the inital page has completely loaded (including images, etc..) $(window).load(function () { $.address.change(function(event) { @@ -120,8 +124,14 @@ type: 'GET', dataType: 'html', beforeSend: function (xhr, settings) { + // Remove loading error from page-content and any status message errors + $('#page-content').removeClass('loading-error'); + $('#status').slideUp('normal', function () { + $('#status').removeClass('error').removeClass('success'); + }); + // Add .loading to #page-content and #nav to facilitate a loading animation - $('#page-content, #nav').removeClass('loading-done').removeClass('loading-error').addClass('loading'); + $('#page-content, #nav').removeClass('loading-done').addClass('loading'); console.log('beforeSend a.menuitem'); }, @@ -153,12 +163,18 @@ }, 250); }, error: function (xhr, status) { - /* Remove .loading then add .loading-error to #page-content and #nav to - * stop the loading animation and facilitate a loading error animation + /* Remove .loading from #page-content and #nav to stop the loading + * animation. Then add .loading-error to #page-content if its the sites + * first load (#page-content has class .init). Finally, display an error + * message in #status. */ - $('#page-content, #nav').removeClass('loading').addClass('loading-error'); - - console.log('error retrieving page "' + page_href +'": ' + status); + $('#page-content, #nav').removeClass('loading'); + if ($('#page-content.init')[0]) { + $('#page-content').addClass('loading-error').html('
Error initially loading blog.rekahsoft.ca. Check the url! Given "' + page_href + '"
'); + } else { + $('#status > p.message').text('Error retrieving page "' + page_href +'": ' + status); + $('#status').addClass('error').slideDown(); + } } }); } diff --git a/post-offline.haml b/post-offline.haml deleted file mode 100644 index 1302f82..0000000 --- a/post-offline.haml +++ /dev/null @@ -1,7 +0,0 @@ -!!! 5 - -%html - %body - .container - .border-box - %h1 You are currently offline and this post is unaccesable diff --git a/sass/_header.sass b/sass/_header.sass index 38df35a..c66a899 100644 --- a/sass/_header.sass +++ b/sass/_header.sass @@ -45,9 +45,6 @@ #nav.loading @include animation-play-state(running) -#nav.loading-error - // do something - #nav-menu text-align: center margin-bottom: 0 @@ -99,3 +96,31 @@ @include transform(scale(1.1)) a.rss-icon:active @include transform(scale(0.9)) + +#status + display: none + border: 1px solid + border-top: none + border-bottom-right-radius: 5px + border-bottom-left-radius: 5px + background-color: rgb(146, 208, 240) + box-shadow: 2px 5px 5px 2px #888888 + padding: 8px + margin-bottom: 1.25em + + p.message + display: inline-block + text-align: center + margin-bottom: 0 + + a.close-button + display: inline-block + position: absolute + right: 10px + height: 25px + +#status.error + background-color: #FD6F6F + +#status.success + background-color: rgb(136, 211, 136) diff --git a/sass/default.sass b/sass/default.sass index ff48a48..b63cc6c 100644 --- a/sass/default.sass +++ b/sass/default.sass @@ -92,18 +92,17 @@ sub @include transition(opacity 1s ease-in 0.5s) opacity: 1 -// TODO: this needs work -#page-content.loading-error - //background: url('/images/error-loading.png') no-repeat 50% - //height: 200px +#page-content.loading-error p + background: #fd6f6f url('/images/error-loading.png') no-repeat 50% + height: 200px + font-weight: bold + line-height: 200px + text-align: center #page-content.init.loading background: url('/images/init-loading.gif') no-repeat 50% height: 125px -#page-content.init.loading-error - // do something - #footer-left padding-left: 1em diff --git a/src/site.hs b/src/site.hs index b5f8533..efabb72 100644 --- a/src/site.hs +++ b/src/site.hs @@ -138,29 +138,20 @@ main = do let randomNum = random stdGen :: (Int, StdGen) randomStr = show . abs . fst $ randomNum manifestStart = [ "CACHE MANIFEST" - , "# " ++ randomStr - , "" ] + , "# " ++ randomStr ] manifestCacheSingles = [ "/index.html" , "/default.css" ] paginatedPostsCache = take 2 $ map (\(n,_) -> "/pages/blog" ++ (show n) ++ ".html") $ toList $ paginateMap paginatedPosts tagsCache = concatMap (\(t,ids) -> take 2 $ ["/tags/" ++ t ++ show n ++ ".html" | n <- [1..length $ paginateEvery numPaginatePages ids]]) $ tagsMap tags manifestCacheFromIds = filter (not . null) $ fmap (maybe "" ("/"++)) manifestCacheRoutesMaybe manifestCache = manifestCacheFromIds ++ tagsCache ++ paginatedPostsCache - manifestFallback = ["" - , "FALLBACK:" - , "/posts/ /post-offline.html" - , "/tags/ /tags-offline.html" - , "" ] manifestNetwork = [ "NETWORK:" , "*" , "http://*" - , "https://*" - , "" ] - makeItem . unlines $ manifestStart ++ manifestCacheSingles ++ manifestCache ++ manifestFallback ++ manifestNetwork - - match "*-offline.haml" $ do - route $ setExtension "html" - compile $ getResourceBody >>= withItemBody (unixFilter "haml" []) + , "https://*" ] + makeItem . unlines $ manifestStart ++ [""] ++ + manifestCacheSingles ++ manifestCache ++ [""] ++ + manifestNetwork ++ [""] match "css/**" $ do route idRoute diff --git a/tags-offline.haml b/tags-offline.haml deleted file mode 100644 index 8550ebb..0000000 --- a/tags-offline.haml +++ /dev/null @@ -1,7 +0,0 @@ -!!! 5 - -%html - %body - .container - .border-box - %h1 You are currently offline and this tag page is unaccesable diff --git a/templates/default.haml b/templates/default.haml index cdee8b1..f7b5959 100644 --- a/templates/default.haml +++ b/templates/default.haml @@ -4,7 +4,6 @@ /[if IE 8] %html.en(manifest='manifest.appcache') - // Work in progress on application cache; %head / Basic Page Needs %meta(charset="utf-8") @@ -39,6 +38,10 @@ $partial("templates/partials/logo-banner.haml")$ $partial("templates/partials/nav.haml")$ + #status.container + %p.message + %a.close-button Close + #page-content.init.loading %noscript #noscript-alert.container