From e3aff3ab6ebcbf86de2dfdade0c25d8e151e5c8e Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <mayhemydg@gmail.com>
Date: Mon, 20 Jun 2011 02:00:44 +0200
Subject: [PATCH] firstrun: CSS arrows, changed the close behaviour.

---
 4chan_x.user.js | 17 +++++---------
 script.coffee   | 61 +++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index 19e138f72..18c997b6b 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -2475,24 +2475,19 @@
   };
   firstRun = {
     init: function() {
-      var a, aa, css, dialog, style, _i, _len, _results;
-      css = "      #navtopr, #navbotr {        font-size: 3em;        position: relative;        z-index: 99999;      }    ";
+      var css, dialog, style;
+      css = "      #navtopr, #navbotr {        position: relative;      }      #navtopr::before {        content: '';        height: 50px;        width: 100px;        background: red;        -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);        -o-transform: rotate(-45deg);        -webkit-transform-origin: 100% 200%;        -moz-transform-origin: 100% 200%;        -o-transform-origin: 100% 200%;        position: absolute;        top: 100%;        right: 100%;        z-index: 999;      }      #navtopr::after {        content: '';        border-top: 100px solid red;        border-left: 100px solid transparent;        position: absolute;        top: 100%;        right: 100%;        z-index: 999;      }      #navbotr::before {        content: '';        height: 50px;        width: 100px;        background: red;        -webkit-transform: rotate(45deg);        -moz-transform: rotate(45deg);        -o-transform: rotate(45deg);        -webkit-transform-origin: 100% -100%;        -moz-transform-origin: 100% -100%;        -o-transform-origin: 100% -100%;        position: absolute;        bottom: 100%;        right: 100%;        z-index: 999;      }      #navbotr::after {        content: '';        border-bottom: 100px solid red;        border-left: 100px solid transparent;        position: absolute;        bottom: 100%;        right: 100%;        z-index: 999;      }    ";
       style = $.addStyle(css);
       style.className = 'firstrun';
       dialog = $.el('div', {
         id: 'overlay',
-        innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> link for options.<br>There is another link at the bottom of the page.</div></div>"
+        className: 'firstrun',
+        innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> links for options.<br>There is one on top of and the other at the bottom of the page.</div></div>"
       });
       $.append(d.body, dialog);
-      aa = $$('#navtopr a, navbotr a');
-      _results = [];
-      for (_i = 0, _len = aa.length; _i < _len; _i++) {
-        a = aa[_i];
-        _results.push($.bind(a, 'click', firstRun.click));
-      }
-      return _results;
+      return $.bind(dialog, 'click', firstRun.close);
     },
-    click: function() {
+    close: function() {
       $.setValue('firstrun', true);
       $.rm($('style.firstrun', d.head));
       return $.rm($('#overlay'));
diff --git a/script.coffee b/script.coffee
index 00bc4346a..3985dc00d 100644
--- a/script.coffee
+++ b/script.coffee
@@ -1853,9 +1853,57 @@ firstRun =
   init: ->
     css = "
       #navtopr, #navbotr {
-        font-size: 3em;
         position: relative;
-        z-index: 99999;
+      }
+      #navtopr::before {
+        content: '';
+        height: 50px;
+        width: 100px;
+        background: red;
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        -webkit-transform-origin: 100% 200%;
+        -moz-transform-origin: 100% 200%;
+        -o-transform-origin: 100% 200%;
+        position: absolute;
+        top: 100%;
+        right: 100%;
+        z-index: 999;
+      }
+      #navtopr::after {
+        content: '';
+        border-top: 100px solid red;
+        border-left: 100px solid transparent;
+        position: absolute;
+        top: 100%;
+        right: 100%;
+        z-index: 999;
+      }
+      #navbotr::before {
+        content: '';
+        height: 50px;
+        width: 100px;
+        background: red;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        -webkit-transform-origin: 100% -100%;
+        -moz-transform-origin: 100% -100%;
+        -o-transform-origin: 100% -100%;
+        position: absolute;
+        bottom: 100%;
+        right: 100%;
+        z-index: 999;
+      }
+      #navbotr::after {
+        content: '';
+        border-bottom: 100px solid red;
+        border-left: 100px solid transparent;
+        position: absolute;
+        bottom: 100%;
+        right: 100%;
+        z-index: 999;
       }
     "
     style = $.addStyle css
@@ -1863,14 +1911,13 @@ firstRun =
 
     dialog = $.el 'div',
       id: 'overlay'
-      innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> link for options.<br>There is another link at the bottom of the page.</div></div>"
+      className: 'firstrun'
+      innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> links for options.<br>There is one on top of and the other at the bottom of the page.</div></div>"
     $.append d.body, dialog
 
-    aa = $$ '#navtopr a, navbotr a'
-    for a in aa
-      $.bind a, 'click', firstRun.click
+    $.bind dialog, 'click', firstRun.close
 
-  click: ->
+  close: ->
     $.setValue 'firstrun', true
     $.rm $ 'style.firstrun', d.head
     $.rm $ '#overlay'