Improved article list box
authorMarcel Werk <burntime@woltlab.com>
Wed, 22 Jun 2016 10:40:22 +0000 (12:40 +0200)
committerMarcel Werk <burntime@woltlab.com>
Wed, 22 Jun 2016 10:40:22 +0000 (12:40 +0200)
com.woltlab.wcf/templates/boxArticleList.tpl
com.woltlab.wcf/templates/boxArticleListSidebar.tpl [deleted file]
wcfsetup/install/files/lib/system/box/ArticleListBoxController.class.php
wcfsetup/install/files/style/ui/article.scss

index 57ea3b6afba978bd0791530e9b226875725e84cf..68559df21476cd7f0eb01569ac891f8af822af3a 100644 (file)
@@ -1 +1,57 @@
-{include file='articleListItems' objects=$boxArticleList}
+{if $boxPosition == 'sidebarLeft' || $boxPosition == 'sidebarRight'}
+       <ul class="sidebarBoxList">
+               {foreach from=$boxArticleList item=boxArticle}
+                       <li>
+                               <a href="{$boxArticle->getLink()}" class="box48">
+                                       <span>{if $boxArticle->getImage()}{@$boxArticle->getImage()->getElementTag(48)}{/if}</span>
+                                       
+                                       <div>
+                                               <h3>{$boxArticle->getTitle()}</h3>
+                                               <small>
+                                                       {if $boxSortField == 'time'}
+                                                               {@$boxArticle->time|time}
+                                                       {elseif $boxSortField == 'views'}
+                                                               {lang article=$boxArticle}wcf.article.articleViews{/lang}
+                                                       {elseif $boxSortField == 'comments'}
+                                                               {lang article=$boxArticle}wcf.article.articleComments{/lang}
+                                                       {elseif $boxSortField == 'cumulativeLikes'}
+                                                               {if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike') && ($boxArticle->likes || $boxArticle->dislikes)}
+                                                                       <span class="wcfLikeCounter{if $boxArticle->cumulativeLikes > 0} likeCounterLiked{elseif $boxArticle->cumulativeLikes < 0}likeCounterDisliked{/if}">
+                                                                               <span class="icon icon16 fa-thumbs-o-{if $boxArticle->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$boxArticle->likes dislikes=$boxArticle->dislikes}wcf.like.tooltip{/lang}"></span>{if $boxArticle->cumulativeLikes > 0}+{elseif $boxArticle->cumulativeLikes == 0}&plusmn;{/if}{#$boxArticle->cumulativeLikes}
+                                                                       </span>
+                                                               {/if}
+                                                       {/if}
+                                               </small>
+                                       </div>
+                               </a>
+                       </li>
+               {/foreach}
+       </ul>
+{elseif $boxPosition == 'footerBoxes'}
+       <ul class="articleList">
+               {foreach from=$boxArticleList item=boxArticle}
+                       <li>
+                               <a href="{$boxArticle->getLink()}">
+                                       {if $boxArticle->getImage()}
+                                               <div class="articleListImage">{@$boxArticle->getImage()->getThumbnailTag('small')}</div>
+                                       {/if}
+                                       
+                                       <h3 class="articleListTitle">{$boxArticle->getTitle()}</h3>
+                                       <ul class="inlineList articleListMetaData">
+                                               <li>
+                                                       <span class="icon icon16 fa-clock-o"></span>
+                                                       {@$boxArticle->time|time}
+                                               </li>
+                                               
+                                               <li>
+                                                       <span class="icon icon16 fa-comments"></span>
+                                                       {lang article=$boxArticle}wcf.article.articleComments{/lang}
+                                               </li>
+                                       </ul>
+                               </a>
+                       </li>
+               {/foreach}
+       </ul>
+{else}
+       {include file='articleListItems' objects=$boxArticleList}
+{/if}
diff --git a/com.woltlab.wcf/templates/boxArticleListSidebar.tpl b/com.woltlab.wcf/templates/boxArticleListSidebar.tpl
deleted file mode 100644 (file)
index fff2b84..0000000
+++ /dev/null
@@ -1,28 +0,0 @@
-<ul class="sidebarBoxList">
-       {foreach from=$boxArticleList item=boxArticle}
-               <li>
-                       <a href="{$boxArticle->getLink()}" class="box48">
-                               <span>{if $boxArticle->getImage()}{@$boxArticle->getImage()->getElementTag(48)}{/if}</span>
-                               
-                               <div>
-                                       <h3>{$boxArticle->getTitle()}</h3>
-                                       <small>
-                                               {if $boxSortField == 'time'}
-                                                       {@$boxArticle->time|time}
-                                               {elseif $boxSortField == 'views'}
-                                                       {lang article=$boxArticle}wcf.article.articleViews{/lang}
-                                               {elseif $boxSortField == 'comments'}
-                                                       {lang article=$boxArticle}wcf.article.articleComments{/lang}
-                                               {elseif $boxSortField == 'cumulativeLikes'}
-                                                       {if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike') && ($boxArticle->likes || $boxArticle->dislikes)}
-                                                               <span class="wcfLikeCounter{if $boxArticle->cumulativeLikes > 0} likeCounterLiked{elseif $boxArticle->cumulativeLikes < 0}likeCounterDisliked{/if}">
-                                                                       <span class="icon icon16 fa-thumbs-o-{if $boxArticle->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$boxArticle->likes dislikes=$boxArticle->dislikes}wcf.like.tooltip{/lang}"></span>{if $boxArticle->cumulativeLikes > 0}+{elseif $boxArticle->cumulativeLikes == 0}&plusmn;{/if}{#$boxArticle->cumulativeLikes}
-                                                               </span>
-                                                       {/if}
-                                               {/if}
-                                       </small>
-                               </div>
-                       </a>
-               </li>
-       {/foreach}
-</ul>
index 6a41ed69586000b365cc142818f90858626ca91d..b9fdf18761abbfb33ddc00cb7a8394664185fa6e 100644 (file)
@@ -16,13 +16,18 @@ class ArticleListBoxController extends AbstractDatabaseObjectListBoxController {
        /**
         * @inheritDoc
         */
-       protected $supportedPositions = ['sidebarLeft', 'sidebarRight', 'contentTop', 'contentBottom', 'top', 'bottom'];
+       protected $supportedPositions = ['sidebarLeft', 'sidebarRight', 'contentTop', 'contentBottom', 'top', 'bottom', 'footerBoxes'];
        
        /**
         * @inheritDoc
         */
        protected $sortFieldLanguageItemPrefix = 'wcf.article';
        
+       /**
+        * @inheritDoc
+        */
+       public $defaultLimit = 3;
+       
        /**
         * @inheritDoc
         */
@@ -47,21 +52,31 @@ class ArticleListBoxController extends AbstractDatabaseObjectListBoxController {
         * @inheritDoc
         */
        protected function getObjectList() {
-               return new AccessibleArticleList();
+               $objectList = new AccessibleArticleList();
+               
+               switch ($this->sortField) {
+                       case 'comments':
+                               $objectList->getConditionBuilder()->add('article.comments > ?', [0]);
+                               break;
+                       case 'views':
+                               $objectList->getConditionBuilder()->add('article.views > ?', [0]);
+                               break;
+                       case 'cumulativeLikes':
+                               $objectList->getConditionBuilder()->add('article.cumulativeLikes > ?', [0]);
+                               break;
+               }
+               
+               return $objectList;
        }
        
        /**
         * @inheritDoc
         */
        protected function getTemplate() {
-               $templateName = 'boxArticleList';
-               if ($this->box->position === 'sidebarLeft' || $this->box->position === 'sidebarRight') {
-                       $templateName = 'boxArticleListSidebar';
-               }
-               
-               return WCF::getTPL()->fetch($templateName, 'wcf', [
+               return WCF::getTPL()->fetch('boxArticleList', 'wcf', [
                        'boxArticleList' => $this->objectList,
-                       'boxSortField' => $this->sortField
+                       'boxSortField' => $this->sortField,
+                       'boxPosition' => $this->box->position
                ]);
        }
 }
index e13ebe4dee7dea5dbb8725cd3aa741e7cc68d38b..aa29601fe633aaebf4f5915d0281e0fe7962af7c 100644 (file)
@@ -2,7 +2,7 @@
        .articleImageWrapper {
                align-items: center;
                display: flex;
-               height: 300px;
+               max-height: 300px;
                overflow: hidden;
                
                img {
        > li:not(:first-child) {
                margin-top: 30px;
        }
+       
+       @include screen-xs {
+               .box128 > .articleListImage {
+                       margin-right: 10px;
+               }
+               
+               .articleListImage > img {
+                       height: 64px !important;
+                       width: 64px !important;
+               }
+       }
+}
+
+.boxesFooterBoxes {
+       .articleList {
+               display: flex;
+               flex-wrap: wrap;
+               margin: 0 -5px -20px -5px;
+               
+               > li {
+                       margin: 0 5px 20px 5px;
+               }
+               
+               .articleListImage > img {
+                       height: auto !important;
+                       max-width: 280px;
+                       width: 100% !important;
+               }
+               
+               .articleListImage + .articleListTitle {
+                       margin-top: 5px;
+               }
+               
+               .articleListMetaData {
+                       display: none;
+               }
+       }
+       
+       @include screen-lg {
+               .articleList {
+                       > li {
+                               flex: 0 0 calc(100%/3 - 10px);
+                               max-width: calc(100%/3 - 10px);
+                       }
+               }
+
+               .boxFullWidth {
+                       .articleList {
+                               > li {
+                                       flex: 0 0 calc(100%/6 - 10px);
+                                       max-width: calc(100%/6 - 10px);
+                               }
+                       }       
+               }
+       }
+       
+       @include screen-sm-up {
+               .articleList {
+                       > li {
+                               flex: 0 0 calc(100%/3 - 10px);
+                               max-width: calc(100%/3 - 10px);
+                       }
+               }
+       }
+       
+       @include screen-xs {
+               .articleList {
+                       justify-content: center;
+                       
+                       > li {
+                               width: 280px;
+                       }
+               }
+       }
 }