Changeset 13762

Timestamp:

Mar 26, 2012, 11:01:32 PM (12 years ago)

Author:

Zaphod

Message:

feature 2587: new comments layout

Location:

trunk/themes/elegant

Files:

• template/picture.tpl (modified) (2 diffs)
• theme.css (modified) (6 diffs)

trunk/themes/elegant/template/picture.tpl

@@ -54 +54 @@
 {strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
 <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a>
-<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleDerivativeSwitchBox()">
+<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e.parentNode.parentNode==this||e==this||toggleDerivativeSwitchBox()">
 <div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
 {foreach from=$current.unique_derivatives item=derivative key=derivative_type}
@@ -353 +353 @@
         {if $COMMENT_COUNT > 0}
                 <h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
-                {if $COMMENT_COUNT > 2}
-                        <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a>
-                {/if}
         {else}
                 <h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
         {/if}
-        {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-
-        {if isset($comments)}
-                {include file='comment_list.tpl'}
-        {/if}
-
-        {if isset($comment_add)}
-        <form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment">
-        <fieldset>
-                <legend>{'Add a comment'|@translate}</legend>
-                {if $comment_add.SHOW_AUTHOR}
-                <label>{'Author'|@translate}<input type="text" name="author"></label>
-                {/if}
-                <label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label>
-                <input type="hidden" name="key" value="{$comment_add.KEY}">
-                <input type="submit" value="{'Submit'|@translate}">
-        </fieldset>
-        </form>
-        {/if}
+        
+        <div id="pictureComments">
+                {if isset($comment_add)}
+                        <div id="commentAdd">
+                                <h4>{'Add a comment'|@translate}</h4>
+                                <form  method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment" >
+                                        {if $comment_add.SHOW_AUTHOR}
+                                                <p><label>{'Author'|@translate}&nbsp;:</label></p>
+                                                <p><input type="text" name="author" /></p>
+                                        {/if}
+                                        <p><label>{'Comment'|@translate}&nbsp;:</label></p>
+                                        <p><textarea name="content" id="contentid" rows="10" cols="50">{$comment_add.CONTENT}</textarea></p>
+                                        <p><input type="hidden" name="key" value="{$comment_add.KEY}" />
+                                           <input class="submit" type="submit" value="{'Submit'|@translate}"></p>
+                                </form>
+                        </div>
+                {/if}
+                {if isset($comments)}
+                        <div id="pictureCommentList">
+                                {if (($COMMENT_COUNT > 2) || !empty($navbar))}
+                                        <div id="pictureCommentNavBar">
+                                                {if $COMMENT_COUNT > 2}
+                                                        <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a>
+                                                {/if}
+                                                {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+                                        </div>
+                                {/if}
+                                {include file='comment_list.tpl'}
+                        </div>
+                {/if}
+                <div style="clear: both;"></div>
+        </div>
+
 </div>
 {/if}{*comments*}

trunk/themes/elegant/theme.css

@@ -11 +11 @@
 #imageInfos, #infoSwitcher.infohidden           { background-color: #333;}
 #thePicturePage #comments                                       { background-color: #333;}
+#pictureCommentList li                                          { background-color: #444;}
+#pictureCommentList .commentElement                     { background-color: transparent;}
 
 .switchBox, .header_notes                                       { background-color: #555;}
@@ -18 +20 @@
 INPUT[type="text"], INPUT[type="password"],
 INPUT[type="button"], INPUT[type="submit"],
-INPUT[type="reset"], INPUT[type="file"]         { background-color: #999;}
-INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #ccc;}
+INPUT[type="reset"], INPUT[type="file"],
+SELECT, TEXTAREA                                                        { background-color: #555;}
+INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #666;}
 
 
@@ -31 +34 @@
 .message                                                                        { color: #fff;}
 .commentContent .comments_toggle:hover          { color: #fff;}
+INPUT[type="text"], INPUT[type="password"],
+INPUT[type="button"], INPUT[type="submit"],
+INPUT[type="reset"], INPUT[type="file"],
+SELECT, TEXTAREA                                                        { color: #ccc;}
+INPUT:focus, SELECT:focus, TEXTAREA:focus       { color: #fff;}
 
 
@@ -40 +48 @@
 .switchBox                                                                      { border: 1px solid #000;}
 .switchBoxTitle                                                                 { border-bottom: 1px solid #444;}
-FIELDSET, INPUT, SELECT, TEXTAREA                       { border: 1px solid #999;}
+FIELDSET, INPUT, SELECT, TEXTAREA                       { border: 1px solid #777;}
 
 
@@ -144 +152 @@
 .switchBox .switchCheck                                 { width: 18px; text-align: left; display: inline-block; line-height:17px;}
 .switchBox .switchUnselected            { margin-left: 18px; line-height:17px;}
-
+.derivativeSizeDetails                          { display: none;}
 
 /* thumbnails */
@@ -223 +231 @@
 #thePicturePage #comments                       { padding: 2px 5px;}
 #thePicturePage #comments h3                    { margin: 10px 0;}
-#thePicturePage #comments form          { margin-bottom: 10px;}
+#thePicturePage #comments form          { margin: 10px 0;}
 #thePicturePage #comments fieldset              { margin: 0 1em;}
 
 .noCommentText                                          { display:block;}
-.commentshidden ul,
-.commentshidden form                                    {display:none;}
-.commentContent .comments_toggle        {cursor: pointer;}
-
+.commentshidden #pictureComments                { display: none;}
+.commentContent .comments_toggle        { cursor: pointer;}
+
+#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;}
+#commentAdd                                             { float: left; }
+#pictureCommentList                                     { float: right; }
+
+#commentAdd input[type="text"],
+#commentAdd textarea {
+        min-width: 95%;
+        max-width: 95%;
+        width: 95%;
+        font-family: Arial,Helvetica,sans-serif;
+        font-size: 100%;
+}
+#pictureCommentList li {
+        clear: both;
+        display: block;
+        padding: 0.5em 0;
+        margin-bottom: 5px;
+        border-radius: 5px;
+        width: 100%;
+}
+#pictureCommentList ul                          { list-style: none; padding: 0;}
+#pictureCommentList li ul                               { list-style-type: none; padding: 4px;}
+#pictureCommentList .author                     { font-weight: bold;}
+#pictureCommentList .date                       { font-style: italic;}
+#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;}
+#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}
+#pictureComments h4                                     { margin: 0;}
+#pictureComments form p                         { margin: 5px 0;}
+#pictureComments form p textarea                { margin: 10px 0;}
+#pictureComments INPUT                          { margin: 10px;}
+#pictureComments INPUT[type=submit]     { margin: 0;}
 
 /* plugins */