summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/default-layout-wrapper.hamlet15
-rw-r--r--templates/default-layout.cassius77
-rw-r--r--templates/default-layout.hamlet12
-rw-r--r--templates/default-layout.julius7
-rw-r--r--templates/default-message-widget.hamlet6
-rw-r--r--templates/homepage.hamlet139
-rw-r--r--templates/homepage.julius34
-rw-r--r--templates/homepage.lucius13
-rw-r--r--templates/inventoryListing.hamlet49
-rw-r--r--templates/profile.hamlet10
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
31button
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
48body > div
49 margin: 0 auto
50.table > h1
51 display: table-caption
52nav 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:""
73label.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 @@
1webshims.setOptions("forms-ext", {
2 "widgets": {
3 "classes": "hide-dropdownbtn"
4 }
5});
6webshims.activeLang("en-GB");
7webshims.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 @@
1document.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 @@
1h2##{aDomId} {
2 color: #990
3}
4
5li {
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>!
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 02:11:14 +0000