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 not optimal (in my opinion) to the most difficult but with the same functionalities as the desktop version:
- create a custom page with only the 50 most recent posts and no pagination system, using a redirect on the recent posts page to point the mobile users to this page
- use the current page changing only the css to try to simplify the display, but with the given html structure it looks a bit difficult
- override every single components used on the recent posts page to add a mobile alternative for each part of the page, but I think it will be even harder and perhaps even impossible for some functionalities
I'm asking for your feedback about this, some of you here already had to do something like this and how did you manage to do it?
Thanks.
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 />
