Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in / Register
  • funkwhale funkwhale
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 379
    • Issues 379
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 18
    • Merge requests 18
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Container Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • funkwhalefunkwhale
  • funkwhalefunkwhale
  • Merge requests
  • !1318

Add width listener for responsive conditional rendering

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Ciarán Ainsworth requested to merge add-width-listener into develop May 20, 2021
  • Overview 2
  • Commits 1
  • Pipelines 3
  • Changes 1

As mentioned in #1470, we currently make use of CSS rules to hide elements when the screen is at different widths. The issue with this is that it means that all elements are loaded when the page starts up, but are then hidden and shown as the screen is resized. Since users are less likely to change their screen size, it makes more sense to use v-if conditional rendering to prevent elements being loaded at all depending on the size of the screen to reduce the initial page load.

This MR adds the width listener to pass to elements as a prop to be used in conditional rendering.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: add-width-listener