2019–04–15 Update Log
More Mobile Friendly, Relation Map UI Tweaks
One of Wriget’s wish list items is a mobile app, so users don’t have to rely on internet connection, a browser, or me not forgetting to include adaptability into our UI design. However, until then, mobile adaptability is still a thing and I’m often put into situations where I have to show off Wriget on my phone anyway.
But speaking of UI design, the character relationship page layout was the result of questionable choices which validates my hypothesis that maybe I don’t have imposture syndrome. I really do just suck.
This round of updates address those problems.
Mobile Friendly ++
Dashboard Navigation
BEFORE: On the dashboard, the side-navigation was showing at all times. Projects shrink and cump together in a single row.
(No image available)
AFTER: When the screen size shrinks enough, the navigation is hidden and a “menu” icon appears in the toolbar. If you click this, navigation pops up. Each project only takes up one per row, so you have a column instead of a blobby mass.
Buttons
BEFORE: On several pages (eg. project dashboard, character pages, etc.) you have basic search, add, and extra buttons. But alas, on mobile, these got all squished together. Does the “Help” icon really need to be there? It’s not actually being used.
AFTER: These are now replaced with buttons. The “search” button by default opens Advanced search. The help icon is hidden.
Dialogs
BEFORE: Dialogs are overlaps. Too much info and crumping for small space.
AFTER: Dialogs are now full screen. To do now that I’m looking at this image: change the toolbar in the set dialog to have the same buttons as the rest of the app.
Relation Map Page
BEFORE: The Relation Map UI page was just not mobile friendly at all. You have weird things going on, the chart was not helping. Sometimes the page would actually shrink.
AFTER: The chart will not appear on mobile. I may change this decision in the future, but as it’s a relationship chart that’s bound to grow, a tiny window is not the best place to view it. I’d need to implement some sort of zoom-in/out feature.
Each pane in the web app, now only appears one at a time, and you need to click on a character to go into the next pane.
Character Relationship UI Tweaks
On the more technical side of things, I refactored the relationship map module and page structure I had over-enthusiastically split into components. Architecture wise, it was causing way too much confusion. I couldn’t what file I put things in, there were several anti-patterns that went against how I was doing the rest of the app, the structure did not easily allow users to add relations directly the character profile pages (which is why you couldn’t before).
Pane Style Rearrangement
BEFORE: I put the character filter above the selected character, and when you select a character, a new row pops up. Also there were some alignment issues due to my blatant refusal to use Vuetify v-layout and code css myself.
AFTER: Selected characters are now above the filter and main character lists. Alignment issues fixed.
Full collapse
BEFORE: You could not collapse the character pane completely, which makes it hard to view the chart in full.
AFTER: Now you can. Click on the “character” icon on the top-left to bring the panes back.
Mobile Friendly
As mentioned, the main Relation Map page is now more mobile friendly. See my comments above.
Add Relationships on Character Profile Pages
Now you do not need to go to the relationship map page to add a new character relationship. You can do it directly from the character’s profile page.
When you add a relationship, it will be appended at the bottom of the relationship chart as a one-way connection (default on the relationship map as well). You can then add labels and description as needed.
