Status
Not open for further replies.

Freekoid

Customer
Revise tabs / category display

Main arcade page

zirel3.jpg


Favourite tab

2qcp1dc.jpg
 
Upvote 0
This suggestion has been closed. Votes are no longer accepted.
Hm. have to figure out how to make it turn some of those into a dropdown at the edge. confirmed for right now.
 
Update: The game positions are fixed now. Any more category tabs will push the search field tab further along IMHO will start to look badly positioned, maybe a block of its own? The only thing thats making them uneven is the 'sort games' field block on the right which probably just needs a br/ or div.
 
I was thinking of rearranging some of that stuff so that tabs are aligned to the right, and fill the space otherwise turn into a dropdown like on the vb profile pages.

Tentatively something like

[sort games drodown] [category icon, description] [game count for current tab] [All] [Favorites] [Search ____]
[List of tabs....][Dropdown of tabs that exceed width]
game panels below, with tiny margin again
 
I like the idea with the new layout, but I'd change it up a little.

[sort] <Category Icon> [current category ([game_count])] [Search]
[All] [Favorites] [List of tabs]<Dropdown of tabs if needed> (although I wouldn't mind a second row of tabs myself)

While this does add one extra row of screen space, it also gives you more room before you have the dropdown potentially appear as well as keeps the categories on one line with your "information" type area on the line above it. This gives you more room to expand the information area as well if there are other things that you decide would go there, without having to again do another redesign on the layout.
 
Yeah, but when not using a category, or the category doesnt have icon/description, that whitespace looks like crap, much like it looks like crap now.

Im going to have t ocode something up that adjusts the "collapsed" tabs when the window is resized or that row changes size
 
Maybe I am not looking at something right, but how do I add existing games to a category? Or for that matter, choose a category, on import?

I have 8 set up, but none show up in the arcade, I am assuming that is because their in no games in them.
 
Last edited:
Maybe I am not looking at something right, but how do I add existing games to a category? Or for that matter, choose a category, on import?

I have 8 set up, but none show up in the arcade, I am assuming that is because their in no games in them.

Until you can edit a game, the only thing you can do is select the "Categories" checkbox at the bottom of the page when you import the games. At which point it'll import into whatever categories the game has set for itself (or however that decision is exactly made).
 
I was able to fix the wrapping issue, here is a before screenshot:

14e519a99b2b15.png


Here is a after screenshot:

14e519a9a2bea9.png


I did this by opening, DragonByte Tech: vBArcade Templates/dbtech_vbarcade_home template and look for the following bit of html.

HTML:
<select id="arcade_home_sort" class="floatright">
    <option value="s"$defsort[s]>Sort Games</option>
    <option value="a"$defsort[a]>Alphabetical</option>
    <option value="n"$defsort[n]>Newly Added</option>
    <option value="t"$defsort[t]>Best Rating</option>
    <option value="v"$defsort[v]>Most Rated</option>
    <option value="f"$defsort[f]>Most Favorited</option>
    <option value="m"$defsort[m]>Played Most</option>
    <option value="l"$defsort[l]>Played Longest</option>
    <option value="d"$defsort[d]>Most Discussed</option>
    <option value="r"$defsort[r]>Randomized</option>
</select>

At the end of the </select> add a <br> so it looks like this:

HTML:
<select id="arcade_home_sort" class="floatright">
    <option value="s"$defsort[s]>Sort Games</option>
    <option value="a"$defsort[a]>Alphabetical</option>
    <option value="n"$defsort[n]>Newly Added</option>
    <option value="t"$defsort[t]>Best Rating</option>
    <option value="v"$defsort[v]>Most Rated</option>
    <option value="f"$defsort[f]>Most Favorited</option>
    <option value="m"$defsort[m]>Played Most</option>
    <option value="l"$defsort[l]>Played Longest</option>
    <option value="d"$defsort[d]>Most Discussed</option>
    <option value="r"$defsort[r]>Randomized</option>
</select><br>
 
Well, thats temporary i guess, but does not solve the overall problem im hoping to alleviate with the eventual redesign of that bar of tabs
 
I changed it up a little:

14e544037a275b.png


I changed the floatright to floatleft

Original code:

HTML:
<select id="arcade_home_sort" class="floatlright">
    <option value="s"$defsort[s]>Sort Games</option>
    <option value="a"$defsort[a]>Alphabetical</option>
    <option value="n"$defsort[n]>Newly Added</option>
    <option value="t"$defsort[t]>Best Rating</option>
    <option value="v"$defsort[v]>Most Rated</option>
    <option value="f"$defsort[f]>Most Favorited</option>
    <option value="m"$defsort[m]>Played Most</option>
    <option value="l"$defsort[l]>Played Longest</option>
    <option value="d"$defsort[d]>Most Discussed</option>
    <option value="r"$defsort[r]>Randomized</option>
</select>

New code:

HTML:
<select id="arcade_home_sort" class="floatleft">
    <option value="s"$defsort[s]>Sort Games</option>
    <option value="a"$defsort[a]>Alphabetical</option>
    <option value="n"$defsort[n]>Newly Added</option>
    <option value="t"$defsort[t]>Best Rating</option>
    <option value="v"$defsort[v]>Most Rated</option>
    <option value="f"$defsort[f]>Most Favorited</option>
    <option value="m"$defsort[m]>Played Most</option>
    <option value="l"$defsort[l]>Played Longest</option>
    <option value="d"$defsort[d]>Most Discussed</option>
    <option value="r"$defsort[r]>Randomized</option>
</select>
 
Thats not the effect i have in mind, and requires some javascript to collapse extra tabs at runtime; its a big project that ill get to in due time.
 
Category Description

When you revisit the tabs can you change the display for the category description?

As it is now it is jumbled in with the other stuff.

14e5887c8b2f97.png
 
I was able to temp fix this by adding <br><br> in the following template:

DragonByte Tech: vBArcade Templates/dbtech_vbarcade_home_panels

HTML:
<div align="center"><if condition="$category[icon]"><img src="dbtech/vbarcade/images/$category[icon]" class="arcade_icon" /></if> <br><br><if condition="$category['description']">$category[description] - </if><if condition="$content">$total games available<else />No games found!</if></div><br />
<if condition="$content">$content<br />$pagenav</if><br />

It is placed before, if condition="$category['description']">

14e58f563d9ea4.png
 
As ive been saying, the whole collection there i dont really like and will be revising to accommodate for excess tabs and category descriptions; two things i didnt take into account the first time.
 
can't you put the games tabs in a sidebar that would sit on either the left or right side of the games ? Instead of having 5 columns for the games make it only 4 giving you the space for a sidebar
 
I don't know if I would like a sidebar next to the game panels, that area should be only for games. I guess I would have to see it as well though.
 
Arcade Home Page Nav

Would it be possible, when you revisit the navbar and such to add a page selector to the top also like you have at the bottom, if I have alot of games in a category, and I display 25 games per page, and I know the game I want is on page 15, I have to scroll through all the game panels to get to the page selector.
 
Status
Not open for further replies.

Legacy vBArcade

vBulletin 4.x.x
Seller
DragonByte Technologies
Release date
Last update
Total downloads
902
Customer rating
0.00 star(s) 0 ratings
Back
Top