Replies: 9 comments 14 replies
-
|
From Gazook89:
|
Beta Was this translation helpful? Give feedback.
-
|
We should consider and look into a zoom function for the preview window, adding that functionality to the UI. I've done some work around that in a very wonky CSS way (resizing The utility, for me at least, is being able to zoom out just enough to screenshot an entire page. Or, to view a couple pages at a time (for which flexbox pages are handy, but that's a different thing). Perhaps there simply needs to be a "fit page to preview window" option. |
Beta Was this translation helpful? Give feedback.
-
Mock-up 1: Basic MenuClick to show images
Just a quick option for a drop down menu in the Editing page, and an option for the Share page (Share menu was added later with some extra flourishes). Matches the styling of the 'recent brews' menu. I think it should be a "on click" action, rather than hover...and the recent brews should use onclick as well. Placeholder icons used...could go without them as well. Pro's:
Cons:
|
Beta Was this translation helpful? Give feedback.
-
|
In the application-space, the current left-most items should get priority (Naturalcrit, Homebrewery, version, help out) .. but in editing-space the editing functions should likely get priority .. and those app-items be relegated to a drop down menu, freeing up space. Not sure what this would look like for the |
Beta Was this translation helpful? Give feedback.
-
|
I just added a "share page" menu as an edit to my post, same style with a couple of flourishes that better match the existing recent brews menu. I also changed the original "Gazook89" at the bottom of the menu to "account" which I think is more descriptive. This allows for the Share page menu to show a "Gazook89's Profile" menu option which would take a user to the brew author's page where they could view published brews. One more 'con' is that the "Brew Info" option would likely need to open a dialog box...in my mind, it is where you would enter Title, choose tags, set published/private, etc. From the share screen you would be able to read the description here. To go further, I think the Title and Description could pop up on the Share screen as a dismissable 'notice'. |
Beta Was this translation helpful? Give feedback.
-
|
If we can pull together a comprehensive list of all the options we can do some card sort exercises. |
Beta Was this translation helpful? Give feedback.
-
|
You guys likely already have ideas on how to do a card sort, but some quick googling for myself turned up https://kardsort.com/ as a free and simple option. I just ran their demo and seems simple enough. It could be posted in the subreddit and maybe r/web_design or similar for more varied input. |
Beta Was this translation helpful? Give feedback.
-
Mock-up 2: Floating ButtonsClick to show image 
Buttons along the side. Either in a strictly vertical format, or hidden groupings that expand out when their grouping button is clicked (grouping buttons not picture here). One set has some colors just to see what it looks like...could be used as 'hover' or 'active' colors for the buttons. The text labels were created just to provide context in this discussion, but on second look maybe they could be useful in production in the vertical format....slide the text out from behind the buttons as you hover? Note, these are just mockups, not coded at all. EDIT: |
Beta Was this translation helpful? Give feedback.
-
|
For the record, the current state of the nav bar is as below: Home:
New:
Edit:
Share:
User:
Print:
Source:
|
Beta Was this translation helpful? Give feedback.
-
|
So another way of looking at is as a table...maybe this is overkill, but helps me. I listed the pages of the site, and the links needed, and then x'd for each link need for each page. I did this in a Google Sheet, and added a couple of comments on cells....I hate to dilute conversation into yet another platform, but feel free to comment on it there or just here. click to show table
|
Beta Was this translation helpful? Give feedback.
-
Mock-up 3: Two Full Width NavBarsClick to show image
Another option, expanding the Snippet bar to span the width of the entire window, rather than just the editor pane. Means that it would need to adjust depending on the page (edit, share, etc). The save status of the brew is indicated next to the title, using This also shows buttons for zoom in, zoom out, and a menu for making some similar changes. The 'card mode' and 'book spread' would need to be figured out so that their effects could be implemented on the fly, rather than making changes within the brew. Card mode would use Flexbox to as many pages into a row as possible, and book spread would utilize CSS Grid and aim to fit two pages side by side (if iframe width allows it) and also start with the first page on the right side. Finally, I changed the "Editor" snippet menu to "Layout"...I feel like Editor isn't very descriptive. I think some of those snippets could be reorganized as well, but this and that discussion can be done elsewhere. Pros
Cons
|
Beta Was this translation helpful? Give feedback.
-
|
I think that we should start from the use-cases of each menu item in order to understand where to place it. And probably there should be more than just one menu. A bit of more detailed explanation: There should probably be some generic navbar, which belongs to the site itself and provides high-level navigation, like:
This is probably all that I imagine at the moment for a site-wide menu, which is page-agnostic Then there should be some second-level page-specific navbars, which are unique to each page to give quick access to the most needed feature. Basically, we only have three (but in fact four) different pages: home, edit, share and new (do we really need to distinguish it from the edit page?). So, for edit page:
Home page: Share page:
New page should probably be removed in favor of an edit page, but if not removed probably it should be the same as home page, except you can edit metadata What do you think about that approach? |
Beta Was this translation helpful? Give feedback.
-
I think we need a "new" page for unsaved brews...but if you are just wondering if there needs to be any functional/visual difference, then I agree we do not. |
Beta Was this translation helpful? Give feedback.
-
Just a thought: what if rather than |
Beta Was this translation helpful? Give feedback.
-
|
There are a couple of fiddly things that have led to the separated pages. While they are 99% the same (and we can probably make up the differences just with an New Page:
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for info about My main point was to kind of think what do I want to do on particular page and based on that come up with particular nav items and their locations/grouping. For example I think that there should be no links to Note: I specifically not talking about particular style and appearance, but only about location/grouping of those nav items by their purpose/area of effect. |
Beta Was this translation helpful? Give feedback.
-
|
Again, just another mockup (and I'm going to start labeling these to make it easier to discuss). Mock-up 4: Three PaneClick to Show Image
I've sometimes wondered what a third pane would look like, such that css styling is done in one and the structure (md/html) in another. One pain point when creating a whole new custom theme on the fly is knowing which styles already exist, and then adding code to override or remove those styles. If the default stylesheet could be loaded into its own pane, and then modified and saved, that might be neat. Saving the modified stylesheet might mean it is tied to particular brew, or saved as it's own thing but linked to the brew doc as the referenced stylesheet. I'm going to revise this further, specifically the 'account' items, but posting this now because it's typed and I may have to jump ship abruptly before finishing revision |
Beta Was this translation helpful? Give feedback.
-
|
FYI, @stolksdorf already laid the foundation in the V3 branch for a more sophisticated Editor panel. I'm pretty keen to follow his work that uses buttons to swap between three "tabs": 1) Markdown Editor, 2) CSS, 3) Metadata (which is currently the awkward separate popup window. I am on board with adding additional buttons and rearranging the top nav bar/ editor panel, etc, but as for separate panel views I'm mostly planning to go with this approach (rather than a split view). Some screenshots taken from that version (remember that it is ~ 3years old and missing some of the current stuff): Markdown panel. Note the three buttons on the right edge of the editor panel. CSS panel Metadata panel |
Beta Was this translation helpful? Give feedback.
-
|
oh, sweet, and even has the separation of the "print" snippets into the CSS panel. I didn't know about these plans already, and being able to switch full-height panels is much better than splitting limited real-estate. Edit: minor nitpick, but I think the hamburger icon for the metadata menu should be changed. I don't know to what, but to me a hamburger icon is to indicate a dropdown menu of options, not really a dialog box for filling out info. |
Beta Was this translation helpful? Give feedback.
-
|
You can take a look at this Epic issue that will be the next major step after the v3 renderer drops. #1137 The idea is the contents of the CSS panel will be saved as a separate document, and the original Homebrew document will have a reference to it, so they load together. In this way, you can "share" your CSS around to other people without them having to copy and paste everything, or even just keep consistent custom styling between each of your own documents. (an update to font-size in my "Gazook89" style will update all of my documents that link to that. Hopefully, we could also have some "include" or "require" syntax in there to externally load or combine other additional CSS documents as well, including other custom "snippets" (Here's my custom "paper note" div. Import it into your project with "import(style/v1x_5xg)" or whatever.) |
Beta Was this translation helpful? Give feedback.
-
|
Well, isn't this issue 3 years old now, youza! (as if i was here then, lol) The current state of the navigation looks about the same: Click to show image
With only 3 changes, New has a dropdown (From Blank / From File), The new page This option by Gazook was great, not sure why we wouln't want to go that way:
Myself i like the idea, but we can't put that inside the brewRenderer component (see #3150). |
Beta Was this translation helpful? Give feedback.
-
|
I don’t think I envisioned it being IN the renderer. Just above |
Beta Was this translation helpful? Give feedback.
-
|
But also, I’m less fond of this idea now. It could swing back into my favor if I spent more time thinking about it, but I just haven’t done that in awhile. |
Beta Was this translation helpful? Give feedback.
-
Noting down some of the ideas mentioned in Gitter chat today (25/01/21):
Newbutton to the Nav bar #1208)The discussion centres around the redesign of the nav bar system, including the potential creation of a new dropdown menu for the Edit page which contains the normal file operations - "new" "open" "print" "save" - although in Homebrewery's case, it may be more appropriate to shift the following existing navbar items:
Beta Was this translation helpful? Give feedback.
All reactions