[SCRIPT][THEME] Bitcointalk Cards Style - Mobile Friendly

[masulum]

ATTENTION
the design idea is from me not from AI. 95% of the coding was done by AI, and 5% was reviewed by my friend. because impossible for him to build 100% of this theme due to his busy work schedules, so I just asked him to review it. skip! If you feel this thread or theme is useless because the code generated by AI, i'm sorry for that. even i am not a programmer, i also wants to take a part to seeing this forum with mobile-friendly skin, to help mobile user easy to read.

Hello everyone, we’re probably all used to the old version of the SMF forum, where the pages were static and not mobile-friendly. This time, I want to realize my personal desire to use the forum with mobile version when I’m online on my phone.
Basically, this forum isn't difficult for me to access the page and no problem with original them, just when opened on a phone, i feel it might text displayed too small or become an issue for some people.

........................................SCRIPT VERSION ........................................
Current Version: 1.5.9.7
Scan File Before Downloading
Github: https://github.com/gakjahat/bitcointalk-cards-UI/
Greasy: https://greasyfork.org/en/scripts/601150-bitcointalk-modern-ui-mobile-friendly

════════════════════════════════════════════════════════════════════════════════
PREVIEW ON DESKTOP
════════════════════════════════════════════════════════════════════════════════

THEME SETTINGS

you can set some of feature from this theme script. you can find the button on the top right of the pages.



HOME PAGE

The home page displays a card-style layout, where the main board and sub-boards are displayed in cards to make it easier for users to view the menu. Each card will feature one post showing the most recent update, whether it’s a new thread or a new reply.


SEARCH AND BOARD FILTER

The search feature is the default search engine for this forum. If you search using this theme, you will be redirected to the default version at https://bitcointalk.org/index.php?action=search2


The filtering feature is designed to make it easier for you to select a board, without scrolling through the list. For example: If you want to go to the Indonesian Language board, just type “bahasa” in the filter text area, and you’ll find the board you’re looking for more quickly.


SUPPORT FOR NAVIGATING BETWEEN PAGES BY ENTERING THE PAGE NUMBER AND SUPPORT FOR POSTSFLAYER SCORE

This theme has also been adjusted to include pagination and page shortcut by typing the target page number, if needed. This feature might be a bit useless, but who knows, it might be useful some day.
Also, I’ve adjusted the position for the Bitcointalk Postflayer Score extension. For other extensions, I need screenshots from users to adjust the positioning properly. Since I don’t use much forum extensions, I’m not able to positioned them correctly yet, so screenshots from you will be useful.


SIGNATURE PREVIEW ON THE PROFILE PAGE

If the signature preview is cut off in the original version, using this theme will display the signature preview in full, matching the provided design. This will allow you to be confident that your signature is displayed correctly without checking your post history first.


DARK & LIGHT VERSIONS, ACCENT COLOR OPTIONS

The theme also includes dark and light options just in case if you don’t like brighter colors. Also, you can now choose accent colors for decorative buttons or text. However, backgrounds in other colors aren’t available yet. this version supported read and unread thread, just like original version.



BITLIST SEARCH IMPLIMENTATION
I got feature suggestion from @Husna QA about implemented bitlist search, and i try to add that feature starting from version 1.5.0. basically the results only for keywords


and the results will be like this



well, i still waiting for permission about this feature, in case i'm not get permission to showing the search results with pop-up and users must visit the bitlist pages instead, of course i will removed the popup feature.

════════════════════════════════════════════════════════════════════════════════
PREVIEW MOBILE
Note: make sure your browser supported extension feature on your mobile
════════════════════════════════════════════════════════════════════════════════

For mobile versions, screen scrolling can be a bit long, so using the filter board will be very helpful here if you don't want to scroll. I won't add any additional descriptions for the features mentioned above, because basically all the features are the same, with only minor differences in display and layout.

HOME PAGE






POST BY USER

For posts created by users, whether they are OP or replies, the account details appear above the content posted by that user. This may be a bit confusing, but I think the best to display and place all the information is this way. In addition, improvements have been made to the signature interface so that it will not be cut off even when the page is switched to the mobile version.


REPLY/WRITING BOX

The text box and text editor are now optimized for mobile use, which also makes it easier to type long texts. In original versions, the text looked small if you kept the default interface, but with the mobile version of this theme, the text is larger and follows the new text standards set by theme.

SOME PAGES HAVE NOT BEEN MODIFIED FOR MOBILE VERSION YET, HOWEVER THE MOST FREQUENTLY VISITED PAGES HAS BEEN DESIGNED TO BE MOBILE-FRIENDLY FIRST
The scripts already tested on a mobile phone using Mises Browser and work as shown in the screenshots. If you find any bugs, feel free to report it here. Suggestions and feedback are always welcome.

[Royal Cap]

Great script, man! I installed it on my mobile device and checked it. Almost all the functions are working fine. I actually prefer the legacy version of forum.

However, one bug I noticed is that every time I refresh, the forum interface keeps zooming.

[masulum]

Thank you @Royal Cap for trying this script. after your reports, and update the script, and i  try it on my phone with script version 1.5.4 and there is no more zoom issues when refreshing. Please try updating the script via Greasyfork.

i'am also added several new features for this version:
- set font type
- set font size
- setting menu


for now this not affected your text box/writing box yet. if needed i will update it too.
because maybe someone need to read with larger text i decide to add this feature.

[Royal Cap]

Thank you @Royal Cap for trying this script. after your reports, and update the script, and i  try it on my phone with script version 1.5.4 and there is no more zoom issues when refreshing. Please try updating the script via Greasyfork.

i'am also added several new features for this version:
- set font type
- set font size
- setting menu
for now this not affected your text box/writing box yet. if needed i will update it too.
because maybe someone need to read with larger text i decide to add this feature.

Yes, after the update, this bug has been fixed. To be honest, I really liked this script. Because exploring the forum on mobile is very difficult because I have to zoom in and out repeatedly. Although I had made a script for mobile devices before, but it was not perfect. I found your script very perfect. I hope I will get used to it very soon. Maybe it will take a day or two to get used to it. But once I get used to it, I think I will not use the legacy version anymore.

However, I would like to give another suggestion, if you want, you can make the user profile section a little smaller, then it will be easier to read the posts. Because it takes up a lot of space when reading someone's post.

[masulum]

However, I would like to give another suggestion, if you want, you can make the user profile section a little smaller, then it will be easier to read the posts. Because it takes up a lot of space when reading someone's post.

thank you for your feedback, on current version 1.5.6 i already made a change to the profile section. here the results


i reduce the statistic character, because there will become a place to another extension stats. except you are using a lot of extension, maybe this profile stats will need more space to showing them. if just few extension, it wouldn't affect too much. example with one extension



this is the better design already, because avatar mostly used because of campaign, it impossible for me to hide the avatar or make it more smaller, i just want to respect to manager.

[dkbit98]

I like how it looks, especially the dark theme, and I think this could be best solution for bitcointalk mobile version so far.
It might take some time getting used to new style format, but it should be much easier to use it with mobile phones.

As for reporting bugs, I don't see any effect when using compact mode, neither in topics or in posts, so you might want to check that out.
Note that I enabled Compact view in settings.

[masulum]

I like how it looks, especially the dark theme, and I think this could be best solution for bitcointalk mobile version so far.
It might take some time getting used to new style format, but it should be much easier to use it with mobile phones.

As for reporting bugs, I don't see any effect when using compact mode, neither in topics or in posts, so you might want to check that out.
Note that I enabled Compact view in settings.

Thank you for your review, hopefully you are enjoyed with this theme.

about compact view, this feature only hiding description in index pages, it's not a bug because the feature not worked in thread or board pages. if you have something good to be implemented, just let me know.

Only for lower version users, i have an update for the script.
whats new in v 1.5.8
1. Better design for profile pages


2. Better style for button



3. topics started and last posts pages now mobile friendly



4. Shortcut to upload to TalkImg
How?

• While you are on writing box, just click Upload to TalkImg button
• 
  
• Set witdh/height of the images as you need, the settings on top bar (check image below)
• Upload image (second step can be set after uploading your image)
• click insert button, and the code will be automatically sent to text area/writing box without copy and paste. you are still able to copy the code if needed.

5. copy button for content inside tag code,



6. Background, Accent and Fonts settings



7. better quoted posts styling



some pages still not mobile-friendly, and glitch (original version in few second) while open the pages for the first time can be happens and it's normal because this is just userscript, not original skins of the pages 

feedback  is needed for better experience.

Thank you.

[Mia Chloe]

~snip

Looks neat big thumbs up for the idea and effort. At some point it looks a lot like the probably intended new forum software whilst still appearing quite simple if you ask me. Basically, it also kinda looks like fillipones script he created a couple months back only this seems more complex and customised.

Also does your direct image upload button keep any extra meta data or it just relies on the meta data that you get from talkiMG? And can the image hosting site be changed?

[dkbit98]

about compact view, this feature only hiding description in index pages, it's not a bug because the feature not worked in thread or board pages. if you have something good to be implemented, just let me know.

I think compact view would also work nicely in showing more posts or topics in less space, that could be very useful for mobile devices.
I also noticed that your usercript is not compatible with some other userscripts that work for bitcointalk, but I don't think there is easy fix for that.

[Xal0lex]

These buttons aren't here.

[masulum]

Basically, it also kinda looks like fillipones script he created a couple months back only this seems more complex and customised.

Also does your direct image upload button keep any extra meta data or it just relies on the meta data that you get from talkiMG? And can the image hosting site be changed?

yup, just similar with that, and i just added some feature 
the upload button just a short cut, nothing else. so, any meta data of the image will remain the same as TalkImg this code not doing anything instead open the popup and set the width/height

These buttons aren't here.

the button exist, but at the top of pages, new updates has been made, and that menu being moved to that place.

I think compact view would also work nicely in showing more posts or topics in less space, that could be very useful for mobile devices.
I also noticed that your usercript is not compatible with some other userscripts that work for bitcointalk, but I don't think there is easy fix for that.

Thank you for suggestion, i made a change for this mode. now the compact view has been update,

just let me know if it should be not like that

about incompatible with other script, as i mentioned before, i need screenshot of original pages with extension or script that not compatible, so i can made a change, because it will be hard to implement to all of userscript or extension without knowing the position of script.

Version 1.5.9.1
Minor change on profile pages


Collapsible Child Boards card


Setting Image Size from talkimage is now after you are uploaded your images, you can set before click insert. it should be easy to find the form now.

[masulum]

Update Version 1.5.9.7

Whats new?
1. Added Posts Flayer Score, BPIP Rank, Earned Merit, and Sigban info to user badges
I see several users feel its important to see their scores update, BPIP Rank, DT info, Sigban info and Earned merit for 120D. So, i decided to added them to users badges. now everyone who installed this script can see all of them. but Tampermonkey may ask your permissions to allow domain to connect with some domain include:

• BPIP
  
• Postflayer

just always allow domain if you feel okay with that. Here the preview of the badges.






2. Implemented a sticky menu & Optimized mobile version UI
Now no matter how long you are scrolling you can back to the top or going to the bottom easily, and main menu will stay at the top so you can choose menu faster if needed. while unread posts, new replies, watchlist and patrol now moved to Activity menu. not a new feature, but maybe still helpful. And optimising menu for mobile version to make it simple, now menu under three strips symbol, you are already familiar with this for sure 


3. Original Template with Custom Badge and Writing Shortcut (beta)
This is not perfect yet, i will make this better in the future update. you can try this template too, and give me a feedback


4. Link Preview
I see a website have a popup to show stock price or cypto price, and i think this can be implemented for link inside thread or read full posts from snipped quotes posts, and its now available. here the preview.


outside forum link (some link not showing their content preview, some is a bug and some because the hosts blocked workers to see their content from non-human  ). Im sorry for this, if not perfect. this may need your cache storage. and the clear cache for preview can be found on Tampermonkey Menu



5. Typing Shortcut
CTRL+B for bold, CTRL+i for italic and more, now available with this script. just make sure you are on writing box and the shortcut is ON. Here is the complete shortcut that you can use with this script. shortcut only work on writing mode active, if you are not under reply form or type a message form, shortcut will back to browser default.



that some update for current version, I hope there are still people who using this userscript/theme. If you are installed postflyer extension before, now you can remove it, because using this script already include.