Fixed #20.

* Added a <noscript> notification. * Added a cookie support notification above the login form. * Moved error notification area to be visible over the search header.
webistor · Jun 30, 2014 · b5d59d8 · Avaq · Oct 6, 2014 · b5d59d8
1 parent 6aab51a
commit b5d59d8
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -56,3 +56,4 @@ be able to test the output at `localhost:3333`.
 * [Chaplin](http://docs.chaplinjs.org/): Framework used.
 * [Backbone](http://backbonejs.org/): Framework used by Chaplin.
 * [HandleBars](http://handlebarsjs.com/): Template rendering engine used.
+* [Cookies](https://github.com/ScottHamper/Cookies): Cookies.
diff --git a/app/assets/index.html b/app/assets/index.html
@@ -31,9 +31,9 @@
   <meta name="author" content="Tuxion" />
   <meta name="robots" content="index, follow" />
   <meta name="revisit-after" content="15 days" />
-  
+
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
-  
+
   <!-- Standard HTML SEO -->
   <meta http-equiv="content-language" content="en-US" />
   <meta name="description" content="Be smart. Save the information you may need later on, with Webistor." />
@@ -66,5 +66,6 @@
 
 </head>
 <body>
+<noscript>Welcome to Webistor. JavaScript needs to be enabled for this application to work.</noscript>
 </body>
 </html>
diff --git a/app/views/error-view.coffee b/app/views/error-view.coffee
@@ -19,7 +19,9 @@ module.exports = class ErrorView extends View
 
   showError: (error) ->
     @$el.show()
-    @$el.append @errorTemplate error
+    if error.message not in @errors
+      @$el.append @errorTemplate error
+      @errors.push error.message
     @hideAfter 10000
 
   hideAfter: (ms) ->
@@ -32,3 +34,4 @@ module.exports = class ErrorView extends View
     @hideTimeout = null
     @$el.hide()
     @$el.empty()
+    @errors = []
diff --git a/app/views/history/styles/entry.styl b/app/views/history/styles/entry.styl
@@ -1,16 +1,16 @@
 @import 'nib'
 
 .entry
-  padding:30px 30px 30px 30px;
+  padding:30px 30px 30px 30px
   border: 1px solid #dfe4e6
-  margin-bottom:28px;
-  display:block;
-  position:relative;
+  margin-bottom:28px
+  display:block
+  position:relative
   min-width:320px
   overflow:hidden
 
   .title
-    font-size: 1.04rem;
+    font-size: 1.04rem
     font-family:'ProximaNova SemiBold', sans-serif
     margin-bottom:30px
 
@@ -23,7 +23,7 @@
     font-size:14px
 
     .first-line-toggler
-      height:28px;
+      height:28px
       overflow-y:hidden
 
   .tags
@@ -32,7 +32,7 @@
 
     .tag
       display:inline-block
-      color:#67737a;
+      color:#67737a
       margin-top:5px
       margin-right:15px
 
@@ -111,7 +111,7 @@
 
   //.entry:hover
   &:hover, &.active
-    border-color:#c5ced4;
+    border-color:#c5ced4
 
     // h3.title a
     //   color:#ec7963
@@ -137,12 +137,12 @@
 
     .ctrlHolder
       position:relative
-      margin-bottom: 13px;
-      border-bottom: 1px solid #dfe4e6;
+      margin-bottom: 13px
+      border-bottom: 1px solid #dfe4e6
 
       &:last-child
-        margin-top:15px;
-        margin-bottom: 0;
+        margin-top:15px
+        margin-bottom: 0
 
       &::before
         top:2px
@@ -161,14 +161,14 @@
 
       input[type="text"], textarea
         padding-bottom:15px
-        width: 100%;
-        font-weight: 500;
-        border:0;
-        border:none;
+        width: 100%
+        font-weight: 500
+        border:0
+        border:none
         min-height:30px
-        /*border-radius: 3px;
-        -moz-border-radius: 3px;
-        -webkit-border-radius: 3px;
+        /*border-radius: 3px
+        -moz-border-radius: 3px
+        -webkit-border-radius: 3px
         */
 
       textarea
@@ -177,7 +177,7 @@
         padding-bottom:5px
 
       label
-        margin-right: 30px;
+        margin-right: 30px
 
   &:hover
     .entry-actions a

diff --git a/app/views/start/login-page-view.coffee b/app/views/start/login-page-view.coffee
@@ -10,6 +10,11 @@ module.exports = class LoginPageView extends PageView
   events:
     'submit .login-form': 'doLogin'
 
+  getTemplateData: ->
+    data = super
+    data.nocookies = not Cookies.enabled
+    return data
+
   doLogin: (e) ->
     e?.preventDefault()
 

diff --git a/app/views/start/styles/login.styl b/app/views/start/styles/login.styl
@@ -0,0 +1,4 @@
+.login-page
+
+  p
+    width: 430px
diff --git a/app/views/start/templates/login.hbs b/app/views/start/templates/login.hbs
@@ -4,7 +4,21 @@
     <a class="invite" href="{{url 'start#invite'}}">Request an invite</a>
   </div>
 </div>
+
 <h2>Do log in, we have cookies!</h2>
+
+{{#if this.nocookies}}
+<p>
+  But it looks like you don't. Please ensure that cookies are enabled past this point.
+  Cookies are required to keep you logged in during this session.
+</p>
+
+<p>
+  We don't use any of the evil kind.
+  You are welcome to read more about it in our <a href="/policy">privacy policy</a>.
+</p>
+{{/if}}
+
 <form class="login-form" method="post" action="#">
   <div class="inner">
     <div class="ctrlHolder">

diff --git a/app/views/styles/error.styl b/app/views/styles/error.styl
@@ -3,6 +3,7 @@
   top:0
   left:0
   width:100%
+  z-index:6
 
   #error
 

diff --git a/bower.json b/bower.json
@@ -10,7 +10,8 @@
     "normalize-css": ">=2.1.2",
     "h5bp-helpers": ">=0.1.0",
     "font-awesome": ">=3.2.1",
-    "backbone.stickit": "*"
+    "backbone.stickit": "*",
+    "cookies-js": "~0.4.0"
   },
   "overrides": {
     "backbone": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
       top:0
       left:0
       width:100%
+      z-index:6
       #error
@@ Expand Down @@