UI stuff. The search does not work on the server side ... oh my ...

This commit is contained in:
Aaron Mueller 2014-09-29 00:09:52 +02:00
parent f96cf486ab
commit b7b2d8a223
9 changed files with 172 additions and 9 deletions

View file

@ -20,7 +20,6 @@
:init luduverse.handler/init :init luduverse.handler/init
:destroy luduverse.handler/destroy :destroy luduverse.handler/destroy
:open-browser? false} :open-browser? false}
:repl-options {:timeout 12000}
:aliases {"save-competition-30" ["run" "-m" "luduverse.scraper/save-competition" "30"]} :aliases {"save-competition-30" ["run" "-m" "luduverse.scraper/save-competition" "30"]}
:profiles {:production {:ring {:stacktrace? false}} :profiles {:production {:ring {:stacktrace? false}}
:dev {:ring {:auto-reload? true :dev {:ring {:auto-reload? true

View file

@ -0,0 +1,85 @@
* {
margin: 0;
padding: 0;
font-family: Arial, DejaVu Sans;
}
#logo {
margin: auto;
margin-top: 200px;
display: block;
}
form#search {
margin: auto;
width: 600px;
}
form#search > input, form#search-results > input {
width: 580px;
font-size: 40px;
font-weight: bold;
margin: 20px 0 10px 0;
padding: 10px;
border: 2px solid #ddd;
background-color: #fcfcfc;
}
form#search > p {
font-size: 12px;
color: #aaa;
}
form#search > p > strong {
background-color: #eee;
color: black;
padding: 1px 5px;
border-radius: 2px;
}
div#results-header {
margin: 10px 0 0 15px;
}
#logo-search-results, form#search-results {
float: left;
}
form#search-results > input {
margin: 5px 0 0 20px;
}
#results {
margin-top: 20px;
}
#results > div {
width: 200px;
height: 200px;
background-color: #ccc;
border: 1px solid black;
margin: 3px;
float: left;
position: relative;
}
#results > div p {
position: absolute;
left: -2;
top: 172px;
width: 196px;
height: 25px;
background-color: black;
padding: 2px;
color: white;
font-size: 9px;
}
#results > div p > span {
font-weight: bold;
}
a {
color: red;
}
a:hover {
color: orange;
}

View file

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View file

@ -3,11 +3,21 @@
[compojure.route :as route] [compojure.route :as route]
[noir.util.middleware :as middleware] [noir.util.middleware :as middleware]
[luduverse.pages :as pages] [luduverse.pages :as pages]
[luduverse.images :as images])) [luduverse.images :as images]
[luduverse.search :as search]))
(defn render [template & args]
(apply str (apply template args)))
(defroutes core-routes (defroutes core-routes
(route/resources "/") (route/resources "/")
(GET "/" [] (pages/front-page)) (GET "/" [] (render pages/landingpage-template))
(POST "/search" {params :params}
(let [term (params "term")
s (search/search term)
hits (:hit-count s)
entries (:results s)]
(render pages/results-template term hits entries)))
(route/not-found "404, sorry.")) (route/not-found "404, sorry."))
(defn init []) (defn init [])

View file

@ -1,4 +1,16 @@
(ns luduverse.pages) (ns luduverse.pages
(:require [net.cgrand.enlive-html :as html]))
(defn front-page [] (html/deftemplate landingpage-template "templates/landingpage.html" [])
"Wait for it ...")
(html/defsnippet item-model "templates/results.html" [:div#results :> :div]
[id image-path username title]
[:img] (html/set-attr :src image-path)
[:p] (html/content username)
[:span] (html/content title))
(html/deftemplate results-template "templates/results.html"
[search-term hits results]
[:form#search :> :input#term] (html/set-attr :value search-term)
;[:div#results (html/content (map #(item-model %) results))]
)

View file

@ -4,8 +4,6 @@
[clojurewerkz.elastisch.rest.document :as eld] [clojurewerkz.elastisch.rest.document :as eld]
[clojurewerkz.elastisch.rest.response :as elresp] [clojurewerkz.elastisch.rest.response :as elresp]
[clojurewerkz.elastisch.query :as elq] [clojurewerkz.elastisch.query :as elq]
[clojure.pprint :as pp]
[luduverse.models.entry :as entry])) [luduverse.models.entry :as entry]))
(def connection (atom (el/connect "http://localhost:9200"))) (def connection (atom (el/connect "http://localhost:9200")))
@ -40,7 +38,8 @@
(store (:id e)))) (store (:id e))))
(defn search [term] (defn search [term]
(let [res (eld/search @connection "luduverse" "entry" (let [con (el/connect "http://localhost:9200")
res (eld/search con "luduverse" "entry"
:query (elq/query-string :query term) :query (elq/query-string :query term)
:sort {:title "desc"} :sort {:title "desc"}
:from 0 :from 0

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LuduVerse - ClojureCup 2014 by Aaron Fischer</title>
<meta name="description" content="A Ludum Dare entry search engine">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<img id="logo" src="images/logo.jpg">
<form id="search" action="/search" method="post">
<input type="text" name="term" value="">
<p>Search all the <a href="http://ludumdare.com/">Ludum Dare 30</a>
entries (2538 Entries) (more LDs to come in the future, I didn't want to stress the
server too much). You don't know what to search? Try <strong>html5</strong>,
<strong>notch</strong> or <strong>aliens and zombies</strong>. You can
search for usernames, game titles or even the whole description. Time
to find some hidden gems!</p>
</form>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LuduVerse results- ClojureCup 2014 by Aaron Fischer</title>
<meta name="description" content="A Ludum Dare entry search engine">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="results-header">
<img id="logo-search-results" src="images/logo_small.jpg">
<form id="search-results" action="/search" method="post">
<input type="text" name="term" value="">
</form>
</div>
<br style="clear: both;">
<div id="results">
<div class="item">
<a href="#">
<img src="#">
<p>This is the dungeon<br>
<span>by Aaron</span></p>
</a>
</div>
</div>
</body>
</html>