wip errors pages, updated material icons to latest release

misago/frontend/misago/components/loaders.js

@@ -14,7 +14,7 @@
 
   Misago.LoadingPage = {
     view: function(ctrl, _) {
-      return m('.page.page-loading',
+      return m('.page.loading-page',
         _.component(Misago.Loader)
       );
     }

misago/frontend/misago/routes/errors.js

@@ -1,16 +1,39 @@
 (function (Misago) {
   'use strict';
 
+  var errorPage = function(error) {
+    var error_message = [
+      m('p.lead', error.message)
+    ];
+
+    if (error.help) {
+      error_message.push(m('p.help', error.help));
+    }
+
+    return m('.page.error-page.error-' + error.code + '-page',
+      m('.container',
+        m('.error-panel', [
+          m('.error-icon',
+            m('span.material-icon', error.icon)
+          ),
+          m('.error-message', error_message)
+        ])
+      )
+    );
+  };
+
   Misago.Error403Route = Misago.route({
     controller: function() {
       this.container.setTitle(gettext('Page not available'));
     },
     error: null,
-    view: function(ctrl) {
-      return m('.container', [
-        m('h1', 'Error 403!'),
-        m('p.lead', this.error || 'No perm to see this page')
-      ]);
+    view: function() {
+      return m('.page.error-page.error-403-page',
+        m('.container', [
+          m('h1', 'Error 403!'),
+          m('p.lead', this.error || 'No perm to see this page')
+        ])
+      );
     }
   });
 
@@ -18,11 +41,13 @@
     controller: function() {
       this.container.setTitle(gettext('Page not found'));
     },
-    view: function(ctrl) {
-      return m('.container', [
-        m('h1', 'Error 404!'),
-        m('p.lead', 'Requested page could not be found.')
-      ]);
+    view: function() {
+      return errorPage({
+        code: 404,
+        icon: 'gesture',
+        message: gettext("Requested page could not be found."),
+        help: gettext("The link you clicked was incorrect or the page has been moved or deleted.")
+      });
     }
   });
 
@@ -30,11 +55,26 @@
     controller: function() {
       this.container.setTitle(gettext('Application error occured'));
     },
-    view: function(ctrl) {
-      return m('.container', [
-        m('h1', 'Error 500!'),
-        m('p.lead', 'Application has derped.')
-      ]);
+    view: function() {
+      return errorPage({
+        code: 500,
+        icon: 'error_outline',
+        message: gettext("Requested page could not be displayed due to an error.")
+      });
+    }
+  });
+
+  Misago.Error0Route = Misago.route({
+    controller: function() {
+      this.container.setTitle(gettext('Lost connection to application'));
+    },
+    view: function() {
+      return errorPage({
+        code: 500,
+        icon: 'sync_problem',
+        message: gettext("Could not connect to application."),
+        help: gettext("This may be caused by problems with your connection or application server. Please check your inter connection and refresh page if problem persists.")
+      });
     }
   });
 }(Misago.prototype));

misago/frontend/misago/routes/legal.js

@@ -41,7 +41,7 @@
       view: function() {
         var _ = this.container;
 
-        return m('.page.page-legal.page-legal-' + dashedTypeName, [
+        return m('.page.legal-page.' + dashedTypeName + '-page', [
           _.component(Misago.PageHeader, {title: this.vm.title}),
           m('.container',
             m.trust(this.vm.body)

misago/frontend/misago/services/ajax.js

@@ -5,7 +5,10 @@
     var cookieRegex = new RegExp(_.context.CSRF_COOKIE_NAME + '\=([^;]*)');
     this.csrfToken = Misago.get(document.cookie.match(cookieRegex), 0).split('=')[1];
 
-    // list of gets underway
+    /*
+      List of GETs underway
+      We are limiting number of GETs to API to 1 per url
+    */
     var runningGets = {};
 
     this.ajax = function(method, url, data, progress) {

misago/frontend/misago/services/router.js

@@ -132,7 +132,15 @@
       m.mount(this.fixture, routedComponent(Misago.Error500Route));
     };
 
+    this.error0 = function() {
+      m.mount(this.fixture, routedComponent(Misago.Error0Route));
+    };
+
     this.errorPage = function(error) {
+      if (error.status === 0) {
+        this.error0();
+      }
+
       if (error.status === 500) {
         this.error500();
       }

misago/frontend/misago/style/misago.less

@@ -47,7 +47,10 @@
 // Components
 @import "misago/loaders.less";
 @import "misago/navbar.less";
+@import "misago/material-icons.less";
 
+// Pages
+@import "misago/error-pages.less";
 
 // --------------------------------------------------
 // Flavor

misago/frontend/misago/style/misago/error-pages.less

@@ -0,0 +1,38 @@
+//
+// Error Pages
+// --------------------------------------------------
+
+
+.error-page {}
+
+
+// Small displays
+@media screen and (max-width: @screen-sm-max) {
+  .error-page {
+
+  }
+}
+
+
+// Full displays
+@media screen and (min-width: @screen-md-min) {
+  .error-page {
+    .error-panel {
+      margin: @line-height-computed * 3 auto;
+      max-width: @screen-md-max * .65;
+      overflow: auto;
+    }
+
+    .error-icon {
+      float: left;
+
+      .material-icon {
+        font-size: @error-page-icon-size;
+      }
+    }
+
+    .error-message {
+      margin-left: @error-page-icon-size + @line-height-computed;
+    }
+  }
+}

misago/frontend/misago/style/misago/material-icons.less

@@ -0,0 +1,47 @@
+//
+// Material Icons
+// --------------------------------------------------
+
+
+/*
+Just a note about using Material Icons
+*/
+
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
+       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
+       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+
+.material-icon {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-align: center;
+  text-transform: none;
+  letter-spacing: normal;
+  vertical-align: middle;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

misago/frontend/misago/style/misago/variables.less

@@ -13,3 +13,11 @@
 @loader-size: 80px;
 //** Loader color
 @loader-color: @gray-light;
+
+
+//== Error pages
+//
+//## Desktop style
+@error-page-icon-size: 80px;
+
+//## Mobile style

misago/frontend/static/fonts/README.md

@@ -1,21 +1,11 @@
-# Material design icons
+The recommended way to use the Material Icons font is hosted by Google Fonts,
+available here:
 
-Material design icons are the official [icon set](http://www.google.com/design/spec/style/icons.html#icons-system-icons) from Google that are designed under the [material design guidelines](http://www.google.com/design/spec).
+```
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+```
 
-## Getting Started
+Read more in our full usage guide:
+http://google.github.io/material-design-icons/#icon-font-for-the-web
 
-Read the [developer guide](http://google.github.io/material-design-icons/) on how to use the material design icons in your project.
-
-## Using sprite sheets
-
-In `css-sprite` and `svg-sprite` are pre-generated sprite sheets. Instructions for using them are in the [sprites documentation](https://github.com/google/material-design-icons/tree/master/sprites).
-
-## Polymer icons
-
-If you wish to use the icon set with Polymer, we recommend consuming them via the [`<core-icons>`](https://github.com/Polymer/core-icons) element.
-
-## License
-
-We have made these icons available for you to incorporate them into your products under the [Creative Common Attribution 4.0 International License (CC-BY 4.0)](http://creativecommons.org/licenses/by/4.0/). Feel free to remix and re-share these icons and documentation in your
-products.  We'd love attribution in your app's *about* screen, but it's not required. The only thing we ask is that you not re-sell
-the icons themselves.