MDL-65474 forum: adjust forum post html structure
[moodle.git] / mod / forum / templates / forum_discussion_post.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template mod_forum/forum_discussion_post
20     Template to render a single post from a discussion.
22     Classes required for JS:
23     * none
25     Data attributes required for JS:
26     * none
28     Example context (json):
29     {
30     }
31 }}
32 <article
33     id="p{{id}}"
34     class="relativelink mb-2"
35     data-post-id="{{id}}"
36     data-region="post"
37     data-target="{{id}}-target"
38     tabindex="-1"
39     aria-labelledby="post-header-{{id}}"
40     aria-describedby="post-content-{{id}}"
41 >
42     <!-- The firstpost and starter classes below aren't used for anything other than to identify the first post in behat -->
43     <div
44         class="d-flex border p-2 mb-2 forumpost {{#unread}}unread{{/unread}} {{#firstpost}}firstpost starter{{/firstpost}}"
45         aria-label='{{#str}} postbyuser, mod_forum, {"post": "{{subject}}", "user": "{{author.fullname}}"} {{/str}}'
46         data-post-id="{{id}}" data-content="forum-post"
47     >
48         {{#isfirstunread}}<a id="unread" aria-hidden="true"></a>{{/isfirstunread}}
50         <div class="d-flex flex-column w-100"  data-region-content="forum-post-core">
51             <header  class="mb-2 header row d-flex">
52                 {{^isdeleted}}
53                     {{#author}}
54                         <div class="mr-2" style="width: 45px;">
55                             {{#urls.profileimage}}
56                                 <img
57                                     class="rounded-circle w-100"
58                                     src="{{{.}}}"
59                                     alt="{{#str}} pictureof, core, {{author.fullname}} {{/str}}"
60                                     aria-hidden="true"
61                                 >
62                             {{/urls.profileimage}}
63                         </div>
64                     {{/author}}
65                 {{/isdeleted}}
66                 <div class="d-flex flex-column">
67                     {{#parentauthorname}}
68                         <span class="sr-only">{{#str}} inreplyto, mod_forum, {{.}} {{/str}}</span>
69                     {{/parentauthorname}}
70                     <h3 class="h6 font-weight-bold mb-0" data-region-content="forum-post-core-subject">{{$subject}}{{{subject}}}{{/subject}}</h3>
71                     {{^isdeleted}}
72                         <address tabindex="-1">
73                             {{#html.authorsubheading}}{{{.}}}{{/html.authorsubheading}}
74                             {{^html.authorsubheading}}
75                                 <time>
76                                     {{#userdate}} {{timecreated}}, {{#str}} strftimedaydatetime, core_langconfig {{/str}} {{/userdate}}
77                                 </time>
78                             {{/html.authorsubheading}}
79                         </address>
80                     {{/isdeleted}}
81                     {{#isprivatereply}}
82                         <div class="privatereplyinfo">
83                         {{#str}}postisprivatereply, forum{{/str}}
84                         </div>
85                     {{/isprivatereply}}
86                     {{#hasreplycount}}
87                         <span class="sr-only">{{#str}} numberofreplies, mod_forum, {{replycount}} {{/str}}</span>
88                     {{/hasreplycount}}
89                 </div>
90             </header>
92             <div class="d-flex body-content-container">
93                 {{^isdeleted}}
94                     {{#author}}
95                         <div class="mr-2 author-groups-container" style="width: 45px; flex-shrink: 0">
96                             {{#groups}}
97                                 {{#urls.image}}
98                                     <img
99                                         class="rounded-circle w-100"
100                                         src="{{{.}}}"
101                                         alt="{{#str}} pictureof, core, {{name}} {{/str}}"
102                                         aria-hidden="true"
103                                     >
104                                 {{/urls.image}}
105                             {{/groups}}
106                         </div>
107                     {{/author}}
108                 {{/isdeleted}}
110                 <div class="no-overflow w-100 content-alignment-container">
111                     <div id="post-content-{{id}}" class="post-content-container">
112                         {{{message}}}
113                     </div>
115                     {{^isdeleted}}
116                         {{#haswordcount}}
117                             <p class="font-italic mb-0"><small>{{#str}} numwords, core, {{wordcount}} {{/str}}</small></p>
118                         {{/haswordcount}}
120                         {{#attachments}}
121                             {{#isimage}}
122                                 <div class="attachedimages">
123                                     <img
124                                         src="{{{url}}}"
125                                         alt="{{#str}} attachmentname, mod_forum, {{filename}} {{/str}}"
126                                         style="max-width: 100%"
127                                     >
128                                     {{#urls.export}}
129                                         <a href="{{{.}}}" title="{{#str}} addtoportfolio, core_portfolio {{/str}}">
130                                             {{#pix}} t/portfolioadd, core {{/pix}}
131                                         </a>
132                                     {{/urls.export}}
133                                     {{#html.plagiarism}}
134                                         <div>{{{.}}}</div>
135                                     {{/html.plagiarism}}
136                                 </div>
137                             {{/isimage}}
138                         {{/attachments}}
140                         {{{html.taglist}}}
142                         {{#attachments}}
143                             {{^isimage}}
144                                 <div>
145                                     <a
146                                         href="{{{url}}}"
147                                         aria-label="{{#str}} attachmentname, mod_forum, {{filename}} {{/str}}"
148                                     >
149                                         {{#pix}} {{icon}}, core {{/pix}} {{filename}}
150                                     </a>
151                                     {{#urls.export}}
152                                         <a href="{{{.}}}" title="{{#str}} exportattachmentname, mod_forum, {{filename}} {{/str}}">
153                                             {{#pix}} t/portfolioadd, core {{/pix}}
154                                         </a>
155                                     {{/urls.export}}
156                                     {{#html.plagiarism}}
157                                         <div>{{{.}}}</div>
158                                     {{/html.plagiarism}}
159                                 </div>
160                             {{/isimage}}
161                         {{/attachments}}
163                         <div class="d-flex flex-wrap">
164                             {{#html.rating}}
165                                 <div class="mt-2">{{{.}}}</div>
166                             {{/html.rating}}
167                             {{$actions}}
168                                 {{^readonly}}
169                                     <div
170                                         class="d-flex align-self-end justify-content-end flex-wrap ml-auto"
171                                         data-region="post-actions-container"
172                                         role="menubar"
173                                         aria-label='{{#str}} postbyuser, mod_forum, {"post": "{{subject}}", "user": "{{author.fullname}}"} {{/str}}'
174                                         aria-controls="p{{id}}"
175                                     >
176                                         {{#capabilities}}
177                                             {{#view}}
178                                                 <a
179                                                     data-region="post-action"
180                                                     href="{{{urls.view}}}"
181                                                     class="btn btn-link"
182                                                     title="{{#str}} permanentlinktopost, mod_forum {{/str}}"
183                                                     role="menuitem"
184                                                 >
185                                                     {{#str}} permalink, mod_forum {{/str}}
186                                                 </a>
187                                             {{/view}}
188                                             {{#controlreadstatus}}
189                                                 {{#unread}}
190                                                     <a
191                                                         data-region="post-action"
192                                                         href="{{{urls.markasread}}}"
193                                                         class="btn btn-link"
194                                                         role="menuitem"
195                                                     >
196                                                         {{#str}} markread, mod_forum {{/str}}
197                                                     </a>
198                                                 {{/unread}}
199                                                 {{^unread}}
200                                                     <a
201                                                         data-region="post-action"
202                                                         href="{{{urls.markasunread}}}"
203                                                         class="btn btn-link"
204                                                         role="menuitem"
205                                                     >
206                                                         {{#str}} markunread, mod_forum {{/str}}
207                                                     </a>
208                                                 {{/unread}}
209                                             {{/controlreadstatus}}
210                                             {{#urls.viewparent}}
211                                                 <a
212                                                     data-region="post-action"
213                                                     href="{{{.}}}"
214                                                     class="btn btn-link"
215                                                     title="{{#str}} permanentlinktoparentpost, mod_forum {{/str}}"
216                                                     role="menuitem"
217                                                 >
218                                                     {{#str}} parent, mod_forum {{/str}}
219                                                 </a>
220                                             {{/urls.viewparent}}
221                                             {{#edit}}
222                                                 <a
223                                                     data-region="post-action"
224                                                     href="{{{urls.edit}}}"
225                                                     class="btn btn-link"
226                                                     role="menuitem"
227                                                 >
228                                                     {{#str}} edit, mod_forum {{/str}}
229                                                 </a>
230                                             {{/edit}}
231                                             {{#split}}
232                                                 <a
233                                                     data-region="post-action"
234                                                     href="{{{urls.split}}}"
235                                                     class="btn btn-link"
236                                                     role="menuitem"
237                                                 >
238                                                     {{#str}} prune, mod_forum {{/str}}
239                                                 </a>
240                                             {{/split}}
241                                             {{#delete}}
242                                                 <a
243                                                     data-region="post-action"
244                                                     href="{{{urls.delete}}}"
245                                                     class="btn btn-link"
246                                                     role="menuitem"
247                                                 >
248                                                     {{#str}} delete, mod_forum {{/str}}
249                                                 </a>
250                                             {{/delete}}
251                                             {{#reply}}
252                                                 {{$replyoutput}}
253                                                     <a
254                                                         data-region="post-action"
255                                                         href="{{{urls.reply}}}"
256                                                         class="btn btn-link"
257                                                         role="menuitem"
258                                                         data-post-id="{{id}}"
259                                                         data-action="collapsible-link"
260                                                         title="{{#str}} reply, mod_forum {{/str}}"
261                                                     >
262                                                         {{#str}} reply, mod_forum {{/str}}
263                                                     </a>
264                                                 {{/replyoutput}}
265                                             {{/reply}}
266                                             {{#export}}
267                                                 <a
268                                                     data-region="post-action"
269                                                     href="{{{urls.export}}}"
270                                                     class="btn btn-link"
271                                                     role="menuitem"
272                                                 >
273                                                     {{#str}} addtoportfolio, core_portfolio {{/str}}
274                                                 </a>
275                                             {{/export}}
276                                         {{/capabilities}}
277                                     </div>
278                                 {{/readonly}}
279                             {{/actions}}
280                         </div>
282                         {{$footer}}{{/footer}}
283                     {{/isdeleted}}
284                 </div>
285             </div>
286         </div>
287     </div>
289     <div data-region="replies-container">
290     {{$replies}}
291         <div>
292         {{#hasreplies}}
293             {{#replies}}
294                 {{> mod_forum/forum_discussion_post }}
295             {{/replies}}
296         {{/hasreplies}}
297         </div>
298     {{/replies}}
299     </div>
300 </article>