App Markup

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">&#x2630; 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>