From 9ee649ed7627a7531c09a3b84c56465218caeebf Mon Sep 17 00:00:00 2001 From: Lars-Dominik Braun Date: Tue, 28 Apr 2015 13:22:01 +0200 Subject: Rich-view by default Get rid of table and popup layout. --- Main.hs | 91 +++++++++++++++++++--------------------------------------- data/script.js | 49 ++++++++++++------------------- data/style.css | 49 ++++--------------------------- 3 files changed, 53 insertions(+), 136 deletions(-) diff --git a/Main.hs b/Main.hs index 8b0229c..8d65915 100644 --- a/Main.hs +++ b/Main.hs @@ -42,25 +42,6 @@ data Feature = Feature { , fdescription :: Maybe String } deriving Show -data JQData = JQData { - jname :: String - , jlongname :: Maybe String - , jdescription :: Maybe String - , jdoi :: Maybe String - , jyear :: Maybe String - , jtitle :: Maybe String - } deriving Show - -instance ToJSON JQData where - toJSON d = object [ - "name" .= jname d - , "longname" .= jlongname d - , "description" .= jdescription d - , "doi" .= jdoi d - , "year" .= jyear d - , "title" .= jtitle d - ] - type FeatureList = M.Map String Feature instance FromJSON Protocol where @@ -116,32 +97,31 @@ head' (x:_) = Just x scholarSearch q = "http://scholar.google.com/scholar?q=" ++ escapeURIString isReserved q resolveDoi q = "http://doi.org/" ++ q -maybeLink :: Html () -> Maybe T.Text -> Html () -maybeLink text href = maybe text (\x -> a_ [href_ x] text) href - protoentry :: Database -> (String, Protocol) -> Html () protoentry db (ident, p) = let - pubs = protoPublications db p - firstpub = join (head' pubs) + pubs = catMaybes $ protoPublications db p + firstpub = head' pubs field key = firstpub >>= (return . E.fields) >>= lookup key - jdata = JQData { - jname = pname p - , jlongname = plongname p - , jdescription = pdescription p - , jdoi = field "doi" - , jyear = field "year" - , jtitle = field "title" - } in - tr_ [ - id_ $ T.pack ident - , data_ "proto" ((decodeUtf8 . BS.toStrict . A.encode) jdata) + section_ [ + id_ $ T.pack ident + , class_ "protocol" + , data_ "name" (T.pack $ pname p) + , data_ "year" (maybe "" T.pack $ field "year") ] $ do - td_ $ maybeLink (toHtml $ pname p) (field "doi" >>= return . T.pack . resolveDoi) - td_ $ maybeToHtml $ plongname p - td_ $ maybeToHtml $ field "year" - td_ [class_ "features"] $ ul_ $ forM_ (sort $ M.keys $ pfeatures p) (\x -> li_ $ toHtml $ maybe ("" :: String) fname $ M.lookup x (dfeatures db)) + h3_ $ do + toHtml $ pname p + " " + maybe "" (small_ . toHtml) $ plongname p + " " + small_ $ a_ [href_ (T.pack $ '#':ident), title_ "permalink", class_ "permalink"] "ΒΆ" + dl_ $ do + dt_ "Published in" + dd_ $ if length pubs == 1 then (p_ $ bibentry $ head pubs) + else ol_ $ forM_ pubs (li_ . bibentry) + dt_ "Features" + dd_ $ ul_ [class_ "features"] $ forM_ (sort $ M.keys $ pfeatures p) (\x -> li_ $ toHtml $ maybe ("" :: String) fname $ M.lookup x (dfeatures db)) extcss url = link_ [rel_ "stylesheet", type_ "text/css", href_ url] @@ -178,27 +158,24 @@ introduction = section_ $ do -- | The list of protocols protocols :: Database -> Html () -protocols db = table_ [id_ "algo", class_ "table table-striped"] $ do - thead_ $ do - tr_ $ do - th_ "Name" - th_ "" - th_ "Year" - th_ "Features" - tbody_ $ forM_ (M.toList $ dalgos db) (protoentry db) +protocols db = section_ [id_ "protocols"] $ do + h2_ "Protocols" + div_ [id_ "protosort"] $ do + label_ [for_ "sort"] "Sort by" + " " + select_ [id_ "sort"] $ do + option_ [value_ "name"] "Name" + option_ [value_ "year"] "Year" + forM_ (M.toList $ dalgos db) (protoentry db) page db attrib = doctypehtml_ $ do head_ $ do title_ "comatose" meta_ [charset_ "utf-8"] - extjs "https://code.jquery.com/jquery-1.10.2.min.js" + extjs "https://code.jquery.com/jquery-1.11.2.min.js" extcss "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" extcss "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" extjs "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" - extcss "https://cdn.datatables.net/1.10.5/css/jquery.dataTables.css" - extjs "https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js" - extcss "https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css" - extjs "https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js" extcss "style.css" body_ $ do div_ [class_ "container"] $ do @@ -207,16 +184,6 @@ page db attrib = doctypehtml_ $ do introduction protocols db references (sortBy (compare `on` lookup "year" . E.fields) attrib) - div_ [id_ "background"] "" - div_ [id_ "popup"] $ do - h2_ "" - p_ [class_ "longname"] "" - ul_ [class_ "ref"] $ do - li_ [class_ "title"] "" - li_ [class_ "year"] "" - li_ $ a_ [class_ "doi"] "" - li_ $ a_ [class_ "scholar"] "Scholar" - p_ [class_ "description"] "" extjs "script.js" render f db attribution = renderToFile f (page db attribution) diff --git a/data/script.js b/data/script.js index 50c06ac..94175b1 100644 --- a/data/script.js +++ b/data/script.js @@ -1,35 +1,22 @@ $(document).ready (function () { - $('#algo').DataTable ({ - paging: false, - "columnDefs": [], - }); - $('#algo tr').click (function () { - var data = $(this).data ('proto'); - $('#popup h2').text (data.name); - $('#popup .longname').text (data.longname); - - $('#popup .title').text (data.title); - $('#popup .year').text (data.year); - $('#popup .doi').text ('doi:' + data.doi); - $('#popup .doi').attr ('href', 'http://doi.org/' + data.doi); - $('#popup .scholar').attr ('href', 'http://scholar.google.com/scholar?q=' + encodeURIComponent (data.title)); - - $('#popup .description').text (data.description); - - $('#popup').fadeIn ('normal'); - $('#background').fadeIn ('normal'); - }); - /* hide popup window */ - function hide () { - $('#popup').fadeOut ('normal'); - $('#background').fadeOut ('normal'); + function sortproto (by) { + var protolist = $('#protocols'); + var items = protolist.children ('.protocol'); + items.detach ().sort (function (nodeA, nodeB) { + var a = $(nodeA).data (by); + var b = $(nodeB).data (by); + if (a > b) { + return 1; + } else if (a < b) { + return -1; + } else { + return 0; + } + }); + protolist.append (items); } - $('#background').click (function () { - hide (); - }); - $(document).keyup (function (e) { - if (e.keyCode == 27) { - hide (); - } + $('#sort').change (function () { + sortproto ($(this).val ()); }); + sortproto ('name'); }); diff --git a/data/style.css b/data/style.css index 41b5a9e..cc65ba2 100644 --- a/data/style.css +++ b/data/style.css @@ -1,47 +1,10 @@ -td.features ul { - list-style-type: none; - margin: 0; - padding: 0; +#protosort { + text-align: right; } -#popup { - display: none; - position: fixed; - background-color: #fff; - top: 25%; - left: 25%; - width: 50%; - padding: 2em; +.protocol dt { + font-weight: lighter; } - -#background { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #000; - opacity: 0.5; -} - -.ref { - list-style-type: none; - margin: 0; - padding: 0; -} - -.ref li { - display: inline; - margin: 0; - padding: 0; +.protocol dt:after { + content: ":"; } - -.ref li:after { - content: ", "; -} - -.ref .title { - font-style: italic; -} - -- cgit v1.2.3