ElkArte Community

Elk Development => Bug Reports => Exterminated Bugs => Topic started by: emanuele on March 15, 2014, 07:14:16 pm

Title: Position of goto top/bottom buttons
Post by: emanuele on March 15, 2014, 07:14:16 pm
https://github.com/elkarte/Elkarte/issues/1274

Any idea?
Maybe "attached" to the border of the wrapper instead of the border of the page?
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 15, 2014, 07:31:20 pm
ROFL. That's where I had them to start with, and you lot complained like hell.

(well some of you did)
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 15, 2014, 07:34:42 pm
Can't you just use some CSS to get around the OSx scrollbars?

One obvious solution is just to make the buttons a bit wider, so they're easier to hit on a Mac. Or, if you can sniff Mac somehow, use Mac-specific CSS.
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 15, 2014, 07:38:03 pm
LOL
If I complained, I was drunk. :P

No idea, I don't have OSx and I have no idea what CSS means. O:-)
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 15, 2014, 07:43:14 pm
It means Complicated Stupid Stuffz. :P

I don't have a Mac either. However, if the buttons were doubled in width, they'd be wide enough to not be hidden by Mac scrollbars. Admittedly this would make them a bit too wide on useful operating systems, so perhaps go 50% wider or whatever will stop Macheads from complaining. That is going to be the easiest option. If that's not good enough, you'll need some way of sniffing Mac.

ETA: Obviously all of this assumes leaving them at the edge of the page, so people don't go back to flipping out about them being on the edge of the wrapper. :D
Title: Re: Position of goto top/bottom buttons
Post by: AaronB on March 15, 2014, 08:04:21 pm
Frankly, I do not find them that useful.  <shrug>

How about sticking them on the right side of the body? Fixed at the midpoint between top and bottom of the screen? That would solve the Mac scroll bar issue.

That or maybe float it between the body and wrapper? Leave if fixed there.

Just don't let the button scroll up and down with the screen. Fix it in one place, like it currently is on the wrapper.  I am finding that folks find that kind of item moving around to be annoying.
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 15, 2014, 08:10:32 pm
Umm, it is already fixed at the right side of the body. :P
Title: Re: Position of goto top/bottom buttons
Post by: AaronB on March 15, 2014, 09:22:37 pm
Ummm ... see image.

Would likely be called the #bodyarea in SMF. What it is in elkarte I do not know. 

My deepest and most sincerest apologies for stating the incorrect area and for not knowing the insides of elkarte.
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 15, 2014, 10:09:38 pm
The problem appears to be that on Macs the body extends beneath the scrollbar. It's really weird behaviour, but then Mac is really weird anyway.
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 16, 2014, 04:16:10 am
@AaronB I think we are talking about the same thing! :D
I'll give it a try "later". ;)
Title: Re: Position of goto top/bottom buttons
Post by: AaronB on March 16, 2014, 12:59:40 pm
:)  thanks.

This theme is a challenge for me, not that I am that good to begin with. I have worked with it last night and this morning. Now have some different colours, a static logo in the header, slogan to the right and still maintain the ElkArte branded logo in the Support Topics bar. Changed colour depth of iconadmin type icons, added quotes around some font names in index.css or its variant ( don't recall which ), made a change in index.template for the static logo, removed the linkable logo stuff, have alternate colours on posts and removed all box-shadow calls.

My brain hurts.   ;D
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 16, 2014, 01:05:19 pm
What did you find more difficult to do/change?
Title: Re: Position of goto top/bottom buttons
Post by: AaronB on March 16, 2014, 01:56:17 pm
I would say the placing of the custom logo in the header area.

As it stands, there does not seem to be a straight forward way for a user to add their own logo in the css, however, it is simple enough in Themes if they simply add a URL to the logo image they wish to use. It is much simpler to add the URL but sometimes a person wants something a bit more complicated. The logobox and the .centered left and right stuff seems to really be designed for only the ElkArte branded logo. If a user adds their own logo and simply change the name to logo_elk.png then the user logo will appear in the Support Information bar, which should only house the ElkArte logo.

I removed all the .center stuff, added a background image to the header area, made the necessary placement adjustments,  removed the logobox stuff in the CSS file and in index.template.php, template_above_body I removed the original logo stuff and removed this.


Code: [Select]
echo '
            <div id="logobox">
                <img id="logo" src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name'], '" title="', $context['forum_name'], '" />', empty($settings['site_slogan']) ? '' : '
                <div id="siteslogan">' . $settings['site_slogan'] . '</div>', '
            </div>';


and added this.

Code: [Select]
    // Lets remove the logobox and display only the site slogan. Not the Factory Default.
    echo '
            <div id="siteslogan">' , $settings['site_slogan'] , '</div>';


Which was a challenge because even though I spent 8 or so years in 'C', I don't know a think about .php.  :)


Keep in mind that I am not a CSS master at all but I can get around with FF and Firebug.  Of course, anytime you read someone elses work you have to follow it and try to understand their reasoning. The changes I have made so far I have tested and retested to be certain the header was stable and all other areas functioned properly.

It took me a bit of time to understand the variants theme. Had to figure out how and where they were being called from. Once that was sorted and I understood how varients work, I had a clearer mind as to what to do with the theme. I also discovered that to properly create a theme that does not use the default varients of _light and _besocial!! that you have to remember to change the path in the index.css and index_varient.css files for the images to be found.  :)


edit: first paragraph clarity ... I think.
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 16, 2014, 04:21:00 pm
Quote from: AaronB – I would say the placing of the custom logo in the header area.

As it stands, there does not seem to be a straight forward way for a user to add their own logo. The logobox and the .centered left and right stuff seems to really be designed for only the ElkArte branded logo. If a user adds their own logo and simply change the name to logo_elk.png then the user logo will appear in the Support Information bar, which should only house the ElkArte logo.
The logo area is designed exactly to handle "one" logo at a time.
You can change it by going to:
admin > configuration > current theme
and putting an url in the Logo image URL box.
That would replace the Elk logo with the one of the site/forum.
When I changed it to be like that it seemed to me more likely that an admin want to have just the logo of his own forum and not the logo of the software up in the header.

Quote from: AaronB –
Keep in mind that I am not a CSS master at all but I can get around with FF and Firebug.
/me knows the feeling... O:-)

Quote from: AaronB – It took me a bit of time to understand the variants theme.
Yeah, variants may be a bit tough to approach at first...

Quote from: AaronB – I also discovered that to properly create a theme that does not use the default varients of _light and _besocial!! that you have to remember to change the path in the index.css and index_varient.css files for the images to be found.  :)
That is true...and something I didn't like me too.
I wonder if it wouldn't be easier to have all the css into /css/ and not into /css/_variant/... @TE?
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 16, 2014, 05:01:33 pm
If you're going to try putting the buttons on the wrapper, just be warned it gets tricky with changing resolutions. The wrapper edge sits in different x positions depending on res, and fixed buttons are defined with reference to the screen boundaries.
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 18, 2014, 03:26:14 pm
mmm... yeah, also the wrapper goes almost 100% rather "quickly", and at that point the go top/bottom should be positioned again on the side of the body... meh.

The two buttons are more for desktop users or mobile users?
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 18, 2014, 04:08:06 pm
Well, both AFAIK. I do know that when I was making a responsive interface for CEMB I was specifically asked to include the up/down buttons on mobile too. Although mobiles have kinetic scrolling, pages can get very long. Having a one-click button can save a lot of swiping.

This is obviously a stupid bug in desktop Mac, much like the stupid iOS bugs with fixed and absolute positioning. Is there any way of sniffing Mac easily?
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 18, 2014, 05:06:35 pm
Good to know.
At a certain point, the buttons were made display:none for low-res. Now I'm playing moving them to a corner (bottom right at the moment).
ETA: pushed here: https://github.com/emanuele45/Dialogo/commit/f8a0ed702b75684cf7353a363c8da5d5dcb85eaf

Regarding OSX, no as far as I know there isn't any easy way to detect it.

About wrapper: it is even more difficult if we consider there is still the option to change the width from the admin panel, so it's almost impossible.
It seems the "flip-on-the-left" is the only viable solution... :-\
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 18, 2014, 05:14:56 pm
Well yeah, putting them at the left could be fine too. Left or right is much the same for desktop use. I wouldn't put them in the corner for desktop, since that can be a nuisance with toolbar interference if you overshoot a bit.

What about user agent strings for sniffing Mac? Shouldn't that be possible?

ETA: If putting them at the left, you'd probably want to flip that for RTL.
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 18, 2014, 05:19:22 pm
Some stuff here. Haven't looked into the code. http://stackoverflow.com/questions/10527983/best-way-to-detect-mac-os-x-or-windows-computers-with-javascript-or-jquery
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 18, 2014, 05:26:48 pm
Quote from: Antechinus – I wouldn't put them in the corner for desktop, since that can be a nuisance with toolbar interference if you overshoot a bit.
Sorry, I meant at low-res, so that they are not in the middle of the page (I saw that at CEMB you did something similar putting one at the top and one at the bottom, since at the top we already have a couple of quite different styles I just thought of sticking them side by side at the bottom).

Quote from: Antechinus – What about user agent strings for sniffing Mac? Shouldn't that be possible?
Though, even if we detect OSX, then we'd have to... move it on the left for macs only? It would look a bit odd...
Or otherwise add a margin? But then when the bar is not present (because think it appears only when moving towards the border or scrolling) the button would remain in the middle of the screen...

Quote from: Antechinus – ETA: If putting them at the left, you'd probably want to flip that for RTL.
Yep.
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 18, 2014, 05:32:51 pm
Ok, so short version is that the easy option is to put them over at the left. Seems the most sensible.

I probably put them at the right because that's the arrangement at CEMB, which runs a portal sidebar at the left. When there's a left sidebar, having the buttons at the right is generally more convenient (or more flexible when it comes to layout). Not applicable to default Elk.
Title: Re: Position of goto top/bottom buttons
Post by: Spuds on March 18, 2014, 10:20:17 pm
There is a javascript sniff for mac, its in the var is_osx .. you can use that to change the css for the element, if they don't have JS enabled, well the stupid arrows will not work anyway :P
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 18, 2014, 10:40:37 pm
Ok, so that's another option: just use the Mac sniffer to make the buttons wider on Mac.*

And the buttons work just fine with js disabled. They just don't do a smooth scroll. :P

*Although TBH just moving them to the left probably still makes the most sense.
Title: Re: Position of goto top/bottom buttons
Post by: Spuds on March 18, 2014, 10:53:22 pm
Where the is_osx was used, a comment was added to the css to make note of additional positioning being done via JS just so someone would not loose their mind.  I think its ok for small tweaks like this where if JS is not on for some reason the layout effect is minimal.

I looked at the site on a OSx Mountain Lion 2 and it was fine, so this issue seems to be with Mavericks or whatever version of Safari it uses.  (Don't know if the issue was also seen in Chrome w/Mavericks).  I don't have access to a Mavericks install ATM
Title: Re: Position of goto top/bottom buttons
Post by: Antechinus on March 19, 2014, 12:11:11 am
From the GitStuffz issue page:

QuoteAhh forgot to told the browsers

OSX 10.9 Mavericks

    Chrome 32
    Firefox 26
    Safari 7.0.1 (ohh, BTW tab indexing is not working fine for this browser in posting and registration)
It seems to be an issue with any browser when running Mavericks. Maybe they named it that because they went troppo and included maverick handling of age-old CSS properties just to annoy everyone. Made themselves feel all edgey and rebellious by borking people's front end code. Awesome stuff. :P
Title: Re: Position of goto top/bottom buttons
Post by: TE on March 19, 2014, 10:41:55 am
Quote from: emanuele – I wonder if it wouldn't be easier to have all the css into /css/ and not into /css/_variant/... @TE?
mixed feelings.. For 2.0 I'd personally go with a variant folder with all files in it (images +css + XML, smiliar to theme_info.xml)
Title: Re: Position of goto top/bottom buttons
Post by: emanuele on March 20, 2014, 09:16:01 am
Flipped:
https://github.com/emanuele45/Dialogo/commit/5ce9f67b93b48af3246aa4a9dfe4ef62fefb42e9
Title: Re: Position of goto top/bottom buttons
Post by: AaronB on March 22, 2014, 09:03:41 am
 Nice! I like this much better on the left side. My cursor spends more time on the left of the screen anyway, especially when in the Admin section.