[SCRIPT][TEMA] Bitcointalk Cards Board Style - Mobile Friendly

[masulum]

Halo semua, mungkin kita sudah terbiasa dengan forum SMF versi lama yang kesan halamannya kaku dan tidak mobile friendly, pada kesempatan kali ini, saya ingin mewujudkan keinginan pribadi saya untuk menggunakan forum dengan lebih mudah ketika online di ponsel.

Pada dasarnya, forum ini tidak sulit untuk diakses, hanya saja ketika kita membuka di ponsel, untuk teks yang panjang kita harus tetap melakukan scrolling kesamping karena memang untuk SMF versi 1.1.19 masih belum mengadopsi bootstrap mobile friendly pada styling pagenya. Sedangkan saat ini, menggunakan ponsel dengan tampilan lama sebagian mungkin akan mengalami teks yang terlalu kecil atau menjadi kendala sendiri bagi sebagian orang.

Disini coding 95% adalah dari AI dan 5% adalah hasil pengecekan dari teman saya yang memang programmer namun tidak mungkin baginya untuk build 100% untuk saya gunakan di forum ini karena kesibukannya sebagai programmer di IDNTimes, jadi saya minta tolong untuk cek aja. Teman saya ini bukan member forum ini, walaupun sudah sering saya ajak untuk daftar entah apa alasannya dia tetap tidak mau. skip!

Oke lanjut ke fitur-fiturnya.

........................................ VERSI SCRIPT ........................................
Versi Saat Ini: 1.4.14
Scan File Sebelum Download
Github: https://github.com/gakjahat/bitcointalk-cards-UI/
Greasy: https://greasyfork.org/en/scripts/601150-bitcointalk-modern-ui-mobile-friendly

════════════════════════════════════════════════════════════════════════════════
PREVIEW DESKTOP
════════════════════════════════════════════════════════════════════════════════

HOME PAGE

Pada halaman home ini mengusung tema card style, dimana untuk board dan child board akan dibungkus dalam card agar memudahkan user dalam melihat menu. Pada setiap card akan ada 1 post yang mendapatkan pembaruan terakhir kali dibuat. baik thread baru maupun reply baru.



CARI DAN SARING BOARD

Fitur cari adalah fitur pencarian yang memang sudah ada dari forum ini secara default, jika Anda melakukan pencarian melalui tema ini, Anda akan langsung diarahkan ke versi default https://bitcointalk.org/index.php?action=search2



Sedangkan untuk filter adalah untuk memudahkan Anda dalam memilih board tanpa harus scroll. Contoh: Anda ingin ke board Bahasa Indonesia, tinggal ketik saja di text area filter dan akan mendapatkan board pilihan Anda lebih cepat.



SUPPORT LOMPAT HALAMAN DENGAN MENGETIK NOMOR HALAMAN DAN SUPPORT POSTSFLAYER SCORE

Tema ini juga sudah menyesuaikan posisi paginasi dan shortcut halaman dengan mengetik nomor halaman tujuan, jika diperlukan. Mungkin ini fitur sedikit berlebihan, tapi siapa tahu berguna suatu saat.
Kemudian, untuk penggunaan ekstensi Bitcointalk Postflayer Score, sudah saya sesuaikan posisinya. Untuk ekstensi lain, saya perlu bantuan screenshot dari user untuk memposisikannya dengan rapi. karena saya tidak menggunakan banyak ekstensi untuk forum, jadi belum bisa memposisikan dengan baik, maka dari itu screenshot dari kalian akan sangat berguna.



PREVIEW SIGNATURE DI HALAMAN PROFIL

Jika di versi aslinya preview signature terpotong, dengan tema ini Anda akan melihat preview signature dengan utuh sesuai dengan desain yang diberikan. Dengan demikian akan membuat Anda lebih yakin kalau signature sudah benar tanpa harus mengecek dari history posts yang Anda buat.



VERSI DARK & LIGHT, PEMILIHAN WARNA AKSEN

Tema ini juga sudah saya lengkapi versi dark dan light yang mungkin ada dari kalian yang tidak menyukai warna terang. Ada juga penambahan fitur2 warna aksen tertentu seperti tombol atau teks dekorasi. Sedangkan untuk warna background lainnya belum tersedia.

════════════════════════════════════════════════════════════════════════════════
PREVIEW MOBILE
Note: pastikan menggunakan browser mobile yang support penambahan ekstensi takut lupa  
════════════════════════════════════════════════════════════════════════════════

Untuk versi mobile, mungkin scrollnya agak panjang, penggunaan filter board akan sangat berguna disini, jika Anda malas untuk scrolling. Saya tidak akan menambahkan deskripsi tambahan pada fitur yang sudah disebutkan di atas, karena pada dasarnya semua fitur sama, hanya berubah pada tampilan dan penyesuaian posisi.

HOME PAGE






POST OLEH PENGGUNA

Untuk post yang dibuat oleh user baik itu dalam OP maupun Reply, detail akun ada di atas konten yang ditulis oleh user. Ini mungkin akan sedikit membingungkan tapi menurut saya ini adalah yang paling efektif untuk menampilkan dan menempatkan semua informasinya. Selain itu, di versi ini juga ada penyempurnaan pada interface signature agar tidak terpotong walaupun halaman diubah ke versi mobile.



REPLY/WRITING BOX

Untuk pengetikan di dalam reply/writing box atau text editor juga sudah dilengkapi mendukung penggunaan mobile, ini juga akan memudahkan kita untuk mengetik ketika ingin melakukan pengetikan cukup panjang. diversi sebelumnya mungkin text akan terlihat kecil jika mempertahankan interface bawaan, dengan versi mobile dari tema ini, text akan lebih besar dengan standar text baru mengikuti tema yang terpasang.

SEBAGIAN HALAMAN MASIH BELUM DIMODIFIKASI KE VERSI MOBILE, SEMENTARA YANG PALING SERING DIBUKA TERLEBIH DAHULU YANG DIBUAT MOBILE FRIENDLY
Skrip sudah di test menggunakan Ponsel dengan Mises Browser dan sudah sesuai dengan screenshot. Jika menemukan bug, jangan sungkan untuk memberitahukannya di sini. saran dan masukan tentu sangat diperlukan.

[Husna QA]

—snip—

HOME PAGE

Pada halaman home ini mengusung tema card style, dimana untuk board dan child board akan dibungkus dalam card agar memudahkan user dalam melihat menu. Pada setiap card akan ada 1 post yang mendapatkan pembaruan terakhir kali dibuat. baik thread baru maupun reply baru.



—snip—

REPLY/WRITING BOX

Untuk pengetikan di dalam reply/writing box atau text editor juga sudah dilengkapi mendukung penggunaan mobile, ini juga akan memudahkan kita untuk mengetik ketika ingin melakukan pengetikan cukup panjang. diversi sebelumnya mungkin text akan terlihat kecil jika mempertahankan interface bawaan, dengan versi mobile dari tema ini, text akan lebih besar dengan standar text baru mengikuti tema yang terpasang.



—snip—

Mantap, saya sendiri tidak terlalu masalah kalau untuk tampilan versi desktop ketika membuka forum Bitcointalk, dan seringnya memang menggunakan PC ketika mengakses forum.
Sementara untuk membuka forum melalui browser di Smartphone hanya beberapa kali saja ketika memang sedang dalam kondisi di luar.
Salah satu kendalanya memang ada ketika proses reply/writing karena harus di zoom dan saya pribadi agak kesulitan terutama ketika harus ada postingan yang di-quote dan hanya ingin diambil sebagian teksnya saja.

Saya belum mencoba script diatas, hanya saja (kalau boleh) apakah bisa untuk fitur search standar forum diintegrasikan dengan fitur search nya BitList (https://bitlist.co/search)?

[masulum]

Mantap, saya sendiri tidak terlalu masalah kalau untuk tampilan versi desktop ketika membuka forum Bitcointalk, dan seringnya memang menggunakan PC ketika mengakses forum.
Sementara untuk membuka forum melalui browser di Smartphone hanya beberapa kali saja ketika memang sedang dalam kondisi di luar.
Salah satu kendalanya memang ada ketika proses reply/writing karena harus di zoom dan saya pribadi agak kesulitan terutama ketika harus ada postingan yang di-quote dan hanya ingin diambil sebagian teksnya saja.

Saya belum mencoba script diatas, hanya saja (kalau boleh) apakah bisa untuk fitur search standar forum diintegrasikan dengan fitur search nya BitList (https://bitlist.co/search)?

sama mas, saya juga sering make di laptop, cuma ketika pas diluar atau ketika malas buka laptop, kadang saya komen dengan menggunakan HP. saat itulah saya sering memikirkan andai forum ini diupdate ke versi bootstrap dan mobile friendly, mungkin untuk baca dengan fonts agak besaran dikit akan lebih nyaman untuk mengetik dan membaca, sedangkan kalau pakai pengaturan browser atau ponsel, ukuran teks gak balance menurut saya. jadi dengan script ini mungkin akan lebih natural size fontnya untuk dilihat di versi mobile.

seharusnya sih bisa untuk mengintegrasikan tombol search dari tema ini, namun untuk hasilnya akan diarahkan ke tab baru ke website bitlist. kecuali untuk melakukan pencarian ini tidak terkendala layanan capcay cloudflare, mungkin bisa juga tuh dimunculkan hasilnya di halaman ini. mungkin next time saya akan coba implementasikan, hari ini sedikit sibuk RL, karena bantu-bantu saudara hajatan

[Chikito]

Karena thread ini judulnya fokus ke mobile-friendly, saya masih bingung untuk pilihan browsernya, karena setahu saya untuk HP di mana browsernya agak beda dengan yang pc, apa bisa ditambah ekstensi kayak Tampermonkey? Karena kalau untuk tampilan full browser, khususnya Bitcointalk ini, kayak (Firefox atau brave, lupa browser tepatnya) sih bisa dibikin full screen, jadi tidak perlu geser ke kanan dan kiri lagi.

Soalnya pernah pengalaman mau install ekstensi gramarly di mobile lewat browser chrome, gak bisa.

[atookz]

POST OLEH PENGGUNA

Untuk post yang dibuat oleh user baik itu dalam OP maupun Reply, detail akun ada di atas konten yang ditulis oleh user. Ini mungkin akan sedikit membingungkan tapi menurut saya ini adalah yang paling efektif untuk menampilkan dan menempatkan semua informasinya. Selain itu, di versi ini juga ada penyempurnaan pada interface signature agar tidak terpotong walaupun halaman diubah ke versi mobile.

Wihh mantapp agan @masulum terimakasih sudah share. Jujur saya kadang juga buka forum ini lewat hp dan geser kiri kanan tiap baca post panjang lumayan males juga gan hehe. Buat yang sering akses lewat hp lumayan ngebantu juga sihh script kayak gini, klo menurut saya tampilannya juga jadi lebih rapi. Apalagi naruh info akun di atas post juga masuk akal gan, kayak info seperti trust, merit sama scorenya juga jadi kelihatan jelas. Buat nilai sebuat post penting menurut saya, apalagi di board yang rawan scam. Jujur saya malah nggak kepikiran buat naruh info akun di atas post  Oiyaa gan tampilang mobile ini sama nggak klo kita buka pake Tab? Atau tampilannya seperti yang preview dekstop gan ?

Karena thread ini judulnya fokus ke mobile-friendly, saya masih bingung untuk pilihan browsernya, karena setahu saya untuk HP di mana browsernya agak beda dengan yang pc, apa bisa ditambah ekstensi kayak Tampermonkey? Karena kalau untuk tampilan full browser, khususnya Bitcointalk ini, kayak (Firefox atau brave, lupa browser tepatnya) sih bisa dibikin full screen, jadi tidak perlu geser ke kanan dan kiri lagi.

Soalnya pernah pengalaman mau install ekstensi gramarly di mobile lewat browser chrome, gak bisa.

Buat agan @Chikito yang nanyain soal browser, chrome android setau saya emang gabisa ekstensi. Opsi yang masuk akal itu firefox android karena bisa tampermonke/violentmonkey klo nggak salah, atau bisa browser chromium yang support ekstensi kayak mises yang dipakai OP.

[masulum]

@Chikito utnuk browser yang digunakan adalah browser mobile yang mendukung ekstensi seperti yang disebutkan oleh @atookz, saya lebih condong menggunakan Mises, tapi tidak terbatas pada mises saja, jika brave mendukung ekstensi maka seharusnya juga bisa menginstall tampermonkey.
Beberapa yang support ekstensi di Android yang saya ketahui, selebihnya saya tidak pernah mencoba:
- Mises
- Firefox
- Lemur
@atookz untuk versi tablet harusnya juga sudah support mas, karena saya tidak memiliki tablet, jadi saya coba dengan menggunakan pengaturan preview pada browser sesuai dengan resolusi layar pada tablet. dan berikut adalah hasilnya ketika membuka thread



jika mas memiliki tablet dirumah, bisa cek dan informasikan seperti apa hasil realnya. 

[atookz]

jika mas memiliki tablet dirumah, bisa cek dan informasikan seperti apa hasil realnya.  

Saya udah coba semua nihh gan, di tablet sama hp hehe. Tapi fyi dulu yaa gan apa yang saya tulis dibawah bukan bermaksud menggurui atau buat cari2 kesalahan, karena saya sendiri juga belum tentu bisa buat script yang cukup detail kayak agan. Niat saya cuman jadi mata keduanya agan, buat ngeliat yang mungkin kurang pas atau bisa diperbaiki lagi dari sudut pandang saya. Jadii yaa cuman sedikit membantu agan aja buat ngembangin scriptnya, soalnya jujur saya tertarik  

TAMPILAN TAB

TAMPILAN MOBILE

Secara umum tampilannya mantapp gan saya suka, seperti yang saya bilang sebelumnya. Tapi ketika saya coba2 buat menjelajah forum pake script dari agan ada sedikit hal kecil yang saya sendiri juga gatau ini termasuk bug atau nggak, tapi jadi perhatian saya ketika saya lihat walaupun sekilas.

Nahh pertama ini gan, jadi ketika saya klik misal ke board ekonomi terus waktu proses masuk ke boardnya tampilannya sekilas kembali ke tampilan dasar forum ketika loading, baru waktu loading selesai kembali ke tampilan script. Contohnya seperti dibawah ini gan:

Selain itu waktu saya coba lewat Tab ketika saya scroll kebawah normal gan tapi ketika saya balik scroll ke atas muncul garis2nya gan seperti dibawah ini gan:

Nahhh seperti awal yang saya bilang karena saya mau coba karena tampilannya lebih rapi tapi ketika saya coba ada yang sedikit mengganjal buat saya gan seperti ada garis yang kelebihan, header warna yang jadi kurang rapi, dan beberapa code signature ada yang tidak sesuai dengan tampilan aslinya, untuk contohnya kayak gambar dibawah yaa gan:

Nahh kedepan, untuk Tab dan Hp saya bakalan pake script dari agan karena saya udah nggak perlu zoom2 lagi dan gaperlu scroll kiri kanan untuk baca tulisannya, jadi membantu saya gan. Adapun sedikit yang mengganjal saya rasa itu hanya kecil gan, mungkin misal agan mau perbarui, untuk bantu hal seperti garis, header warna sama terutama signature campaign bisa dirapikan lagi biar rapinya lebih maksimal lagi gan. Untuk keseluruhan tetep keren dan bermanfaat, terimakasih banyak gan

[masulum]

@atookz terima kasih sudah mencoba dan memberikan banyak masukan untuk tema ini.
saya akan mengurai beberapa untuk bug yang ditemukan.

1. bug pada glow effect dan penggunaan garis pada styling,

• untuk glow effect sudah diperbaiki dengan sedikit memperkecil tampilan text,
• untuk efek garis double, tidak dapat terhindarkan untuk memunculkan 2-3 baris garis (tergantung resolusi layar), karena text tersebut memang cukup panjang, sehingga dengan styling center maka akan memotong menjadi 2-3 baris.

2. Bug pada beberapa signature
ini juga sudah saya coba perbaiki di versi terbaru, versi 1.5.1


3. tampilan old sebelum baru
ini adalah glitch ketika tampilan lama belum tereplace oleh ekstensi, seharusnya ini adalah hal normal, namun nanti akan saya coba apakah bisa load ekstensi dulu baru halaman asli agar halaman asli tidak muncul walaupun hanya beberapa detik.

sebelumnya coba mas cek dulu versi 1.5.1 ini, saya juga sudah menambahkan fitur bitlist search atas saran dari @Husna QA namun saya masih menunggu izin dari tryninja untuk penggunaan popup dari hasil pencarian diperbolehkan atau tidak, kalau tidak diperbolehkan, itu akan dihilangkan.silakan test dulu dan fokus ke poun 1 dan 2 dulu. saya ada urusan mendadak dan mungkin tidak online sampai besok setelah ini.

https://greasyfork.org/en/scripts/601150-bitcointalk-modern-ui-mobile-friendly

[TedMosby]

Yang paling berasa dampaknya bagi saya sih reply/writing box mobile friendlynya sih, gak perlu scroll kanan kiri. Memang kayaknya agak tricky sih untuk forum sebesar Bitcointalk kalo mau ganti engine atau tema. Solusinya ya gini community project aja. Better UI gak menjamin better UX.

Halo semua, mungkin kita sudah terbiasa dengan forum SMF versi lama yang kesan halamannya kaku dan tidak mobile friendly, pada kesempatan kali ini, saya ingin mewujudkan keinginan pribadi saya untuk menggunakan forum dengan lebih mudah ketika online di ponsel.
[...]

BTW, berarti ini agan vibe coding kan ya? Inputannya berdasarkan agan maunya ini itu specific atau mau UI/UX bagus terus iterasi berkali2? Kebetulan saya juga ada kepikiran sebelumnya pengen ngeforum rasa Twitter (X) atau Threads soalnya saya sering mainan (mantau dan baca2) dua social media itu. At least tampilan thread dan reply jadi model2 kayak gitu. Cuma saya kepikiran untuk dijadiin read-only aja. Itupun gak jalan2 sampe sekarang

Kurang lebih kayak gini gan.




Tapi saya juga suruh ChatGPT analisa Bitcointalk, dan suruh dia suka2 ngedesign mobile versionnya, yg penting UI/UX nya lebih baik. Mentok dikasih begini. Kelihatan lebih bagus dari versi saya yg pengennya kayak X/Threads sih memang.