Yearly planner: grid alignment/functions?

I’m putting together a planner for 2021, and I’m arranging cards in a grid-like fashion in some areas. It would be cool if there were some tools to help me keep things aligned.

Maybe something like that feature in editors where as you drag an object, it can snap to align to something else on the canvas? Or, the existing alignment buttons, but only touch the x value or y value, and not both.

Also, having a long list of those dates in a stack makes box selection more desirable too :slight_smile:

3 Likes

Also a general “calendar” for my team:

5 Likes

more alignment buttons is something I certainly want to add, added to roadmap. As well as box select :slight_smile:

4 Likes

Looking at this I thought it would be so helpful to set grid lines for a space if I wanted to (much like photoshop or illustrator). And using a keyboard short I could toggle the lines on or off. And if the space has set grid lines, I could possibly choose the option to snap the cards to the grid lines. And maybe eventually the person who creates the space can decide how far apart the grid lines are, ex: vertical 100px (or 1 block for some common easy to understand notation), horizontal 400 (4 blocks) px etc).

I am discovering very quickly that as random as my thoughts are I like them aligned visually. So I am spending an exorbitant amount of time making them look like a straight chain or cards by going in to align them to the top or to the left each time haha.

3 Likes

reading between the lines ^^, it sounds like the least twiddly option might be taking a lot longer and building real grid snapping like features :thinking:

Added the note to the roadmap, something I’ll investigate in the future

4 Likes

yea, that would be dope. right now it is a little fiddly and you have to get creative when trying to align things (like, first align these cards vertically, then carefully select this row of cards to align horizontally). and as soon as you want to edit something, you end up with one card that is not quite aligned and live with it :wink:

3 Likes

oh I just remembered an easier to build alternative I was considering, let me know if this would work:

If you hold shift while dragging, constrain card movement to either the x or y axis. This allows you to move a card perfectly straight up and down.

You could use this by selecting some cards and clicking the ‘vertical align’ button, then shift-drag the cards to move them along the same plane

3 Likes

That would definitely be useful. It would still be nice eventually to be able to have a perfectly aligned grid, but this will at least ensure one axis is aligned :slight_smile:

1 Like

That would be helpful!

2 Likes

this would be very helpful!! example of how i’d use it: i would love to align the 2nd column along the x axis but keep the y axis as is so that it remains spaced out nicely

3 Likes

i’ve been thinking of ways to tidy up my space and i found that aligning by the center of the cards looks the best for me and i can easily read through and find what i am looking for when i have a long column of cards.

so i think it would be neat to have more options for aligning, and i made a quick sketch on excalidraw to explain

then i noticed the alignment tools on excalidraw look very similar to kinopio’s

excalidraw align tools

i would love to have these alignment options to tidy up my space!

4 Likes
  • would shift dragging replace the need for this or would you need both?
  • if both, those extra ‘advanced’ alignment options would probably need to be buried one extra level deep. e.g. select cards -> click a 'more alignment options' icon -> click your alignment button

Added the idea to the roadmap next to shift-drag support for consideration in the future

2 Likes

I think i would like to use both, but aligning options more than shift + dragging.

and about the alignment options, i understand you want to keep things minimal and easy to use but please consider which would be ideal with your design:
6 options that are self explanatory with no text like the 6 on the left
or more options hidden behind a click that maybe used repeatedly.

1 Like

good feedback, if i did nest things behind a click it would be sticky: i.e. if you decide you want to see all the options , then the next time you select things all the alignment options will be shown to you with the need to click again

1 Like

For the use case of creating a grid, the shift-dragging-along-one-axis wouldn’t get me all the way.

I would want a way to space these cards evenly:

I could accomplish that with the alignment buttons that @xea noted (in fact, I used excalidraw for these mockups :stuck_out_tongue:).

Related, but also intersecting with a separate important topic: I’d like a way to move cards with the keyboard. This would enable a way to be precise, and also make Kinopio more accessible. It doesn’t seem like there is a way to select cards with the keyboard, right? I can focus on cards and edit or delete them. But if I could select them, it would then open up the context menu where I could do more like add a frame, add checklist, or move via arrow keys.

2 Likes

makes sense officially slotted this into the roadmap

no way to select cards yet, wonder if shift+arrows would make sense for that?

Shift-arrow keys definitely is familiar, for example, selecting Excel cells. But it doesn’t directly apply currently because when focusing a card, it is not already selected:

image

I could see holding shift-down would select these two cards. But what if I just want to select the first card?

to include the first one you’d have to first focus on a card? so if you focused on the top card with arrow keys, etc. then hit shift-down that’d result in both being selected I would imagine

Right, so I was asking how you only select the 10× more simple card (which is focused but not selected).

1 Like

i’ll have to think about it. may possibly just be a limitation of keyboard multiselect