Skip to content

Responsive layout for the concept page#1742

Merged
osma merged 3 commits intomainfrom
issue1739-concept-page-responsive-half-width
Jan 29, 2025
Merged

Responsive layout for the concept page#1742
osma merged 3 commits intomainfrom
issue1739-concept-page-responsive-half-width

Conversation

@osma
Copy link
Member

@osma osma commented Jan 23, 2025 •
edited
Loading

Reasons for creating this PR

The concept page renders badly in a narrow browser window - see #1739.
This PR contains fixes to make it more responsive. The main target is to make the concept page render sensibly in a half-width browser window, typically around 900px wide.

Here's how this looks currently in a 900px wide Firefox window:

image

Link to relevant issue(s), if any

Description of the changes in this PR

  • avoid grey margins on the sides that take up extra space
  • make property/value display on the concept page responsive (it will switch to another layout at the lg breakpoint i.e. below 992px)

Known problems or uncertainties in this PR

n/a

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@osma osma added this to the 3.0 milestone Jan 23, 2025
@osma osma self-assigned this Jan 23, 2025
@osma osma marked this pull request as draft January 23, 2025 13:08
@codecov
Copy link

codecov bot commented Jan 23, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.94%. Comparing base (fd78acb) to head (c5692a6).
Report is 1 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff            @@
##               main    #1742   +/-   ##
=========================================
  Coverage     70.94%   70.94%           
  Complexity     1650     1650           
=========================================
  Files            33       33           
  Lines          4330     4330           
=========================================
  Hits           3072     3072           
  Misses         1258     1258

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 28, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@osma osma marked this pull request as ready for review January 28, 2025 14:26
@miguelvaara miguelvaara self-requested a review January 29, 2025 11:13
miguelvaara
miguelvaara approved these changes Jan 29, 2025
View reviewed changes
Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

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

Works well, great job! I think it can be merged.

@osma osma merged commit 1a622cc into main Jan 29, 2025
11 checks passed
@osma osma deleted the issue1739-concept-page-responsive-half-width branch January 29, 2025 11:49
@osma osma changed the title [WIP] Responsive layout for the concept page Responsive layout for the concept page Jan 29, 2025
@osma osma mentioned this pull request Jan 29, 2025
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@miguelvaara miguelvaara miguelvaara approved these changes

Assignees

@osma osma

Labels

enhancement

Projects

None yet

Milestone

3.0-alpha.1

Development

Successfully merging this pull request may close these issues.

Check responsiveness of the concept page with half-width browser window

2 participants

@osma @miguelvaara