From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 22 Jun 2016 10:40:22 +0000 (+0200)
Subject: Improved article list box
X-Git-Tag: 3.0.0_Beta_1~1376^2~3
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=2dbac9ade8074f95d4dc7a74f69f006ddad66119;p=GitHub%2FWoltLab%2FWCF.git

Improved article list box
---

diff --git a/com.woltlab.wcf/templates/boxArticleList.tpl b/com.woltlab.wcf/templates/boxArticleList.tpl
index 57ea3b6afb..68559df214 100644
--- a/com.woltlab.wcf/templates/boxArticleList.tpl
+++ b/com.woltlab.wcf/templates/boxArticleList.tpl
@@ -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
index fff2b84640..0000000000
--- a/com.woltlab.wcf/templates/boxArticleListSidebar.tpl
+++ /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>
diff --git a/wcfsetup/install/files/lib/system/box/ArticleListBoxController.class.php b/wcfsetup/install/files/lib/system/box/ArticleListBoxController.class.php
index 6a41ed6958..b9fdf18761 100644
--- a/wcfsetup/install/files/lib/system/box/ArticleListBoxController.class.php
+++ b/wcfsetup/install/files/lib/system/box/ArticleListBoxController.class.php
@@ -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
 		]);
 	}
 }
diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index e13ebe4dee..aa29601fe6 100644
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -2,7 +2,7 @@
 	.articleImageWrapper {
 		align-items: center;
 		display: flex;
-		height: 300px;
+		max-height: 300px;
 		overflow: hidden;
 		
 		img {
@@ -215,4 +215,78 @@
 	> 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;
+			}
+		}
+	}
 }