zoukankan      html  css  js  c++  java
  • 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 %>
    回复界面
  • 相关阅读:
    ARM 平台下的 SSHD 配置
    IISExpress 开放局域网访问
    qt5 交叉编译
    QT4 交叉编译
    make install 时指定安装路径
    linux 读取物理寄存器
    Windows 7 64bit Python 2 Install
    用eggjs返回xml格式数据,前端解析xml
    vue-cli项目中axios的配置文件
    webpack配置练习typescript的web项目
  • 原文地址:https://www.cnblogs.com/zwx655/p/12784838.html
Copyright © 2011-2022 走看看