News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Has anyone improved /main_block.png to have transparent rounded edges?

Started by Biology Forums, August 30, 2019, 11:35:58 AM

Previous topic - Next topic

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus


Sir Osis of Liver

I've put that on a couple of forums, tonight another one asked be about color blind people using it (something I had avoided thinking about).  Nothing that a js kluge can't fix.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

RFD


Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

Where is the Last Post column in board index?  Gotta have that.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Same place it has been in this theme for for months. :D



General Discussion

Feel free to talk about anything and everything in this board.

Latest: At vero eos et accusamus... February 08, 2020, 05:48:27 AM by antechinus the wombat



Sir Osis of Liver

Ok, I see it now.  Have to close my left eye to see anything small this time of night, helps to know where it is.

Doing a green version here to match Curve Multi Color green they're using here.  Think I'll compact the user info block a bit, seems a bit spread out.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Yeah I was a tad worried about the most heavily-used links on the site (unread and new replies) being cramped for finger space on mobile. Figured I should give them enough line height so that anyone could just stab a finger at them and only hit one. Basically, a triumph of functionality over aesthetics. I agree they do look better if scrunched down in height a bit.

I'm messing around with variants. Only changing CSS, to get a few quick and easy things that look smooth. Just for the heck of it thought I'd try my hand at this new-fangled flat design thing. Personally I can't quite bring myself to go total flat though, so there are a few bits of eye candy thrown in.

Have four roughed out at the moment, with the Teal and Coffee being most advanced. The other two (Slate and Sage) are right for general colour scheme, but still need link colours and a couple of other things sorted.

This is me just testing out stuff to see what can be done on the same markup. The ones shown are just more or less "basic Curve" layout but I've also been testing things like full-width footers and headers. It can all be done, without much drama.

Incidentally, after you posted that question I was reminded of Bloc's old Millenium theme, which was using a similar board index arrangement back in 2006 or so. Just for the heck of it I threw that on local, and once the menu coding and text strings are swapped for 2.0.x versions it all hangs together remarkably well. Wouldn't be hard to get it fully 2.0.x kosher, and it's more or less much mobile-friendly out of the box.

Sir Osis of Liver

Would be nice if you build into a multi-color theme.  Got most of the obvious stuff done on the green version, will play with the header tomorrow.  I don't use a phone so there's no way for me to test the small screen functionality.  I can view it in FF emulations, but they're not 100% reliable, and larger than an actual phone.  Did a couple of customizations with mobile-desktop, text menu links are spaced apart pretty well, but unread posts/new replies are close together.  No one's complained, no idea if anyone has used the links (I never do). 

Gonna pack it in for the night.  Real nice theme overall.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Trying a few more tricks.

I resurrected Bloc's old Emerald theme* on local, because I always loved the thing even though I've never run it live on an actual site. It's also set up by default to be pretty much ideal for use on mobile. It was one of Bloc's early experiments with minimalism, and stacks the board index content vertically instead of having the table cells laid out horizontally.

However here's not much point attempting to convert all the templating and CSS to 2.0.x. It makes more sense to take the overall look and feel, and do that on a 2.0.x base. This makes it a good test case for this new "mutant Curve boilerplate". Trying out these variants (and some mod installations) is useful for seeing if all my ideas are actually the best compromise in practice.

While doing this I found a handy use for CSS filters. The hue rotate filter is really useful for tweaking icon colours without having to make new images. For example, this takes a Curve-coloured icon and turns it into a perfect match for Emerald:

.catbg img {
    filter: hue-rotate(322deg);
}
.catbg img:hover {
    filter: hue-rotate(270deg);
    border: 2px solid #ddd;
}


And obviously similar things could be done with the other filters, if necessary. This should be good for tweaking 2.0.x's stacks of little images which don't have $context['theme_variant'] attached  them in the templates, and therefore can't be swapped via variant unless you do an awful lot of template hacking. With a bit of cunning CSS trickery it should be possible to nail most of the ones that need help, because you'll be able to change their look via the variant CSS files. :)

At the moment I haven't got around to detailing everything, but so far it's looking like this...

*Note for grumpy legal types: El Blocco has kindly put his old themes on GitHub under the BSD 2-Clause License, so me nicking Emerald is ok as long as I keep the credit for the dude himself. Which I will obviously do, since I happen to like the bloke anyway so don't really want to annoy him. I realise it's unusual for me to not want to annoy someone, but stranger things have happened.

Sir Osis of Liver

Hey, where's the Go Down link?  I don't see it. :(

Oh, n/m, I took them out earlier, thought they looked clunky.  Still think so, most people won't know what they are.  Maybe I'll try to fix them.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

I did fix them. That's why I made them that way. :P

(The default ones have always given me the ******s)

Radical notion: if someone doesn't know what the things with up and down arrows on them are (coz that's really mysterious stuff) they could always, y'know, try clicking them and seeing what happens. It is the web. Clicking things it how it works. I often click unfamiliar things to see what happens. Try it. :D

(There is a limit to how much deliberate helplessness I am prepared to put up with)

Sir Osis of Liver

They're behind status bar when it pops up, and if you go down to click them and miss (every time :P), taskbar pops up and covers them.  They're pretty, though, just not practical.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Best place for them on desktop is up the left edge of the screen, but that's not so good on mobile due to the limited screen width. But I still find them easy enough to use at the bottom of the screen. If you're missing them every time, that suggests PIBCAK. :D I have a status bar and taskbar on my box too, and haven't had any issues.

I could whip up some code to have the positioning user-selectable. I had thought of doing that but haven't implemented it. It's not difficult to do, but at this stage I'd rather just give people CSS for the alternatives and let them make up their own minds.

ETA: Ok, on second thought I'll do it. Sort of. I was concerned about the position changing when people switch from landscape to portrait mode, but that can already happen with the main menu anyway (depending on the resolution of your device, of course). If someone has a 768x1024 tablet (in CSS pixels, regardless of actual device ratio) then switching from landscape to portrait will jump the menu from conventional display to hamburgered, so there's already a change in layout. Not to mention the further changes as resolution continues to decrease.

So if we accept that magic bunnies will be popping up all over the place anyway in this new responsive era I can switch the up/down buttons around too. This is a bit more CSS in some ways, but a bit less in others, so overall not much difference. So I'll do that, but skip silliness like additional profile settings. Desktop users will get the best position for desktop, and phone/tablet users will get the best for them. Easy.

Antechinus

Ok, have done it. Anyone on a screen wider than 896px (56em browser default) gets the up/down links at the left side of the screen. Anyone on a narrower screen, which in practice will be touchscreen 99% of the time, gets them in the bottom corners.

This should keep everyone happy. If you are still not happy, change the code yourself to whatever makes you happy. If nothing makes you happy, seek medical advice.

Having got that out of the way, I came up with a useful little usability tweak for the drop menus. A problem with these it that if the parent menu is taller than the rest of the screen content, as can happen on admin pages, the last drop menu ends up jammed against the bottom of the screen (see first screenshot).

Note that this drop menu has a bottom margin set, but it's not active against the body tag due to the menu being absolute positioned. The body tag just behaves as if the drop menu had no bottom margin.

The way around it, which I frankly should have thought of literally years ago, is to put a pseudo element on the bottom of the drop menu. This is a recognisable chunk of stuff for the body tag, even though it isn't markup as such, so it bumps your drop menu up by a nice amount (see second screenshot).

This has an extra advantage for anyone using a mouse, in that it provides a run-off zone beneath the drop menu. This means if you overshoot a bit while scrolling down the list of links, which we all do sometimes, you have some leeway before the menu disappears on you. As long as your cursor is still within the area of the appended pseudo element, the drop menu will stay open indefinitely (see third screenshot).

IMO this is going to be a better usability fix than a long mouseout delay, because you can still get rid of the menu in a hurry if you want to (just move the cursor sideways, out of the pseudo). Obviously the concept could be extended to provide a run-off area at the sides too, which I may end up implementing.

(BTW, normally you could just append the pseudo as .submenu::after {}. In this case I was already using both .submenu pseudo elements to do the little pointers at the top of the drop menu, so .submenu::after wasn't available, so I stuck an ::after on the last li in the list instead.)

Sir Osis of Liver

Reverted to text up/down links, will take a look at that when I get a chance.  Right now I'm wrassling with message index template, it's giving me all kinds of grief with Advanced Topic Prefix mod, which is a must have for this forum.  Seems the table structure is quite different.  Trying not to make any major changes that will bork mobile view.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

The table structure is the same as default, but the presentation is altered by the CSS. The presentation uses a variety of tricks, none of which are particularly esoteric once you get your head around them. Obviously it will help if you already have your head around them.

Can't see that mod on the mod site, but if you have a copy handy I'll take a look at it.

Sir Osis of Liver

It's a paid mod, can't post it here.  Been picking at code for 2-3 hours, can't remove the prefix icons.  If I can find where they're added, I can maybe fix the formatting.  If you look here you can see how they work correctly in Curve Multi Color.  Go here and you can see the problem.  Had to remove icon2 from MessageIndex.template.php because it was displaying the prefix icons twice, one on top of the other.  The mod makes a lot of edits in a lot of files, had to do a couple of manual edits to install it in AMC.  Beats me. :P
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Ok. Can be sorted without much drama, although frankly if you paid someone for the mod I reckon they should be prepared to support the damned thing.

Looks like all it really does is ditch the default message icons and replace them with your custom prefix icons. Only catch being your custom icons are much bigger, so throw things out of whack. Easy option: use CSS to scale your custom icons down a bit, so they fit in the table cell. Could also make that cell a bit wider, which gets a little trickier with the responsive stuff as there are a few things to keep track of, but it's quite possible. It's just a matter of checking the width you set on icon2 against the left margin on .subject and .lastpost (margin is the same width in both cases).

So if you want to add 20px to the width of icon2 at all resolutions you just do that (checking through the media queries to see when it changes). Then you just add 20px to the left margins on the other two classes.

Or you could leave the margins on .subject and .lastpost the same on larger screens, and ditch the icon1 column. It's frankly not much use anyway, because who really gives a damn about "hot topic" ratings"? Then you can just double the width of icon2. It will still need an increased margin on .subject and .lastpost on small screens, but that will be obvious.

ETA: Pro tip: make all your icons the same size, even if this means extra blank pixels on some. Or at least make them all the same height. Different widths you can deal with. The icon1 and icon2 cells are set to text-align: center; anyway. However different image heights, for images that are meant to be the same class, is a sure fire way to get things out of alignment. If they are all the same height, one tweak sorts them all out.

Advertisement: