มาเพิ่มพื้นที่การทำงานใน Firebase Console ให้สะดวกมากขึ้นกันเถอะ — จอใหญ่ห้ามพลาด !
เมื่อ Firebase Console กลายมาเป็นหน้า Dashboard หลักในการทำงานเกี่ยวกับทุกๆ Feature ของ Firebase ทั้งหมด ปฏิเสธไม่ได้เลยว่าเราต้องทำงานกับหน้านี้มันบ่อยๆ ซึ่งบางครั้งขนาดหน้าต่างหรือเมนูที่เขาออกแบบมาให้ใช้นั้น มันไม่ตอบโจทย์ในการทำงานของเราในหลายๆครั้ง ถ้าหากตัวหนังสือหรือรายการต่างๆใน Project ของเรานั้นมีมากขึ้นหรือบางครั้งไปทำงานบนจอขนาดใหญ่ แต่หน้าต่างการทำงานไม่ได้ขยายตามไปด้วย
เช่นแบบนี้…
หรือแบบนี้…
โดยตามการใช้งานของผมก็จะมีปัญหามากที่สุด ตอนที่เรากำลังทดสอบเงื่อนไขการเขียนของข้อมูลต่างๆ บน Simulator นี้แหละ เพราะมันจะเหลือพื้นที่แค่นี้ (จริงๆนะ) น้อยไปไหมเธอ ?
ทีนี้มาดูวิธีแก้ปัญหากันบ้าง ก็คือ การใช้ Inspect Element และ ความรู้เกี่ยวกับ CSS นิดๆหน่อยๆ ถ้าหากใครที่ไม่ใช่ Front-End Developer เราก็พอจะแก้ปัญหานี้ได้อย่างง่ายๆแล้วหล่ะ
โดยหน้าที่จะนำมาทำเป็นตัวอย่างให้ดู ขออนุญาติเลือกเป็นหน้า Rules ของ Realtime Database แล้วกันนะครับเพราะเป็นหน้าที่น่าจะมีปัญหามากที่สุด
มาดูถึงขั้นตอนวิธีการทำ
1. คลิกขวาส่วนที่เป็นหน้าต่างบริเวณช่องเขียน Code แล้วเลือก Inspect
2. จะสังเกตุเห็น Tag ที่ชื่อว่า md-single-card
เนื่องจาก console.firebase.google.com ใช้ Front-End Framework คือ Angular และ Style คือ Angular Meterial ซึ่งจะทำเป็น Directives ไว้ให้พร้อมใช้เลย สำหรับใครที่สงสัยว่า Directives คืออะไร และ Tag ก็เป็นชื่อแปลกๆ ไม่ใช่ Div อะไรพวกนี้ก็ลองกด Link เข้าไปดูเพิ่มเติมเป็นความรู้ได้ครับ แต่หากให้อธิบายสั้นๆ ก็คือ การที่เราสร้าง Custom Tag ของ DOM ขึ้นมาเอง
3. เอาติ๊ก max-width ออก
สังเกตุที่ให้ดีว่าเรากำลังเลือก Tag md-single-grid ทีนี้เราจะเห็น Tab เมนู Styles อยู่ทางฝั่งขวา ให้เรา scroll เลื่อนลงมาจะเจอ variable max-width : 1280px ; อยู่ ให้เราเอาติ๊กถูกออกไป เพื่อที่จะให้ส่วนนี้ไม่ถูกจำกัดความกว้างมากสุดไว้ที่ 1280 pixel
หลังจากนั้นเลือก Tag md-card ด้านล่างและเอาติ๊กถูกที่ max-width: 936px; ออกไป
ต่อมาเราต้องโยกย้ายไปใน Tag ที่อยู่ชั้นลึกมากขึ้น ก็เลยแนะนำให้ใช้เมนู Select Element (Icon รูปลูกศรข้างๆ ซ้ายสุด ข้างๆ เมนู Element) (หรือ กด Command + Shift + C) จากนั้นเอา Mouse ไปชี้ดังรูป จะแสดง Tag div.fb-card-action-bar กดคลิก 1 ครั้ง
แต่เราจะไม่ได้ต้องการเปลี่ยน Style ของ Tag เมื่อกี้ที่เลือกมา ที่เราสนใจคือ Tag <md-card md-cell class=”firebase-rules fire-spinner-covered _md md-gmp-blue-theme”> ที่อยู่ข้างบนต่างหาก จากนั้นดูที่ Tab Styles ด้านขวา Scroll ลงมาเอาติ๊กถูก max-width: 1256px; ที่อยู่ใน class .multi-database-card .firebase-rules และ max-width:1176px; ที่อยู่ใน class .firebase-rules ออกไป
ผลลัพธ์คือเราจะได้พื้นที่การทำงานมากขึ้น หน้าจอขนาดไหนก็จะสามารถใช้ได้เต็มพื้นที่ แต่หากยังไม่สะใจต้องการมากกว่านี้อีก !! เราจะมาลบพวกเมนูที่ไม่เกี่ยวข้องกับการเขียน code ออกไปให้หมด
ท่าเดิมเลยคือไปใช้เมนู Select Element จิ้มเลือกมาสักปุ่มใน Navigation bar ด้านซ้าย
จากนั้นเลือก Tag fb-navbar ที่อยู่ด้านบน หลังจากนั้นคลิกขวาและเลือก Delete element
ท่าเดิมอีกแล้วไปจิ้มเลือกที่ Navigation bar ด้านบน
มองหา Tag fb-appbar ที่อยู่ด้านบน หลังจากนั้นคลิกขวาและเลือก Delete element
เหลือส่วนสุดท้าย จัดไปท่าประจำ
และมองหา Tag fb-feature-bar ที่อยู่ด้านบน หลังจากนั้นคลิกขวาและเลือก Delete element
สุดท้ายทั้งหน้าเราจะไม่เหลืออะไรเลย นอกจากส่วนของการเขียน Rules และ Simulator ซึ่งหากในหน้าอื่นๆ สำหรับใครที่ต้องการปรับแต่งอะไรเพิ่มเติมก็สามารถไปศึกษา AngularJS Material ต่อได้
หากเราต้องมาปรับแก้ Style ทุกครั้งที่ใช้ก็คงไม่ดีและเสียเวลาแน่ เราจึงสามารถไปสร้าง Extension ใน Browser ต่างๆ ได้เช่น Safari Extension , Chrome Extension หรือ Firefox Extension ไว้ในโอกาศหน้าเร็วๆนี้ ผมจะทำให้ทุกคนได้ Install ไปใช้งานกันนะครับ
ยังไงถ้าหลงเข้ามาอ่านและชื่นชอบก็ฝากกด Clap เพื่อเป็นกำลังใจให้ผู้เขียน และกด Follow เพื่อรออ่านบทความใหม่ๆได้เลยครับผม
