Ideas for a compact city menu in portrait mode

[Cwpute]

Currently on my phone, this is what the city menu looks like: As much as i like lasagna, this is unusable 🤡

Here are some ideas to improve that menu so it fits on most screens:

⭐ Most easy one: only allow EITHER the left OR the right panel to show on screen at the same time. Hide the other one behind a button that switches between the two panels (or allow each of them to be hidden by a tap on their own button)

City production

1. Let the ressource list overflow to another line
2. Put that-list as a full bar at the top of the screen. The issue is that it might be mistaken for the civilization-wide production, coming from the map view… Can be avoided by puting the city name and butons at the top.

Expansion and new citizens Several ideas

1. Replace xx turns before expansion (xx🟣/xx🟣) by xx⏳ before expansion (xx/xx🟣) (same idea for population)
2. A culture-points-coloured loading bar with "Expansion" written inside, that provides the remaining turns and needed points once tapped (same idea for population)
3. A loading bar like it's used for the Great Persons
4. Let it overflow to the next line

Building queue Two complimentary solutions:

1. Allow building list titles to overflow in the next line, as far as to break words.
2. Use icons instead of category names: Buildings, Units, Wonders, National wonders… i'm sure they can be replaced with a small illustration.
3. For Science and Gold production, use instead Produces xx🟣/⏳

Production focus

1. Put all the focus options in a drop-down menu
2. Force focus options into a single row when the window takes too much space.

Religion panel

1. Remove the precision "major religion". When there is no religion simply say No religion
2. Like for the building queue, allow category names to overflow to the next line.

City name and buttons

1. Let it take the whole bottom part of the screen, or rather prevent other panels to take that space at the bottom
2. Same idea with the top of the screen, but as suggested in the City ressources section, this might not be a good idea.

Generaly speaking, most of these options will need the menu to be aware of the screen size and how much space each panel takes in that screen. And as you can see, many of my suggestions are simply "let it overflow", i think they are the and most easy options to implement!

[SomeTroglodyte]

I know I play Lasagna too... As I already said, the idea is out there.

• TabbedPager same as EmpireOverview uses
• Screen is * smallish stats row (that would make it waste a lot of space in landscape orientation, but still, it needs to stand out. Or - make it a two-row rectangle same height as current city name button and squeeze it in with the next row in landscape only) * below that City name + Capital indicator + size + garrison + left/right + WLTK decorations + maybe raze + maybe close * below that the TabbedPager fills the rest
• Now distribute on pages: * Map with tile info panel, locking and tile buying * Detailed info, citizen management (great people and specialists too or own page?) * Construction queue, available constructions and one copy of the selected building info panel. Available and rest probably as 2 columns? Where will the buy buttons go? * Specialists and GPP (inversing order as control goes Specialist->GPP) if not squeezed into page 2 * Religion own page or squeeze it in elsewhere * Built Buildings including one copy of the selected building info panel * Stats breakdown which is now a Popup behind that lone button top right * Close button same as as Civilopedia uses - here in the TabbedPager header or above * Optionally squeeze a 'hamburger menu' into top left for Annex raze rename and whatever management functions may come

The whole thing could be opt-in or even opt-in with only for portrait mode choice. EO should some day also have the same close button top right as Civilopedia (which still isn't based on TabbedPager).

[Cwpute]

This is a lot to take in at the same time 🤯 Could you provide a simple sketch to help visualize ?

[SomeTroglodyte]

Nah. Easier to try the code. Still needs a quiet day though.

[scheeseman486]

I'd love to see more work on the portrait mode. Turning it into something you could casually play minutes at a time with a single hand would deliver on what I always wanted out of a portable Civ.

[Cwpute]

If you have any practical ideas you already thought of, mock-ups or code contributions you want to provide, feel free to do so @scheeseman486 :)

[SomeTroglodyte]

... and that tabbed city screen idea isn't going well, all the current elements aren't made for reuse, every single one of them breaks when inserted into a different Scene3D context... Even little refactors to make elements better reuseable also break their rendering in the classic CityScreen... Try NewCityScreen if you're so inclined. (Open a city with shift key held to get the new) - some visuals below - but as of now still not really playable, and coding is frustrating to say the least.

https://github.com/yairm210/Unciv/assets/63000004/b957b768-93f5-4d11-866a-d7d77968e2ed

[Cwpute]

So cool to see this mockup in action ! great work @SomeTroglodyte

I'd suggest always having the map as a backdrop, like it usually is, but only interactible once you actually tap once on it, which would make the current visible pannel disapear. It will free up space in the pannel list and will provide some cohesion between the city pannels.

I don't know for you but usually my own thumbs are closer to the bottom of the screen that to the top when i'm in portrait mode, so i'd rather have the pannel list and the city name at the bottom.

And a minor change: i'd rather put the Stats pannel after the Building pannel as it's probably less used (?).

[scheeseman486]

If you have any practical ideas you already thought of, mock-ups or code contributions you want to provide, feel free to do so @scheeseman486 :)

I don't have much in the way of strong ideas. It's a pretty hard problem, Civ UIs are very information dense and cramming all that into a phone screen in a readable way is gonna be a challenge. I guess I'd like to see gestures for navigation instead of buttons for many things to reduce clutter, like a swipe up from the bottom to change build queues, long presses on units and cities to pop up context menus, that sort of thing.

[Cwpute]

Long presses and gestures are certainly a good way to go 👍

[Cwpute]

Taken from the referenced and closed issue #10606 , several suggestions for symbols in place of text or section names in the city menu. @yairm210 said they didn't ricognize any of it… surely their are not that bad are they ? 😥

[Cwpute]

Alternatives to the last one:

[scheeseman486]

I found myself trying to swipe away the notifications to get rid of the clutter, which got me thinking that maybe they should work more like phone notifications. Perhaps have it show the newest notification below the status bar with a pulldown tab to access the rest. Maybe with an indicator (star? some kind of coloured dot? background colour hinting?) to signify the fresh ones relevant to the current turn? Might be easy to accidentally trigger the OS-level notification panel given it's in roughly the same spot, though if you place the pull tab below the games status bar it could work.

Another thing I noticed is that you could likely align all the info along the top bar to properly use the real estate where the camera cutout is on most phones. It almost works as-is on my Pixel 6 already, but the camera covers enough of the text to look a little jank.

Should there be a issue thread for portrait UI improvements in general?

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 15 days.

[SeventhM]

I'll unstale with a comment (and try to pressure Trog into working on NewCityScreen). Not sure if it should have a "will not stale" label, though, given it's not obvious if it will be worked on, despite being an obvious "Portrait mode needs fixes" issue

[SomeTroglodyte]

try to pressure Trog into working

Look, I discovered that comment!

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 15 days.