Skip to content

Comments

feature/issue-198/responsive-ui#223

Merged
GerardChabaBristol merged 26 commits intodevfrom
feature/issue-198/responsive-ui
Mar 28, 2025
Merged

feature/issue-198/responsive-ui#223
GerardChabaBristol merged 26 commits intodevfrom
feature/issue-198/responsive-ui

Conversation

@GerardChabaBristol
Copy link
Collaborator

@GerardChabaBristol GerardChabaBristol commented Mar 19, 2025 •
edited
Loading

Issue(s):

#198

Type of change:

  • New feature

Description:

Our UI is now optimized for all device sizes, including mobile, tablets, and laptops.

Additional context:

  • We locked landscape mode for mobile devices due to time availability and complications.
  • @yi23484 has added some unrelated documents to add to our documentation in this PR.

Testing instructions:

Run the solution on this branch, open it in your browser and open DevTools (in Chrome). You can then test how it looks on various screen sizes (screenshot below).

image

GerardChabaBristol and others added 10 commits March 13, 2025 14:50
@GerardChabaBristol @RainBOY-ZZX
feature: create responsive.css
3f02cde 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: import responsive.css into App.vue
5bbe50b 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: fix phone portrait mode
ec127aa 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: history sidebar is collapsed initially
11af827 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@RainBOY-ZZX @GerardChabaBristol
feature: Update responsive.css
353751c 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@RainBOY-ZZX @GerardChabaBristol
feature: Update main.js
69bae3c 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: Removed styles for laptop and tablets (useless)
ee9e926 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: Simplify responsive.css
60a6bbc 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: removed 'scoped' from styles in MainContent
12dd546 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
feature: update responsive.css
ff4e4af 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol GerardChabaBristol added Frontend Issue relates to frontend code. Final Issue relates to Final release. labels Mar 19, 2025
@GerardChabaBristol GerardChabaBristol added this to the Final Release milestone Mar 19, 2025
@GerardChabaBristol GerardChabaBristol linked an issue Mar 19, 2025 that may be closed by this pull request
[Feature] Responsive UI #198
Closed
1 task
RainBOY-ZZX and others added 8 commits March 19, 2025 10:33
@RainBOY-ZZX
Update HistorySidebar.vue
bf5a817
@RainBOY-ZZX
Update MainContent.vue
6d9fe1d
@RainBOY-ZZX
Update SettingSidebar.vue
117c3ef
@GerardChabaBristol
Merge branch 'dev' into feature/issue-198/responsive-ui
7bbf4cf
@RainBOY-ZZX @GerardChabaBristol
feature: Update responsive.css
09ba9a3 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@RainBOY-ZZX @GerardChabaBristol
feature: Update index.html
e7c5d34 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@RainBOY-ZZX @GerardChabaBristol
feature: Update responsive.css
285c602 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@GerardChabaBristol
feature: update HistorySidebar.spec.js
694f5b2 
Update the HistorySidebar unit test so frontend CI can pass.
vladislav-k1
vladislav-k1 previously approved these changes Mar 21, 2025
View reviewed changes
Copy link
Contributor

@vladislav-k1 vladislav-k1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Chat bubbles should take 100% of available width on smaller screens.

@GerardChabaBristol @RainBOY-ZZX
feature: aligned messages in portrait mode
d7d07b1 
Messages are now aligned and take up all the available chat space.

Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol
Copy link
Collaborator Author

GerardChabaBristol commented Mar 22, 2025

image

Chat bubbles should take 100% of available width on smaller screens.

This has been fixed now. We're still working on making the history sidebar open fully when toggled, and then we will be ready to merge.

@yi23484 yi23484 force-pushed the feature/issue-198/responsive-ui branch 2 times, most recently from b0e9762 to 4638c96 Compare March 23, 2025 15:48
@RainBOY-ZZX @GerardChabaBristol
feature: Make Historysidebar 100% wide
eba8b69 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@RainBOY-ZZX RainBOY-ZZX force-pushed the feature/issue-198/responsive-ui branch from d32655e to eba8b69 Compare March 25, 2025 17:34
@RainBOY-ZZX @GerardChabaBristol
Feature: Update HistorySidebar.vue
0fd67f5 
Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
@GerardChabaBristol
Copy link
Collaborator Author

GerardChabaBristol commented Mar 26, 2025

image
Chat bubbles should take 100% of available width on smaller screens.

This has been fixed now. We're still working on making the history sidebar open fully when toggled, and then we will be ready to merge.

The last issue has been solved, and the history sidebar now opens at 100% width.

@GerardChabaBristol GerardChabaBristol requested review from Siyuan106 and vladislav-k1 and removed request for yi23484 March 26, 2025 10:17
Siyuan106
Siyuan106 reviewed Mar 26, 2025
View reviewed changes
Copy link
Contributor

@Siyuan106 Siyuan106 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you can move the history sidebar button to the top left would be better when the sidebar extended.

GerardChabaBristol and others added 2 commits March 26, 2025 11:23
@GerardChabaBristol @RainBOY-ZZX
bugfix: fix sidebar button's position
3dee08b 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol @RainBOY-ZZX
bugfix: adjust button positioning for laptop
816fbcd 
Co-authored-by: RainBOY-ZZX <kh23199@bristol.ac.uk>
@GerardChabaBristol
Copy link
Collaborator Author

GerardChabaBristol commented Mar 28, 2025

If you can move the history sidebar button to the top left would be better when the sidebar extended.

Done, thanks for noting.

Siyuan106
Siyuan106 approved these changes Mar 28, 2025
View reviewed changes
Copy link
Contributor

@Siyuan106 Siyuan106 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM！

vladislav-k1
vladislav-k1 approved these changes Mar 28, 2025
View reviewed changes
Copy link
Contributor

@vladislav-k1 vladislav-k1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The UI looks great.

@GerardChabaBristol GerardChabaBristol merged commit 5f4dc37 into dev Mar 28, 2025
1 of 2 checks passed
@GerardChabaBristol GerardChabaBristol deleted the feature/issue-198/responsive-ui branch March 28, 2025 12:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@vladislav-k1 vladislav-k1 vladislav-k1 approved these changes

@Siyuan106 Siyuan106 Awaiting requested review from Siyuan106

Assignees

@GerardChabaBristol GerardChabaBristol

@RainBOY-ZZX RainBOY-ZZX

Labels

Final Issue relates to Final release. Frontend Issue relates to frontend code.

Projects

None yet

Milestone

Final Release

Development

Successfully merging this pull request may close these issues.

[Feature] Responsive UI

5 participants

@GerardChabaBristol @vladislav-k1 @Siyuan106 @RainBOY-ZZX @yi23484