Cleanup Topic Actions section

[hanakin]

I am proposing to help make the UI more consistent and allow for easier modifications and responsive flow that we revamp the topic actions section

Both the code and the look slightly

first of all the code wold be completely rewritten to me modular and self contained like so

Code: Select all

<section class="action-bar">
    <div class="action-left">
        <a class="button" href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>Locked</span> <span class="fa fa-lock"></span></a>
        <form action="get" class="form forum-search" action="./search.php">
            <fieldset class="input-group">
                <input class="input input-search" type="search" name="keywords" id="search_words" placeholder="Search this forum...">
                <!-- <input class="input input-search" type="search" name="keywords" id="search_words" placeholder="Search this forum..."> -->
                <span class="input-group-button">
                    <button type="submit" class="button"><span class="fa fa-search"></span></button>
                </span>
                <input type="hidden" name="fid[1]" value="81">
            </fieldset>
        </form>
    </div>
    <div class="action-right">
        <!-- 673 topics -->
        <a class="button" href=""><span class="text">Mark topics read</span> <span class="fa fa-check-square"></span></a>
        <a href="" class="button jump">
            <span class="text">Page <strong>1</strong> of <strong>34</strong></span> <span class="fa fa-location-arrow"></span>
         </a>
         <ul class="pagination list-inline">
             <li class="active"><span>1</span></li>
             <li><a href="">2</a></li>
             <li><a href="">3</a></li>
             <li><a href="">4</a></li>
             <li class="ellipsis"><span>...</span></li>
             <li><a href="">34</a></li>
         </ul>
    </div>
</section>

as for the look it would be something like this on desktop

Screen Shot 2014-05-05 at 12.14.59 AM.png

(14 KiB) Downloaded 971 times

I used font-awsome for the icons since its faster to mock up that way but we can switch this out to use the current images if absolutely necessary but we would need to add a few more to accommodate the rest of the actions ie. jump to, mark, view post types

to help facilitate a transition to something more modular I feel we should keep the html in its own include file action-bar.html, the css in its own module as well action-bar.css and add it as an import in stylesheets.

Its not 100% finished I would still need to tackle the responsive stuff and the rest of the possible variations for all the pages and locations.

[PayBas]

Something similar is already under development:

https://github.com/phpbb/phpbb/pull/1864
https://tracker.phpbb.com/browse/PHPBB3-12013

[hanakin]

kind of a little but not really. its converting the jump-box at the bottom into a menu instead of a popup. its not addressing the overall action bar. It will help this be more user friendly but still addresses noting about the modularity and code for the containing of the action-bar. Plus it leaves out the search field and I am also e-styling the pagination to use the same UI.

[Prosk8er]

I like that hanakin looks cool

[Louis7777]

In my opinion we should think of how to move "Mark forums read", "Mark subforums read" and "Mark topics read" out of the way while maintaining their functionality. Perhaps replace them with icons and tooltips or idk what else...

In any case, I like how it all looks hanakin, except for the search's placeholder which should be gray.