jbaysolutions/vue-grid-layout

Responsiveness

Open

#129 opened on Dec 20, 2017

View on GitHub
 (2 comments) (6 reactions) (1 assignee)JavaScript (6,777 stars) (1,436 forks)batch import
enhancementhelp wanted

Description

Hi.

I am considering to use your library as a base for building Dashboard. It looks really nice, api is fine and performance looks great also. Only thing that is missing for me is Possibility to use it on tablet/phone.

I think that one of ways to implement is with adding "size" prefix to items w, h, x, y, and then disabling dragging/resizing for particular size.

Like for mobile grid item definition cal look like: {"x":4,"y":8,"w":2,"h":4,"i":"14", "sm-x": 1. "sm-y": 1, "sm-w": 12, "sm-h": 4, "sm-draggable": false, "sm-resizable": false}

Contributor guide

Tech stack
vuejavascriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.js fundamentalsUnderstanding of grid layout concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
The issue requests responsive grid items with size specific properties (e.g., `sm x`, `sm w`). Start by examining the current grid item structure in the source code, likely in `grid item.vue` or similar. Check the drag and resize logic to understand how dimensions are currently handled. The suggestion involves adding breakpoint prefixes; consider implementing a responsive behavior similar to CSS grid or media queries. Look at the existing tests and documentation to ensure backward compatibility. The feature may be complex, so scope the work to a single breakpoint first.