Board styling - Detailed view

Open the list.html and use the Save As editor menu to create a view.html. Paste the following code below the div id="content-categories" element in #content of the view.html. (Do not delete the existing code that shows the list)

<div class="view-menu" style="margin-top: 15px;margin-bottom: 5px;">
  <div class="fl">
    <input type="button" value="Modify" />
    <input type="button" value="Del" />
  </div>
  <div class="fr">
    <input type="button" value="Next Article" />
    <input type="button" value="Prev Article" />
    <input type="button" value="List" />
    <input type="button" value="New" />
  </div>
</div>
<table class="bbs-table">
<tr>
  <th style="width: 47px;text-align: left;vertical-align: top;font-size: 1em;">TITLE</th>
  <th style="text-align: left;color: #555;font-size: 1em;">What makes us happy?</th>
</tr>
</table>
<div id="detail">
  <div id="date-writer-hit">2014 10-09 17:50:30 by John hit 1330</div>
  <div id="article-content">
  What makes us happy?What makes us happy?What makes us happy?<br />
  What makes us happy?What makes us happy?What makes us happy?<br />
  </div>
    <div id="file-list" style="text-align: right;">
    <div class="attach-file">
      <a href="#" title="filename" class="download">TEST.png</a>
      <a href="#" title="filekey">Del</a>
    </div>
  </div>
</div>
<!--  New Comment -->
<form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post">
  <div id="addComment">
    <textarea id="addComment-ta" name="memo" rows="7" cols="50"></textarea>
  </div>
  <div style="text-align: right;">
    <input type="submit" value="Submit" />
  </div>
</form>
<!--  Comments start -->
<div class="comments">
  <span class="writer">xman</span>
  <span class="date">2011.12.11 12:14:32</span>
  <span class="modify-del">
    <a href="javascript:modifyCommentToggle('5')">Modify</a>
    | <a href="javascript:deleteComment('5')">Del</a>
  </span>
  <p id="comment5">What makes us happy?</p>
  <form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;">
  <input type="hidden" name="commentNo" value="5" />
  <input type="hidden" name="boardCd" value="smalltalk" />
  <input type="hidden" name="articleNo" value="12" />
  <input type="hidden" name="curPage" value="1" />
  <input type="hidden" name="searchWord" value="happy" />
  <div class="fr">
    <a href="javascript:document.forms.modifyCommentForm5.submit()">Submit</a>
    | <a href="javascript:modifyCommentToggle('5')">Cancel</a>
  </div>
  <div>
    <textarea class="comment-textarea" name="memo" rows="7" cols="50">What makes us happy?</textarea>
  </div>
  </form>
</div>
<!--  Comments end -->
<div id="next-prev">
  <p>Next Article : <a href="#">What makes us happy?</a></p>
  <p>Prev Article : <a href="#">What makes us happy?</a></p>
</div>
<div class="view-menu" style="margin-bottom: 47px;">
  <div class="fl">
    <input type="button" value="Modify" />
    <input type="button" value="Del" />
  </div>
  <div class="fr">
    <input type="button" value="Next Article" />
    <input type="button" value="Prev Article" />
    <input type="button" value="List" />
    <input type="button" value="New" />
  </div>
</div>

In comment5 and modifyCommentForm5, 5 is the comment number. We should give this number programmatically.

bbs-view-01

JavaScript toggle function for modifying comments

Create a working JavaScript function by clicking on the Modify link. If you click on the Modify link, a modification form containing the text area should appear. (modification form is not visible at first)

Paste the following JavaScript code before </ head>:

<script type="text/javascript">
function modifyCommentToggle(articleNo) {
  var p_id = "comment" + articleNo;
  var p = document.getElementById(p_id);
    
  var form_id = "modifyCommentForm" + articleNo;
  var form = document.getElementById(form_id);
    
  var p_display;
  var form_display;
    
  if (p.style.display) {
    p_display = '';
    form_display = 'none';
  } else {
    p_display = 'none';
    form_display = '';
  }
  p.style.display = p_display;
  form.style.display = form_display;
}
</script>

Click the Modify and Cancel links to make sure the JavaScript function is working correctly.

Comment modify link

Comment modify link click

Modify and Cancel links work the same way. If you click these links when the modify form is visible, the modify form disappears. If you click the same link when the modification form is not visible, the modification form appears. The p element works the opposite. This feature is called a toggle.

Styling Date, Writer, Hit

[Before] creation date writer read styling before

[HTML]
<span id="date-writer-hit>2014 10-09 17:50:30 by John hit 1330</span>
[CSS]
#date-writer-hit {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: #555;
  text-align: right;
}

[After] creation date writer read styling after

Styling #article-content and #attach-file

[Before] article content and attach file before

[HTML]
<div id="article-content">
What makes us happy?What makes us happy?What makes us happy?<br />
What makes us happy?What makes us happy?What makes us happy?<br />
</div>
<div id="file-list" style="text-align: right;">
  <div class="attach-file">
    <a href="#" title="filename" class="download">TEST.png</a>
    <a href="#" title="filekey">Del</a>
  </div>
</div>
[CSS]
#article-content {
  font-size: 0.9em;
  color: #333;
}
.attach-file {
  font-size: 11px;
  line-height: 1.3;
}

article content attach file after

Styling Comment writer, Comment creation date, Modify and Del links, Comment body

[Before]
writer creation date modify del links comment body styling before

[HTML]
<span class="writer">xman</span>
<span class="date">2011.12.11 12:14:32</span>
<span class="modify-del">
<a href="javascript:modifyCommentToggle('5')">Modify</a>
 | <a href="javascript:deleteComment('5')">Del</a>
</span>
<p id="comment5">What makes us happy?</p>
[CSS]
.comments {
  border-top: 1px solid #ebebeb;
}
.comments > span.writer {
  display: block;
  float: left;
  margin: 3px;
  padding: 0;
  font-size: 12px;
  font-weight: bold;
  color: #555;
}
.comments > span.date {
  display: block;
  float: left;
  margin: 3px;
  padding: 0;
  font-size: 12px;
  color: #555;
}
.comments > span.modify-del {
  display: block;
  float: right;
  margin: 3px;
  padding: 0;
  font-size: 12px;
  color: #555;
}
.comments a {
  color: #555;
  text-decoration: none;
  font-size: 11px;
}
.comments a:hover {
  color: #555;
  text-decoration: underline;
}
.comments > p {
  clear: both;
  margin: 0;
  padding: 0 3px 3px 3px;
  color: #555;
  font-size: 11px;
}

[After]
comment creation writer hit styling after

Styling Comment modify form

[Before]
Comment modify link click

[HTML]
<form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;">
<input type="hidden" name="commentNo" value="5" />
<input type="hidden" name="boardCd" value="smalltalk" />
<input type="hidden" name="articleNo" value="12" />
<input type="hidden" name="curPage" value="1" />
<input type="hidden" name="searchWord" value="happy" />
<div style="text-align: right;">
  <a href="javascript:document.forms.modifyCommentForm5.submit()">Submit</a>
  | <a href="javascript:modifyCommentToggle('5')">Cancel</a>
</div>
<div>
  <textarea class="comment-textarea" name="memo" rows="7" cols="50">What makes us happy?.</textarea>
</div>
</form>
[CSS]
.comment-form {
  clear: both; 
  padding: 0.22em 2.22em 0.22em 3.22em; 
}
.comment-textarea {
  border: 1px solid silver;
  padding: 3px;
  width: 99%;
  color:#555;
  background-color: #eee;
  font-size: 11px; 
}

[After]
comment modify form after

Styling New comment form

[Before]
New Comment form before

[HTML]
<form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post">
  <div id="addComment">
    <textarea style="addComment-ta" name="memo" rows="7" cols="50"></textarea>
  </div>
  <div style="text-align: right;">
    <input type="submit" value="Submit" />
  </div>
</form>
[CSS]
#addComment {
  margin-bottom: 5px;
  padding: 0.22em;
  border: 1px solid #eee;
  background-color: #fafbf7;
}
#addComment textarea {
  width: 99%;
  padding: 3px;
  border: 0;
  color: #555;
}

[After]
New Comment form after

Styling Next Article and Prev Article

[Before]
Next and Prev article before

[HTML]
<div id="next-prev">
  <p>Next Article : <a href="#">What makes us happy?</a></p>
  <p>Prev Article : <a href="#">What makes us happy?</a></p>
</div>
[CSS]
#next-prev {
  margin: 7px 0;
  border-top: 1px solid #e1e1e1;
}
#next-prev > p {
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid #e1e1e1;
  font-size: 12px;
  color: #333;
}
#next-prev > p > a {
  color: #333;
  text-decoration: none;
}
#next-prev > p > a:hover {
  color: #333;
  text-decoration: underline;
}

[After]
Next and Prev Article after

Positioning Modify, Del, Next Article, Prev Article, List, New Butons

[Before]
Buttons positioning before

The following code is in two places in view.html.

[HTML]
<div class="view-menu" ..>
  <div class="fl">
    <input type="button" value="Modify" />
    <input type="button" value="Del" />
  </div>
  <div class="fr">
    <input type="button" value="Next Article" />
    <input type="button" value="Prev Article" />
    <input type="button" value="List" />
    <input type="button" value="New" />
  </div>
</div>
[CSS]
#view-menu {
  height: 22px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}

[After]
Buttons positioning after

References