Fix mobile compatibility

[arthtyagi]

Alter the front-end to make it look better on mobile devices.

[karx1]

I can try and help with this if you assign this issue to me!

[karx1]

Ok, so, after some testing, turns out that DomeCode is actually pretty responsive on mobile. However, I did notice one graphical glitch, (the "cards" don't align to the center) which I will try to fix.

[arthtyagi]

Yeah they don't. Another thing, create a local superuser for yourself. Go to the admin and create a resource with a video inside it. The video embed isn't responsive either in the Resources.
Have a look at https://domecode.com/tracks/python/stacks-and-queues/ on a mobile device.
In addition to it, the navbar looks really generic, try making it more minimalistic and modern on the mobile devices and as for larger screens, try resizing the browser window and look at how unresponsive the header is. That can be fixed.

[karx1]

Alright, I'll do those things.

[arthtyagi]

any updates?

[karx1]

Hey! Sorry for not getting back to you on this. Work is currently underway to try and re-center the "cards" and fix the video issue. Once those are done, I'll have a look at the resizing issue. Also, the navbar appears transparent on mobile, and so does the drop-down when expanded. I'll see if I can try to fix it.

[arthtyagi]

the navbar appears transparent only when using safari I guess and that's in the proprietary code. drop the transparency issue, I'll be rolling the fix with some other features. Just try fixing the issues in the open-source version, I'll inherit the fixes from them in the proprietary code base if they seem alright and update the open-source repo with up-to-date code.

[karx1]

the navbar appears transparent only when using safari

The transparency issue also happens on Firefox Beta on Android for me.

…

[arthtyagi]

ah okay it's alright tbh, I know the fix for it plus the code causing transparency is not in the open-source repo at the moment.

[karx1]

Hey, I made a pull request with a requirements.txt file. Please review it and let me know of any changes that might need to be made.

[karx1]

@arthtyagi Hey, you mentioned something about a fix for the resources issue, but you said you'd have to do it manually for each resource. Can you send me that code? I want to see if I can make it so that it applies automatically to each resource.

[arthtyagi]

This is the iframe : <iframe frameborder="0" height="610" scrolling="no" src="https://www.youtube-nocookie.com/embed/p-_DFOyEMV8" width="1080"></iframe>

and this is the fix :

<div class="video-container"> <iframe frameborder="0" height="610" scrolling="no" src="https://www.youtube-nocookie.com/embed/p-_DFOyEMV8" width="1080"></iframe>   </div>  <style> .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }  </style>

[karx1]

Alright, I'll see what I can do.