M public/css/site.css => public/css/site.css +9 -2
@@ 1,12 1,13 @@
body {
font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
- max-width: 600px;
+ max-width: 768px;
margin: 0 auto;
- padding-top: 72px;
+ padding-top: 42px;
-webkit-font-smoothing: antialiased;
font-size: 1.125em;
color: #333;
line-height: 1.5em;
+ line-height: 1.8em;
}
h1, h2, h3 {
@@ 33,6 34,12 @@ a:hover {
text-decoration: underline;
}
+#button {
+ display: block;
+ margin: 0 auto;
+ margin-top: 1em;
+}
+
img {
display: block;
margin: auto;
M public/index.html => public/index.html +15 -13
@@ 1,17 1,19 @@
<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8">
- <meta content="width=device-width, initial-scale=1" name="viewport">
- <link href="/css/site.css" rel="stylesheet" type="text/css">
- </head>
- <body>
- <div id="app">
- <h3>ClojureScript has not been compiled!</h3>
- <p>please run <b>lein figwheel</b> in order to start the compiler</p>
- </div>
- <script src="/js/app.js" type="text/javascript"></script>
-
- </body>
+ <head>
+ <title> Wikisophy </title>
+ <meta charset="utf-8">
+ <meta content="width=device-width, initial-scale=1" name="viewport">
+ <link rel="stylesheet" href="https://unpkg.com/picnic">
+ <link href="/css/site.css" rel="stylesheet" type="text/css">
+ </head>
+ <body>
+ <div id="app">
+ <h3>ClojureScript has not been compiled!</h3>
+ <p>please run <b>lein figwheel</b> in order to start the compiler</p>
+ </div>
+ <script src="/js/app.js" type="text/javascript"></script>
+
+ </body>
</html>
M src/wikisophy/core.cljs => src/wikisophy/core.cljs +14 -10
@@ 3,7 3,7 @@
[ajax.core :refer [GET POST]]
[oz.core :as oz]))
-(def path (r/atom []))
+(defonce path (r/atom []))
;; -------------------------
;; Views
@@ 14,9 14,9 @@
[:h2 "Do all paths lead to "
[:a {:href "https://wikipedia.org/wiki/Philosophy"} "Philosophy"] "?"]])
-(defn response-handler [response]
+(defn response-handler [response] ;; this functionality will be implemented to backend
(map-indexed (fn [i v] {:id (inc i)
- :value v
+ :value (clojure.string/replace v "_" " ")
:parent (if (= i 0) nil i)})
response))
@@ 28,19 28,20 @@
:handler #(reset! path (response-handler %))}))
(defn input []
- (let [query (r/atom "Search wikipedia..")]
+ (let [query (r/atom "")]
(fn []
[:div
- [:p "The value is: " @query]
[:input {:type "text"
+ :placeholder "Enter your query here!"
:value @query
:on-change #(reset! query (-> % .-target .-value))}]
- [:input {:type "submit"
- :on-click #(do (reset! path "waiting") (get-query! @query))}]])))
+ [:input#button {:type "submit"
+ :on-click #(do (reset! path "waiting")
+ (get-query! @query))}]])))
(defn path-tree [path]
{:$schema "https://vega.github.io/schema/vega/v5.json"
- :width 600
+ :width 700
:height 600
:padding 5
:autosize {:type "fit-x"
@@ 92,7 93,7 @@
:encode
{:enter
{:text {:field "value"},
- :fontSize {:value 12},
+ :fontSize {:value 16},
:baseline {:value "middle"}},
:update
{:x {:field "x"},
@@ 105,10 106,13 @@
(defn graph []
(fn []
- (if (= @path "waiting")
+ (cond
+ (= @path "waiting")
[:div
[:img {:src "img/loading.svg"}]
[:p "Please wait while crawling through Wikipedia."]]
+ (= @path []) [:div]
+ :else
[:div
[oz/vega (path-tree @path)]])))