quattro: add comment box
This commit is contained in:
parent
2465b3274a
commit
b476575a98
|
@ -67,3 +67,8 @@
|
||||||
@NoticeBackgroundColor: #511919;
|
@NoticeBackgroundColor: #511919;
|
||||||
|
|
||||||
@ThreadBackgroundColor: #f6f7f8;
|
@ThreadBackgroundColor: #f6f7f8;
|
||||||
|
|
||||||
|
@CommentBoxEmptyColor: @Grey3;
|
||||||
|
@CommentBoxEmptyBorderColor: @Grey3;
|
||||||
|
@CommentBoxFullColor: @Grey5;
|
||||||
|
@CommentBoxFullBorderColor: @Grey5;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
/* global */
|
/* global */
|
||||||
body {
|
body {
|
||||||
font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
|
font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
background-color: @BodyBackground;
|
background-color: @BodyBackground;
|
||||||
color: @BodyColor;
|
color: @BodyColor;
|
||||||
margin: 50px 0px 0px 0px;
|
margin: 50px 0px 0px 0px;
|
||||||
|
@ -324,18 +324,17 @@ section {
|
||||||
.wall-item-ago { padding-right: 40px; }
|
.wall-item-ago { padding-right: 40px; }
|
||||||
.wall-item-name { font-weight: bold; }
|
.wall-item-name { font-weight: bold; }
|
||||||
|
|
||||||
.wall-item-actions-author { float: left; width: 25%; margin-top: 0.5em; }
|
.wall-item-actions-author { float: left; width: 20em; margin-top: 0.5em; }
|
||||||
.wall-item-actions-social { float: left; width: 50%; margin-top: 0.5em;
|
.wall-item-actions-social { float: left; margin-top: 0.5em;
|
||||||
a { margin-right: 3em; }
|
a { margin-right: 3em; }
|
||||||
}
|
}
|
||||||
.wall-item-actions-tools { float: right; width: 25%;
|
.wall-item-actions-tools { float: right; width: 15%;
|
||||||
a { float: right; }
|
a { float: right; }
|
||||||
input { float: right; }
|
input { float: right; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.wall-item-container.comment {
|
.wall-item-container.comment {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
.wall-item-photo { width: 32px; height: 32px; margin-left: 16px;}
|
.wall-item-photo { width: 32px; height: 32px; margin-left: 16px;}
|
||||||
|
@ -345,3 +344,34 @@ section {
|
||||||
}
|
}
|
||||||
.wall-item-links { padding-left: 12px; }
|
.wall-item-links { padding-left: 12px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wall-item-comment-wrapper {
|
||||||
|
margin: 30px 2em 2em 60px;
|
||||||
|
.comment-edit-photo { display: none; }
|
||||||
|
textarea {
|
||||||
|
height: 1em; width: 100%; font-size: 10px;
|
||||||
|
color: @CommentBoxEmptyColor;
|
||||||
|
border: 1px solid @CommentBoxEmptyBorderColor;
|
||||||
|
padding:0.3em;
|
||||||
|
}
|
||||||
|
.comment-edit-text-full {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 4em;
|
||||||
|
color: @CommentBoxFullColor;
|
||||||
|
border: 1px solid @CommentBoxFullBorderColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#profile-jot-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px 2em 20px 0px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.profile-jot-text {
|
||||||
|
height: 1em; width: 100%; font-size: 10px;
|
||||||
|
color: @CommentBoxEmptyColor;
|
||||||
|
border: 1px solid @CommentBoxEmptyBorderColor;
|
||||||
|
padding:0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -153,7 +153,7 @@
|
||||||
/* global */
|
/* global */
|
||||||
body {
|
body {
|
||||||
font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
|
font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
color: #2d2d2d;
|
color: #2d2d2d;
|
||||||
margin: 50px 0px 0px 0px;
|
margin: 50px 0px 0px 0px;
|
||||||
|
@ -574,12 +574,11 @@ section {
|
||||||
}
|
}
|
||||||
.wall-item-container .wall-item-actions-author {
|
.wall-item-container .wall-item-actions-author {
|
||||||
float: left;
|
float: left;
|
||||||
width: 25%;
|
width: 20em;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
.wall-item-container .wall-item-actions-social {
|
.wall-item-container .wall-item-actions-social {
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%;
|
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
.wall-item-container .wall-item-actions-social a {
|
.wall-item-container .wall-item-actions-social a {
|
||||||
|
@ -587,7 +586,7 @@ section {
|
||||||
}
|
}
|
||||||
.wall-item-container .wall-item-actions-tools {
|
.wall-item-container .wall-item-actions-tools {
|
||||||
float: right;
|
float: right;
|
||||||
width: 25%;
|
width: 15%;
|
||||||
}
|
}
|
||||||
.wall-item-container .wall-item-actions-tools a {
|
.wall-item-container .wall-item-actions-tools a {
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -610,3 +609,35 @@ section {
|
||||||
.wall-item-container.comment .wall-item-links {
|
.wall-item-container.comment .wall-item-links {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
}
|
}
|
||||||
|
.wall-item-comment-wrapper {
|
||||||
|
margin: 30px 2em 2em 60px;
|
||||||
|
}
|
||||||
|
.wall-item-comment-wrapper .comment-edit-photo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.wall-item-comment-wrapper textarea {
|
||||||
|
height: 1em;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999999;
|
||||||
|
border: 1px solid #999999;
|
||||||
|
padding: 0.3em;
|
||||||
|
}
|
||||||
|
.wall-item-comment-wrapper .comment-edit-text-full {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 4em;
|
||||||
|
color: #2d2d2d;
|
||||||
|
border: 1px solid #2d2d2d;
|
||||||
|
}
|
||||||
|
#profile-jot-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px 2em 20px 0px;
|
||||||
|
}
|
||||||
|
.profile-jot-text {
|
||||||
|
height: 1em;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999999;
|
||||||
|
border: 1px solid #999999;
|
||||||
|
padding: 0.3em;
|
||||||
|
}
|
||||||
|
|
|
@ -66,4 +66,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wall-item-comment-wrapper" >
|
||||||
|
$comment
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,58 +1,3 @@
|
||||||
{#<div class="wall-item-outside-wrapper$indent wallwall" id="wall-item-outside-wrapper-$id" >
|
|
||||||
<div class="wall-item-content-wrapper$indent" id="wall-item-content-wrapper-$id" >
|
|
||||||
<div class="wall-item-info wallwall" id="wall-item-info-$id">
|
|
||||||
<div class="wall-item-photo-wrapper mframe wwto" id="wall-item-ownerphoto-wrapper-$id" >
|
|
||||||
<a href="$owner_url" target="redir" title="$olinktitle" class="wall-item-photo-link" id="wall-item-ownerphoto-link-$id">
|
|
||||||
<img src="$owner_photo" class="wall-item-photo$osparkle" id="wall-item-ownerphoto-$id" style="height: 80px; width: 80px;" alt="$owner_name" /></a>
|
|
||||||
</div>
|
|
||||||
<div class="wall-item-arrowphoto-wrapper" ><img src="images/larrow.gif" alt="$wall" /></div>
|
|
||||||
<div class="wall-item-photo-wrapper mframe wwfrom" id="wall-item-photo-wrapper-$id"
|
|
||||||
onmouseover="if (typeof t$id != 'undefined') clearTimeout(t$id); openMenu('wall-item-photo-menu-button-$id')"
|
|
||||||
onmouseout="t$id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$id\'); closeMenu(\'wall-item-photo-menu-$id\');',200)">
|
|
||||||
<a href="$profile_url" target="redir" title="$linktitle" class="wall-item-photo-link" id="wall-item-photo-link-$id">
|
|
||||||
<img src="$thumb" class="wall-item-photo$sparkle" id="wall-item-photo-$id" style="height: 80px; width: 80px;" alt="$name" /></a>
|
|
||||||
<span onclick="openClose('wall-item-photo-menu-$id');" class="fakelink wall-item-photo-menu-button" id="wall-item-photo-menu-button-$id">menu</span>
|
|
||||||
<div class="wall-item-photo-menu" id="wall-item-photo-menu-$id">
|
|
||||||
<ul>
|
|
||||||
$item_photo_menu
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="wall-item-photo-end"></div>
|
|
||||||
<div class="wall-item-wrapper" id="wall-item-wrapper-$id" >
|
|
||||||
$lock
|
|
||||||
<div class="wall-item-location" id="wall-item-location-$id">$location</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wall-item-author">
|
|
||||||
<a href="$profile_url" target="redir" title="$linktitle" class="wall-item-name-link"><span class="wall-item-name$sparkle" id="wall-item-name-$id" >$name</span></a> $to <a href="$owner_url" target="redir" title="$olinktitle" class="wall-item-name-link"><span class="wall-item-name$osparkle" id="wall-item-ownername-$id">$owner_name</span></a> $vwall<br />
|
|
||||||
<div class="wall-item-ago" id="wall-item-ago-$id">$ago</div>
|
|
||||||
</div>
|
|
||||||
<div class="wall-item-content" id="wall-item-content-$id" >
|
|
||||||
<div class="wall-item-title" id="wall-item-title-$id">$title</div>
|
|
||||||
<div class="wall-item-title-end"></div>
|
|
||||||
<div class="wall-item-body" id="wall-item-body-$id" >$body</div>
|
|
||||||
</div>
|
|
||||||
<div class="wall-item-tools" id="wall-item-tools-$id">
|
|
||||||
$vote
|
|
||||||
$plink
|
|
||||||
$edpost
|
|
||||||
$star
|
|
||||||
$drop
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wall-item-wrapper-end"></div>
|
|
||||||
<div class="wall-item-like" id="wall-item-like-$id">$like</div>
|
|
||||||
<div class="wall-item-dislike" id="wall-item-dislike-$id">$dislike</div>
|
|
||||||
<div class="wall-item-comment-separator"></div>
|
|
||||||
<div class="wall-item-comment-wrapper" >
|
|
||||||
$comment
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="wall-item-outside-wrapper-end$indent" ></div>
|
|
||||||
</div> #}
|
|
||||||
|
|
||||||
{{ if $indent }}{{ else }}
|
{{ if $indent }}{{ else }}
|
||||||
<div class="wall-item-decor">
|
<div class="wall-item-decor">
|
||||||
<span class="icon s22 star $isstarred" id="starred-$id" title="$star.starred">$star.starred</span>
|
<span class="icon s22 star $isstarred" id="starred-$id" title="$star.starred">$star.starred</span>
|
||||||
|
@ -63,12 +8,12 @@
|
||||||
<div class="wall-item-container $indent">
|
<div class="wall-item-container $indent">
|
||||||
<div class="wall-item-item">
|
<div class="wall-item-item">
|
||||||
<div class="wall-item-info">
|
<div class="wall-item-info">
|
||||||
<div class="wall-item-photo-wrapper wwto" id="wall-item-ownerphoto-wrapper-$id" >
|
<div class="wall-item-photo-wrapper mframe wwto" id="wall-item-ownerphoto-wrapper-$id" >
|
||||||
<a href="$owner_url" target="redir" title="$olinktitle" class="wall-item-photo-link" id="wall-item-ownerphoto-link-$id">
|
<a href="$owner_url" target="redir" title="$olinktitle" class="wall-item-photo-link" id="wall-item-ownerphoto-link-$id">
|
||||||
<img src="$owner_photo" class="wall-item-photo$osparkle" id="wall-item-ownerphoto-$id" alt="$owner_name" />
|
<img src="$owner_photo" class="wall-item-photo$osparkle" id="wall-item-ownerphoto-$id" alt="$owner_name" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="wall-item-photo-wrapper wwfrom"
|
<div class="wall-item-photo-wrapper mframe wwfrom"
|
||||||
onmouseover="if (typeof t$id != 'undefined') clearTimeout(t$id); openMenu('wall-item-photo-menu-button-$id')"
|
onmouseover="if (typeof t$id != 'undefined') clearTimeout(t$id); openMenu('wall-item-photo-menu-button-$id')"
|
||||||
onmouseout="t$id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$id\'); closeMenu(\'wall-item-photo-menu-$id\');',200)">
|
onmouseout="t$id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$id\'); closeMenu(\'wall-item-photo-menu-$id\');',200)">
|
||||||
<a href="$profile_url" target="redir" title="$linktitle" class="wall-item-photo-link" id="wall-item-photo-link-$id">
|
<a href="$profile_url" target="redir" title="$linktitle" class="wall-item-photo-link" id="wall-item-photo-link-$id">
|
||||||
|
@ -128,3 +73,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wall-item-comment-wrapper" >
|
||||||
|
$comment
|
||||||
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue