For those wanting to add their own CSS to the app, here’s the markup.
Once logged into a church – app content is delivered in #rendered and either #htmlview or #listview.
All buttons have the class .button and .action – the default is blue, so other colour buttons also have .red or .green.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src * gap: file:; style-src 'self' 'unsafe-inline'; frame-src *; img-src * 'unsafe-inline' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width height=device-height,viewport-fit=cover" />
<title>Our Church</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jQuery.js"></script>
</head>
<body data-spy="scroll" >
<style id="dynamicStyles"></style>
<div data-role="page" id="page" >
<div data-role="header" id="header">
<div class="ui-content">
<h2 id="menu" id="church">☰ Home</h2>
<ul data-role="listview" id="ulmenu" class="ui-listview">
<li id="home-tab-button" class="tab-button" data-tab="#home"> <span class="languagespecificHTML" data-text="home">Home</span></li>
<li id="account-tab-button" class="tab-button" data-tab="#account" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="account">Account</span></li>
<li id="address-tab-button" class="tab-button" data-tab="#address" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="address">Address</span></li>
<li id="bible-tab-button" class="tab-button" data-tab="#bible" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="bible">Bible</span><span id="bible-badge"></span></li>
<li id="calendar-tab-button" class="tab-button" data-tab="#calendar" data-tap-toggle="false"><span class="languagespecificHTML" data-text="calendar">Calendar</span></li>
<li id="classes-tab-button" class="tab-button" data-tab="#classes" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="classes">Classes</span></li>
<li id="giving-tab-button" class="tab-button" data-tab="#giving" data-tap-toggle="false"><span class="languagespecificHTML" data-text="giving">Giving</span></li>
<li id="group-tab-button" class="tab-button" data-tab="#smallgroup" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="groups">Groups</span></li>
<li id="media-tab-button" class="tab-button" data-tab="#media" data-tap-toggle="false"><span class="languagespecificHTML" data-text="media">Media</span></li>
<li id="news-tab-button" class="tab-button" data-tab="#news" data-tap-toggle="false"><span class="languagespecificHTML" data-text="news">News</span> <span id="news-badge"></span></li>
<li id="prayer-tab-button" class="tab-button" data-tab="#prayer" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="prayer">Prayer</span> <span id="prayer-badge"></span></li>
<li id="rota-tab-button" class="tab-button" data-tab="#rota" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="rotas">Rotas</span></li>
<li id="settings-tab-button" class="tab-button" data-tab="#settings" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="settings">Settings</span></li>
<li id="logout-tab-button" class="tab-button" data-tab="#logout" data-tap-toggle="false"></i> <span class="languagespecificHTML" data-text="logout">Logout</span></li>
</ul>
</div>
</div>
<div id="popup" style="display:none"><div class="content"></div></div>
<div data-role="main" id="main" >
<div class="ui-content">
<div class="pullable" data-previous="home" data-tab="home" data-dateid="" data-eventid="" data-paged="" data-id="" dat-catname="">
<div id="rendered" >
<h2 class="title"></h2>
<div id="htmlview">
<img class="waiting" src="./img/spinner.gif"/>
</div>
<div id="listview" style="display:none">
<ul id="list" class="ui-listview"></ul>
</div>
</div>
<div id="button"></div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/pullToRefresh.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/touchSwipe.min.js"></script>
<script src="js/index.js"></script>
</html>
Pages that are lists use jQuery Mobile syntax. This example is part of a new page.
.tab-button means that item will be clickable and data-tab will generate the action.
.ui-btn .ui-btn-icon-right .ui-icon-carat-r put the right arrow on the right.
<div id="listview" style="">
<ul id="list" class="ui-listview">
<li class="ui-li-static ui-body-inherit newsItem tab-button" data-id="10018" data-tab="single-post">
<div class="ui-btn ui-btn-icon-right ui-icon-carat-r">
<img height="100" width="150" class="alignleft" src="https://www.thegatewaychurch.info/wp-content/uploads/2022/05/P1020350-scaled.jpg">
<h3>Northern Germany Trip</h3>
<p>2nd May, 2022<br style="clear:left;"></p>
</div>
</li>
<!-- ... -->
</ul>
</div>
