[PR #2544] [CLOSED] refactor: revamped collection panel UI for mobile #3888

New issue

Closed

opened 2026-03-17 01:27:58 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:27:58 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2544
Author: @joeljstephen
Created: 7/31/2022
Status: ❌ Closed

Base: main ← Head: refactor/mobile-sidebar-ui

📝 Commits (7)

dd66d80 refactor: sidebar for mobile now appears as a full page
e504de4 refactor: reduced horizontal width for smart modals
e44eb33 refactor: revamped collection panel for mobile
cdb9abb refactor: secondary panel hidden in mobile view when no response present
fe70476 refactor: removed loading variable as a condition
7b6ec03 refactor: hide secondary panel on mobile for graphql and realtime
120e3dd refactor: removed duplicate secondary property

📊 Changes

9 files changed (+123 additions, -14 deletions)

View changed files

📝 packages/hoppscotch-app/components/app/PaneLayout.vue (+70 -0)
📝 packages/hoppscotch-app/components/app/SlideOver.vue (+1 -1)
📝 packages/hoppscotch-app/components/smart/Modal.vue (+1 -1)
📝 packages/hoppscotch-app/pages/graphql.vue (+8 -4)
📝 packages/hoppscotch-app/pages/index.vue (+12 -1)
📝 packages/hoppscotch-app/pages/realtime/mqtt.vue (+2 -1)
📝 packages/hoppscotch-app/pages/realtime/socketio.vue (+9 -2)
📝 packages/hoppscotch-app/pages/realtime/sse.vue (+9 -2)
📝 packages/hoppscotch-app/pages/realtime/websocket.vue (+11 -2)

📄 Description

Description

Implemented a new collection panel layout for mobile, instead of using a 3rd pane to display collections.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2544 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 7/31/2022 **Status:** ❌ Closed **Base:** `main` ← **Head:** `refactor/mobile-sidebar-ui` --- ### 📝 Commits (7) - [`dd66d80`](https://github.com/hoppscotch/hoppscotch/commit/dd66d80d2e494b0ed7a9fa78e3630d4fbbf016bf) refactor: sidebar for mobile now appears as a full page - [`e504de4`](https://github.com/hoppscotch/hoppscotch/commit/e504de4bd7dba246f7b66ae9fd3a8290706a5a75) refactor: reduced horizontal width for smart modals - [`e44eb33`](https://github.com/hoppscotch/hoppscotch/commit/e44eb33a75677f8e34d1e52ec231b6b5ab9eb9bf) refactor: revamped collection panel for mobile - [`cdb9abb`](https://github.com/hoppscotch/hoppscotch/commit/cdb9abb758737f87763c69f8372ecaea98e872c1) refactor: secondary panel hidden in mobile view when no response present - [`fe70476`](https://github.com/hoppscotch/hoppscotch/commit/fe7047690b1e82abcfb261637250e6393242f389) refactor: removed loading variable as a condition - [`7b6ec03`](https://github.com/hoppscotch/hoppscotch/commit/7b6ec03296d0a7c85b90645f4b552719cd22d030) refactor: hide secondary panel on mobile for graphql and realtime - [`120e3dd`](https://github.com/hoppscotch/hoppscotch/commit/120e3dd58e044bdfb5a1e26616172702a0b22d99) refactor: removed duplicate secondary property ### 📊 Changes **9 files changed** (+123 additions, -14 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-app/components/app/PaneLayout.vue` (+70 -0) 📝 `packages/hoppscotch-app/components/app/SlideOver.vue` (+1 -1) 📝 `packages/hoppscotch-app/components/smart/Modal.vue` (+1 -1) 📝 `packages/hoppscotch-app/pages/graphql.vue` (+8 -4) 📝 `packages/hoppscotch-app/pages/index.vue` (+12 -1) 📝 `packages/hoppscotch-app/pages/realtime/mqtt.vue` (+2 -1) 📝 `packages/hoppscotch-app/pages/realtime/socketio.vue` (+9 -2) 📝 `packages/hoppscotch-app/pages/realtime/sse.vue` (+9 -2) 📝 `packages/hoppscotch-app/pages/realtime/websocket.vue` (+11 -2) </details> ### 📄 Description  ### Description  Implemented a new collection panel layout for mobile, instead of using a 3rd pane to display collections. ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>