home » zplus/freepost.git
Author zPlus <--> 2016-11-29 01:44:19
Committer zPlus <--> 2016-11-29 01:44:19
Commit ed534f6 (patch)
Tree 8050a1a
Parent(s)

Merge branch 'search' * search: templates: - put header in a flexbox - correct wrong tabs in freepost.styl template/search.twig: better layout for results database.php: update search function - join results with username - change results order from ASC to DESC search.php: add search controller template/search.twig: add template to display search results template/header.twig: add search box database.php: add simple search function new file: search.php new file: template/search.twig Add search input box Show "Submit" button only if logged in


commits diff: 565402f..ed534f6
5 files changed, 422 insertions, 273 deletionsdownload


Diffstat
-rw-r--r-- css/freepost.styl 534
-rw-r--r-- database.php 34
-rw-r--r-- search.php 40
-rw-r--r-- template/header.twig 48
-rw-r--r-- template/search.twig 39

Diff options
View
Side
Whitespace
Context lines
Inter-hunk lines
+281/-253 M   css/freepost.styl
index a1248bd..9e0eacc
old size: 8K - new size: 11K
@@ -5,288 +5,316 @@ body
5 5 margin auto
6 6 max-width 80%
7 7
8 - /* Page header */
9 - .header
10 - padding 1em 0
11 - text-align center
12 -
13 - /* Logo text */
14 - a.logo,
15 - a.logo:hover,
16 - a.logo:visited
17 - color #000
18 - font-weight bold
19 - text-decoration none
20 -
21 - /* Logo picture */
22 - > img
23 - height 1.5em
24 - margin 0 1em
25 - vertical-align middle
26 -
27 - /* Menu under the logo */
28 - > .menu
29 - padding 1em 0
30 -
31 - > *
32 - margin 0 1em
33 -
34 - /* Highlight username if there are unread messages */
35 - .new_messages
36 - background-color rgb(255, 175, 50)
37 - border-radius 4px
38 - color #fff
39 - font-weight bold
40 - margin 0 .5em 0 0
41 - padding 0em 0.5em
42 - text-decoration none
43 -
44 -
45 - .content
46 - padding 1em 0
47 - line-height 1.5em
48 -
49 - .vote
50 - margin 0 1.5em 0 0
51 -
52 - > a
53 - display: inline-block
54 - margin: 0
55 - overflow: hidden
56 - padding: 0
57 - text-decoration none
58 - vertical-align middle
59 -
60 - /* up-down arrows are images */
61 - img
62 - cursor pointer
63 - height 1em
64 - margin 0
65 - padding .2em
66 - float left
67 -
68 - /* Arrow style if already upvoted (green) */
69 - .upvoted
70 - background-color #fff
71 - border 1px solid #00E313
72 - border-radius 999em
73 -
74 - /* Arrow style if already upvoted (red) */
75 - .downvoted
76 - background-color #fff
77 - border 1px solid #FF0000
78 - border-radius 999em
8 + /* Page header */
9 + > .header
10 + padding 1em 0
11 + text-align center
79 12
80 - /* Votes counter */
81 - .count
82 - margin 0 .5em
83 -
84 - /* Home page */
85 - .posts
86 -
87 - /* A singe post */
88 - .post
89 - margin 0 0 2em 0
90 - vertical-align top
13 + > .flex-container
14 + display flex
15 + flex-direction row
16 + flex-wrap wrap
17 + justify-content space-between
18 + align-content stretch
19 + align-items flex-start
20 +
21 + width 80%
22 + margin auto
23 +
24 + > .flex-item
25 + order 0
26 + flex 0 1 auto
27 + align-self auto
28 +
29 + /* Logo text */
30 + a.logo,
31 + a.logo:hover,
32 + a.logo:visited
33 + color #000
34 + font-weight bold
35 + text-decoration none
36 +
37 + /* Logo picture */
38 + img
39 + height 1.5em
40 + margin 0 1em
41 + vertical-align middle
91 42
92 - > .title
93 - font-size 1.5em
43 + /* Menu under the logo */
44 + > .menu
45 + display flex
46 + flex-direction row
47 + flex-wrap wrap
48 + justify-content flex-end
49 + align-content flex-start
50 + align-items flex-start
94 51
95 - > a
96 - color #000
52 + margin 1em auto
53 + width 80%
54 +
55 + > .flex-item
56 + order 0
57 + flex 0 1 auto
58 + align-self auto
59 +
60 + margin .5em 1em
97 61
98 - /* Some post info showed below the title */
99 - > .info
100 - color #666
101 - margin .5em 0
102 - opacity .8
62 + /* Highlight username if there are unread messages */
63 + .new_messages
64 + background-color rgb(255, 175, 50)
65 + border-radius 4px
66 + color #fff
67 + font-weight bold
68 + margin 0
69 + padding .5em .5em
70 + text-decoration none
103 71
104 - /* New submission page */
105 - > form.submit
106 - margin auto
107 - max-width 30em
108 72
109 - /* Page for a post */
110 - > .post
111 -
112 - /* Style used to format Markdown tables */
113 - table
114 - background #fff
115 - border-collapse collapse
116 - text-align left
73 + > .content
74 + padding 1em 0
75 + line-height 1.5em
76 +
77 + .vote
78 + margin 0 1.5em 0 0
117 79
118 - th
119 - border-bottom 2px solid #6678b1
120 - color #039
121 - font-weight normal
122 - padding 0 1em
80 + > a
81 + display: inline-block
82 + margin: 0
83 + overflow: hidden
84 + padding: 0
85 + text-decoration none
86 + vertical-align middle
123 87
124 - td
125 - border-bottom 1px solid #ccc
126 - color #669
127 - padding .5em 1em
88 + /* up-down arrows are images */
89 + img
90 + cursor pointer
91 + height 1em
92 + margin 0
93 + padding .2em
94 + float left
128 95
129 - tbody tr:hover td
130 - color #009
131 -
132 - /* The post title */
133 - > .title
134 - font-size 1.5em
96 + /* Arrow style if already upvoted (green) */
97 + .upvoted
98 + background-color #fff
99 + border 1px solid #00E313
100 + border-radius 999em
101 +
102 + /* Arrow style if already upvoted (red) */
103 + .downvoted
104 + background-color #fff
105 + border 1px solid #FF0000
106 + border-radius 999em
107 +
108 + /* Votes counter */
109 + .count
110 + margin 0 .5em
135 111
136 - /* Info below post title */
137 - .info
138 - margin 1em 0
112 + /* Home page */
113 + .posts
114 +
115 + /* A singe post */
116 + .post
117 + margin 0 0 2em 0
118 + vertical-align top
119 +
120 + > .title
121 + font-size 1.5em
122 +
123 + > a
124 + color #000
125 +
126 + /* Some post info showed below the title */
127 + > .info
128 + color #666
129 + margin .5em 0
130 + opacity .8
139 131
140 - /* Post text */
141 - > .text
142 - margin 1em 2.5em
143 - word-wrap break-word
132 + /* New submission page */
133 + > form.submit
134 + margin auto
135 + max-width 30em
144 136
145 - /* The "new comment" form for this post page */
146 - .new_comment
147 - margin 0 2.5em
148 - overflow hidden
137 + /* Page for a post */
138 + > .post
149 139
150 - > textarea
151 - height 2.5em
140 + /* Style used to format Markdown tables */
141 + table
142 + background #fff
143 + border-collapse collapse
144 + text-align left
145 +
146 + th
147 + border-bottom 2px solid #6678b1
148 + color #039
149 + font-weight normal
150 + padding 0 1em
151 +
152 + td
153 + border-bottom 1px solid #ccc
154 + color #669
155 + padding .5em 1em
152 156
153 - -webkit-transition 1s
154 - transition 1s
157 + tbody tr:hover td
158 + color #009
155 159
156 - > textarea:focus
157 - height 10em
160 + /* The post title */
161 + > .title
162 + font-size 1.5em
158 163
159 - > input[type=submit]
160 - float right
161 - margin 1em 0
162 -
163 - /* Comments tree for the Post page */
164 - > .comments
165 - margin 5em 0 0 0
164 + /* Info below post title */
165 + .info
166 + margin 1em 0
166 167
167 - /* A single comment in the tree */
168 - > .comment
169 - margin 0 0 2em 0
168 + /* Post text */
169 + > .text
170 + margin 1em 2.5em
171 + word-wrap break-word
172 +
173 + /* The "new comment" form for this post page */
174 + .new_comment
175 + margin 0 2.5em
170 176 overflow hidden
171 177
172 - /* This is just a mark to indicate the beginning
173 - * of a new comment. The only reason for this is
174 - * to make the thread more readable
175 - */
176 - > .pin
177 - color #f00 /* #CD006B */
178 - float left
179 - font-size .5em
180 - padding 0 1em 0 0
181 - vertical-align top
178 + > textarea
179 + height 2.5em
180 +
181 + -webkit-transition 1s
182 + transition 1s
182 183
183 - /* Some info about this comment */
184 - > .info
185 - font-size .9em
186 - margin 0 0 0 1em
184 + > textarea:focus
185 + height 10em
187 186
188 - .username > a,
189 - .username > a:hover
190 - font-weight bold
187 + > input[type=submit]
188 + float right
189 + margin 1em 0
190 +
191 + /* Comments tree for the Post page */
192 + > .comments
193 + margin 5em 0 0 0
194 +
195 + /* A single comment in the tree */
196 + > .comment
197 + margin 0 0 2em 0
198 + overflow hidden
199 +
200 + /* This is just a mark to indicate the beginning
201 + * of a new comment. The only reason for this is
202 + * to make the thread more readable
203 + */
204 + > .pin
205 + color #f00 /* #CD006B */
206 + float left
207 + font-size .5em
208 + padding 0 1em 0 0
209 + vertical-align top
191 210
192 - .op > a,
193 - .op > a:hover
194 - background-color rgb(255, 175, 50)
195 - border-radius 4px
196 - color #fff
197 - font-weight bold
198 - margin 0 .5em 0 0
199 - padding 0em 0.5em
200 - text-decoration none
211 + /* Some info about this comment */
212 + > .info
213 + font-size .9em
214 + margin 0 0 0 1em
215 +
216 + .username > a,
217 + .username > a:hover
218 + font-weight bold
219 +
220 + .op > a,
221 + .op > a:hover
222 + background-color rgb(255, 175, 50)
223 + border-radius 4px
224 + color #fff
225 + font-weight bold
226 + margin 0 .5em 0 0
227 + padding 0em 0.5em
228 + text-decoration none
201 229
202 - > .vote
203 - margin 0 1em
230 + > .vote
231 + margin 0 1em
204 232
205 - /* The comment text */
206 - > .text
207 - margin .5em 0 0 1.5em
208 - word-wrap break-word
233 + /* The comment text */
234 + > .text
235 + margin .5em 0 0 1.5em
236 + word-wrap break-word
209 237
210 - /* Give the comment that's linked to in the URL location hash a lightyellow background color */
211 - .comment:target
212 - background-color lightyellow
213 -
214 - /* User home page */
215 - table.user
216 - /* If one length specified: both horizontal and vertical spacing
217 - * If two length specified: first sets the horizontal spacing, and
218 - * the second sets the vertical spacing
219 - */
220 - border-spacing 2em 1em
221 - border-collapse separate
222 - margin auto
223 - width 80%
238 + /* Give the comment that's linked to in the URL location hash a lightyellow background color */
239 + .comment:target
240 + background-color lightyellow
224 241
225 - tr
226 - > td:first-child
227 - font-weight bold
228 - text-align right
229 - vertical-align top
230 - width 30%
242 + /* User home page */
243 + table.user
244 + /* If one length specified: both horizontal and vertical spacing
245 + * If two length specified: first sets the horizontal spacing, and
246 + * the second sets the vertical spacing
247 + */
248 + border-spacing 2em 1em
249 + border-collapse separate
250 + margin auto
251 + width 80%
252 +
253 + tr
254 + > td:first-child
255 + font-weight bold
256 + text-align right
257 + vertical-align top
258 + width 30%
259 +
260 + > td:last-child
261 + text-align left
231 262
232 - > td:last-child
233 - text-align left
263 + /* User activity */
264 + > .user_activity
234 265
235 - /* User activity */
236 - > .user_activity
237 -
238 - > *
239 - margin 0 0 2em 0
266 + > *
267 + margin 0 0 2em 0
268 +
269 + > .info
270 + color #888
240 271
241 - > .info
242 - color #888
243 -
244 - /* Login page */
245 - > .login
246 - margin auto
247 - max-width 20em
272 + /* Login page */
273 + > .login
274 + margin auto
275 + max-width 20em
276 +
277 + input[type=submit]
278 + margin 1em 0
279 +
280 + .title
281 + line-height 2em
248 282
249 - input[type=submit]
250 - margin 1em 0
283 + /* Page to edit a post or a comment */
284 + > .edit
285 + {
286 + }
251 287
252 - .title
253 - line-height 2em
254 -
255 - /* Page to edit a post or a comment */
256 - > .edit
257 - {
258 - }
259 -
260 - /* Page to reply to a comment */
261 - > .reply
262 - {
263 - }
264 -
265 - /* About page */
266 - > .about
267 -
268 - > h3
269 - margin 1em 0 .5em 0
288 + /* Page to reply to a comment */
289 + > .reply
290 + {
291 + }
270 292
271 - > p
272 - line-height 1.5em
273 -
274 - .footer
275 - border-top 1px solid #6ECFFF
276 - margin 3em 0 0 0
277 - padding 2em 0
278 -
279 - img
280 - height 1.2em
281 - margin 0 .5em 0 0
282 - vertical-align middle
283 -
284 - > ul
285 - list-style none
286 - margin 0
287 - overflow hidden
288 - padding 0
289 -
290 - > li
291 - float left
292 - margin 0 2em 0 0
292 > \ No newline at end of file
293 + /* About page */
294 + > .about
295 +
296 + > h3
297 + margin 1em 0 .5em 0
298 +
299 + > p
300 + line-height 1.5em
301 +
302 + > .footer
303 + border-top 1px solid #6ECFFF
304 + margin 3em 0 0 0
305 + padding 2em 0
306 +
307 + img
308 + height 1.2em
309 + margin 0 .5em 0 0
310 + vertical-align middle
311 +
312 + > ul
313 + list-style none
314 + margin 0
315 + overflow hidden
316 + padding 0
317 +
318 + > li
319 + float left
320 + margin 0 2em 0 0
320 < \ No newline at end of file

+34/-0 M   database.php
index acba971..27fb167
old size: 40K - new size: 41K
@@ -1311,4 +1311,38 @@ class Database
1311 1311
1312 1312 return true;
1313 1313 }
1314 +
1315 + /**
1316 + * Search database
1317 + *
1318 + * TODO: When MySQL will be updated to v5.6, add fulltext search
1319 + * with scores for better results. InnoDB doesn't support
1320 + * fulltext search with older versions.
1321 + */
1322 + function search ($search_query)
1323 + {
1324 + if (is_null ($this->database))
1325 + return false;
1326 +
1327 + $search_query = trim ($search_query);
1328 +
1329 + if (strlen ($search_query) == 0)
1330 + return false;
1331 +
1332 + $search_query = str_ireplace (' ', '%', $search_query);
1333 +
1334 + $query = $this->database->prepare (
1335 + 'SELECT P.*, U.`username` ' .
1336 + 'FROM `post` AS P ' .
1337 + 'JOIN `user` AS U ON P.`userId` = U.`id`' .
1338 + 'WHERE P.`title` LIKE ? ' .
1339 + 'ORDER BY P.`created` DESC ' .
1340 + 'LIMIT 100');
1341 +
1342 + $query->execute (['%' . $search_query . '%']);
1343 +
1344 + $results = $query->fetchAll (PDO::FETCH_ASSOC);
1345 +
1346 + return $results;
1347 + }
1314 1348 }

+40/-0 A   search.php
index 0000000..16cef45
old size: 0B - new size: 657B
new file mode: -rw-r--r--
@@ -0,0 +1,40 @@
1 + <?php
2 +
3 + /* This script is used to search content and display results */
4 +
5 + require_once 'session.php';
6 + require_once 'database.php';
7 + require_once 'date.php';
8 + require_once 'twig.php';
9 +
10 + $db = new Database();
11 + $db->connect();
12 +
13 + // Must have a query ?q=
14 + if (!isset ($_GET['q']))
15 + {
16 + header ('Location: ./');
17 + exit ();
18 + }
19 +
20 + $query = trim ($_GET['q']);
21 +
22 + // Query must not be an empty string
23 + if (strlen ($query) == 0)
24 + {
25 + header ('Location: ./');
26 + exit ();
27 + }
28 +
29 + $search_results = $db->search ($query);
30 +
31 + echo $twig->render (
32 + 'search.twig',
33 + ['query' => $query,
34 + 'search_results' => $search_results]);
35 +
36 +
37 +
38 +
39 +
40 +
40 < \ No newline at end of file

+28/-20 M   template/header.twig
index 44d29d8..54f622e
old size: 2K - new size: 3K
@@ -13,42 +13,50 @@
13 13 <div class="container">
14 14
15 15 <div class="header">
16 - <a href="{{ ''|docroot }}" class="logo">
17 - free
16 + <div class="flex-container">
17 + <div class="flex-item">
18 + <a href="{{ ''|docroot }}" class="logo">
19 + free
20 +
21 + {# &nbsp; is an extra space because "post" is displayed attached to the picture (not sure why) #}
22 + <img alt="🐵&nbsp;" title="freepost" src="images/freepost.png" />
23 +
24 + post
25 + </a>
26 + </div>
18 27
19 - {# &nbsp; is an extra space because "post" is displayed attached to the picture (not sure why) #}
20 - <img alt="🐵&nbsp;" title="freepost" src="images/freepost.png" />
21 -
22 - post
23 - </a>
28 + <div class="flex-item">
29 + <form action="{{ 'search'|docroot }}">
30 + <input type="text" name="q" value="{{ query }}" placeholder="Search posts" />
31 + </form>
32 + </div>
33 + </div>
24 34
25 - <p class="menu">
26 - <a href="{{ ''|docroot }}">Hot</a> •
27 - <a href="{{ 'new'|docroot }}">New</a> •
28 - <a href="{{ 'submit'|docroot }}">Submit</a> •
29 - <a href="{{ 'about'|docroot }}">About</a> •
30 - {# <a href="https://libre.exchange">Shop</a> • #}
35 + <div class="menu">
36 + <a href="{{ ''|docroot }}" class="flex-item">Hot</a>
37 + <a href="{{ 'new'|docroot }}" class="flex-item">New</a>
38 + <a href="{{ 'about'|docroot }}" class="flex-item">About</a>
31 39
32 40 {% if user %}
33 41 {% set unread_messages = new_messages() %}
34 42
43 + <a href="{{ 'submit'|docroot }}" class="flex-item">Submit</a>
44 +
35 45 {% if unread_messages %}
36 - <a href="{{ 'user_activity/replies'|docroot }}" class="new_messages">
46 + <a href="{{ 'user_activity/replies'|docroot }}" class="new_messages flex-item">
37 47 {{ user.name }} ({{ unread_messages }})
38 48 </a>
39 49 {% else %}
40 - <a href="{{ 'user'|docroot }}">
50 + <a href="{{ 'user'|docroot }}" class="flex-item">
41 51 {{ user.name }}
42 52 </a>
43 53 {% endif %}
44 54
45 -
46 -
47 - <a href="{{ 'logout'|docroot }}">Log out</a>
55 + <a href="{{ 'logout'|docroot }}" class="flex-item">Log out</a>
48 56 {% else %}
49 - <a href="{{ 'login'|docroot }}">Log in</a>
57 + <a href="{{ 'login'|docroot }}" class="flex-item">Log in</a>
50 58 {% endif %}
51 - </p>
59 + </div>
52 60 </div>
53 61
54 62 <div class="content">
54 62 = \ No newline at end of file

+39/-0 A   template/search.twig
index 0000000..38184cd
old size: 0B - new size: 1K
new file mode: -rw-r--r--
@@ -0,0 +1,39 @@
1 + {% include 'header.twig' %}
2 +
3 + <div class="posts">
4 +
5 + {% for post in search_results %}
6 +
7 + <div class="post">
8 + <div class="title">
9 + {% if post.link|length > 0 %}
10 + <a href="{{ post.link }}">
11 + {{ post.title }}
12 + </a>
13 + {% else %}
14 + <a href="post/{{ post.hashId }}">
15 + {{ post.title }}
16 + </a>
17 + {% endif %}
18 + </div>
19 +
20 + <div class="info">
21 + <em><a href="post/{{ post.hashId }}">{{ post.created|ago }}</a></em>
22 + by <a href="{{ ('user/' ~ post.username)|docroot }}">{{ post.username }}</a>
23 +
24 + <a href="post/{{ post.hashId }}#comments">{{ post.commentsCount ? post.commentsCount }} comments</a>
25 + </div>
26 + </div>
27 +
28 + {% endfor %}
29 +
30 + {# Add once I'll have fulltext search
31 + <div class="more">
32 + <a href="?page={{ page + 1 }}" class="button button_default1">
33 + More
34 + </a>
35 + </div>
36 + #}
37 + </div>
38 +
39 + {% include 'footer.twig' %}