diff options
| author | Gregor Kleen <gkleen@yggdrasil.li> | 2017-03-14 01:06:28 +0100 |
|---|---|---|
| committer | Gregor Kleen <gkleen@yggdrasil.li> | 2017-03-14 01:06:28 +0100 |
| commit | d84b462a711ce95593ff05a7581e722562c3835a (patch) | |
| tree | 41e5af455fea925b2680b29718b24ba2876e803a /templates | |
| download | bar-d84b462a711ce95593ff05a7581e722562c3835a.tar bar-d84b462a711ce95593ff05a7581e722562c3835a.tar.gz bar-d84b462a711ce95593ff05a7581e722562c3835a.tar.bz2 bar-d84b462a711ce95593ff05a7581e722562c3835a.tar.xz bar-d84b462a711ce95593ff05a7581e722562c3835a.zip | |
Implement old bar.hs
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/default-layout-wrapper.hamlet | 15 | ||||
| -rw-r--r-- | templates/default-layout.cassius | 77 | ||||
| -rw-r--r-- | templates/default-layout.hamlet | 12 | ||||
| -rw-r--r-- | templates/default-layout.julius | 7 | ||||
| -rw-r--r-- | templates/default-message-widget.hamlet | 6 | ||||
| -rw-r--r-- | templates/homepage.hamlet | 139 | ||||
| -rw-r--r-- | templates/homepage.julius | 34 | ||||
| -rw-r--r-- | templates/homepage.lucius | 13 | ||||
| -rw-r--r-- | templates/inventoryListing.hamlet | 49 | ||||
| -rw-r--r-- | templates/profile.hamlet | 10 |
10 files changed, 362 insertions, 0 deletions
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 @@ | |||
| 1 | $newline never | ||
| 2 | $doctype 5 | ||
| 3 | <html lang="en"> | ||
| 4 | <head> | ||
| 5 | <meta charset="UTF-8"> | ||
| 6 | |||
| 7 | <title>#{pageTitle pc} | ||
| 8 | <meta name="description" content=""> | ||
| 9 | <meta name="author" content=""> | ||
| 10 | |||
| 11 | <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| 12 | |||
| 13 | ^{pageHead pc} | ||
| 14 | <body> | ||
| 15 | ^{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 @@ | |||
| 1 | .table | ||
| 2 | display: table | ||
| 3 | .table div | ||
| 4 | vertical-align: middle | ||
| 5 | .td | ||
| 6 | display: table-cell | ||
| 7 | text-align: center | ||
| 8 | padding: 0.25em | ||
| 9 | .tr | ||
| 10 | display: table-row | ||
| 11 | .tc | ||
| 12 | display: table-caption | ||
| 13 | padding: 0.25em | ||
| 14 | .th | ||
| 15 | display: table-cell | ||
| 16 | font-variant: small-caps | ||
| 17 | font-weight: bold | ||
| 18 | text-align: center | ||
| 19 | padding: 0.25em | ||
| 20 | .kind | ||
| 21 | display: table-cell | ||
| 22 | text-align: left | ||
| 23 | padding: 0.25em | ||
| 24 | .table .table .td, .table .table .tc, .table .table .th, .table .table .kind | ||
| 25 | padding: 0 | ||
| 26 | .error | ||
| 27 | background-color: #fdd | ||
| 28 | text-align: center | ||
| 29 | color: #c00 | ||
| 30 | list-style-type: none | ||
| 31 | button | ||
| 32 | width: 6em | ||
| 33 | display:inline-text | ||
| 34 | .day hr | ||
| 35 | width: 2em | ||
| 36 | border: 1px solid #ddd | ||
| 37 | border-style: solid none solid none | ||
| 38 | .sepBelow > div, .sepAbove > div | ||
| 39 | border: 2px none #ddd | ||
| 40 | .sepBelow > div | ||
| 41 | border-bottom-style: solid | ||
| 42 | .sepAbove > div | ||
| 43 | border-top-style: solid | ||
| 44 | .color:nth-child(even) | ||
| 45 | background-color: #f0f0f0 | ||
| 46 | .color:nth-child(odd) | ||
| 47 | background-color: #fff | ||
| 48 | body > div | ||
| 49 | margin: 0 auto | ||
| 50 | .table > h1 | ||
| 51 | display: table-caption | ||
| 52 | nav ul | ||
| 53 | display:block | ||
| 54 | text-align: center | ||
| 55 | li | ||
| 56 | display:inline-block | ||
| 57 | font-variant: small-caps | ||
| 58 | font-size: 1.5em | ||
| 59 | font-weight: bold | ||
| 60 | a | ||
| 61 | text-decoration:none | ||
| 62 | color:#aaa | ||
| 63 | a:hover | ||
| 64 | color:inherit | ||
| 65 | li.active | ||
| 66 | a | ||
| 67 | color:inherit | ||
| 68 | li::before | ||
| 69 | content:" | " | ||
| 70 | color: #ddd | ||
| 71 | li:first-child::before | ||
| 72 | content:"" | ||
| 73 | label.checkbox | ||
| 74 | input | ||
| 75 | vertical-align: middle | ||
| 76 | span | ||
| 77 | 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 @@ | |||
| 1 | <nav> | ||
| 2 | <ul> | ||
| 3 | $forall MenuItem{..} <- menuItems | ||
| 4 | <li :Just menuItemRoute == mCurrentRoute:.active> | ||
| 5 | <a href=@{menuItemRoute}>#{menuItemLabel} | ||
| 6 | |||
| 7 | $if not $ null msgs | ||
| 8 | <ul #messages> | ||
| 9 | $forall (status, msg) <- msgs | ||
| 10 | <li .#{status}>#{msg} | ||
| 11 | |||
| 12 | ^{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 @@ | |||
| 1 | webshims.setOptions("forms-ext", { | ||
| 2 | "widgets": { | ||
| 3 | "classes": "hide-dropdownbtn" | ||
| 4 | } | ||
| 5 | }); | ||
| 6 | webshims.activeLang("en-GB"); | ||
| 7 | 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 @@ | |||
| 1 | <div .container> | ||
| 2 | <div .row> | ||
| 3 | <div .col-md-2> | ||
| 4 | <div .col-md-8> | ||
| 5 | <h1>#{title} | ||
| 6 | ^{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 @@ | |||
| 1 | <div .masthead> | ||
| 2 | <div .container> | ||
| 3 | <div .row> | ||
| 4 | <h1 .header> | ||
| 5 | Yesod—a modern framework for blazing fast websites | ||
| 6 | <h2> | ||
| 7 | Fast, stable & spiced with great community | ||
| 8 | <a href="http://www.yesodweb.com/book/" .btn.btn-info.btn-lg> | ||
| 9 | Read the Book | ||
| 10 | |||
| 11 | <div .container> | ||
| 12 | <!-- Starting | ||
| 13 | ================================================== --> | ||
| 14 | <div .bs-docs-section> | ||
| 15 | <div .row> | ||
| 16 | <div .col-lg-12> | ||
| 17 | <div .page-header> | ||
| 18 | <h1 #start>Starting | ||
| 19 | |||
| 20 | <p> | ||
| 21 | Now that you have a working project you should use the | ||
| 22 | <a href=http://www.yesodweb.com/book/>Yesod book</a> to learn more. | ||
| 23 | <p> | ||
| 24 | You can also use this scaffolded site to explore some concepts, and best practices. | ||
| 25 | |||
| 26 | <ul .list-group> | ||
| 27 | |||
| 28 | <li .list-group-item> | ||
| 29 | This page was generated by the <tt>#{handlerName}</tt> handler in | ||
| 30 | <tt>Handler/Home.hs</tt>. | ||
| 31 | |||
| 32 | <li .list-group-item> | ||
| 33 | The <tt>#{handlerName}</tt> handler is set to generate your | ||
| 34 | site's home screen in Routes file | ||
| 35 | <tt>config/routes | ||
| 36 | |||
| 37 | <li .list-group-item> | ||
| 38 | We can link to other handlers, like the <a href="@{ProfileR}">Profile</a>. | ||
| 39 | Try it out as an anonymous user and see the access denied. | ||
| 40 | Then, try to <a href="@{AuthR LoginR}">login</a> with the dummy authentication added | ||
| 41 | while in development. | ||
| 42 | |||
| 43 | <li .list-group-item> | ||
| 44 | The HTML you are seeing now is actually composed by a number of <em>widgets</em>, # | ||
| 45 | most of them are brought together by the <tt>defaultLayout</tt> function which # | ||
| 46 | is defined in the <tt>Foundation.hs</tt> module, and used by <tt>#{handlerName}</tt>. # | ||
| 47 | All the files for templates and wigdets are in <tt>templates</tt>. | ||
| 48 | |||
| 49 | <li .list-group-item> | ||
| 50 | A Widget's Html, Css and Javascript are separated in three files with the | ||
| 51 | <tt>.hamlet</tt>, <tt>.lucius</tt> and <tt>.julius</tt> extensions. | ||
| 52 | |||
| 53 | <li .list-group-item ##{aDomId}> | ||
| 54 | If you had javascript enabled then you wouldn't be seeing this. | ||
| 55 | |||
| 56 | <hr> | ||
| 57 | |||
| 58 | <!-- Forms | ||
| 59 | ================================================== --> | ||
| 60 | <div .bs-docs-section> | ||
| 61 | <div .row> | ||
| 62 | <div .col-lg-12> | ||
| 63 | <div .page-header> | ||
| 64 | <h1 #forms>Forms | ||
| 65 | |||
| 66 | <p> | ||
| 67 | This is an example of a form. Read the | ||
| 68 | <a href="http://www.yesodweb.com/book/forms">Forms chapter</a> # | ||
| 69 | on the yesod book to learn more about them. | ||
| 70 | |||
| 71 | <div .row> | ||
| 72 | <div .col-lg-6> | ||
| 73 | <div .bs-callout bs-callout-info well> | ||
| 74 | <form .form-horizontal method=post action=@{HomeR}#forms enctype=#{formEnctype}> | ||
| 75 | ^{formWidget} | ||
| 76 | |||
| 77 | <button .btn.btn-primary type="submit"> | ||
| 78 | Upload it! | ||
| 79 | |||
| 80 | |||
| 81 | <div .col-lg-4.col-lg-offset-1> | ||
| 82 | <div .bs-callout.bs-callout-info.upload-response> | ||
| 83 | |||
| 84 | $maybe (FileForm info con) <- submission | ||
| 85 | Your file type is <em>#{fileContentType info}</em>. You say it has: <em>#{con}</em> | ||
| 86 | |||
| 87 | $nothing | ||
| 88 | File upload result will be here... | ||
| 89 | |||
| 90 | |||
| 91 | <hr> | ||
| 92 | |||
| 93 | <!-- JSON | ||
| 94 | ================================================== --> | ||
| 95 | <div .bs-docs-section> | ||
| 96 | <div .row> | ||
| 97 | <div .col-lg-12> | ||
| 98 | <div .page-header> | ||
| 99 | <h1 #json>JSON | ||
| 100 | |||
| 101 | <p> | ||
| 102 | Yesod has JSON support baked-in. | ||
| 103 | The form below makes an AJAX request with Javascript, | ||
| 104 | then updates the page with your submission. | ||
| 105 | (see <tt>Handler/Comment.hs</tt>, <tt>templates/homepage.julius</tt>, | ||
| 106 | and <tt>Handler/Home.hs</tt> for the implementation). | ||
| 107 | |||
| 108 | <div .row> | ||
| 109 | <div .col-lg-6> | ||
| 110 | <div .bs-callout.bs-callout-info.well> | ||
| 111 | <form .form-horizontal ##{commentFormId}> | ||
| 112 | <div .field> | ||
| 113 | <textarea rows="2" ##{commentTextareaId} placeholder="Your comment here..." required></textarea> | ||
| 114 | |||
| 115 | <button .btn.btn-primary type=submit> | ||
| 116 | Create comment | ||
| 117 | |||
| 118 | <div .col-lg-4.col-lg-offset-1> | ||
| 119 | <div .bs-callout.bs-callout-info> | ||
| 120 | <small> | ||
| 121 | Your comments will appear here. You can also open the | ||
| 122 | console log to see the raw response from the server. | ||
| 123 | <ul ##{commentListId}> | ||
| 124 | |||
| 125 | <hr> | ||
| 126 | |||
| 127 | <!-- Testing | ||
| 128 | ================================================== --> | ||
| 129 | <div .bs-docs-section> | ||
| 130 | <div .row> | ||
| 131 | <div .col-lg-12> | ||
| 132 | <div .page-header> | ||
| 133 | <h1 #test>Testing | ||
| 134 | |||
| 135 | <p> | ||
| 136 | And last but not least, Testing. In <tt>test/Spec.hs</tt> you will find a # | ||
| 137 | test suite that performs tests on this page. | ||
| 138 | <p> | ||
| 139 | 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 @@ | |||
| 1 | document.getElementById(#{toJSON aDomId}).innerHTML = "This text was added by the Javascript part of the homepage widget."; | ||
| 2 | |||
| 3 | $(function() { | ||
| 4 | $("##{rawJS commentFormId}").submit(function(event) { | ||
| 5 | event.preventDefault(); | ||
| 6 | |||
| 7 | var message = $("##{rawJS commentTextareaId}").val(); | ||
| 8 | // (Browsers that enforce the "required" attribute on the textarea won't see this alert) | ||
| 9 | if (!message) { | ||
| 10 | alert("Please fill out the comment form first."); | ||
| 11 | return; | ||
| 12 | } | ||
| 13 | |||
| 14 | // Make an AJAX request to the server to create a new comment | ||
| 15 | $.ajax({ | ||
| 16 | url: '@{CommentR}', | ||
| 17 | type: 'POST', | ||
| 18 | contentType: "application/json", | ||
| 19 | data: JSON.stringify({ | ||
| 20 | message: message, | ||
| 21 | }), | ||
| 22 | success: function (data) { | ||
| 23 | var newNode = $("<li></li>"); | ||
| 24 | newNode.text(data.message); | ||
| 25 | console.log(data); | ||
| 26 | $("##{rawJS commentListId}").append(newNode); | ||
| 27 | }, | ||
| 28 | error: function (data) { | ||
| 29 | console.log("Error creating comment: " + data); | ||
| 30 | }, | ||
| 31 | }); | ||
| 32 | |||
| 33 | }); | ||
| 34 | }); | ||
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 @@ | |||
| 1 | h2##{aDomId} { | ||
| 2 | color: #990 | ||
| 3 | } | ||
| 4 | |||
| 5 | li { | ||
| 6 | line-height: 2em; | ||
| 7 | font-size: 16px | ||
| 8 | } | ||
| 9 | |||
| 10 | ##{commentTextareaId} { | ||
| 11 | width: 400px; | ||
| 12 | height: 100px; | ||
| 13 | } | ||
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 @@ | |||
| 1 | <div .table> | ||
| 2 | <div .tr .sepBelow> | ||
| 3 | <div .th>Description | ||
| 4 | <div .th>Bought | ||
| 5 | <div .th>Expires | ||
| 6 | <div .th>Opened | ||
| 7 | <div .th>Actions | ||
| 8 | $if isJust (preview insertForm =<< formState) | ||
| 9 | $with Just InsertForm{..} <- formState | ||
| 10 | <form .tr .sepBelow action=@{InventoryListingR} method=post enctype=#{fsInsertEncoding}> | ||
| 11 | ^{fsInsertForm} | ||
| 12 | <div .td> | ||
| 13 | <button type=submit> | ||
| 14 | Insert | ||
| 15 | $forall Entity itemId Item{..} <- stock | ||
| 16 | $if Just itemId == (preview updateItem =<< formState) | ||
| 17 | $with Just UpdateForm{..} <- formState | ||
| 18 | <form .tr .color action=@{UpdateItemR fsUpdateItem}##{toPathPiece fsUpdateItem} method=post enctype=#{fsUpdateEncoding} ##{toPathPiece fsUpdateItem}> | ||
| 19 | ^{fsUpdateForm} | ||
| 20 | <div .td> | ||
| 21 | <button type=submit> | ||
| 22 | Save Changes | ||
| 23 | $else | ||
| 24 | <div .tr .color ##{toPathPiece itemId}> | ||
| 25 | <div .kind>#{itemKind} | ||
| 26 | <div .td .day> | ||
| 27 | $maybe bought <- itemBought | ||
| 28 | #{dayFormat bought} | ||
| 29 | $nothing | ||
| 30 | <hr> | ||
| 31 | <div .td .day> | ||
| 32 | $maybe expires <- itemExpires | ||
| 33 | #{dayFormat expires} | ||
| 34 | $nothing | ||
| 35 | <hr> | ||
| 36 | <div .td .day> | ||
| 37 | $maybe opened <- itemOpened | ||
| 38 | #{dayFormat opened} | ||
| 39 | $nothing | ||
| 40 | <form method=post action=@{OpenItemR itemId}> | ||
| 41 | <button type=submit> | ||
| 42 | Open | ||
| 43 | <div .td> | ||
| 44 | <form method=get action=@{UpdateItemR itemId}##{toPathPiece itemId}> | ||
| 45 | <button type=submit> | ||
| 46 | Edit | ||
| 47 | <form method=post action=@{DeleteItemR itemId}> | ||
| 48 | <button type=submit> | ||
| 49 | 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 @@ | |||
| 1 | <div .ui.container> | ||
| 2 | |||
| 3 | <h1> | ||
| 4 | Access granted! | ||
| 5 | |||
| 6 | <p> | ||
| 7 | This page is protected and access is allowed only for authenticated users. | ||
| 8 | |||
| 9 | <p> | ||
| 10 | Your data is protected with us <strong><span class="username">#{userIdent user}</span></strong>! | ||
