From e9010bf14aa2983e46b5b7e6cfd0a36def976ed4 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Fri, 28 Aug 2015 19:53:53 +0200 Subject: [PATCH] vh font + messages from pulse --- resources/public/index.html | 2 +- src/apintro/core.cljs | 4 +- src/apintro/message.cljs | 157 ++++++++++++++++++++++++++++++++++++ src/apintro/vgapi.cljs | 9 ++- 4 files changed, 166 insertions(+), 6 deletions(-) create mode 100644 src/apintro/message.cljs diff --git a/resources/public/index.html b/resources/public/index.html index bbfc352..cde62a2 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -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;} diff --git a/src/apintro/core.cljs b/src/apintro/core.cljs index fd23425..2b4d18b 100644 --- a/src/apintro/core.cljs +++ b/src/apintro/core.cljs @@ -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)")) diff --git a/src/apintro/message.cljs b/src/apintro/message.cljs new file mode 100644 index 0000000..6ecfc84 --- /dev/null +++ b/src/apintro/message.cljs @@ -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]])) diff --git a/src/apintro/vgapi.cljs b/src/apintro/vgapi.cljs index e0f76b2..38e93fb 100644 --- a/src/apintro/vgapi.cljs +++ b/src/apintro/vgapi.cljs @@ -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 [