Lazarus

Miscellaneous => Suggestions => Topic started by: lainz on August 23, 2020, 11:02:05 pm

Title: [Solved] Lazarus Website Mobile Friendly
Post by: lainz on August 23, 2020, 11:02:05 pm
Hi, I've downloaded the sources

svn
https://svn.freepascal.org/svn/lazaruswebsite/trunk

And I've installed XAMPP for Windows, put the lazaruswebsite folder on the D:\xampp\htdocs\lazaruswebsite folder and nothing shows when accessing localhost. The XAMPP local sites are displayed fine.

I'm just wanting the website to open, to adapt the styles to be mobile friendly, don't need to touch the PHP code, but need it to preview the website.

Any workflow to run the website locally on Windows?
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 23, 2020, 11:35:39 pm
Unfortunately not.
It is a long time since real work was done on the page.

I don't recall how I did it back then...
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 23, 2020, 11:43:17 pm
Ok no problem I will figure it.

I've updated the OPM website to make it mobile friendly (fixed the width of the card elements) as well I've installed a new theme based on material design, to look a bit better.

Source:
https://github.com/lazarusccr/LazarusPackagesRepository
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 24, 2020, 12:17:12 am
Unfortunately not.
It is a long time since real work was done on the page.

I don't recall how I did it back then...

Seems that I have a newer version of PHP installed, newer than the one Lazarus website uses. (Showed the PHP errors and get some deprecations in the config file, so the entire page is made for an older PHP). Which version of PHP is using the website?
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 24, 2020, 02:21:32 am
I've mailed the server admin. Don't know how busy he his. I let you know once I have an answer.
Title: Re: Lazarus Website Mobile Friendly
Post by: GetMem on August 24, 2020, 08:13:50 am
Thank you @lainz(Leonardo) :),  I updated the webpage. Please test.
Title: Re: Lazarus Website Mobile Friendly
Post by: avra on August 24, 2020, 09:08:19 am
I've installed XAMPP for Windows
Btw, you might be interested in this stack since it also integrates nodejs and firebird:
https://www.pilotlogic.com/sitejoom/index.php/projects/ultra-web-server.html
Title: Re: Lazarus Website Mobile Friendly
Post by: Bi0T1N on August 24, 2020, 11:48:58 am
I've updated the OPM website to make it mobile friendly (fixed the width of the card elements) as well I've installed a new theme based on material design, to look a bit better.

Looks fine on desktop and mobile. Good work! :)
Just a small suggestion: maybe give the categories dropdown a proper name? If you browse the website for the first time its not clear what the * is for.
Title: Re: Lazarus Website Mobile Friendly
Post by: Marc on August 25, 2020, 09:11:19 am
We're running PHP 5.6, since the website code doesn't work with PHP 7.
Since the sources are public I'm just waiting till there is an update.
Feel free to improve the PHP code
Title: Re: Lazarus Website Mobile Friendly
Post by: devEric69 on August 25, 2020, 10:04:40 am
As @Avra already said, Uniserver (written in Typhon over Lazarus) is a very accomplished WAMP, and is very actively maintained (they offer versions from php 5.4 to 7.3, with different versions of MariaDB + phpMyAdmin, ...).
- beginning of explanation: https://wiki.freepascal.org/Projects_using_Lazarus_-_Web#Uniform_Server (https://wiki.freepascal.org/Projects_using_Lazarus_-_Web#Uniform_Server) .
- example of support: http://forum.uniformserver.com/topic/3185-problems-with-the-connection-to-the-socket/ (http://forum.uniformserver.com/topic/3185-problems-with-the-connection-to-the-socket/) .

It comes in the form of self-extracting zip files (all compatibles for the same release number, of UniServer):
- a zip for the executable, that makes the facade between Apache, Php, mysql \ mariadb \ etc..
- several zips per version of MySQL \ maradb,
- several zips per version of Php (and PhpMyAdmin),
- several zips per version of Perl (and its adminer),
...\...
Just delete in a directory what already exists, and then unzip a new version of Php, for example, in it. Nothing is written in the registry. It's very clean  O:-) .

Currently, i'm using plugins such as ZeroXIII_uniservice_2_2_0.exe, ZeroXIII_mariadb_10_0_29.exe, ZeroXIII_phpmyadmin_4_4_15_10.exe (these are 7zip self-extracting files of the release XIII), to test Php 7.1 draft development.
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 25, 2020, 04:28:13 pm
We're running PHP 5.6, since the website code doesn't work with PHP 7.
Since the sources are public I'm just waiting till there is an update.
Feel free to improve the PHP code


Hi thanks, I will try improving the html for mobile.

I can install the bootstrap grid, not the components just the grid system? Is more easy to make it responsive without touching a lot of css.
Title: Re: Lazarus Website Mobile Friendly
Post by: Marc on August 25, 2020, 05:20:41 pm
Are you asking me ? I've no idea what "the bootstrap grid" is.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 25, 2020, 05:37:53 pm
Hi thanks, I will try improving the html for mobile.

I can install the bootstrap grid, not the components just the grid system? Is more easy to make it responsive without touching a lot of css.

You mean some css/js files from the bootstrap library?

So long as their license allows us to
- host the copy
- have the copy in our repro for the website
- They work on all current browsers

I would not see a problem.

I.e. for the main website, those files go into svn, and will then be uploaded, with all the other files.
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 25, 2020, 06:57:48 pm
Hi thanks, I will try improving the html for mobile.

I can install the bootstrap grid, not the components just the grid system? Is more easy to make it responsive without touching a lot of css.

You mean some css/js files from the bootstrap library?

So long as their license allows us to
- host the copy
- have the copy in our repro for the website
- They work on all current browsers

I would not see a problem.

I.e. for the main website, those files go into svn, and will then be uploaded, with all the other files.

The license is MIT
https://github.com/twbs/bootstrap/blob/main/LICENSE

Ok so there is no problem.
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 26, 2020, 04:00:02 am
Hi again, I've modified the website using bootstrap (finally I've used the full library to include the responsive mobile navbar and some other features).

I'm using the bootstrap grid system where it applies.

I've not touched the content or the style of the website, just did some minor modifications in the style file, and of course using bootstrap grid in the main html template, and also in the features page.

I've not touched PHP code.

Features:
- Now it works on mobile, has mobile navigation bar.

ToDo:
- Fix the footer, for some reason on mobile it is not displayed properly, a part is 'pink' and another part is 'gray'.

Link to download with my changes
https://github.com/lazarusccr/lazaruswebsite

I've used this software to test the website:
- xampp-windows-x64-5.6.40-1-VC11-installer.exe
- Latest Google Chrome
- Latest Edge Chromium
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 26, 2020, 10:10:33 pm
I'll be going through the changes, probably over the weekend.

First glance looks good.


Just a note, IMHO ok if it's no longer the case....

The 3 columns / boxes on the feature page were designed to always have the same height. So the bottom would align.

I know that is untypical for html. It was a heck of a work to make it happen...

Anyway never mind.



Btw, a pre-existing problem, when the width shrinks, before it goes to menu.
The underlines of the links on top, will overlap with the wrapped links below.

No idea if that is easy to solve.
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 26, 2020, 10:19:58 pm
I'll be going through the changes, probably over the weekend.

First glance looks good.


Just a note, IMHO ok if it's no longer the case....

The 3 columns / boxes on the feature page were designed to always have the same height. So the bottom would align.

I know that is untypical for html. It was a heck of a work to make it happen...

Anyway never mind.



Btw, a pre-existing problem, when the width shrinks, before it goes to menu.
The underlines of the links on top, will overlap with the wrapped links below.

No idea if that is easy to solve.

Thanks.

Yes, I've aligned the bottom of the 3 boxes in the features page.

And that problem with the menu, I'm not sure if I understand it I need to test it again.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 29, 2020, 10:13:51 pm
Another comment I received:
Quote
Looks ok on mobile, except that the head of the home page looks misaligned. The image should be centered imo, and the text right aligned.


Also see image.
If the page get narrow, the layout change (text below image) needs to happen sooner.

IMHO the text "Version 2.0.10 for Windows 64 bit | Other" may marginally overlap with the width of the image.
But as soon as the download button starts to overlap (go partly beneath the image), it should change to go all below the image



Older Browsers: I'll check with others how concerned we are.

IE 9 and before do not handle the new page well. Even with wide space, there is only one column.

Same with (old) Safari on windows. https://www.browserling.com/browse/win/7/safari/5.1/http%3A%2F%2Flaztest.martin-friebe.de%2Findex.php%3Fpage%3Dfeatures


In IE11 the 3 feature-boxes have a lot of empty space at the bottom (also when in 1 column mode).
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 29, 2020, 11:31:01 pm
Hi, ok, I don't have too much time to keep trying with older versions of bootstrap to work on ie9.

About the issues, maybe changing the colums to the large version, say instead of col-md-4 we can use col-lg-4 so it resizes better.

I've not touched the header, only made the image responsive if I remember correctly... but I don't know how to fix that. Maybe removing the style, and using a parent 'row' of bootstrap, then using 'col-lg-6' for the image and another 'col-lg-6' for the text and links, so it resizes better. (bootstrap uses a 12 columns system).
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 30, 2020, 12:28:38 am
The main issue, indeed is the header.

The older browser fall into "would be nice" (well IMHO). After all, its a balance of gain and loss.

About the header: Its currently not half/half in width between image and text. More like the image takes 60% to 70% (right before re-layout is needed). It's a while since I touched bootstrap. But maybe it can be tweaked like that?
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 30, 2020, 12:47:46 am
It must be something like this

Code: Pascal  [Select][+][-]
  1. div class='row' - inside put the two columns
  2.   div class='col-md-8' (66%) - inside put the image
  3.   div class='col-md-4' (33%) - inside put the links
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 30, 2020, 01:11:39 am
I think I've fixed it, please test again. I've centered the image and added the columns.

Edit: I did two commits, the first fixes the columns, the second fixes the first fix (it was loosing the background image).
Title: Re: Lazarus Website Mobile Friendly
Post by: GAN on August 30, 2020, 01:54:59 am
Hi Leandro, in the foot's section there is a button of "ohloh" that does not work: "SSL peer has no certificate for the requested DNS name.

Código de error: SSL_ERROR_UNRECOGNIZED_NAME_ALERT"

I think the correct button and link must be the same of the forum: "openhub".
Title: Re: Lazarus Website Mobile Friendly
Post by: Blade on August 30, 2020, 01:15:48 pm
Microsoft has stated it is ending support for the old Edge browser on March 9, 2021 and for Internet Explorer 11 it appears the date is August 17, 2021.  But the security updates appear they will continue as long as Windows 8.1 and Windows 10 last.

Supporting Internet Explorer 9 seems like it would be stretching it.  Though can understand people wanting consideration for Internet Explorer 11.  However, Microsoft will be pushing their new Edge browser very heavily, so would think only the most hardcore or those relying specifically on legacy web apps they don't want to update, would be clutching on to Internet Explorer 11 to the very end.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 30, 2020, 01:43:07 pm
Some companies are still stuck on XP, and that is IE 8 afaik.
Though they should know to expect glitches.....
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 30, 2020, 05:55:37 pm
I added a few changes. / Waiting for feedback if it works on Safari

float left/right => improve for IE 9.

Changing when/how the new navbar hides.
- So older browsers see the normal menu bar
- Hides already at witdh 700, because the desktop nav bar wraps to too many lines

Also re-added the image/background in the mobile version



As I said, waiting for some test results. Otherwise IMHO good to go.

If someone wants to add as a bonus: The 8 blocks on the bottom of the main page are spaced with too much distance, if the page width becomes smaller. (needs another media tag, to reduce padding/margin/...)
But its not a problem.

Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on August 30, 2020, 06:45:35 pm
Hi, I've added you to the lazarusccr at github, so you can manage the repository.

I don't have mac / iphone to test on Safari, so I let you find some tester.

Thanks for the fixes.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 30, 2020, 08:43:11 pm
All changes are now staged at https://test.lazarus-ide.org/

Probably will get them live mid/end of the week.

Title: Re: Lazarus Website Mobile Friendly
Post by: trev on August 31, 2020, 03:11:57 am
Works perfectly with:

* SeaMonkey on FreeBSD;
* Safari on Mojave;
* Safari on previous model iPhone SE (iOS 13.6.1)

Works "ok" with:

* Safari on iPad - the original site looks better as the banner with the image and download button takes up less than 50% of the depth that the new version takes up and the fonts in the new page are much bigger as well. See: old page (https://sentinel.sentry.org/~trev/OLD.PNG) and new page (https://sentinel.sentry.org/~trev/NEW.PNG). This only seems to happen on the iPad (iPadOS 13.6.1).
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on August 31, 2020, 07:30:21 pm

* Safari on iPad - the original site looks better as the banner with the image and download button takes up less than 50% of the depth that the new version takes up and the fonts in the new page are much bigger as well. See: old page (https://sentinel.sentry.org/~trev/OLD.PNG) and new page (https://sentinel.sentry.org/~trev/NEW.PNG). This only seems to happen on the iPad (iPadOS 13.6.1).

Do you have some form of "inspect"? So you can disable individual css attributes?

Both the html and the body element have a ton of stuff by bootstrap.
If you can disable them one by one, to see which one (if any) is causing this?
Title: Re: Lazarus Website Mobile Friendly
Post by: Blade on September 01, 2020, 01:56:07 am
* Safari on iPad - the original site looks better as the banner with the image and download button takes up less than 50% of the depth that the new version takes up and the fonts in the new page are much bigger as well. See: old page (https://sentinel.sentry.org/~trev/OLD.PNG) and new page (https://sentinel.sentry.org/~trev/NEW.PNG). This only seems to happen on the iPad (iPadOS 13.6.1).

Wouldn't various people want larger fonts for greater readability?  Is there some type of enhancement going on related to the browser or OS?
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on September 01, 2020, 02:14:51 am
Wouldn't various people want larger fonts for greater readability?  Is there some type of enhancement going on related to the browser or OS?

Most browsers allow you to set a minimum font size. And also to zoom a webpage, if you need it.

If the font size were to small as it is, then it would need to be made bigger on all devices, but not just one. So - if possible - that device should show the same sizes as all others.
Title: Re: Lazarus Website Mobile Friendly
Post by: trev on September 01, 2020, 04:11:55 am
Do you have some form of "inspect"? So you can disable individual css attributes?

Both the html and the body element have a ton of stuff by bootstrap.
If you can disable them one by one, to see which one (if any) is causing this?

To do that, after some research, it seems that I need to enable some iPad Safari preference and then connect the iPad to my Mac mini and use the desktop Safari which would seem to defeat the whole purpose.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on September 02, 2020, 01:18:25 pm
I spotted one more issue.
The image (3 windows screenshot) used to be vertically centered. Now its glued to the top.


This has already put far to much work onto my plate. The initial statement was I review and apply a patch.
I ended up doing too much myself already
- fixing the margins added by bootstrap
- the missing bold styles
- (most of) the fact that in bootstrap media uses "min width" and therefore defaults to the mobile layout in browsers that do not support media queries (should all be max width)
- putting back the paw-logo, to keep the branding of the page.
- And a few other things.....

I should have simply rejected it for all the above reasons.

Anyway => the image alignment still needs to be done.

That image also is now horiz centered, instead of left aligned, but that actually might be better. So that is fine.


Quote
The 3 columns / boxes on the feature page were designed to always have the same height. So the bottom would align.
They are screwed up in IE 11 now.
While in firefox they are still not bottom aligned

But I given up on that. So that will be accepted as is....
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on September 04, 2020, 07:13:13 pm
So now I ended up doing the fixes myself....  (well my fault for picking it up)
And I am not talking about fixes for IE 8 (that were the easy ones by the way). But fixes for modern up  to date browsers.

I respect "lainz" for the work he does otherwise. But this web-project went south badly.

The whole thing spun off the thread at (example msg / there are other msgs) https://forum.lazarus.freepascal.org/index.php/topic,51093.msg375124.html#msg375124

Claiming people would help on the website, if only it was on git (or at least avail as source).
I pointed out it was at svn. (and even accepted the changes as git commits on a mirror)

And here is what was mentioned on the other thread too: It's not about git/svn (I accepted git anyway).
It's about whether the patch is updated on review, as often as it takes till its good enough.
(And just to say, I have been on the other side, having a patch I wanted to be accepted at some project, and redoing it over and over again).




Anyway, ranted enough...

Maybe there can be at least some help testing.... (from everybody)

https://test.lazarus-ide.org/
https://test.lazarus-ide.org/index.php?page=features
vs
https://www.lazarus-ide.org/
https://www.lazarus-ide.org/index.php?page=features

Main page:
1)visually compare the headers and images, position and margin/padding....
Known diffs:
- main image is now centered
- text columns are 3 or 4 pixels further apart of each other.
- Some mobile safari uses a bigger font (on idea why)

2) general look in full width and mobile width (when it displays the menu button at the top)

3) working of menu / working of download

Feature page:
- 3 feature boxes should have same height (on older browsers, they can have individual heights)
- 3 feature boxes, no massive empty space at bottom of highest box
- 3 feature boxes , align on page left/right
- 3 feature boxes , in mobile mode have vertical spacing/gap

Other pages:
anything that changed noticeable.

Please report the browser(s) that you used for testing.
Thanks

(I might be away during next week / so could be a while)
Title: Re: Lazarus Website Mobile Friendly
Post by: Bi0T1N on September 04, 2020, 08:50:58 pm
So now I ended up doing the fixes myself....  (well my fault for picking it up)
And I am not talking about fixes for IE 8 (that were the easy ones by the way). But fixes for modern up  to date browsers.

I respect "lainz" for the work he does otherwise. But this web-project went south badly.

The whole thing spun off the thread at (example msg / there are other msgs) https://forum.lazarus.freepascal.org/index.php/topic,51093.msg375124.html#msg375124

Claiming people would help on the website, if only it was on git (or at least avail as source).
I pointed out it was at svn. (and even accepted the changes as git commits on a mirror)

And here is what was mentioned on the other thread too: It's not about git/svn (I accepted git anyway).
It's about whether the patch is updated on review, as often as it takes till its good enough.
(And just to say, I have been on the other side, having a patch I wanted to be accepted at some project, and redoing it over and over again).
I think you've chosen the worst example message you could've chosen. I provided some patches for the FPC website and also sent a mail with fixes and recommendations for the foundation website. :)

Please report the browser(s) that you used for testing.
I've tried the mobile website with the new Firefox browser on Android and the desktop website with Firefox on Windows. Looks all okay for me.
Only thing I've found weird is the Frameworks section on the Feature page. Feels like there is something missing.
Quote
Various Frameworks are available which saves your time on certain codebase.


And more...



Here is a version-based feature history which has animations to show you many features in action: Wiki: New IDE features since
Would expect e.g. a list of frameworks (not sure what else might be intended by the creator). There are also too much newlines.

Another thing which I already mentioned in another thread (https://forum.lazarus.freepascal.org/index.php/topic,48831.msg356956.html#msg356956) about the wiki: the wiki should also get a modern theme - especially for the mobile website (mentioning it here as well because most links of the Lazarus site link to the wiki).
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on September 04, 2020, 09:43:49 pm
About the linked message. I did not re-read the thread, hence I pointed out there are more msgs.
It is about the thread and not the message.

Also I did not mean to say, that nothing came out of the thread. I am glad to hear that other contributions where made. Those other websites do not include my in their maintenance, so I was not aware.
Even my involvement in the Lazarus website, emerged from rather curious circumstances. I never raised my hand, wanting to get part of its maintenance. But somehow it came to me.... :)



Framework / Content:

I agree, on that we could do with better content.

I am still happy to accept patches / Content patches may take longer, as there is more team approval involved.
And as seen, expectations can be demanding.

Also, most content should be on the wiki, where its less of a burden to maintain.
However, an actual list of frameworks (with short info) that could go on the website.

(Also, I am away next week, may or may not be able to answer queries)
Title: Re: Lazarus Website Mobile Friendly
Post by: trev on September 05, 2020, 01:56:34 pm
Maybe there can be at least some help testing.... (from everybody)

https://test.lazarus-ide.org/
https://test.lazarus-ide.org/index.php?page=features
vs
https://www.lazarus-ide.org/
https://www.lazarus-ide.org/index.php?page=features

Feature page:
- 3 feature boxes should have same height (on older browsers, they can have individual heights)
- 3 feature boxes, no massive empty space at bottom of highest box
- 3 feature boxes , align on page left/right
- 3 feature boxes , in mobile mode have vertical spacing/gap

Please report the browser(s) that you used for testing.

* SeaMonkey - FreeBSD - Looks good.
* Safari - iPad - The Feature page is a disaster :( The three columns are now narrower and stacked on top of each other leaving the right-hand side of the page next to each of the narrow columns blank.
* Safari - Mac mini - Looks good.
* Safari - old iPhoneSE - Looks much better (current page forced into landscape to fit; new page single column in portrait)
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on September 05, 2020, 02:37:18 pm
- Chrome Windows 10: now the features page looks better on mobile, not stacked one in top of the other. (edit: it sounds weird I mean the mobile emulator of chrome when the dev tools are open, on Windows 10).

The unique issue I found on mobile is that the bottom is not sized properly, but I'm not sure how to fix that, maybe just hiding the 3 bottom images in mobile?

Edit> Safari 13.1.2, works fine on macbook pro late 2011.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on September 05, 2020, 04:45:21 pm
Ah, I hadn't spotted the images at the bottom yet.
Title: Re: Lazarus Website Mobile Friendly
Post by: Martin_fr on September 05, 2020, 05:38:53 pm
Fixed the footer.

Internet Explorer has an issue with some of the "Tip of day" images (e.g. syncro edit image).
If the window is to narrow, the image escapes its box.
If anyone has an idea...
Otherwise, IE should not normally get such a narrow window..
Title: Re: Lazarus Website Mobile Friendly
Post by: lainz on November 15, 2020, 07:53:15 pm
The website seems live now, thanks for taking my suggestion into consideration.  :)
TinyPortal © 2005-2018