Forum Discussion

wpigoury's avatar
wpigoury
Mentor
11 years ago

Lithium mobile - Best way to adapt not supported pages

Hi,   We need to have a mobile version of the recent posts page which is not supported on Lithium mobile. Is there some guidelines to achieve it?   I thought of 3 solutions from the easiest but ...
  • ChiaraS's avatar
    11 years ago

    Hi,

     

    I did something similar some time ago, by creating a custom page for mobile "MobileRecentPosts" and a custom component (including pagination).

     

    here's a simplified version that you could use as starting point and adjust based on the information you need to display:

    <#assign results_list_size = 20 />
    <#assign count = rest("/posts/recent/count").value?number>
    <#assign pageNum = webuisupport.path.parameters.name.get("page", 1) /> 
    <#assign rest_query = "/posts/recent?restapi.format_detail=full_list_element&restapi.response_style=view&page_size=${results_list_size}&page=${pageNum}" />
    <#assign msgs = rest(rest_query).messages>
    <ul id="list" class="lia-list-standard lia-component-simple-message-list">
    <#list msgs.message as message>
    	<#assign replies = (rest("${message.thread.@href}/messages/count").value?number - 1) />
    	<#assign body_truncate_length = coreNode.settings.name.get("mobile.message_body_truncate_length")?number />
    	<#assign thisDate = datesupport.parseAsIso8601(message.post_time) />
    	<#if coreNode.settings.name.get("layout.friendly_dates_enabled") == "true">
    		<#assign post_date = datesupport.setDate(thisDate).friendlyDateAsString!"" />
    	</#if>
    	<#if !post_date?? || post_date == "">
    		<#assign post_date = "${datesupport.setDate(thisDate).dateAsString} ${datesupport.setDate(thisDate).timeAsString}"  />
    	</#if>
    	<#assign msg_board_title = rest("${message.board.@href}/short_title").value>
    	<#assign hasSolutions = (0 lt rest("${message.thread.@href}/solutions").messages.message?size) />
    	<li>
    		<#if hasSolutions == true>
    			<a class="lia-link-navigation verified-icon" href="${message.@view_href}">
    				<img title="${skin.images.message_type_solved.title}" alt="${skin.images.message_type_solved.alt}" id="display" src="${skin.images.message_type_solved.url}">
    			</a>
    		</#if>
    		<h2 class="message-subject">${message.subject}</h2>
    		<span class="message-board"><a href="${message.board.@view_href}">${msg_board_title}</a></span>
    		<span class="UserName"><a href="${message.author.@view_href}">${message.author.login}</span></a></span>
    		<span class="DateTime"><span title="${post_date}">${post_date}</span>
    		<div class="message-subject-body">${utils.html.truncate(body_truncate_length,message.body,"...")}</div>
    	</li>
    </#list>
    </ul>
    <#assign pageable_item = webuisupport.paging.pageableItem
            .setCurrentPageNumber(pageNum)
                .setItemsPerPage(results_list_size)
                    .setTotalItems(count)
                        .setPagingMode("enumerated")
                            .build />
    <@component id="common.widget.pager" pageableItem=pageable_item />