From d84b462a711ce95593ff05a7581e722562c3835a Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Tue, 14 Mar 2017 01:06:28 +0100 Subject: Implement old bar.hs --- templates/default-layout-wrapper.hamlet | 15 ++++ templates/default-layout.cassius | 77 ++++++++++++++++++ templates/default-layout.hamlet | 12 +++ templates/default-layout.julius | 7 ++ templates/default-message-widget.hamlet | 6 ++ templates/homepage.hamlet | 139 ++++++++++++++++++++++++++++++++ templates/homepage.julius | 34 ++++++++ templates/homepage.lucius | 13 +++ templates/inventoryListing.hamlet | 49 +++++++++++ templates/profile.hamlet | 10 +++ 10 files changed, 362 insertions(+) create mode 100644 templates/default-layout-wrapper.hamlet create mode 100644 templates/default-layout.cassius create mode 100644 templates/default-layout.hamlet create mode 100644 templates/default-layout.julius create mode 100644 templates/default-message-widget.hamlet create mode 100644 templates/homepage.hamlet create mode 100644 templates/homepage.julius create mode 100644 templates/homepage.lucius create mode 100644 templates/inventoryListing.hamlet create mode 100644 templates/profile.hamlet (limited to 'templates') diff --git a/templates/default-layout-wrapper.hamlet b/templates/default-layout-wrapper.hamlet new file mode 100644 index 0000000..dd317f1 --- /dev/null +++ b/templates/default-layout-wrapper.hamlet @@ -0,0 +1,15 @@ +$newline never +$doctype 5 + + + + + #{pageTitle pc} + <meta name="description" content=""> + <meta name="author" content=""> + + <meta name="viewport" content="width=device-width,initial-scale=1"> + + ^{pageHead pc} + <body> + ^{pageBody pc} diff --git a/templates/default-layout.cassius b/templates/default-layout.cassius new file mode 100644 index 0000000..492cde8 --- /dev/null +++ b/templates/default-layout.cassius @@ -0,0 +1,77 @@ +.table + display: table +.table div + vertical-align: middle +.td + display: table-cell + text-align: center + padding: 0.25em +.tr + display: table-row +.tc + display: table-caption + padding: 0.25em +.th + display: table-cell + font-variant: small-caps + font-weight: bold + text-align: center + padding: 0.25em +.kind + display: table-cell + text-align: left + padding: 0.25em +.table .table .td, .table .table .tc, .table .table .th, .table .table .kind + padding: 0 +.error + background-color: #fdd + text-align: center + color: #c00 + list-style-type: none +button + width: 6em + display:inline-text +.day hr + width: 2em + border: 1px solid #ddd + border-style: solid none solid none +.sepBelow > div, .sepAbove > div + border: 2px none #ddd +.sepBelow > div + border-bottom-style: solid +.sepAbove > div + border-top-style: solid +.color:nth-child(even) + background-color: #f0f0f0 +.color:nth-child(odd) + background-color: #fff +body > div + margin: 0 auto +.table > h1 + display: table-caption +nav ul + display:block + text-align: center + li + display:inline-block + font-variant: small-caps + font-size: 1.5em + font-weight: bold + a + text-decoration:none + color:#aaa + a:hover + color:inherit + li.active + a + color:inherit + li::before + content:" | " + color: #ddd + li:first-child::before + content:"" +label.checkbox + input + vertical-align: middle + span + vertical-align: middle diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet new file mode 100644 index 0000000..14c8cd5 --- /dev/null +++ b/templates/default-layout.hamlet @@ -0,0 +1,12 @@ +<nav> + <ul> + $forall MenuItem{..} <- menuItems + <li :Just menuItemRoute == mCurrentRoute:.active> + <a href=@{menuItemRoute}>#{menuItemLabel} + +$if not $ null msgs + <ul #messages> + $forall (status, msg) <- msgs + <li .#{status}>#{msg} + +^{widget} diff --git a/templates/default-layout.julius b/templates/default-layout.julius new file mode 100644 index 0000000..5ef6b42 --- /dev/null +++ b/templates/default-layout.julius @@ -0,0 +1,7 @@ +webshims.setOptions("forms-ext", { + "widgets": { + "classes": "hide-dropdownbtn" + } +}); +webshims.activeLang("en-GB"); +webshims.polyfill("forms forms-ext"); diff --git a/templates/default-message-widget.hamlet b/templates/default-message-widget.hamlet new file mode 100644 index 0000000..2eee196 --- /dev/null +++ b/templates/default-message-widget.hamlet @@ -0,0 +1,6 @@ +<div .container> + <div .row> + <div .col-md-2> + <div .col-md-8> + <h1>#{title} + ^{body} diff --git a/templates/homepage.hamlet b/templates/homepage.hamlet new file mode 100644 index 0000000..fb79965 --- /dev/null +++ b/templates/homepage.hamlet @@ -0,0 +1,139 @@ +<div .masthead> + <div .container> + <div .row> + <h1 .header> + Yesod—a modern framework for blazing fast websites + <h2> + Fast, stable & spiced with great community + <a href="http://www.yesodweb.com/book/" .btn.btn-info.btn-lg> + Read the Book + +<div .container> + <!-- Starting + ================================================== --> + <div .bs-docs-section> + <div .row> + <div .col-lg-12> + <div .page-header> + <h1 #start>Starting + + <p> + Now that you have a working project you should use the + <a href=http://www.yesodweb.com/book/>Yesod book</a> to learn more. + <p> + You can also use this scaffolded site to explore some concepts, and best practices. + + <ul .list-group> + + <li .list-group-item> + This page was generated by the <tt>#{handlerName}</tt> handler in + <tt>Handler/Home.hs</tt>. + + <li .list-group-item> + The <tt>#{handlerName}</tt> handler is set to generate your + site's home screen in Routes file + <tt>config/routes + + <li .list-group-item> + We can link to other handlers, like the <a href="@{ProfileR}">Profile</a>. + Try it out as an anonymous user and see the access denied. + Then, try to <a href="@{AuthR LoginR}">login</a> with the dummy authentication added + while in development. + + <li .list-group-item> + The HTML you are seeing now is actually composed by a number of <em>widgets</em>, # + most of them are brought together by the <tt>defaultLayout</tt> function which # + is defined in the <tt>Foundation.hs</tt> module, and used by <tt>#{handlerName}</tt>. # + All the files for templates and wigdets are in <tt>templates</tt>. + + <li .list-group-item> + A Widget's Html, Css and Javascript are separated in three files with the + <tt>.hamlet</tt>, <tt>.lucius</tt> and <tt>.julius</tt> extensions. + + <li .list-group-item ##{aDomId}> + If you had javascript enabled then you wouldn't be seeing this. + + <hr> + + <!-- Forms + ================================================== --> + <div .bs-docs-section> + <div .row> + <div .col-lg-12> + <div .page-header> + <h1 #forms>Forms + + <p> + This is an example of a form. Read the + <a href="http://www.yesodweb.com/book/forms">Forms chapter</a> # + on the yesod book to learn more about them. + + <div .row> + <div .col-lg-6> + <div .bs-callout bs-callout-info well> + <form .form-horizontal method=post action=@{HomeR}#forms enctype=#{formEnctype}> + ^{formWidget} + + <button .btn.btn-primary type="submit"> + Upload it! + + + <div .col-lg-4.col-lg-offset-1> + <div .bs-callout.bs-callout-info.upload-response> + + $maybe (FileForm info con) <- submission + Your file type is <em>#{fileContentType info}</em>. You say it has: <em>#{con}</em> + + $nothing + File upload result will be here... + + + <hr> + + <!-- JSON + ================================================== --> + <div .bs-docs-section> + <div .row> + <div .col-lg-12> + <div .page-header> + <h1 #json>JSON + + <p> + Yesod has JSON support baked-in. + The form below makes an AJAX request with Javascript, + then updates the page with your submission. + (see <tt>Handler/Comment.hs</tt>, <tt>templates/homepage.julius</tt>, + and <tt>Handler/Home.hs</tt> for the implementation). + + <div .row> + <div .col-lg-6> + <div .bs-callout.bs-callout-info.well> + <form .form-horizontal ##{commentFormId}> + <div .field> + <textarea rows="2" ##{commentTextareaId} placeholder="Your comment here..." required></textarea> + + <button .btn.btn-primary type=submit> + Create comment + + <div .col-lg-4.col-lg-offset-1> + <div .bs-callout.bs-callout-info> + <small> + Your comments will appear here. You can also open the + console log to see the raw response from the server. + <ul ##{commentListId}> + + <hr> + + <!-- Testing + ================================================== --> + <div .bs-docs-section> + <div .row> + <div .col-lg-12> + <div .page-header> + <h1 #test>Testing + + <p> + And last but not least, Testing. In <tt>test/Spec.hs</tt> you will find a # + test suite that performs tests on this page. + <p> + You can run your tests by doing: <code>stack test</code> diff --git a/templates/homepage.julius b/templates/homepage.julius new file mode 100644 index 0000000..865882e --- /dev/null +++ b/templates/homepage.julius @@ -0,0 +1,34 @@ +document.getElementById(#{toJSON aDomId}).innerHTML = "This text was added by the Javascript part of the homepage widget."; + +$(function() { + $("##{rawJS commentFormId}").submit(function(event) { + event.preventDefault(); + + var message = $("##{rawJS commentTextareaId}").val(); + // (Browsers that enforce the "required" attribute on the textarea won't see this alert) + if (!message) { + alert("Please fill out the comment form first."); + return; + } + + // Make an AJAX request to the server to create a new comment + $.ajax({ + url: '@{CommentR}', + type: 'POST', + contentType: "application/json", + data: JSON.stringify({ + message: message, + }), + success: function (data) { + var newNode = $("<li></li>"); + newNode.text(data.message); + console.log(data); + $("##{rawJS commentListId}").append(newNode); + }, + error: function (data) { + console.log("Error creating comment: " + data); + }, + }); + + }); +}); diff --git a/templates/homepage.lucius b/templates/homepage.lucius new file mode 100644 index 0000000..3197fd5 --- /dev/null +++ b/templates/homepage.lucius @@ -0,0 +1,13 @@ +h2##{aDomId} { + color: #990 +} + +li { + line-height: 2em; + font-size: 16px +} + +##{commentTextareaId} { + width: 400px; + height: 100px; +} diff --git a/templates/inventoryListing.hamlet b/templates/inventoryListing.hamlet new file mode 100644 index 0000000..7c2c06b --- /dev/null +++ b/templates/inventoryListing.hamlet @@ -0,0 +1,49 @@ +<div .table> + <div .tr .sepBelow> + <div .th>Description + <div .th>Bought + <div .th>Expires + <div .th>Opened + <div .th>Actions + $if isJust (preview insertForm =<< formState) + $with Just InsertForm{..} <- formState + <form .tr .sepBelow action=@{InventoryListingR} method=post enctype=#{fsInsertEncoding}> + ^{fsInsertForm} + <div .td> + <button type=submit> + Insert + $forall Entity itemId Item{..} <- stock + $if Just itemId == (preview updateItem =<< formState) + $with Just UpdateForm{..} <- formState + <form .tr .color action=@{UpdateItemR fsUpdateItem}##{toPathPiece fsUpdateItem} method=post enctype=#{fsUpdateEncoding} ##{toPathPiece fsUpdateItem}> + ^{fsUpdateForm} + <div .td> + <button type=submit> + Save Changes + $else + <div .tr .color ##{toPathPiece itemId}> + <div .kind>#{itemKind} + <div .td .day> + $maybe bought <- itemBought + #{dayFormat bought} + $nothing + <hr> + <div .td .day> + $maybe expires <- itemExpires + #{dayFormat expires} + $nothing + <hr> + <div .td .day> + $maybe opened <- itemOpened + #{dayFormat opened} + $nothing + <form method=post action=@{OpenItemR itemId}> + <button type=submit> + Open + <div .td> + <form method=get action=@{UpdateItemR itemId}##{toPathPiece itemId}> + <button type=submit> + Edit + <form method=post action=@{DeleteItemR itemId}> + <button type=submit> + Delete diff --git a/templates/profile.hamlet b/templates/profile.hamlet new file mode 100644 index 0000000..2420de6 --- /dev/null +++ b/templates/profile.hamlet @@ -0,0 +1,10 @@ +<div .ui.container> + + <h1> + Access granted! + + <p> + This page is protected and access is allowed only for authenticated users. + + <p> + Your data is protected with us <strong><span class="username">#{userIdent user}</span></strong>! -- cgit v1.2.3