semi/signal

I’ve only begun delving into doing layouts with flexbox (CSS Flexible Box Layout), but one immediate use case is vertical centering, which has been a pain point in web design since the transition away from table-based layouts.

HTML

CSS

I’ve been working on a fairly major update to hotspotdot, both the web client and the webOS mobile app.

First, a new name, accompanied by a new logo.
hotspotdot is now dotspott:

This should (hopefully) put an end to any confusion that the app has anything to do with wi-fi hotspots. It also allows for a much nicer URL as I was able to get dotspott.com (much more elegant compared to the previous, my.hotspotdot.net).

There’s some minor style changes to the index page. Also, some additional code for some minor improves in user experience, such as auto-focus on input fields when a dialog comes up.

The most significant changes are to the main interface. There’s a new look and you’ll notice support for uploading photos. Also, there’s now a 2-column layout; this avoid the issue of having to keep scrolling down the page to show a new location on the map (which was at the top of the page). The map and header areas are fixed (position: fixed), so as you scroll, only the list of locations on the left will move. I debated whether to do this or to contain the list of locations in a div with overflow:auto or overflow:scroll, so the list would have its own scrollbar, and you wouldn’t scroll the entire page to move up and down the list. I have somewhat of a dislike for both solutions, although one was necessary. I opted for the position:fixed approach because manipulating scrollbars within a page is impossible on a touchscreen device (perhaps we’re at the time where we’ll see the end of overflow:auto and overflow:scroll, along with :hover)

The updated webOS app is almost done. I’m just doing some last minute testing before I put it up in the app store, so I’ll have some info and screenshots up soon.

Edit: h/t to Shifting Pixel for the cool Smart Image Resizer; I really wasn’t feeling up to writing image resizing and caching routines, and this little library was a perfect solution.

Issue 1: Layout of anchored, non-visible control

I had a custom subcontrol anchored left and right within a parent control. The subcontrol was not visible and would only appear when I called a function to make it visible. The parent control had a default width and height, of course, but would be resized as necessary when placed on a form. With Mono, after being placed on a form, the anchoring seems to take effect based on the default dimensions of the control, not the dimensions of it in the form. This, of course, results in the subcontrol being an incorrect size and position.

I haven’t found a solution to this issue as yet.

Issue 2: Repaint after SuspendLayout/ResumeLayout

When adding a number of custom subcontrols (Dock=Top) to a Panel, I called SuspendLayout() before adding them, and called ResumeLayout() after. The height of the controls are adjusted right after they are added to automatically fit a word-wrapped block of text. On Mono, the Panel is never repainted (meaning the custom controls are never repainted either, and its text is not shown).

Calling Refresh() or Invalidate() after ResumeLayout() solves this issue.