Cleanup Topic Actions section

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
Post Reply
User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Cleanup Topic Actions section

Post by hanakin » Sun May 04, 2014 10:27 pm

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.

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: Cleanup Topic Actions section

Post by PayBas » Sun May 04, 2014 10:54 pm


User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Cleanup Topic Actions section

Post by hanakin » Sun May 04, 2014 11:26 pm

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.

User avatar
Prosk8er
Registered User
Posts: 51
Joined: Sun Mar 11, 2007 1:19 am
Location: Rochester, Ny
Contact:

Re: Cleanup Topic Actions section

Post by Prosk8er » Mon May 05, 2014 12:40 am

I like that hanakin looks cool
formerly bprsk8r4272 Proud Kiss Portal user on phpBB 3.0.14 + 1.0.20 (build 311-020)
Image
Validated Extensions, Mods, and Styles My Mods: Smashable Christmas Lights 3.0.x Add a group to teampage 3.0.x

User avatar
Louis7777
Registered User
Posts: 378
Joined: Fri Apr 04, 2014 12:32 am

Re: Cleanup Topic Actions section

Post by Louis7777 » Mon May 05, 2014 9:39 am

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.

Post Reply