Fixes: Library - Connection state's position when there are no libraries around #11442

[yashhash2]

Summary

So I created media queries for specific screen sizes to display the connection state position correctly. applied Padding and margins wherever necessary and created 3 DIVS a, b and disco because when state was offline position was changed again,by using these DIVS I was able to fix issue for both offline and online state.

References

#11442 (comment)

[MisRob]

Hi @yashhash2, thank you. High-level feedback from me:

• Would you upload before/after screenshots to the pull request description?
• Generally, we don't use CSS media queries. Instead we utilize useKResponsiveWindow that is integrated with our breakpoint system. You could read the docs and study another places in the codebase. Then I'd ask you to remove the CSS media queries in favor of useKResponsiveWindow.
• I see many duplicate styles. Would you place styles common for all breakpoints outside particular breakpoint styles so they are applied to all breakpoints? Then from each breakpoint style only override what is needed for that particular breakpoint. That should simplify code significantly.

[MisRob]

I will invite my colleague @LianaHarris360 for a full review as soon as this is resolved. Liana, would you please have a look then? I only did a brief skim myself. This is a new attempt at #11442 which you reviewed once here #12405.

[yashhash2]

Thank you @MisRob for feedback i will try to incorporate as many points as possible.

[yashhash2]

This is SS of the change, I have also added the changes in ordered manner Please look into it. I tried using Kresponsive Element but still i have to add css at breakpoints because of logo there its overlapping with text in some screen sizes.

[yashhash2]

@LianaHarris360 Please Review the changes so I can do any other change if required

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0a0.dev0_git.162.ge783f0b6.pex
Windows Installer (EXE)	kolibri-0.18.0a0.dev0+git.162.ge783f0b6-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0a0.dev0+git.162.ge783f0b6-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0a0.dev0+git.162.ge783f0b6.dmg
Android Package (APK)	kolibri-0.18.0a0.dev0+git.162.ge783f0b6-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.0a0.dev0+git.162.ge783f0b6.zip
TAR file	kolibri-0.18.0a0.dev0+git.162.ge783f0b6.tar.gz
WHL file	kolibri-0.18.0a0.dev0+git.162.ge783f0b6-py2.py3-none-any.whl

[LianaHarris360]

Thanks so much for your work on this @yashhash2, this is a tricky issue to fix. There were a few things I pointed out in my review. Please be aware that using CSS media queries is not a recommended practice in the Kolibri codebase. Although it is a straightforward fix, it can lead to challenges with maintenance, and there is a well-established alternative that we use consistently throughout the codebase.

[yashhash2]

Thank you for your feedback @LianaHarris360 I will try to do all the changes you mentioned above ASAP

[LianaHarris360]

There's no hurry :) Since Learning Equality will be closing for the holidays soon, I might not be able to review more changes until after the new year. Thank you for your efforts!

[yashhash2]

Hey @LianaHarris360 I tried using KGridItem instead of CSS media queries and here are some issues in which I need clarifications
Issues Encountered with KGridItem Implementation
Context:
While implementing KGridItem in place of CSS media queries, I observed several challenges regarding layout responsiveness and alignment. Below are the specific issues that require clarification and assistance:

1. Text Alignment Above 600px (Avoiding Specific Colors):
   The text renders correctly for screen sizes greater than 600px, resembling the example screenshot provided below. However, the use of blue and pink colors in these tests was solely to visualize exact div dimensions and should be excluded in the final design.
   

2. Transition Issues Below 600px:
   For screen sizes just below 600px (e.g., 550px), the layout undergoes an unintended transition between two shapes or configurations.
   
   After refreshing, the issue sometimes resolves but occasionally leads to misaligned or out-of-place elements.
   At smaller sizes, the problem disappears around 515px, where the layout stabilizes.
   Notable Example: The problem occurs at 550px, yet at 515px, it corrects itself as shown:
   

Key Concern: Despite testing multiple span sizes within the layout configuration (in layout4), this transition anomaly persists. Guidance on resolving this is essential.

3. Wifi Icon Position Below 400px:
   At very small screen sizes (generally below 400px), the Wi-Fi icon shifts from its intended right-side position to the left side of the layout.

Example: Wi-Fi icon misplacement below 400px:

Goal: Resolve this issue while avoiding the use of CSS media queries.

Questions:
How can I prevent the layout transition issue just below 600px, especially ensuring stable behavior across the problematic breakpoints (e.g., 550px to 515px)?
What configurations or adjustments in KGridItem can prevent the Wi-Fi icon from shifting positions below 400px?
Are there recommended best practices for using KGridItem to manage dynamic layouts without media queries effectively?
Thank you for your assistance!

[LianaHarris360]

Hi @yashhash2 It would be helpful if I could see the changes you've made in the code; however, I do see that the “Other Libraries” label and the sync-status div are positioned in two KGridItem components next to each other.

However, with the way KGridItem operates, because both KGridItem components have a span of 6 set for the :layout12 setting, they are displayed side by side. But we want the second KGridItem to be positioned below the first KGridItem on large and small screen sizes.

Perhaps if the span for the KGridItems were increased to numbers greater than 6 in layout12 and greater than 4 in layout8, the KGridItems would stack as intended?

As for the position of the Wi-Fi icon on small screens, it looks like that placement is done manually in the code. I'm not exactly sure why it's set up this way, but I'll investigate to find out the reason. However, since this was done on purpose and is not a result of your changes, you don't need to worry about it!

[yashhash2]

Hi @LianaHarris360,

I've committed the code for you to review. If you'd like me to revert the span of the other-Libraries grid to its original size, I can make that adjustment as well.

Please note that the breaking point is still the primary concern, and the current layout places the K-grid items below one another due to their span sizes exceeding 6 and 4, respectively. Let me know your thoughts or if you have additional feedback.

Best regards,
Yash Kumar Singh

[LianaHarris360]

Thanks for making the suggested changes and updating the grid span sizes, we are making great progress! I noted a few things that could improve the spacing of the connection status test.

[yashhash2]

Thank You Lana Harris for the Review I will do the recommended changes ASAP : )

[yashhash2]

Hi @LianaHarris360,

I wanted to let you know that we have successfully resolved the issues we discussed earlier. The following changes were made:

Removed the no-other-Libraries and Other-libraries sections.
Adjusted the right margins and consolidated all the top and bottom margins within the connection-status section.
These changes have effectively fixed the issue. Thank you for your assistance and guidance in resolving this.

Please review the changes at your convenience. Below is the final result for your reference.

Best regards,
Yash Kumar Singh

[LianaHarris360]

It seems that this KGridItem is placed within another one, but the otherLibraries text should be within its own KGridItem, separate from the grid where the connection status is located, like this:

<KGridItem>
  <h1> otherLibraries text </h1>
</KGridItem>
<KGridItem>
  <div class="sync-status">
  </div>
</KGridItem>

[LianaHarris360]

The negative margin-top here combined with the negative margin-bottom on line 7 makes the connection status text too close to the text above it and is inconsistent with the spacing of the text below it, removing the negative margins and perhaps making the margin-bottom in this class smaller should even it out.

[yashhash2]

Hi @LianaHarris360 Sorry for dragging this issue to this far. I wasnt sure about the exact spacing which is required so here is the final preview of the current spacing.

This spacing is with margin-bottom 10px.
If I remove this margin-bottom in connection-status then it will look like this

You can tell me which one looks suitable to you.Thank You and Happy New Year