Optimized mobile view of ModerationListPage

see #2227

diff --git a/com.woltlab.wcf/templates/moderationList.tpl b/com.woltlab.wcf/templates/moderationList.tpl
index 3027b98b156ce562bbf529366ba0d678c045e1c1..9eb2293d0032ed82bdc0a9db3647ffbdc3881fb6 100644 (file)
--- a/com.woltlab.wcf/templates/moderationList.tpl
+++ b/com.woltlab.wcf/templates/moderationList.tpl
@@ -2,7 +2,7 @@
 
 {capture assign='contentTitle'}{if $status == 2}{lang}wcf.moderation.doneItems{/lang}{else}{lang}wcf.moderation.outstandingItems{/lang}{/if} <span class="badge">{#$items}</span>{/capture}
 
-{capture assign='sidebarLeft'}
+{capture assign='sidebarRight'}
        <section class="box">
                {* moderation type *}
                <h2 class="boxTitle">{lang}wcf.moderation.filterByType{/lang}</h2>
@@ -60,31 +60,42 @@
 {/hascontent}
 
 {if $objects|count}
-       <div class="section tabularBox messageGroupList moderationList">
-               <table class="table">
-                       <thead>
-                               <tr>
-                                       <th class="columnText columnTitle" colspan="2">{lang}wcf.moderation.title{/lang}</th>
-                                       <th class="columnText columnAssignedUserID{if $sortField == 'assignedUsername'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=assignedUsername&sortOrder={if $sortField == 'assignedUsername' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.moderation.assignedUser{/lang}</a></th>
-                                       <th class="columnDigits columnComments{if $sortField == 'comments'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=comments&sortOrder={if $sortField == 'comments' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.comments{/lang}</a></th>
-                                       <th class="columnDate columnLastChangeTime{if $sortField == 'lastChangeTime'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=lastChangeTime&sortOrder={if $sortField == 'lastChangeTime' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.moderation.lastChangeTime{/lang}</a></th>
+       <div class="section tabularBox messageGroupList moderationList moderationQueueEntryList">
+               <ol class="tabularList">
+                       <li class="tabularListRow tabularListRowHead">
+                               <ol class="tabularListColumns">
+                                       <li class="columnSubject">{lang}wcf.moderation.title{/lang}</li>
+                                       <li class="columnStats{if $sortField == 'comments'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=comments&sortOrder={if $sortField == 'comments' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.comments{/lang}</a></li>
+                                       <li class="columnLastPost{if $sortField === 'lastChangeTime'} active {@$sortOrder}{/if}"><a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField=lastChangeTime&sortOrder={if $sortField == 'lastChangeTime' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.moderation.lastChangeTime{/lang}</a></li>
                                        
                                        {event name='columnHeads'}
-                               </tr>
-                       </thead>
+                               </ol>
+                       </li>
                        
-                       <tbody>
-                               {foreach from=$objects item=entry}
-                                       <tr class="moderationQueueEntry{if $entry->isNew()} new{/if}" data-queue-id="{@$entry->queueID}">
-                                               <td class="columnIcon columnAvatar">
+                       {foreach from=$objects item=entry}
+                               <li class="tabularListRow">
+                                       <ol class="tabularListColumns messageGroup moderationQueueEntry{if $entry->isNew()} new{/if}" data-queue-id="{@$entry->queueID}">
+                                               <li class="columnIcon columnAvatar">
                                                        <div>
                                                                <p{if $entry->isNew()} title="{lang}wcf.moderation.markAsRead.doubleClick{/lang}"{/if}>{@$entry->getUserProfile()->getAvatar()->getImageTag(48)}</p>
+                                                               
+                                                               {if $entry->assignedUserID == $__wcf->user->userID}
+                                                                       {if $__wcf->getUserProfileHandler()->getAvatar()}
+                                                                               <small class="myAvatar jsTooltip" title="{lang}wcf.moderation.assignedUser{/lang}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)}</small>
+                                                                       {/if}
+                                                               {/if}
                                                        </div>
-                                               </td>
-                                               <td class="columnText columnSubject">
+                                               </li>
+                                               <li class="columnSubject">
+                                                       <ul class="labelList">
+                                                               <li><span class="badge label">{$entry->getLabel()}</span></li>
+                                                       </ul>
+                                                       
                                                        <h3>
-                                                               <span class="badge label">{$entry->getLabel()}</span>
-                                                               <a href="{$entry->getLink()}" class="messageGroupLink">{$entry->getTitle()|tableWordwrap}</a>
+                                                               <a href="{$entry->getLink()}" class="messageGroupLink">{$entry->getTitle()}</a>
+                                                               {if $entry->comments}
+                                                                       <span class="badge messageGroupCounterMobile">{@$entry->comments|shortUnit}</span>
+                                                               {/if}
                                                        </h3>
                                                        
                                                        <ul class="inlineList dotSeparated small messageGroupInfo">
@@ -94,16 +105,30 @@
                                                                
                                                                {event name='messageGroupInfo'}
                                                        </ul>
-                                               </td>
-                                               <td class="columnText columnAssignedUserID">{if $entry->assignedUserID}<a href="{link controller='User' id=$entry->assignedUserID}{/link}" class="userLink" data-user-id="{@$entry->assignedUserID}">{$entry->assignedUsername}</a>{/if}</td>
-                                               <td class="columnDigits columnComments">{#$entry->comments}</td>
-                                               <td class="columnDate columnLastChangeTime">{if $entry->lastChangeTime}{@$entry->lastChangeTime|time}{/if}</td>
+                                                       
+                                                       <ul class="messageGroupInfoMobile">
+                                                               <li class="messageGroupAuthorMobile">{$entry->getAffectedObject()->getUsername()}</li>
+                                                               <li class="messageGroupLastPostTimeMobile">{if $entry->lastChangeTime}{@$entry->lastChangeTime|time}{/if}</li>
+                                                       </ul>
+                                                       
+                                                       {if $entry->assignedUserID}
+                                                               <small class="moderationQueueEntryAssignedUser">
+                                                                       {lang}wcf.moderation.assignedUser{/lang}: <a href="{link controller='User' id=$entry->assignedUserID}{/link}" class="userLink" data-user-id="{@$entry->assignedUserID}">{$entry->assignedUsername}</a>
+                                                               </small>
+                                                       {/if}
+                                                       
+                                                       {event name='moderationQueueEntryData'}
+                                               </li>
+                                               <li class="columnStats">{@$entry->comments|shortUnit}</li>
+                                               <li class="columnLastPost">
+                                                       {if $entry->lastChangeTime}{@$entry->lastChangeTime|time}{/if}
+                                               </li>
                                                
                                                {event name='columns'}
-                                       </tr>
-                               {/foreach}
-                       </tbody>
-               </table>
+                                       </ol>
+                               </li>
+                       {/foreach}
+               </ol>
        </div>
        
        <footer class="contentFooter">

diff --git a/wcfsetup/install/files/js/WCF.Moderation.js b/wcfsetup/install/files/js/WCF.Moderation.js
index fe94fd41ed6e10d8d669ffa1508e6f1f3cdf6661..d79714f1774b28bc74d78c0e59b8089493277a0d 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Moderation.js
+++ b/wcfsetup/install/files/js/WCF.Moderation.js
@@ -304,7 +304,7 @@ WCF.Moderation.Queue.MarkAsRead = Class.extend({
                this._proxy.setOption('data', {
                        actionName: 'markAsRead',
                        className: 'wcf\\data\\moderation\\queue\\ModerationQueueAction',
-                       objectIDs: [ $(event.currentTarget).parents('tr:eq(0)').data('queueID') ]
+                       objectIDs: [ $(event.currentTarget).parents('.moderationQueueEntry:eq(0)').data('queueID') ]
                });
                this._proxy.sendRequest();
        },

diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss
index ba4528fd30590d4315dbccf58832eabf1db3a308..5f93593ecdc713fffd7477cb4d42d37088e862c2 100644 (file)
--- a/wcfsetup/install/files/style/ui/messageGroup.scss
+++ b/wcfsetup/install/files/style/ui/messageGroup.scss
@@ -5,7 +5,7 @@
                }
                
                .columnStats {
-                       flex: 0 0 140px;
+                       flex: 0 0 150px;
                        text-align: center;
                }