Russ
Pixel Exit Staff
I've promised a tutorial for awhile now, and honestly haven't had the time between paid client work and my vacation.
Here's the html/css we used to achieve the effect. There's bugs on mobile view and this could be laid out better I'm sure.
el_portal_index
el_portal_item_bit
css:
Here's the html/css we used to achieve the effect. There's bugs on mobile view and this could be laid out better I'm sure.
el_portal_index
Code:
<xen:include template="el_portal_headinclude"/>
<xen:if is="{$current_category}">
<xen:navigation>
<xen:breadcrumb href="{xen:link portal/categories, $current_category}">
{$current_category.title}
</xen:breadcrumb>
</xen:navigation>
</xen:if>
<xen:if is="@portalSidebarShowAlways OR {$categories} OR {$showDefaultSidebar}">
<xen:sidebar>
<xen:if is="!@portalSidebarShowSidebarvisitorpanel">
<xen:container var="$noVisitorPanel">1</xen:container>
</xen:if>
<xen:if is="{$categories}">
<div class="section">
<div class="secondaryContent portalCategoryListSidebar">
<h3>{xen:phrase el_portal_categories}</h3>
<xen:comment>
<a href="{xen:link portal}" class="{xen:if "{$current_category.category_id} == 0", '',
''}">Show all</a>
</xen:comment>
<div class="pairsJustified">
<xen:foreach loop="$categories" value="$category">
<dl class="discussionCount">
<dt>
<a href="{xen:link portal/categories, $category}"
class="{xen:if "{$current_category.category_id} == {$category.category_id}",
'selected', ''}">{$category.title}</a></dt>
<dd>{$category.item_count}</dd>
</dl>
</xen:foreach>
</div>
</div>
</div>
</xen:if>
<xen:if is="{$showDefaultSidebar}">
<xen:hook name="forum_list_sidebar">
<xen:include template="sidebar_online_users" />
<!-- block: forum_stats -->
<div class="section">
<div class="secondaryContent statsList" id="boardStats">
<h3>{xen:phrase forum_statistics}</h3>
<div class="pairsJustified">
<dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
<dd>{xen:number $boardTotals.discussions}</dd></dl>
<dl class="messageCount"><dt>{xen:phrase messages}:</dt>
<dd>{xen:number $boardTotals.messages}</dd></dl>
<dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
<dd>{xen:number $boardTotals.users}</dd></dl>
<dl><dt>{xen:phrase latest_member}:</dt>
<dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
<!-- slot: forum_stats_extra -->
</div>
</div>
</div>
<!-- end block: forum_stats -->
</xen:hook>
</xen:if>
</xen:sidebar>
</xen:if>
<xen:hook name="extraportal_top_above_nav" />
<xen:hook name="extraportal_top" />
<div class="sectionMain">
<ol class="messageList <xen:if is='{$itemCount} == 1'> singleItem <xen:else /> moreItems</xen:if>" id="portalList"
data-maxheight="{xen:calc '@portal_maxImgWidth +100'}">
<xen:hook name="extraportal_list">
<xen:if is="{$items}">
<xen:foreach loop="$items" value="$item">
<xen:hook name="extraportal_item" params="{xen:array 'item={$item}'}">
{xen:raw $item.renderedTemplate}
</xen:hook>
</xen:foreach>
<xen:else/>
<li>{xen:phrase el_portal_no_portal_items}</li>
</xen:if>
</xen:hook>
</ol>
</div>
<div class="pageNavLinkGroup">
<div class="linkGroup"></div>
<xen:pagenav link="portal" page="{$page}" perpage="{$postsPerPage}" total="{$totalItems}" linkparams="{$linkparams}"/>
</div>
<xen:hook name="extraportal_end" />
<xen:if is="{$show_portal_branding}">
<div class="muted" style="text-align: center; font-size: 11px; margin: 10px;">
<a href="http://extralicense.com/">Extra Portal © 2013-2014 ExtraLicense.com</a>
</div>
</xen:if>
<xen:edithint template="el_portal_item_bit" />
el_portal_item_bit
Code:
<li id="portalitem-{$item.portalItem_id}" class="elportalItem itembit {$item.content_type} {xen:if "{$item.mediaCount} > 0", 'media',''}" data-contentType="{$item.content_type}" data-contentId="{$item.content_id}" data-author="{$item.data.username}">
<a href="{xen:raw $item.data.url}">
<xen:if is="{$item.attachment_id}"><img src="{xen:link 'attachments', {xen:array 'attachment_id={$item.attachment_id}'}}" alt="{$item.filename}" class="itemimg" /></xen:if>
<div class="itemTitle"><h3><xen:if is="@el_portal_threadprefix">{xen:helper threadPrefix, $item.data.}</xen:if>{$item.data.title}</h3></div>
</a>
</li>
css:
Code:
html .itembit
{
margin-bottom: 0px;
width: 49%;
float: left;
max-height: 185px;
margin: 0 5px 15px 0;
opacity: 1;
transition: all .2s ease;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
}
html .itemimg { margin-right: 0px; }
.el_portal_index .messageList .message
{
margin-bottom: 0px;
}
html .itembit .messageText
{
padding-top: 0px;
padding-bottom: 5px;
}
#portalList .subHeading h3
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.el_portal_index .subHeading.categoryStrip
{
text-overflow:ellipsis;
}