harvesthq/Sidetap

Reduce Required HTML For Content Panels

Opened this issue · 1 comments

We can reduce the base structure required and dynamically wrap with the structure that is needed only for iOS scrolling.

Current required structure for content panels:

        <div class="stp-content-panel">
          <header>
            <a href="javascript:void(0)" class="header-button icon menu"><span>Menu</span></a>
            <h1>Header Text</h1>
          </header>
          <div class="stp-content-frame">
            <div class="stp-content-body">
              <div>
                Content goes here.
              </div>
            </div>
          </div>
        </div>

Would be simpler as

        <div class="stp-content-panel">
          <header>
            <a href="javascript:void(0)" class="header-button icon menu"><span>Menu</span></a>
            <h1>Header Text</h1>
          </header>
          <div class="stp-content">
             Content goes here.
          </div>
        </div>

Note: headers aren't actually required, but they seemed appropriate for the skeleton.

Can you help me with loading content panels, I'm struggling to understand how to do this from the sample files. I looked at the SideTap documentation but am still of getting how to do it...I'm not a JS expert.