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>! | ||