search

elrido / ZeroBin

This Project has been renamed and moved to
https://github.com/PrivateBin/PrivateBin
Other
85 stars 8 forks source link

Haut de page décalé ? #28

Closed Draky50110 closed 9 years ago

Draky50110 commented 9 years ago

Salut Je viens de tester une nouvelle installation (conf.ini modifié).

Problème : le haut du cadre pour saisir le texte disparaît sous le bandeau : https://lut.im/zMoakstF/d7Jmv6Cg.png

J'ai désactivé l'upload de fichiers pour voir (en mettant à false) mais ça ne change rien...

elrido commented 9 years ago

Hi

I hope you don't mind me answering in English, I can read French, but my writing skills are not that good.

As a quick solution, please try to remove the container class on this line. The navigation then stretches over the full screen width and it should be enough to fit the new-button on your screen resolution.

As a side note: The file upload buttons are not yet implemented in the bootstrap template, thats why disabling that option did not (yet) help.

This is a really annoying issue and we need to find a better solution for it. I had tried to solve it by forcing the mobile nav bar to trigger for larger screensizes, but the more menu items we add, the more likely we will trigger it. Probably I should look into moving options into submenus.

I'll update you when I found a better solution.

Hexalyse commented 9 years ago

Hahaha... I was translating the issue described by @Draky50110 in English, when suddenly I see your message appear, elrido. I indeed noticed the same problem as @Draky50110 , but haven't had the time to report it here. I myself changed the size of the password input, but it's a very momentary (and ugly) fix. It can be seen here : https://secret.hexaly.se/

Well, for me the solution should be that the navbar doesn't come over the text input, but instead make the text input shift a few pixel to the bottom, when the navbar takes more than one "line". But I think it should be made so that the full width application should have a navbar compact enough to fit on one line ! (by making font, elements or margin smaller) Submenus can be another solution, indeed.

PS: Also, try resizing the screen to a smaller size, and you'll see.... scroll bars appear in the navigation menu ! It's not really "sexy" ! I think we should concentrate on working on this menu so that it fits and rearrange nicely (and making the text input shift to the bottom instead of overlaying on top of it), so that in the future it doesn't break when we add other buttons, or translate to languages taking more characters.

Draky50110 commented 9 years ago

OMG sorry for my French, I'm reporting a lot of issues on other GitHub projects, mostly french one :p Thanks for answering and I'm looking at your solution :)

elrido commented 9 years ago

No problem about the French, we swiss germans are supposed to learn it in school. Its a shame mine is as bad as it is.

I have just prepared a patch that moves the "burn after reading" and "discussion" options into a drop down menu. As an alternative variant I added a "bootstrap-compact" template that also moves the format into the same menu. Not sure which is better...

Would you prefer to keep certain options outside of the menu? Do you even find the idea to move these into a menu a good idea or would you prefer to keep them all outside and instead shrink the font, etc.?

Draky50110 commented 9 years ago

Maybe a shrinked font because like this, Zerobin is still "simple" : all options on the same line. And if those options are enabled in ini config file, it is pleasant to have them at first view.

As I'm might not be the only user of your fork, maybe other users will have a different thinking so don't throw away your other idea ;)

Maybe you can have 2 templates :

And option to choose between them in ini config file ?

I don't know if it is easy to make. Like a template section/option.

elrido commented 9 years ago

Ha: We already thought of it.

But I totally agree, its better to offer some choice for the users.

I will add another template with the smaller fonts, etc. to keep it all on one line. And I should probably add some screenshots to the wiki to help with the template selection.

Hexalyse commented 9 years ago

Why can't we make the menu use multiple lines if needed, but it moves the page content down (I used the word "bottom" previously, where I meant "down".... sorry) instead of overlapping with it. Because I'm not annoyed with a multi-line navigation menu at the top, but I'm annoyed with invisible part of the text input area. I'd find this layout more "new-user friendly" than dropdown menus, which the user won't necessarily have the curiosity to open !

Draky50110 commented 9 years ago

Not easy to figure out the final results in all cases so will tell you when I'll be able to see it in action.

elrido commented 9 years ago

Took half a day off due to having builders in my apartment this morning and will work on the project a bit.

I reverted the original bootstrap template, but switched to a not "fixed to top" navbar. This way you can have as many elements as you want, it will simply push down the content below if more space is needed on a small screen. This also solves the problem on screens that are too small to have all options on one line, but too large to trigger the mobile navigation, where the navbar uses large parts of the screen, but can't be scrolled away.

I am a bit sceptical if reducing the font-sizes, etc. will work out on the long run: With the file upload feature we add even more elements in the navbar and a language switcher-drop-down menu is planned, too. But I can investigate this option as an additional theme, if you like.

Below are some screenshots taken at 1024x1024 pixels, the "bootstrap" template is also currently live on my test-site, if would like to test its behaviour on different resolutions / device types.

"bootstrap" template: bootstrap template

"bootstrap-compact" template: bootstrap-compact template

"page" (classic) template: page template

Draky50110 commented 9 years ago

Tested your test page on a 1920x1080 screen resolution : all is perfect :) If the template can "auto adapt" then you're right and there is no need then to have a font reduction. No need also for "dropdown menu" on a "bootstrap-compact" if screen auto adapt, it will make a 2 lines navbar :) Have a smaller screen to test @home this if you want (I'm working full day today with my "big monitor").

Also, just tested your test site with my smartphone, the result is ok on a 4.5 inch screen. Here is the screenshot from my smartphone : https://lut.im/B9TsO1uZkL/1LSMmzjM.png

elrido commented 9 years ago

Thanks for your support.

I have a browserstack account to test on various platforms. Before the 0.21 release I will retest it with Android and iOS mobiles and tablets and on 1024 and 1920 resolution with Chrome, Firefox, IE 11, Edge, OS X / Safari and Opera and post the screenshots.

Draky50110 commented 9 years ago

Ok :)

Just tested in 1280x800 and your testsite is ok :D

elrido commented 9 years ago

Created a template wiki page, will update the screenshots around the 0.21 release.

elrido commented 9 years ago

Here are the promised screenshots:

Hexalyse commented 9 years ago

Is it normal that I get this when reducing the window width ? Windows 10 / Chrome

The menu still overlay over the text area. And also, if I expand the dropdown "options" menu, I get a scrollbar into the navmenu, that can no longer contain everything in its height.

elrido commented 9 years ago

Yes, that is bootstraps mobile menu. It gets triggered when the window is small enough or through certain media queries on mobile browsers. In that mode you can toggle the nav bar with the "hamburger" icon on the top right.

But I guess your question is more about it being open by default, right?

Draky50110 commented 9 years ago

Very nice work indeed :) You can close this issue when you want ;)

Hexalyse commented 9 years ago

Exactly @elrido. When a user comes to the website, he will see this opened menu, and not the text zone, which will be a bit confusing I guess. I myself was confused that I couldn't see what I was typing (not used to use mobile device for the Web...), until I noticed - too late - that I could collapse the navbar with the hamburger button.

elrido commented 9 years ago

I found an issue in the JS that triggered it to open on start and resolved that. I split of a new issue for the discussion on the template improvements in general.