1 Topic by Kushi (edited by Kushi 2013-08-20 17:29)

  • Kushi
  • Kushi
  • Style creator & Extension Developer
  • Offline
  • From: Poland
  • Registered: 2011-10-26
  • Posts: 243

Topic: Changing DOM structure

Hello!

I've been trying to work on responsive theme for punbb ( way to many times ) and I'm always giving up because of DOM structure. It's so unintuitive!

Let me show some example. Look at this category code

<div class="main-head">
    <h2 class="hn"><span></span></h2>
</div>
<div class="main-subhead">
    <p class="item-summary"><span><strong class="subject-title"></strong> in this category with details of <strong class="info-topics"></strong>, <strong class="info-posts">posts</strong>, <strong class="info-lastpost">last post</strong></span></p>
</div>
<div id="category1" class="main-content main-category">
    <div id="forum1" class="main-item odd main-first-item">
        <span class="icon "><!-- --></span>
        <div class="item-subject">
            <h3 class="hn"><a href="http://localhost/~newestpunbb/viewforum.php?id=1"><span></span></a></h3>
            <p>This is just a test forum</p>
        </div>
        <ul class="item-info">
            <li class="info-topics"><strong>1</strong> <span class="label">topic</span></li>
            <li class="info-posts"><strong>1</strong> <span class="label">post</span></li>
            <li class="info-lastpost"><span class="label">Last post:</span> <strong><a href="http://localhost/~newestpunbb/viewtopic.php?pid=1#p1">Today 16:31:42</a></strong> <cite>by kushi</cite></li>
        </ul>
    </div>
    <div id="forum2" class="main-item even">
        <span class="icon "><!-- --></span>
        <div class="item-subject">
            <h3 class="hn"><a href="http://localhost/~newestpunbb/viewforum.php?id=2"><span>Test</span></a></h3>
        </div>
        <ul class="item-info">
            <li class="info-topics"><strong>0</strong> <span class="label">topics</span></li>
            <li class="info-posts"><strong>0</strong> <span class="label">posts</span></li>
            <li class="info-lastpost"><strong>Never</strong></li>
        </ul>
    </div>
</div>

Wouldn't it be better to have something like this? ( I've used bootstrap-responsive classes and more semantic structure )

<article id="category1" class="main-content main-category">
    <header class="category-header">
        <div class="row-fluid main-head">
            <div class="span12">
                <h1 class="category-title">Test category</h1>
            </div>
        </div>
        <div class="row-fluid main-subhead">
            <div class="span7">Forums</div>
            <div class="span1">Topics</div>
            <div class="span1">Posts</div>
            <div class="span3">Last post</div>
        </div>
        <h2 class="forum-description">Previewing Another WordPress Blog</h2>
    </header>
    <section id="forum1" class="main-item even">
        <div class="row-fluid">
            <div class="span1 forum-icon"><div class="icon"></div></div>
            <div class="span6 forum-subject">
                <header class="forum-header">
                    <h2 class="forum-title"><a href="http://localhost/~newestpunbb/viewforum.php?id=1" rel="bookmark" title="Test forum">Test forum</a></h2>
                </header>
            </div>
            <div class="span1 forum-topics"><strong>1</strong></div>
            <div class="span1 forum-posts"><strong>1</strong></div>
            <div class="span3 forum-lastpost">
                <div><a href="http://localhost/~newestpunbb/viewtopic.php?pid=1#p1">Today 16:31:42</a></div>
                <div>by Kushi</div>
            </div>
        </div>
    </section>
    <section id="forum2" class="main-item odd main-first-item">
        <div class="row-fluid">
            <div class="span1 forum-icon"><div class="icon"></div></div>
            <div class="span6 forum-subject">
                <header class="forum-header">
                    <h2 class="forum-title"><a href="http://localhost/~newestpunbb/viewforum.php?id=2" rel="bookmark" title="Test">Test</a></h2>
                </header>
            </div>
            <div class="span1 forum-topics"><strong>0</strong></div>
            <div class="span1 forum-posts"><strong>0</strong></div>
            <div class="span3 forum-lastpost">
                <div>Never</div>
            </div>
        </div>
    </section>
</article>

I don't want to create fork since I'm front-end developer so I haven't got enough back-end skills to develop PHP part

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.
  • From: earth
  • Registered: 2012-02-12
  • Posts: 473

Re: Changing DOM structure

@kushi. gokil nice project! yikes

sorry my BAD english T___T
Have a nice day >.<
(^____^)v
  • keeshii
  • Extension Developer
  • Offline
  • From: Poland
  • Registered: 2013-04-04
  • Posts: 170

Re: Changing DOM structure

Instead of changing the DOM structure and breaking all existing themes I have another proposal. In my opinion styles should uses some kind of hooks. In the next verision of punbb I would like to see something like this:

//--- in the style ---
/styles/SomeStyle/hooks/print_forum_row.php

// --- in the code ---
if (get_style_hook('print_forum_row')) {
    echo '<div class="forum_row">'.$content.'</div>';
}

Function 'get_style_hook' will execute file from style folder, if file not exists returns true. I know that this way source code will become more complicated, but this will give more flexibility to style designers.

If you want to contact me quickly - send e-mail, not PM.
<?php $t='<?php $t=%c%s%c; printf($t,39,$t,39,10);%c'; printf($t,39,$t,39,10);