OS2World Site Update

[Dave Yeo]

I wonder if I'm the only one who thinks such a login form look ugly.

It's a failure of our old browsers, even Dooble_Qt6 is to old.

[Guillaume Gay]

Bonjour to all!

Now it looks more condensed.
Regards

Yes! You did it.
Less scrolling needed between the sections.
Thanks, Martin.

[Andi B.]

I wonder if I'm the only one who thinks such a login form look ugly.

It's a failure of our old browsers, even Dooble_Qt6 is to old.

Is it a failure of our browsers or is it a failure of the server when content is delivered in an ugly looking way? All the years before the server software did a nice job.

I know update update update to the latest Google web controls..... All old standards are crap and have to be replaced by the newest shiny, fancy toy again and again... Guess I'm to old for some of these things now when I only wanna have things to work not to break.

[Martin Iturbide]

Hello Andi B.

I will repost the message I already said on the Dooble thread:

"Sorry , as I explained before, I needed the update the Joomla script on OS2World because I was falling behind with the version and PHP forces to go further or get your server hacked.

The only behaviour that I can explain is:
- Dooble for Windows (narrow) - If the window is narrow it re-accommodate the size layout.
- Dooble for WIndows - if the window is stretch enough it looks as it should. FINE.
- Dooble for OS/2 - Qt5 - No matter how narrow or stretch is the window, the layout looks re-accomodated.
- Otter for Windows - No matter how narrow or stretch is the window, the layout looks re-accomodated.
- Otter for OS/2 - Qt5 - No matter how narrow or stretch is the window, the layout looks re-accomodated.

Just in case I will ask in the Otter forum about why the Windows version is not displaying OS2World fine.

Regards"

[Martin Iturbide]

Hello

Maybe something can be done to the Cassiopeia template (Joomla site template) to support some legacy functions on showing the three columns on the site. But I need someone with CSS / HTML skill I don't have.

Or is it that this template is "responsive" (which means that it adapts to the device resolution (phone, tablet, PC))? And maybe Dooble for OS/2 can render the page correctly, but for some reason it is always taking  for "narrow/compress layout" to display?

Regards

[Dave Yeo]

If you look at the user agent, you see the version of Chromium that each browser is using, the good Dooble is using Chromium 122, our Qt6 build is using 94. Likely all the Qt5 based browsers are using older Chromium too. I think that the older Chromium's just don't support the right elements.

[Martin Iturbide]

Hello

Someone at the Joomla forum gave me hint, but still do know if that can be.
With the firefox inspector (on Windows) if I disable "<div class="site-grid">" I get the similar issue on Firefox for Windows. He told me that it is possible that the other browsers does not implement  "<div class="site-grid">"  correctly but I'm still not sure about it.

Regards 

[Dave Yeo]

Hello

Someone at the Joomla forum gave me hint, but still do know if that can be.
With the firefox inspector (on Windows) if I disable "<div class="site-grid">" I get the similar issue on Firefox for Windows. He told me that it is possible that the other browsers does not implement  "<div class="site-grid">"  correctly but I'm still not sure about it.

Regards

Sounds likely.

[Remy]

Hello

Someone at the Joomla forum gave me hint, but still do know if that can be.
With the firefox inspector (on Windows) if I disable "<div class="site-grid">" I get the similar issue on Firefox for Windows. He told me that it is possible that the other browsers does not implement  "<div class="site-grid">"  correctly but I'm still not sure about it.

Regards

Hum!

I checked and the result removing this setting isn't the same as under QT.
Check the banner menu how it is (vertical or horizontal) ? 

I think that the problem isn't on the .site-grid class because grid-template-areas seems well working.
This can be seen under windows. I took 2 screenshots
- one with grid-template-areas disabled under .site-grid
and
- one with it enabled
But you can see that grid is supported, indicated by the @support entry withg under it default values
the default values are taken when grid-template-areas under .site-grid is disabled

After disabling the grid-template-areas under .side-grid, I search the menu direction css which is under an other @media entry with
flex-direction:row

Disabling this css setting in addition to previous one gives the result seen under QT browser.
The commun part here is the @media ( width >=992px )

This could suggest that we never go into the @media condition !
Will try to check this

[Remy]

screen size 1920x1200) Browser provides correct size (minus borders) with:

The Window Object
The innerWidth and innerHeight Properties
Width: 1916
Height: 1056

Something may prevent going into @media !

note: under AOS 5.1.1 firefox, CSS grid... and ...gap aren't supported
and messages:  Expected ':' or ')' after media feature name but found '<'

[Remy]

Found:

The problem is into the @media ( width<= ....px )
QT and Firefox don't support a  > or < or =  ... after width (  : expected after width or heigh)

I did several tests and each time I use the specific @media (query) codding from into template-min.css, it failes.
Using older codding works.
If possible, can all:
@media (width <= ..... )  be replaced by  @media (max-width: .....)
@media (width >= ..... )  be replaced by  @media (min-width: .....)

Example of code you can test (create a html file and open it under QT browser or Firefox):

Code Select Expand



<!DOCTYPE html>
<html>
<style>
body {
  background-color: linen;
}
@media (min-width: 600px) {
  body {
    background-color: coral;
  }
}
@media (width >= 1000px) {
  body {
    background-color: red;
  }
}
@media (max-width: 300px) {
  body {
    background-color: red;
  }
}

</style>

<h1>The Window Object</h1>
<h2>The innerWidth and innerHeight Properties</h2>

<p id="demo"></p>

<script>
let w = window.innerWidth;
let h = window.innerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
</script>

</body>
</html>



Open the html into the browser and change the browser wide.

You will get like me (I hope)  :
coral color when above or equal 600px
red never occurs when above or equal 1000px   ( ignored, no effect )     
red color when below or equal 300px


Or:
Could some code be added or updated into QT webengine to translate width >=  into min-width: and width <= into max-width:  for better compatibility with newer CSS code ? 
   

[Remy]

Hello

Someone at the Joomla forum gave me hint, but still do know if that can be.
With the firefox inspector (on Windows) if I disable "<div class="site-grid">" I get the similar issue on Firefox for Windows. He told me that it is possible that the other browsers does not implement  "<div class="site-grid">"  correctly but I'm still not sure about it.

Regards

I updated template.css for a try only  (the not compressed css file)
replaced all occurences of width >= or width <=

[Martin Iturbide]

Hello Remy

I think you found it.

Joomla let me create a "child" of the template that overrides the father, so I quickly put your template.css (I can also revert it very fast if there is some problem) and I think it worked. You are a genius
It works fine on Dooble Qt5, but not our old Firefox. But it is very good, it is a step forward.

Everybody, please test the site further, visit the pages and let me know.

Regards

[Remy]

Hello Remy

I think you found it.

Joomla let me create a "child" of the template that overrides the father, so I quickly put your template.css (I can also revert it very fast if there is some problem) and I think it worked. You are a genius
It works fine on Dooble Qt5, but not our old Firefox. But it is very good, it is a step forward.

Everybody, please test the site further, visit the pages and let me know.

Regards

Hi Martin,

As I wrote it, Firefox doesn't support grid gap etc...  firefox, too old yet but it should fallback to flexbox as I can see it.

I just found having left a  "height <=" on a @media entry. I would suggest you to replace all occurances of
"height <="  to  "max-height:"  and  "height >="  to  "min-height:"   too.

(the second case seems not to exist but, it is easy to do a replace all)