CodingSouls团队-个人博客(八)

今天是团队编程冲刺的第八天:

  昨天完成了讨论的主页面的基本格式布局

 今天任务:实现讨论界面的回复界面

编程时间:3.5h 代码行数:110

  1 <% this.title = article.title + ' - 帖子'; %>
  2 <% include header %>
  3 <style type="text/css" xmlns:style="http://www.w3.org/1999/xhtml">
  4 .small{
  5   font-size: 0.7em;
  6 }
  7 </style>
  8 <div class="padding">
  9   <div class="ui breadcrumb">
 10     <div class="section">讨论</div>
 11     <i class="right angle icon divider"></i>
 12     <% if (problem) { %>
 13       <div class="section"><a href="<%= syzoj.utils.makeUrl(['discussion', 'problems']) %>">题目</a></div>
 14       <i class="right angle icon divider"></i>
 15       <a href="<%= syzoj.utils.makeUrl(['discussion', 'problem', problem.id]) %>" class="active section"><%= problem.title %></a>
 16     <% } else { %>
 17       <a href="<%= syzoj.utils.makeUrl(['discussion', 'global']) %>" class="section">全局板块</a>
 18     <% } %>
 19   </div>
 20   <h1><%= article.title %></h1>
 21      <p style="margin-bottom: -5px; ">
 22     <img style="vertical-align: middle; margin-bottom: 2px; margin-right: 2px; " src="#" width="17" height="17">
 23     <b style="margin-right: 30px; "><a class="black-link" href="#"><%= article.user.username %></a><% if (article.user.nameplate) { %><%- article.user.nameplate %><% } %></b>
 24     <b style="margin-right: 30px; "><i class="calendar icon"></i> #</b>
 25     <% if (article.public_time !== article.update_time) { %><b style="margin-right: 30px; "><i class="edit icon"></i> #</b><% } %>
 26         <% if (article.allowedEdit) { %>
 27         <a style="margin-top: -4px; " class="ui mini right floated labeled icon button" href="# %>"><i class="ui edit icon"></i>编辑</a>
 28         <a style="margin-top: -4px; margin-right: 3px; " class="ui mini red right floated labeled icon button" onclick="$('#modal-delete').modal('show')"><i class="ui trash icon"></i>删除</a>
 29         <div class="ui basic modal right floated" id="modal-delete">
 30           <div class="ui icon header">
 31             <i class="trash icon"></i>
 32             <p style="margin-top: 15px; ">删除文章</p>
 33           </div>
 34           <div class="content" style="text-align: center; ">
 35             <p>确认删除这篇文章吗?</p>
 36           </div>
 37           <div class="actions">
 38             <div class="ui red basic cancel inverted button">
 39               <i class="remove icon"></i>
 40  41             </div>
 42             <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'delete']) %>">
 43               <i class="checkmark icon"></i>
 44  45             </a>
 46           </div>
 47         </div>
 48         <% } %>
 49      </p>
 50   <div class="ui existing segment">
 51       <div id="content" class="font-content"><%- article.content %></div>
 52   </div>
 53   <% if (comments.length) { %>
 54   <div class="ui comments" style="max- none;">
 55     <h3 class="ui dividing header"><%= commentsCount %> 条回复</h3>
 56     <% for (let comment of comments) { %>
 57       <div class="comment">
 58         <a class="avatar">
 59           <img src="<%= syzoj.utils.gravatar(comment.user.email, 120) %>">
 60         </a>
 61         <div class="content">
 62           <a class="author" href="#"><%= comment.user.username %></a><% if (comment.user.nameplate) { %><%- comment.user.nameplate %><% } %>
 63           <div class="metadata">
 64             <span class="date">#</span>
 65           </div>
 66           <div class="text font-content" style="min-height: 19.5px; "><%- comment.content %></div>
 67           <% if (comment.allowedEdit) { %>
 68             <div class="actions"><a onclick="$('#modal-delete-<%= comment.id %>').modal('show')">删除</a></div>
 69             <div class="ui basic modal" id="modal-delete-<%= comment.id %>">
 70               <div class="ui icon header">
 71                 <i class="trash icon"></i>
 72                 <p style="margin-top: 15px; ">删除评论</p>
 73               </div>
 74               <div class="content" style="text-align: center; ">
 75                 <p>确认删除这条评论吗?</p>
 76               </div>
 77               <div class="actions">
 78                 <div class="ui red basic cancel inverted button">
 79                   <i class="remove icon"></i>
 80  81                 </div>
 82                 <a class="ui green ok inverted button" href-post="#">
 83                   <i class="checkmark icon"></i>
 84  85                 </a>
 86               </div>
 87             </div>
 88           <% } %>
 89         </div>
 90       </div>
 91     <% } %>
 92   </div>
 93   <div style="margin-bottom: 50px; ">
 94     <% include page %>
 95   </div>
 96   <% } %>
 97     <% if (article.allowedComment) { %>
 98     <form class="ui reply form" method="post" action="#">
 99       <div class="field">
100         <textarea name="comment" class="markdown-edit"></textarea>
101       </div>
102       <div style="text-align: center; ">
103       <button id="submit_button" type="submit" class="ui labeled submit icon button">
104         <i class="icon edit"></i> 回复
105       </button>
106       </div>
107     </form>
108   <% } %>
109 </div>
110 <% include footer %>
回复界面
原文地址:https://www.cnblogs.com/zwx655/p/12784838.html