Bitcoin Forum

Other => Meta => Topic started by: Synchronice on September 20, 2022, 11:59:51 AM



Title: Bitcointalk - Responsive design challenge
Post by: Synchronice on September 20, 2022, 11:59:51 AM
Yesterday, I visited bitcointalk from my smartphone and oh shit, I still see the desktop version of the website. Guess what I did? Had some free time, watched html/css and CSS flexbox crash courses and tried to build it from scratch. (Okay, I was already familiar with HTML but CSS is my weak point).

Here in this low-quality video you see the difference between the original and my version. I'm sorry, I used an old laptop for recording. Decrease the volume to not hear mouse clicks :D
https://www.youtube.com/watch?v=dRnsHfZCLig

P.S. I used flexbox, so I found it hard to implement the child board section, I guess I should have used a grid from the beginning.
If you would love to challenge yourself, build a responsive version of bitcointalk with modern html/css techniques.

Check the responsive version yourself on the device of your wish

Live Check on GitHub static page (https://jaybates19.github.io/bitcointalk/)


Title: Re: Bitcointalk - Responsive design challenge
Post by: Pmalek on September 20, 2022, 01:40:08 PM
There are a few problems with these mobile alternatives. Let's say you were to release this as some kind of mobile app. Very few people would feel comfortable to use it and enter their login data in the app. Even if the version was better than browsing Bitcointalk from a phone, you have not addressed things like quoting, multi-quoting, and replying to multiple people. Taking a long post, editing it to remove certain parts and only quoting and replying to certain parts of it. That still remains a pain in the ass no matter how you look at it. Working with tables, lists, multiple colors, images...


Title: Re: Bitcointalk - Responsive design challenge
Post by: FatFork on September 20, 2022, 01:52:00 PM
OP, that's a nice initiative. Unfortunately, something like that cannot be applied to the current version of the forum because it would require changing all the SMF template files from the backend. Your modifications could be implemented locally in the user's browser using Tampermonkey or similar userscript manager extensions if you could add JS functions that would replace the current HTML code with the new one.

You can host your code for free on GitHub Pages: https://pages.github.com/


Title: Re: Bitcointalk - Responsive design challenge
Post by: dkbit98 on September 20, 2022, 02:50:28 PM
Check the responsive version yourself on the device of your wish
I saw the video you posted on youtube, but I can't open the website bittalk.totalh.net you posted above and I can't see what you did.
Making bitcointalk forum responsive is not an easy task and I think we need to wait for update with new epochtalk, but maybe theymos can make one more surprise change.
I would like to see usable bitcointalk frontend that can work good on all devices including smartphones, so anyone who wants to make this has my full support.



Title: Re: Bitcointalk - Responsive design challenge
Post by: Sandra_hakeem on September 20, 2022, 03:12:24 PM
That's a wonderful start, yeah... but you forgot to make things synchronize in it's proper position just as your name implies ::).... I have seen your varieties but as I said, there are still alot of work to be done.
Yeah also , I couldn't access the link you posted. I dunno if it's my device's fault? But it's fine.

cool, kudos!

Sandra👩‍🦱


Title: Re: Bitcointalk - Responsive design challenge
Post by: Synchronice on September 20, 2022, 04:42:28 PM
@Pmalek
I was doing it for fun but it wasn't really funny :D

@FatFork
Thanks, I already hosted webpage on github, visit (https://jaybates19.github.io/bitcointalk/)

@dkbit98
@Sandra_hakeem
Hosted on GitHub (https://jaybates19.github.io/bitcointalk/), so it shouldn't be a problem right now.


Title: Re: Bitcointalk - Responsive design challenge
Post by: Synchronice on September 23, 2022, 08:41:48 PM
This time, I created a thread section and instead of CSS Flexbox, I tried to use CSS Grid.
To be honest, it was quite exhausting, this website has a lot of tables, a lot of background colors and borders.

Test it from your smartphone and tablets, here is the link: https://jaybates19.github.io/bitcointalk/thread-view.html