• Welcome to Simple Machines Community Forum. Please login or sign up.
November 28, 2021, 11:14:08 PM

News:

SMF 2.0.18 has been released! Please update. Read more.


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

Biology Forums


Kindred

Blerg..... I thought I finally got rid of those silly sidebars.... Sidebars went out with handlebar mustaches... :D :P
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.<br /><br />"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Ok, tell ya what. I'll go ahead and do it anyway. Anyone who doesn't like it can code all sorts of awesomeness to turn it into anything they like. :P

Bloc


Aleksi "Lex" Kilpinen

Quote from: Bloc on September 24, 2019, 12:48:31 PM
Sidebars are cool. :D Dropmenus are soooo 2010.
And honestly, quite a bother on many touch screens....
A Finnish Project Manager (Support Specialist)
 Happily running multiple SMF 2.x installations.
  Fooling around with i7-10700 @ 2,90GHz-4.80GHz / 16Gb / RTX-2070 Super / 3840x2160 / Win 10 x64


How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Biology Forums

Quote from: Aleksi "Lex" Kilpinen on September 24, 2019, 12:50:17 PM
Quote from: Bloc on September 24, 2019, 12:48:31 PM
Sidebars are cool. :D Dropmenus are soooo 2010.
And honestly, quite a bother on many touch screens....

Safari does a decent job with dropdown menus, but android devices don't from my experience.

Aleksi "Lex" Kilpinen

Well, I'm an android guy - been for years, and most dropdowns I can use without issues - but it isn't exactly easy or straight forward always. Depending on how the menu is built.
A Finnish Project Manager (Support Specialist)
 Happily running multiple SMF 2.x installations.
  Fooling around with i7-10700 @ 2,90GHz-4.80GHz / 16Gb / RTX-2070 Super / 3840x2160 / Win 10 x64


How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Diego Andrés

2 level dropdowns aren't really an issue.
Headaches are with 3 levels but we could ask why would someone try to do too much admin work on a phone?  :P

SMF Tricks - Free & Premium Responsive Themes for SMF.

Bloc

Quote from: Diego Andrés on September 24, 2019, 02:19:29 PM
2 level dropdowns aren't really an issue.
Headaches are with 3 levels but we could ask why would someone try to do too much admin work on a phone?  :P
Some people swear by their phones in everything..sad but true. :P :D

Granted, a sidebar won't be so great with 3 levels..but really, if you need to have 3 levels you are NOT thinking optimally...having everything but the kitchensink in the menu isn't considered good user experience. That *is* really 2010 thinking.

Antechinus

Three levels including the top one, or three levels of drops under the top one? The former is just about sane, but the latter is completely bonkers.

The existing hamburgered sidebars are ok with two sub-levels. I set up a second sub-level off the main menu yesterday, just to see how it went, and there's plenty of space as far down as 480 px wide. Gets a bit cramped on a 320, but any admin familiar with the system could still read enough of the links to tell what they were. Not sure there's any real advantage in having it though, even on bigger screens. I only tested it because index.template.php had the markup and logic for it anyway, but you could make a good case for removing it.

The only real problem with the sidebar is that in default form it's a bit long in admin if you're on a small screen. All the other areas (mod, pm, profile) only have short sidebars, so shouldn't be an issue. But if anyone really needs it I could add more checkbox toggles to each main section of the sidebar (you'd tap the title_bar section headers to toggle the view).




Oh, while I think of it: I made new .png icons for the user online/offline indicators. I could have done the indicators with CSS, but I decided I wanted the image alt text for a11y so went with traditional icons*. These are similar to the upshrinks I made earlier: bigger than required on desktop, and scaled in the CSS. Should be good on high-density screens. I've attached them if anyone wants them. They'll need a template edit to change the image names and file types, and CSS similar to this:

.poster_pm img {
width: 12px;
height: 12px;
margin: 0 4px -1px 0;
}


*Before anyone mentions it: no, the title attribute isn't much good for a11y. Screen reader support for it is pretty dodgey, whereas alt text is bulletproof.

Antechinus

Oh yeah, other changes for upcoming RC2.

Decided I didn't like the date over at the right and PM indicator text under the "New replies" link. I was dropping the greeting on smaller screens to match the user list details to the smaller avatar height, but someone pointed out this was a PITA if you weren't using an avatar and if you had multiple accounts for testing admin/mod stuff.

So I've revamped that area to keep the greeting on small screens, and drop the date/time instead. New PM indicators are now done as shown in the screenshots, with the bold italic "10 new messages" being a direct link to your inbox. This is much better use of screen space, IMO. 

Bloc

Hm, neat idea. :) The hamburger symbol in itself doesn't really account for new PM's..unless you want to just tack one extra icon on to the symbol itself. A separate text might look better..at least if theres screen estate for that. For my use I see the title being to the left of the hamburger so I really don't want added text in there. But I do need to give it some kind of visual that there are indeed new PM's. For now they are hidden away in the absolute positioned and out-of-sight sidebar.(on mobiles)

About 3 level menus...what was the inital purpose of having them? To get to a specific sublevel item quickly. Which is fine, but on a phone - or an already tall enough 2 levels sidebar - that isn't even something to consider. And I believe that by instead giving visual indicators there are indeed sublevels of the menu, either as yet another sidebar(not fond of that idea) or as tabs(as the sidebar + tabs which are already being used). The only place it makes sense is on a drop-down menu and those only work over a certain resolution or with enough device-pixel-ratio. In short: desktops only and large ones at that. So not really an option IMO, not because you cannot have both..but more phones/tablets are starting to come with bigger resolutions and device-pixel-ratio..but have no mechanism to hover over links.

Antechinus

QuoteA separate text might look better..at least if theres screen estate for that.

I realised that with the default SMF arrangement of title at the top of the screen, there's a lot of spare real estate to the right of the hamburger. Made sense to use it for something. :)

And don't touchscreens automatically treat CSS drops as click drops? I know Android does. Or at least it did last time I played with it, so there shouldn't be any need to hover.

PS: If anyone is wondering why I'm "Antechinus the wombat" on my test site, it's just to test a long username. Sticking with the maruspial theme and all that. :)

Antechinus

Ok, more crunchy goodness. :)

I got bored with the default news section. It's always been a bit meh, even on desktop, and it's pox on narrower screens. I didn't want to get into rewriting yet another template when the fixes required were comparatively trivial, so I got cunning.

I wasn't interested in calling a body class by board or topic ID, although that is still possible, and I wasn't keen on using a gnarly nested ternaries kerfuffle a la 2.1 to code the thing (nested ternaries fry my brain).

I've used a variation of the original coding Sinan recommended in response to a support request years ago (see: Re: Output template filename to class...). This allows me to target gruesome bits by area and subaction in the CSS.

// Allow setting body tag class by action or board.
$body_class = array();
if (!empty($context['current_action']))
$body_class[] = 'action_'. $context['current_action'];
if (!empty($context['menu_data_' . $context['max_menu_id']]['current_area']))
$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
if (!empty($context['current_subaction']))
$body_class[] = 'subaction_' . $context['current_subaction'];
if (empty($body_class))
$body_class[] = 'action_index';

echo '
</head>
<body class="', implode(' ',$body_class), '">';
}


CSS to go with it is this:

/* Styles for the news section.
------------------------------------------------- */
.area_news td:nth-child(2) div {
min-height: 90px;
resize: vertical;
}
/* Lolz @ teh muppetry. :D */
.floatleftpadding, .floatrightpadding {
display: inline-block;
padding: 9px 4px;
}


Which is nice and simple and cleans things up well. The lolz are because .floatleftpadding are .floatrightpadding horrible classes left over from 2.0 alpha or beta. They only exist in this one place, and aren't even called in the default admin.css, but they just turn out to be ideal for cleaning up the presentation of the "Click here..." and submit buttons in the news area.

Image sizing is dealt with by a global declaration for the .bbc_img class, which automatically takes care of images in post or sigs or the news. The result is all cool on desktop, but still pox on phones, so the next bit of trickery is this:

/* Equates to 512px at standard browser settings. */
@media screen and (max-width: 32em) {
.area_news tr, .area_news td {
position: relative;
display: block;
}
.area_news td {
margin-right: 40px;
}
.area_news td:last-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
margin-right: 0;
padding: 8px 0;
}
}


Which makes it all quite usable, even down to 240 screen. Results shown in the screenshots. :)

Biology Forums

@Antechinus I didn't realize until now that you were producing a completely responsive admin experience too. I like how you incorporated sinan's idea into the templates, I think there should be more ids or classes wherever possible, it makes customizing a breeze. Mediawiki is like that too

Antechinus

Hey, hold the bus. :D I am not producing a completely responsive admin section. That way lies madness. I'm just tweaking up some of the easy bits where I notice them. For instance, someone might want to do a quick update of news on a phone, but if they want to do serious error tracking or whatever they can use a bigger device. Although, having said that, a lot of admin is pretty good by default down to the old iPhone size (375px, IIRC).

Anyway, I've just found out that Sinan's idea introduces an undefined index error for max_menu_id in index.template.php, so I'll have to find a fix for that now.

Bloc

Ah, the troublesome .table_grid.

Elegant solution to transform from 1-2-3 to 1-3 + 2-3 but you need to do similar on every instance of the class..and depending on what sort of info should be aligned horisontally and vertically. I haven't found a good approach to it, other than target each and everyone, unfortunelately. This should really been dealt with from the core files, deciding which columns needs to be on the same line and who doesn't. In other words use a css class of "keep_aligned" or something.

And why not edit on phones? Its only the design that makes it hard, not the function itself.

Diego Andrés

This is probably pretty ****** but if you want to use it  :laugh:

I edited the stats_pie image changed the dent with a black background 20% opacity for the 20 icons
So now in css we can do something like this

.profile_pie {
    background-color: #5682B3;
    border-radius: 100%;
}


And the color will change for those horrible icons too

PS: Also didn't want to mess with the logic behind the usage of these images, whoever wrote the math for it and designed the icons was probably drunk because the rtl image isn't even the same mirrored :laugh:

SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

Hey while you're here: any ideas on how to fix the undefined index error for $context['max_menu_id'] being used in index.template?

ETA: Re the stats pie, we could do that in proper PNG instead of png-8 these days, which might help the looks a bit. I still have a copy of the original PSD for the thing somewhere.

Diego Andrés

Doubt that's in a template file, that sounds like it's in Subs-Menu.php or Subs.php
What are you editing to trigger that

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: