vh font + messages from pulse
This commit is contained in:
parent
f7c5d095a9
commit
e9010bf14a
4 changed files with 166 additions and 6 deletions
|
@ -27,7 +27,7 @@ table {border-collapse: collapse;border-spacing: 0;}
|
|||
|
||||
|
||||
html,body{margin:0;padding:0;font-family: "Hoefler Text",sans-serif;height:100vh;text-align: center;
|
||||
color: rgba(255,255,255,0.9);}
|
||||
color: rgba(255,255,255,0.9);font-size:2vh}
|
||||
a{color:inherit; text-decoration: none;border-bottom: none;}
|
||||
.anchor {position: absolute;opacity:0.5;}
|
||||
.anchor:hover {opacity:0.9;}
|
||||
|
|
|
@ -46,8 +46,8 @@
|
|||
|
||||
(defn animated-title [text]
|
||||
[:h1 {:style
|
||||
{:font-size (rx (str (* 80 @ease1) "px"))
|
||||
:padding-top (rx (str (* 100 @ease1) "px"))
|
||||
{:font-size (rx (str (* 5 @ease1) "vh"))
|
||||
:padding-top (rx (str (* 10 @ease1) "vh"))
|
||||
:opacity (rx (str @ease2))
|
||||
:transform (rx (str "rotate(" @ease3 "deg)"))
|
||||
:-webkit-transform (rx (str "rotate(" @ease3 "deg)"))
|
||||
|
|
157
src/apintro/message.cljs
Normal file
157
src/apintro/message.cljs
Normal file
|
@ -0,0 +1,157 @@
|
|||
(ns apintro.message
|
||||
(:require [clojure.string :refer [replace]]))
|
||||
|
||||
|
||||
(defn tweet-url [message]
|
||||
"get link from tweet"
|
||||
(let [author (:user-screen_name message)
|
||||
id (:id_str message)]
|
||||
|
||||
(str "https://twitter.com/" author "/status/" id)))
|
||||
|
||||
|
||||
(defn open [url]
|
||||
"open url in a new tab"
|
||||
|
||||
(.open js/window url "_blank"))
|
||||
|
||||
(defn account-username
|
||||
[str]
|
||||
[:span str])
|
||||
|
||||
(defn user-name [message params]
|
||||
"display user screen name as message header section"
|
||||
(if (:reshared message)
|
||||
[:div
|
||||
;;double display with original author if RT
|
||||
[:div {:class "retweeted_holder"}
|
||||
[:p {:style {:cursor "pointer"}
|
||||
:on-click #(open (str "http://www.twitter.com/" (:user-screen_name message)))
|
||||
:class "user_name"}
|
||||
[:i {:class "fa fa-retweet retweeted-icon"}]
|
||||
[account-username (str " " (:user-name message) " ")]]]
|
||||
|
||||
[:div {:class "username_holder "}
|
||||
[:p {:style {:cursor "pointer"}
|
||||
:on-click #(open
|
||||
(str "http://www.twitter.com/"
|
||||
(get-in message [:retweeted_status
|
||||
:user
|
||||
:screen_name])))
|
||||
:class "user_name"}
|
||||
[account-username (str (get-in message [:retweeted_status :user :name]) " ")]
|
||||
|
||||
(when-not (:hide-nickname (first params))
|
||||
[:span {:class "user_nick"} (get-in message [:retweeted_status :user :screen_name])])]]]
|
||||
|
||||
|
||||
;; simple display otherwise
|
||||
[:div {:class "username_holder "}
|
||||
[:p {:style {:cursor "pointer"}
|
||||
:on-click #(open (str "http://www.twitter.com/"
|
||||
(:user-screen_name message)))
|
||||
:class "user_name"}
|
||||
[account-username (str " " (:user-name message) " ")]
|
||||
|
||||
(when-not (:hide-nickname (first params))
|
||||
[:span {:class "user_nick"} (:user-screen_name message)])]]))
|
||||
|
||||
(defn actions
|
||||
"Display actions (reply, retweet, favorite) with current counters."
|
||||
[msg]
|
||||
[:div
|
||||
[:a {:target "_blank"
|
||||
:href (str "https://twitter.com/intent/tweet?in_reply_to=" (:id_str msg))}
|
||||
[:i {:class "fa fa-mail-reply icon"}]]
|
||||
|
||||
[:a {:target "_blank"
|
||||
:href (str "https://twitter.com/intent/retweet?tweet_id=" (:id_str msg))}
|
||||
[:i {:class "fa fa-retweet icon"}]
|
||||
|
||||
(when (> (:retweet_count msg) 0)
|
||||
[:span (:retweet_count msg)])]
|
||||
|
||||
[:a {:target "_blank"
|
||||
:href (str "https://twitter.com/intent/favorite?tweet_id=" (:id_str msg))}
|
||||
[:i {:class "fa fa-star icon"}]
|
||||
|
||||
(when (> (:favorite_count msg) 0)
|
||||
[:span (:favorite_count msg)])]])
|
||||
|
||||
(defn publish-date
|
||||
"Display the publication date in timeago format."
|
||||
[message]
|
||||
[:span (:pub_date_epoch_ms message)])
|
||||
|
||||
(defn actions-holder [message params]
|
||||
"twitter actions for a message"
|
||||
(let [msg (if (:reshared message)
|
||||
(:retweeted_status message)
|
||||
message)]
|
||||
[:div {:class "actions_holder"}
|
||||
|
||||
[:div {:class "subholder_top"}
|
||||
|
||||
[:div {:class "left_part pull-left"}
|
||||
[:i {:class "fa fa-twitter icon"}]
|
||||
|
||||
[publish-date message]]
|
||||
|
||||
(when-not (:disable-actions (first params))
|
||||
[:div {:class "right_part pull-right"}
|
||||
[actions msg]])]]))
|
||||
|
||||
(defn author-page-url
|
||||
[message]
|
||||
(if (:reshared message)
|
||||
(str "http://www.twitter.com/"
|
||||
(get-in message [:retweeted_status
|
||||
:user
|
||||
:screen_name]))
|
||||
(str "http://www.twitter.com/"
|
||||
(:user-screen_name message))))
|
||||
|
||||
(defn user-pic [{:keys [message width height]}]
|
||||
"display clickable user picture"
|
||||
(let [image-url (if (:reshared message)
|
||||
(get-in message [:retweeted_status :user :profile_image_url])
|
||||
(:user-profile_image_url message))
|
||||
_ (when-not image-url (println "image-url nil: " message))
|
||||
author-page (author-page-url message)]
|
||||
[:img {:style {:height height
|
||||
:width width
|
||||
:margin-right "2%"
|
||||
:cursor "pointer"
|
||||
:float "left"
|
||||
}
|
||||
:on-click #(open author-page)
|
||||
:src (if image-url (replace image-url #"normal" "bigger") nil)}]))
|
||||
|
||||
(defn text [message]
|
||||
"display user text, augmenting urls with full links"
|
||||
(let [original-text (if (:reshared message)
|
||||
(get-in message [:retweeted_status :text])
|
||||
(:text message))]
|
||||
[:p {:style {:cursor "pointer"
|
||||
:font-size "0.8em"
|
||||
:line-height "1.2em"}
|
||||
:on-click #(let [target (js/$ (aget % "target"))
|
||||
el-type (aget target 0 "localName")]
|
||||
(when-not (= el-type "a")
|
||||
(open (tweet-url message))))
|
||||
:class "text"}
|
||||
original-text]))
|
||||
|
||||
(defn message [message & params]
|
||||
"Message component"
|
||||
(when message
|
||||
[:div {:style {:height "250px" :width "23%" :overflow "hidden" :float "left"
|
||||
:border "solid 1px rgba(0,0,0,0.3)"
|
||||
:background "rgba(0,0,0,0.1)"
|
||||
:margin "0.5%"
|
||||
}}
|
||||
[:div
|
||||
[user-pic {:message message :width "30%"}]
|
||||
[user-name message params]
|
||||
[text message]]
|
||||
[actions-holder message params]]))
|
|
@ -4,6 +4,7 @@
|
|||
[freactive.macros :refer [rx]])
|
||||
(:require
|
||||
[apintro.model :refer [gets sets]]
|
||||
[apintro.message :refer [message]]
|
||||
[freactive.animation :as animation]
|
||||
[cljs-http.client :as http]
|
||||
[cljs.core.async :refer [<!]]))
|
||||
|
@ -92,13 +93,15 @@
|
|||
[:div {:style {:text-align "left"
|
||||
:line-height "2em"
|
||||
:opacity (rx @ease)
|
||||
:overflow "hidden"
|
||||
:height "50vh"
|
||||
:border "solid 1px red"
|
||||
:font-family "Futura, sans-serif"}
|
||||
:node/on-attached (fn [node callback]
|
||||
(animation/start-easing! ease 1.0 0.0 1000 animation/quad-in callback))
|
||||
}
|
||||
[:ul
|
||||
(for [tweet (:messages state)]
|
||||
[:li (:text tweet)])]]))
|
||||
(for [tweet (:messages state)]
|
||||
[message tweet])]))
|
||||
|
||||
(defn view-volume [state]
|
||||
[:div
|
||||
|
|
Loading…
Reference in a new issue