[PR #2756] [CLOSED] refactor: revamped collection panel UI for mobile #4042

New issue

Closed

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

kerem commented

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

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2756
Author: @joeljstephen
Created: 10/9/2022
Status: ❌ Closed

Base: main ← Head: refactor/mobile-sidebar

📝 Commits (10+)

e38cf1f refactor: hide secondary panel when not needed and redesigned mobile sidebar
1907ac8 chore: minor ui improvements
0e9694a refactor: resolve rebase conflicts
50fbf36 refactor: fixed empty layout on all pages
ebbd82e refactor: hide secondary panel when not needed and redesigned mobile sidebar
0c520e9 refactor: resolve rebase conflicts
de7fdcb chore: minor improvements
409d43d refactor: fixed empty layouts and minor bugs
4bca57a chore: updated tech stack list
326a438 Create deploy-preview-netlify.yml

📊 Changes

14 files changed (+113 additions, -25 deletions)

View changed files

➕ .github/workflows/deploy-preview-netlify.yml (+49 -0)
📝 README.md (+1 -1)
📝 packages/hoppscotch-app/src/components.d.ts (+0 -1)
📝 packages/hoppscotch-app/src/components/app/Options.vue (+1 -0)
📝 packages/hoppscotch-app/src/components/app/PaneLayout.vue (+26 -3)
📝 packages/hoppscotch-app/src/components/graphql/RequestOptions.vue (+0 -1)
📝 packages/hoppscotch-app/src/components/smart/Modal.vue (+1 -1)
📝 packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts (+3 -3)
📝 packages/hoppscotch-app/src/pages/graphql.vue (+7 -4)
📝 packages/hoppscotch-app/src/pages/index.vue (+11 -2)
📝 packages/hoppscotch-app/src/pages/realtime/mqtt.vue (+3 -2)
📝 packages/hoppscotch-app/src/pages/realtime/socketio.vue (+3 -2)
📝 packages/hoppscotch-app/src/pages/realtime/sse.vue (+4 -3)
📝 packages/hoppscotch-app/src/pages/realtime/websocket.vue (+4 -2)

📄 Description

Description

Redesigned the collection panel for mobile where it slides into view and occupies the full height of the screen, instead of using a 3rd pane to display the collections.

The secondary pane on mobile for all the different pages are now hidden when it is not required and appears whenever needed.

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/2756 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 10/9/2022 **Status:** ❌ Closed **Base:** `main` ← **Head:** `refactor/mobile-sidebar` --- ### 📝 Commits (10+) - [`e38cf1f`](https://github.com/hoppscotch/hoppscotch/commit/e38cf1f70f0a4b417d1072e40fb11b21b91fc155) refactor: hide secondary panel when not needed and redesigned mobile sidebar - [`1907ac8`](https://github.com/hoppscotch/hoppscotch/commit/1907ac8dd32758db396023261ad6b1d253b782e4) chore: minor ui improvements - [`0e9694a`](https://github.com/hoppscotch/hoppscotch/commit/0e9694a0d6249e8257932e4e3be0be236f5a7929) refactor: resolve rebase conflicts - [`50fbf36`](https://github.com/hoppscotch/hoppscotch/commit/50fbf363aa4c463a90fb8c70f157e09694810b91) refactor: fixed empty layout on all pages - [`ebbd82e`](https://github.com/hoppscotch/hoppscotch/commit/ebbd82ea11a2a539147f4d47f5bfc108953dffa5) refactor: hide secondary panel when not needed and redesigned mobile sidebar - [`0c520e9`](https://github.com/hoppscotch/hoppscotch/commit/0c520e9a952ba8538de395b41f65907e469ed152) refactor: resolve rebase conflicts - [`de7fdcb`](https://github.com/hoppscotch/hoppscotch/commit/de7fdcb58b600641ce8652bd685d446db827cd58) chore: minor improvements - [`409d43d`](https://github.com/hoppscotch/hoppscotch/commit/409d43d9ae626147ef1d700946dbd9c6449aa5f3) refactor: fixed empty layouts and minor bugs - [`4bca57a`](https://github.com/hoppscotch/hoppscotch/commit/4bca57a20dc599a9f7691ef5f0061a8a6dc17fc9) chore: updated tech stack list - [`326a438`](https://github.com/hoppscotch/hoppscotch/commit/326a43820be93927cde313e08f01a92fdeafbafc) Create deploy-preview-netlify.yml ### 📊 Changes **14 files changed** (+113 additions, -25 deletions) <details> <summary>View changed files</summary> ➕ `.github/workflows/deploy-preview-netlify.yml` (+49 -0) 📝 `README.md` (+1 -1) 📝 `packages/hoppscotch-app/src/components.d.ts` (+0 -1) 📝 `packages/hoppscotch-app/src/components/app/Options.vue` (+1 -0) 📝 `packages/hoppscotch-app/src/components/app/PaneLayout.vue` (+26 -3) 📝 `packages/hoppscotch-app/src/components/graphql/RequestOptions.vue` (+0 -1) 📝 `packages/hoppscotch-app/src/components/smart/Modal.vue` (+1 -1) 📝 `packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts` (+3 -3) 📝 `packages/hoppscotch-app/src/pages/graphql.vue` (+7 -4) 📝 `packages/hoppscotch-app/src/pages/index.vue` (+11 -2) 📝 `packages/hoppscotch-app/src/pages/realtime/mqtt.vue` (+3 -2) 📝 `packages/hoppscotch-app/src/pages/realtime/socketio.vue` (+3 -2) 📝 `packages/hoppscotch-app/src/pages/realtime/sse.vue` (+4 -3) 📝 `packages/hoppscotch-app/src/pages/realtime/websocket.vue` (+4 -2) </details> ### 📄 Description  ### Description  Redesigned the collection panel for mobile where it slides into view and occupies the full height of the screen, instead of using a 3rd pane to display the collections. The secondary pane on mobile for all the different pages are now hidden when it is not required and appears whenever needed. ### 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>