Skip to content

Commit edb29e7

Browse files
kudossciencekudosscience
committed
Add CSS and tidy up
1 parent 626c541 commit edb29e7

File tree

9 files changed

+170
-85
lines changed

9 files changed

+170
-85
lines changed

Diff for: ‎assets/main.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* Success/error message boxes */
2+
.box {
3+
border: 1px dotted silver;
4+
border-radius: 5px;
5+
padding: 4px;
6+
}
7+
.error {
8+
background-color: #ff6666;
9+
}
10+
.success {
11+
background-color: #88ff88;
12+
}
13+
.box ul {
14+
margin: 4px;
15+
padding-left: 14px;
16+
}
17+
.box ul li {
18+
margin-bottom: 2px;
19+
}
20+
21+
.install-password {
22+
font-size: 1.2em;
23+
}
24+
.top-menu {
25+
border: 1px dotted silver;
26+
min-height: 18px;
27+
padding: 4px;
28+
margin-bottom: 4px;
29+
}
30+
.menu-options {
31+
float: right;
32+
}
33+
h1, h2, h3 {
34+
margin-top: 0;
35+
margin-bottom: 8px;
36+
}
37+
body {
38+
font-family: sans-serif;
39+
}
40+
41+
.post-synopsis {
42+
padding-bottom: 8px;
43+
border-bottom: 1px dotted silver;
44+
margin-bottom: 20px;
45+
}
46+
.post-synopsis h2, .post h2 {
47+
color: darkblue;
48+
}
49+
.post .date, .post-synopsis .meta {
50+
color: white;
51+
background-color: grey;
52+
border-radius: 7px;
53+
padding: 2px;
54+
display: inline;
55+
font-size: 0.95em;
56+
}
57+
.comment .comment-meta {
58+
font-size: 0.85em;
59+
color: grey;
60+
border-top: 1px dotted silver;
61+
padding-top: 8px;
62+
}
63+
.comment-body p {
64+
margin: 8px 4px;
65+
}
66+
.comment-list {
67+
border-bottom: 1px dotted silver;
68+
margin-bottom: 12px;
69+
}
70+
71+
.comment-margin {
72+
margin-bottom: 8px;
73+
}
74+
.comment-form input,
75+
.comment-form textarea {
76+
margin: 4px;
77+
}
78+
.comment-form label {
79+
font-size: 0.95em;
80+
margin: 6px;
81+
width: 7em;
82+
color: grey;
83+
float: left;
84+
text-align: right;
85+
/* Some browsers make labels too tall, and as a result they incorrectly stack horizontally.
86+
Let's reset each to the left-hand side to be sure. */
87+
clear: left;
88+
}

Diff for: ‎index.php

+23-20
Original file line numberDiff line numberDiff line change
@@ -24,34 +24,37 @@
2424
<html>
2525
<head>
2626
<title>A blog application</title>
27-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
27+
<?php require 'templates/head.php' ?>
2828
</head>
2929
<body>
3030
<?php require 'templates/title.php' ?>
3131

3232
<?php if ($notFound): ?>
33-
<div style="border: 1px solid #ff6666; padding: 6px;">
33+
<div class="error box">
3434
Error: cannot find the requested blog post
3535
</div>
3636
<?php endif ?>
3737

38-
<?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)): ?>
39-
<h2>
40-
<?php echo htmlEscape($row['title']) ?>
41-
</h2>
42-
<div>
43-
<?php echo convertSqlDate($row['created_at']) ?>
44-
45-
(<?php echo countCommentsForPost($row['id']) ?> comments)
46-
</div>
47-
<p>
48-
<?php echo htmlEscape($row['body']) ?>
49-
</p>
50-
<p>
51-
<a
52-
href="view-post.php?post_id=<?php echo $row['id'] ?>"
53-
>Read more...</a>
54-
</p>
55-
<?php endwhile ?>
38+
<div class="post-list">
39+
<?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)): ?>
40+
<div class="post-synopsis">
41+
<h2>
42+
<?php echo htmlEscape($row['title']) ?>
43+
</h2>
44+
<div class="meta">
45+
<?php echo convertSqlDate($row['created_at']) ?>
46+
(<?php echo countCommentsForPost($pdo, $row['id']) ?> comments)
47+
</div>
48+
<p>
49+
<?php echo htmlEscape($row['body']) ?>
50+
</p>
51+
<div class="read-more">
52+
<a
53+
href="view-post.php?post_id=<?php echo $row['id'] ?>"
54+
>Read more...</a>
55+
</div>
56+
</div>
57+
<?php endwhile ?>
58+
</div>
5659
</body>
5760
</html>

Diff for: ‎install.php

+2-15
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,7 @@
5050
<html>
5151
<head>
5252
<title>Blog installer</title>
53-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
54-
<style type="text/css">
55-
.box {
56-
border: 1px dotted silver;
57-
border-radius: 5px;
58-
padding: 4px;
59-
}
60-
.error {
61-
background-color: #ff6666;
62-
}
63-
.success {
64-
background-color: #88ff88;
65-
}
66-
</style>
53+
<?php require 'templates/head.php' ?>
6754
</head>
6855
<body>
6956
<?php if ($attempted): ?>
@@ -88,7 +75,7 @@
8875

8976
<?php // Report the new password ?>
9077
The new '<?php echo htmlEscape($username) ?>' password is
91-
<span style="font-size: 1.2em;"><?php echo htmlEscape($password) ?></span>
78+
<span class="install-password"><?php echo htmlEscape($password) ?></span>
9279
(copy it to clipboard if you wish).
9380
</div>
9481

Diff for: ‎lib/common.php

+5-5
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,10 @@ function redirectAndExit($script)
9090
*
9191
* @param integer $postId
9292
* @return integer
93+
* @param PDO $pdo
9394
*/
94-
function countCommentsForPost($postId)
95+
function countCommentsForPost(PDO $pdo, $postId)
9596
{
96-
$pdo = getPDO();
9797
$sql = "
9898
SELECT
9999
COUNT(*) c
@@ -112,12 +112,12 @@ function countCommentsForPost($postId)
112112

113113
/**
114114
* Returns all the comments for the specified post
115-
*
115+
* @param PDO $pdo
116116
* @param integer $postId
117+
* return array
117118
*/
118-
function getCommentsForPost($postId)
119+
function getCommentsForPost(PDO $pdo, $postId)
119120
{
120-
$pdo = getPDO();
121121
$sql = "
122122
SELECT
123123
id, name, text, created_at, website

Diff for: ‎login.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@
3232
<title>
3333
A blog application | Login
3434
</title>
35-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
35+
<?php require 'templates/head.php' ?>
3636
</head>
3737
<body>
3838
<?php require 'templates/title.php' ?>
3939

4040
<?php // If we have a username, then the user got something wrong, so let's have an error ?>
4141
<?php if ($username): ?>
42-
<div style="border: 1px solid #ff6666; padding: 6px;">
42+
<div class="error box">
4343
The username or password is incorrect, try again
4444
</div>
4545
<?php endif ?>

Diff for: ‎templates/comment-form.php

+12-11
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
*/
66
?>
77

8-
<?php // We'll use a rule-off for now, to separate page sections ?>
9-
<hr />
108
<?php // Report any errors in a bullet-point list ?>
119
<?php if ($errors): ?>
12-
<div style="border: 1px solid #ff6666; padding: 6px;">
10+
<div class="error box comment-margin">
1311
<ul>
1412
<?php foreach ($errors as $error): ?>
1513
<li><?php echo $error ?></li>
@@ -18,8 +16,8 @@
1816
</div>
1917
<?php endif ?>
2018
<h3>Add your comment</h3>
21-
<form method="post">
22-
<p>
19+
<form method="post" class="comment-form">
20+
<div>
2321
<label for="comment-name">
2422
Name:
2523
</label>
@@ -29,8 +27,8 @@
2927
name="comment-name"
3028
value="<?php echo htmlEscape($commentData['name']) ?>"
3129
/>
32-
</p>
33-
<p>
30+
</div>
31+
<div>
3432
<label for="comment-website">
3533
Website:
3634
</label>
@@ -40,8 +38,8 @@
4038
name="comment-website"
4139
value="<?php echo htmlEscape($commentData['website']) ?>"
4240
/>
43-
</p>
44-
<p>
41+
</div>
42+
<div>
4543
<label for="comment-text">
4644
Comment:
4745
</label>
@@ -51,6 +49,9 @@
5149
rows="8"
5250
cols="70"
5351
><?php echo htmlEscape($commentData['text']) ?></textarea>
54-
</p>
55-
<input type="submit" value="Submit comment" />
52+
</div>
53+
54+
<div>
55+
<input type="submit" value="Submit comment" />
56+
</div>
5657
</form>

Diff for: ‎templates/head.php

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
2+
<link rel="stylesheet" type="text/css" href="assets/main.css" />

Diff for: ‎templates/title.php

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
<div style="float: right;">
2-
<?php if (isLoggedIn()): ?>
3-
Hello <?php echo htmlEscape(getAuthUser()) ?>.
4-
<a href="logout.php">Log out</a>
5-
<?php else: ?>
6-
<a href="login.php">Log in</a>
7-
<?php endif ?>
1+
<div class="top-menu">
2+
<div class="menu-options">
3+
<?php if (isLoggedIn()): ?>
4+
Hello <?php echo htmlEscape(getAuthUser()) ?>.
5+
<a href="logout.php">Log out</a>
6+
<?php else: ?>
7+
<a href="login.php">Log in</a>
8+
<?php endif ?>
9+
</div>
810
</div>
911

1012
<a href="index.php">

Diff for: ‎view-post.php

+27-25
Original file line numberDiff line numberDiff line change
@@ -61,38 +61,40 @@
6161
A blog application |
6262
<?php echo htmlEscape($row['title']) ?>
6363
</title>
64-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
64+
<?php require 'templates/head.php' ?>
6565
</head>
6666
<body>
6767
<?php require 'templates/title.php' ?>
6868

69-
70-
<h2>
71-
<?php echo htmlEscape($row['title']) ?>
72-
</h2>
73-
<div>
74-
<?php echo convertSqlDate($row['created_at']) ?>
69+
<div class="post">
70+
<h2>
71+
<?php echo htmlEscape($row['title']) ?>
72+
</h2>
73+
<div class="date">
74+
<?php echo convertSqlDate($row['created_at']) ?>
75+
</div>
76+
<?php // This is already escaped, so doesn't need further escaping ?>
77+
<?php echo convertNewlinesToParagraphs($row['body']) ?>
7578
</div>
76-
<?php // This is already escaped, so doesn't need further escaping ?>
77-
<?php echo convertNewlinesToParagraphs($row['body']) ?>
7879

79-
<h3><?php echo countCommentsForPost($postId) ?> comments</h3>
80-
<?php foreach (getCommentsForPost($postId) as $comment): ?>
81-
<?php // For now, we'll use a horizontal rule-off to split it up a bit ?>
82-
<hr />
83-
<div class="comment">
84-
<div class="comment-meta">
85-
Comment from
86-
<?php echo htmlEscape($comment['name']) ?>
87-
on
88-
<?php echo convertSqlDate($comment['created_at']) ?>
80+
<div class="comment-list">
81+
<h3><?php echo countCommentsForPost($pdo, $postId) ?> comments</h3>
82+
83+
<?php foreach (getCommentsForPost($pdo, $postId) as $comment): ?>
84+
<div class="comment">
85+
<div class="comment-meta">
86+
Comment from
87+
<?php echo htmlEscape($comment['name']) ?>
88+
on
89+
<?php echo convertSqlDate($comment['created_at']) ?>
90+
</div>
91+
<div class="comment-body">
92+
<?php // This is already escaped ?>
93+
<?php echo convertNewlinesToParagraphs($comment['text']) ?>
94+
</div>
8995
</div>
90-
<div class="comment-body">
91-
<?php // This is already escaped ?>
92-
<?php echo convertNewlinesToParagraphs($comment['text']) ?>
93-
</div>
94-
</div>
95-
<?php endforeach ?>
96+
<?php endforeach ?>
97+
</div>
9698

9799
<?php require 'templates/comment-form.php' ?>
98100
</body>

0 commit comments

Comments
 (0)