Board styling - Detailed view

Open the list.html file and use the 'Save As' menu to create the view.html file.
Open the view.html document and paste the following code below the div id="content-categories" element in #content.
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.
This number should be given programmatically.

bbs-view-01

Create a 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.
(This modification form is hidden by default)
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>

Try to click the Modify and Cancel links.
Make sure the JavaScript function is working properly.

Comment modify link

Comment modify link click

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

Date, Writer, Hit Styling

[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

#article-content and #attach-file styling

[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

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

[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

Comment modify form styling

[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

New comment form styling

[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

Next Article and Prev Article styling

[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

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

[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