/admin/badges - too many badges?


(PJH) #1

TL;DR: I’d like the left hand side of /admin/badges to be either scrollable, independantly of the main frame, or have the ability to expand and collapse (based on badge group would appear sensible) the badges.


Since my mock for the first option could conceivably be put into the site specific CSS I could probably do this myself, but I’m sure that I can’t be the only person who’d like something as part of the main software.

Source for mocks (along with original for comparison) available on request.

Onwards…


Resized, CSS tweaked, and screenshot on a portrait monitor, this is what I’m currently looking at while contemplating creating some more badges once I’ve got the SQL for them sorted. Imposing, no? Tiresome on a landscape monitor on a lower resolution? You bet.

What I’d like.

#Option one
##Apparently easy, but not as slick

scroll the list of badges independently of the main part of the page.

I managed to get the mock doing this by dumping this CSS in.

<style>
.content-list { overflow-y: auto; float: left; width: 25%; height: 1500px; }
.current-badge { overflow-y: auto; float: right; width: 75%; height: 1500px;}
</style>

Feels icky to me, but it’s a quick ‘fix’ and something admins can do for themselves if absolutely necessary. But the badge count has strayed, if you look bottom left of the screenshot.

Also the screenheight has been hardcoded.

#Option two

Nicer looking

Have a ‘tree’ of badges, initially collapsed, based on current badge groupings.


(Michael Downey) #2

Having such a massive number of badges is probably an edge case, no? :slight_smile:


(PJH) #3

So I’m not supposed to create even more badges?

@downey - wasn’t it you that started that topic asking for ideas for badges a couple of months back…?

Ah yes, it was. Shurrup then! :smiley:


(Marco) #4

I like option 2 more. Be careful not to have more badges than users :slight_smile:


(PJH) #5

So do I, but option 1 is serviceable, and quicker to do.

At least, doing the mock certainly was…


(PJH) #6

Which brings up a point - even if option 2 is adopted, something akin to option 1 will still be needed if the number of badge groups starts getting a little large and it’ll be back to square one, albeit after a longer period…


(PJH) #7

Playing around with the DOM on the live page indicates that the following should be sufficient for Option 1, however putting it into the site CSS doesn’t seem to work/make it to the displayed page

.content-list { 
    overflow-y: auto;
    height: 750px;
}

…?


(Marco) #8

Badge groups = another name to say Directories
Badges = another name to say Files

So the question becomes: what’s the best way to show files and directories on a web page? A web file explorer, I mean. Scrollable treeview? So oldish style, but still functional.

Maybe a Tag-explorer style?. Too much for the task.

See how Stackoverflow lists tags: Tags - Stack Overflow
You get a searchable list, then you can click on a tag to see/edit the details.


(PJH) #9

The analogy leaks because there’s (currently, and AFAIK in the forseeable future,) only one level to think about; there is no ‘group containing groups (and possibly badges)’ concept.

And I can imagine @Sam baulking at trying to implement that.


(Marco) #10

If I’m allowed to go one step further, I think Badges and Tags are exactly the same thing. Badges are assigned to users based on queries while tags are (manually?) assigned to posts by an editor or a mod (or the software). So, should the badge system be redesigned, wouldn’t it be nice to unify those two concepts?


(James Milligan) #11

Tags are only available through a plugin, though


(PJH) #12

Incorrect. All of our initial site specific badges were (still are actually) manually awarded. It wasn’t until Sam provided the SQL interface that I started with those.

We don’t have/use the tags plugin.


(Nicolas Terray) #13

[quote=“PJH, post:1, topic:21195”] […]
I managed to get the mock doing this by dumping this CSS in.

<style>
.content-list { overflow-y: auto; float: left; width: 25%; height: 1500px; }
.current-badge { overflow-y: auto; float: right; width: 75%; height: 1500px;}
</style>

Feels icky to me, but it’s a quick ‘fix’ […]
[/quote]

With some css/javascript you can easily make it slick. It feels more natural to have such a list than an explorer view.

Some libraries to help with design: