CodingSouls团队-个人博客（八）

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

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

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

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

<% this.title = article.title + ' - 帖子'; %>
<% include header %>
<style type="text/css" xmlns:style="http://www.w3.org/1999/xhtml">
.small{
  font-size: 0.7em;
}
</style>
<div class="padding">
  <div class="ui breadcrumb">
    <div class="section">讨论</div>
    <i class="right angle icon divider"></i>
    <% if (problem) { %>
      <div class="section"><a href="<%= syzoj.utils.makeUrl(['discussion', 'problems']) %>">题目</a></div>
      <i class="right angle icon divider"></i>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'problem', problem.id]) %>" class="active section"><%= problem.title %></a>
    <% } else { %>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'global']) %>" class="section">全局板块</a>
    <% } %>
  </div>
  <h1><%= article.title %></h1>
     <p style="margin-bottom: -5px; ">
    <img style="vertical-align: middle; margin-bottom: 2px; margin-right: 2px; " src="#" width="17" height="17">
    <b style="margin-right: 30px; "><a class="black-link" href="#"><%= article.user.username %></a><% if (article.user.nameplate) { %><%- article.user.nameplate %><% } %></b>
    <b style="margin-right: 30px; "><i class="calendar icon"></i> #</b>
    <% if (article.public_time !== article.update_time) { %><b style="margin-right: 30px; "><i class="edit icon"></i> #</b><% } %>
        <% if (article.allowedEdit) { %>
        <a style="margin-top: -4px; " class="ui mini right floated labeled icon button" href="# %>"><i class="ui edit icon"></i>编辑</a>
        <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>
        <div class="ui basic modal right floated" id="modal-delete">
          <div class="ui icon header">
            <i class="trash icon"></i>
            <p style="margin-top: 15px; ">删除文章</p>
          </div>
          <div class="content" style="text-align: center; ">
            <p>确认删除这篇文章吗？</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              否
            </div>
            <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'delete']) %>">
              <i class="checkmark icon"></i>
              是
            </a>
          </div>
        </div>
        <% } %>
     </p>
  <div class="ui existing segment">
      <div id="content" class="font-content"><%- article.content %></div>
  </div>
  <% if (comments.length) { %>
  <div class="ui comments" style="max- none;">
    <h3 class="ui dividing header">共 <%= commentsCount %> 条回复</h3>
    <% for (let comment of comments) { %>
      <div class="comment">
        <a class="avatar">
          <img src="<%= syzoj.utils.gravatar(comment.user.email, 120) %>">
        </a>
        <div class="content">
          <a class="author" href="#"><%= comment.user.username %></a><% if (comment.user.nameplate) { %><%- comment.user.nameplate %><% } %>
          <div class="metadata">
            <span class="date">#</span>
          </div>
          <div class="text font-content" style="min-height: 19.5px; "><%- comment.content %></div>
          <% if (comment.allowedEdit) { %>
            <div class="actions"><a onclick="$('#modal-delete-<%= comment.id %>').modal('show')">删除</a></div>
            <div class="ui basic modal" id="modal-delete-<%= comment.id %>">
              <div class="ui icon header">
                <i class="trash icon"></i>
                <p style="margin-top: 15px; ">删除评论</p>
              </div>
              <div class="content" style="text-align: center; ">
                <p>确认删除这条评论吗？</p>
              </div>
              <div class="actions">
                <div class="ui red basic cancel inverted button">
                  <i class="remove icon"></i>
                  否
                </div>
                <a class="ui green ok inverted button" href-post="#">
                  <i class="checkmark icon"></i>
                  是
                </a>
              </div>
            </div>
          <% } %>
        </div>
      </div>
    <% } %>
  </div>
  <div style="margin-bottom: 50px; ">
    <% include page %>
  </div>
  <% } %>
    <% if (article.allowedComment) { %>
    <form class="ui reply form" method="post" action="#">
      <div class="field">
        <textarea name="comment" class="markdown-edit"></textarea>
      </div>
      <div style="text-align: center; ">
      <button id="submit_button" type="submit" class="ui labeled submit icon button">
        <i class="icon edit"></i> 回复
      </button>
      </div>
    </form>
  <% } %>
</div>
<% include footer %>