several layout improvements + js with a listener extended

src-cljs/main.cljs

@@ -1,6 +1,27 @@
 (ns NoteHub.main
-  (:require [clojure.browser.dom :as dom]))
+  (:require [clojure.browser.dom :as dom]
+            [goog.dom :as gdom]
+            [goog.style :as style]
+            [goog.dom.classes :as classes]
+            [clojure.browser.event :as event]
+            [goog.editor.focus :as focus]))
 
-(if-let [write-textarea (dom/get-element "write-textarea")]
+(defn log [obj]
-  (dom/append write-textarea "test"))
+  (.log js/console obj))
+
+(defn $ [selector]
+  (let [type (first selector) name (apply str (rest selector))]
+    (cond (= \# type) (dom/get-element name)
+          (= \. type) (gdom/getElementByClass name))))
+
+(if-let [write-textarea ($ "#write-textarea")]
+  (focus/focusInputField write-textarea))
+
+(defn show-form-buttons []
+  (style/setStyle ($ ".form-button") "display" "block"))
+
+(event/listen ($ "#write-textarea")
+              :keypress
+              (fn [e]
+                (show-form-buttons)))
 

src/NoteHub/views/common.clj

@@ -18,16 +18,17 @@
                         "Arial"
                         "'Lucida Grande'"
                         "sans-serif"]))
-      (rule "button"
+      (rule ".button"
-            :cursor :hand
             :box-shadow [0 :2px :5px :#aaa]
-            :margin-top :1em
+            :text-decoration :none
             :font-size :1.5em
             :background :#0a2
             :color :white
             :border :none
             :border-radius :10px
-            :padding :10px)
+            :padding :10px
+            (rule "&:hover"
+                  :background :#0b2))
       (rule "html, body"
             :color :#333
             :margin 0
@@ -48,6 +49,13 @@
             :font-size :1.3em
             :border :none
             :height :600px)
+      (rule ".form-button"
+            :display :none
+            :cursor :pointer
+            :border [:1px :solid]
+            :background :white
+            :font-size :0.8em
+            :opacity :0.8)
       (rule ".central-body"
             :margin-top :5em
             :margin-bottom :5em
@@ -55,10 +63,10 @@
             :margin-right "auto")
       (rule "h1, h2, h3, h4" :font-family "'Noticia Text'")))
 
-(defpartial layout [& content]
+(defpartial layout [title & content]
             (html5
               [:head
-               [:title "NoteHub"]
+               [:title "NoteHub - " title]
                [:link {:href "http://fonts.googleapis.com/css?family=Noticia+Text:400,700" 
                        :rel "stylesheet"
                        :type "text/css"}]

src/NoteHub/views/pages.clj

@@ -1,18 +1,20 @@
 (ns NoteHub.views.pages
   (:require [NoteHub.views.common :as common])
   (:use [noir.core :only [defpage]]
-        [hiccup.core :only [html]]
         [hiccup.form]))
 
 (defpage "/" []
-         (common/layout
+         (common/layout "Free Markdown Hosting"
            [:div#hero
             [:h1 "NoteHub"]
             [:h2.helvetica-neue "Free hosting for markdown pages."]
-            [:button.helvetica-neue {:onclick "window.location='/new'"} "New Page"]]))
+            [:br]
+            [:br]
+            [:a.button.helvetica-neue {:href "/new"} "New Page"]]))
 
 (defpage "/new" []
-         (common/layout
+         (common/layout "New Markdown Note"
            [:div.central-body.max-width
-            (text-area {:class "central-body max-width"} :write-textarea)]))
+            (text-area {:class "max-width"} :write-textarea)
+            (submit-button {:class "helvetica-neue form-button"} "Publish")]))