Ehren

3 hours ago, David N. said:

@Ehren Will it be possible to include other data (than what's visible on your video) in the mini profile strip? 

You’ll be able to add any of your custom profile fields, so if a bio is already a part of those then you’re good to go 🙂

We don’t have plans to show the signature here though. 

That's exactly how it currently works @Afrodude 🤝

6 hours ago, Dreadknux said:

With gradients I can definitely work those in manually, but would I be able to reference any CSS colour swatch variables from the settings, or will I need to set those colours myself (i.e. "--lightmode-basecontrast1" or something)?

You sure can:

body{
  background: linear-gradient(to bottom, var(--i-base_3), var(--i-base-contrast_3));
}

3 hours ago, OsmanK said:

I have a question that's been on my mind. As we know, design developers create unique templates for themselves in different themes. These templates are visible in all designs after the Designers' Mode process.

Designers Mode has been revamped for version 5. Matt gives a brief overview here, but with the addition of "template hooks" in favour of the template editor, you won't have that issue anymore 🙂

Thanks for the feedback everyone!

8 hours ago, Cedric V said:

It's truly amazing to see how easy the theme editor is. The amount of possibilities are really endless. And that will definitely be fun to see various communities making their own version. Having a 3rd party theme designer create something like this custom for you is worth alone thousands of dollars. This version takes your community to a whole new level. I don't think people can really comprehend how much work goes into this.

Brilliant work team, well done. Couldn't be more excited to see more!

Thanks mate! Third party designers will be able to release themes which take advantage of all of these features, which almost makes "premade themes" much closer to "custom themes". If you find a theme for sale, but the header positions aren't quite right for example, you'll be able to customize it without asking the designer for custom changes. Win win for both the designer and the customer!

8 hours ago, Clover13 said:

One of the biggest enhancements I can see being added is some level of quick linking or hover effect to expose the available CSS properties for a given component (button, header, etc) within the theme editor. 

The web developer tools built into your browser are likely the best solution here. I'll write up documentation for all of the new components (grid, buttons, etc), but as for the custom CSS editor, there are no plans at this stage to expand it beyond a regular code editor.

7 hours ago, Dreadknux said:

Even the content box colours, wtf. 😄 The swatches are a really really nice touch as well, thank you for that thoughtful inclusion!

The only thing I didn't see that was teased in the intro was the use of background image in the header... I wonder how that works (will there be opacity options so that any image you add doesn't complicate the nav links etc)..? 

Also, is there scope in a future release/update to support gradients for some of the colour options? I tend to use gradients for the content box headers rather than block colours, but if not it's definitely something I can just work in using the Custom CSS as I have been doing before.

Yeah, the swatches will come in really handy. It's a much easier system instead of manually trying to allocate light/dark shades manually.

The header background in the intro was added via Custom CSS. I've been thinking of the best way to add an image feature for the header, but making a simple UI for something like that is ironically a very complex task since you also need to cater for the multiple header/nav bars as you mentioned. It's very simple to add using CSS, so at least there's a simple fallback if nothing else comes to mind before the release date 🙂

There are no plans for gradients, but since you seem pretty confident with CSS, you'll have no problems adding them using the code editor 🙂

3 hours ago, David N. said:

This is remarkable. 

Will there be a way to adjust the length of the snippets? I like the idea, but I wouldn't want them to be too long. Trying to strike a balance between enough content visible to get people interested in the conversation, but not too much so that they still have to open the topic to read more. 

I was going to watch a Netflix movie but I think I'll watch that video 6 times in a row instead. 😍

@Ehren for the win!! 

Thanks David!

There certainly is. Snippets are truncated to a maximum of 680 characters for memory - but you can trim that down using CSS line-clamp. One line of CSS can do that for you. 👍

On 10/14/2023 at 10:38 AM, Joel R said:

- the Sidebar Menu offers a lot of links.  The (regular) browse menu on mobile offers much less links.  I'm guessing you have an option per link on whether to show on mobile? 

When you add links using the Menu Manager, you can choose what menu(s) the link is shown in. Either the side panel, the horizontal bar, or the mobile panel.

On 10/14/2023 at 10:38 AM, Joel R said:

- traditional view of menu only offers single row.  I already do this on my primary community today (not because of any special study on design theory, but for simplicity!) but would be interested in your perspective in why you're imposing this approach. 

You basically answered this yourself haha 🙂 Simplicity. The "2 row" navigation bar was always a burden to restyle in version 4, and took up a fair amount of vertical space. Simplifying the navigation into a single row allows us to display the navigation bar in multiple ways, which you'll see more of next week.

On 10/14/2023 at 10:38 AM, Joel R said:

- performance improvements.  You removed JavaScript and a lot of CSS.  But then we also need splashy grid pictures of our latest trip to Australia and croc suit for the new Forum Feed / Big Grid view!

As always, the cover photos are optional. 👍

Thanks @Makoto - I'm glad you like it! Version 5 has received a huge code refresh and we wanted to provide a bunch of optional customization/design choices, so we're keen to see how sites start taking advantage of the new sidebar and UI layouts. 🙂

Looking forward to sharing more soon!

13 hours ago, Clover13 said:

Very nice work @Ehren!  Lot of thought put into the changes and seeing those good ideas come to fruition! 

The only stickler I saw for my sites is we use a sticky footer ad which could become a conflict with the layout with the mobile menu at the bottom.  Would be great to have an option to put it up top maybe.  Otherwise, I'd imagine it can float above the footer ad if needed with a little CSS.

Thanks @Clover13!

Relocating your ad would likely be the best solution here. You could technically use CSS to reposition the mobile menu, but a top menu doesn't really meet the goals of an "app-like" interface which we've been aiming for. It's not a setting which will come baked in with version 5, but it's certainly achievable with a couple of lines of CSS 🙂

13 hours ago, Aerodynamic said:

Brilliant work ! Loving the progress.

 

Can we also round up an applause for the frequently in depth updates Invision is bringing? Something that doesn’t need to go unnoticed. It’s one thing to keep working on v5, but keeping us informed with a top notch video, is equally as important!

 

Well done team!

I appreciate that, thanks Cedric! The amount of time that goes into a quick 4 minute video is more than I'd like to admit haha! 😅

9 minutes ago, Joel R said:

Questions:

1. Search modal - Does this entirely replace the Advanced Search? I like the new search.  Modern users are accustomed to simpler search bars with contextual filters, not full page searches with 20 options.
2. Forum Icons - The little houses.  Are those icons or uploaded photos? In generla, support for FA6?  
3. Website Slogan - I'm guessing this is static?  Like, can we have rotating messages "G'Day Mates" and five seconds later "Where's your croc suite?"  
4. Visible Focus Rings - This came out from nowhere, would love to understand the company's perspective behind this feature.  I'm scratching my head because it's not applicable at all for mobile or tablet. This benefits power users on desktop and ... maybe developers?  
5. Mobile Bottom Navigation - Customizable per group or hardcoded?  

Hey Joel,

1. The advanced search page is still available. The search modal is just an "enhanced version" of the drop-down filter menu which we currently use in version 4.

2. We'll have a lot more information on this in a future update 🤫 But to answer your question, they're FA 6 icons.

3. Correct, this is static. You could use your own javascript code to target the element and change the text every x seconds, but it's not a feature which is coming with version 5.

4. "Focus rings" for focused elements are very important for keyboard users. It's definitely not for power users or developers, but rather users who find it difficult to browse your site with a mouse. Imagine a condition which affects motor control such as Parkinson's disease, or someone who has a broken arm - both of those users would likely find it more convenient to browse using the TAB key instead of using a mouse.

Focus rings only appear when pressing the TAB key on your keyboard (they won't appear when clicking with a mouse), so they've been added purely to improve accessibility for those who need them. Accessibility took a back seat in version 4, however we've placed a higher priority on it with version 5 and will be improving it further in future updates. This is a desktop only feature, but will also work on iPads if a bluetooth keyboard is connected.

5. Currently hard-coded, but customization is currently on my "would be nice to have list". Certainly something to consider.

Just now, My Sharona said:

Regarding the navigation areas. From the verbiage used and the video itself, it appears that with the horizontal header, there is now only a Text Logo. Does this mean that gone is the ability to utilize an image within the header?

Not at all, image logos are most definitely a thing. Next weeks video will showcase that in detail 🙂 

To clear any confusion, the "Popular travel forums" header is just a manually created header using the Menu Manager - it's the same as the "Browse" header for example. With version 5 though, instead of manually inserting URL's to certain forums, categories, albums, etc, you select them from a list and they'll display based on user permissions. They'll also highlight when active, like so:

1 hour ago, Joel R said:

Sidebar Layout - how does this interplay with our existing Sidebar of the blocks? Or do you foresee a left-hand sidebar (with Menu options) versus a right-hand sidebar (with Blocks). 

If we utilize the Sidebar Menu, does this replace the normal Navigation Menu? 

The side navigation panel is completely separate from the widget sidebar, so it's reserved for navigation items only. When enabled via theme settings, the navigation panel replaces the horizontal header/navigation menu - so you can only use a single one at a time. The navigation links are managed via the Menu Manager, as you'd expect.

1 hour ago, Joel R said:

How does the Sidebar Menu interact with extremely long main pages? As an extreme example, you have 3 items in the Sidebar Menu but 100 boards or 100 posts so the Sidebar drags on and on but it's empty. 

The sidebar has independent scrolling which means you won't have a long empty space in either the sidebar or the content area:

1 hour ago, Joel R said:

Feed view - I like.  A lot.  My personal thoughts is that this works extremely well for a well-focused board, but not for overbuilt forums with 100 boards.  

The user avatar is a bit confusing.  Is it the avatar of the person of the last reply, or the avatar of the topic starter? 

How do you signify that I (as first person) have participated in the topic? How does this display when it's not text, such as a quote, code, or an GIF? Do you incorporate any iconography for elements like featured, pinned, promoted, answered, staff, etc.?

Just like the other views (table and grid), the avatar is of the person who posted the most recent reply. User participation isn't displayed in our existing views (apart from fluid of course), but is something we can keep in mind for a future iteration.

To prevent the index page from becoming overwhelmed with icons and badges, there are no badges for answered, staff, etc. Quotes, codes and gifs are removed, so only plain text is shown in the snippet.

1 hour ago, Joel R said:

Compact View - I think this is one of the more elegant solutions to showing a user postbit for a mobile world.  

How does this interplay with the hovercard? 

Any consideration given to users with (and this is a real thing on my primary community) 100,000 content items + 10,000 reputation + a really long email?  This design looks fine when you have 5  badges and 5 points and a short email. 

Thanks! The hovercard has received a UI polish in version 5, but still behaves as normal in the compact topic UI.

Here's an example with more data for you. The stats behave like bricks in a wall - they'll occupy the full width of the mini profile, as neatly as possible.

Desktop:

Mobile:

1 minute ago, Joel R said:

I want to add that for a new lifecycle, this theme looks amazing.  

I remember the 4.0 Social Suite (raise your hand if you used 4.0!), and while no one doubts that 5.0 is its successor, this theme looks and feels so much more polished out the gate and it will only get better on this cycle.

Thanks Joel!

In addition to Matt’s post, each of your members (where a new group permission allows) can also choose their own preference out of the views. So if you’d prefer to use the traditional table view for the forum index and the traditional column view for topics (even if the admin has assigned other layouts), that’s of course possible. We’re absolutely not forcing change, just offering more options than before 🙂 

I believe this happens when the dropdown menu is taller than your viewport (browser window).

I imagine this is done intentionally because browsers can't scroll "above the viewport", they can only scroll below the viewport. Imagine if your theme menu was only 900px from the top of your screen (which could happen on certain pages), but the dropdown menu was 1200px in height. If it opened upwards, the top of the menu wouldn't be clickable since it would go above your screen.

Not really a bug, but this will only happen in situations when your theme menu is really tall, so this is technically working as intended 🙂

Thanks, this seems to be a rendering issue with Firefox and semi-transparent gradients. At the time, it was the only way to blend currentColor with a semi-transparent version of the background color.

This can now be done with color-mix. If you'd like to update it on your site, adding this to custom.css should do the trick:

@supports (color: color-mix(in srgb, red, blue)){
  .ipsBadge{
    background: var(--badge--background, color-mix(in srgb, currentColor 10%, rgba( var(--theme-area_background_reset), 1 )));
  }
}

Hello,

Adding this to custom.css should help. I've only tested it on an unmodified default theme, but it may also work on some 3rd party themes depending on their HTML markup.

/* Ensure widgets are shown below the main content on mobiles */
@media (max-width: 979px){
  #ipsLayout_contentWrapper{
    display: grid;
  }
  #ipsLayout_sidebar{
    order: 1;
  }
}

Thanks for the reports about this, it seems like a browser oddity if it started happening automatically since pagination hasn't been changed in a while to my knowledge.

If possible, could someone please post a URL (or send me a PM) to an affected page so I can look further into it? I've tested these forums using Chrome and I'm unable to reproduce it.

Hi @SeNioR-

This has been fixed and will be patched in the next update 🙂

Hi @SeNioR-

Are you able to clarify what device you're using to produce this issue so I can look into it further? Using an iPhone Mini, the text still has a decent amount of breathing space:

Hey @SeNioR-

Thanks for reporting those. Can I ask what device you're using? The UI is designed for all mobile devices and even works with the smallest resolution I was able to test which is an iPhone 3G (320px in width). Your screenshots seem to be of a device which is even smaller than that.

This is how they're displayed at 360px (the width of an iPhone Mini):

With this in mind, does the pagination also work correctly when viewed at 360px? My guess is that you're using the browser developer tools to resize your window, but the resized window is far smaller than a real life mobile device. If I'm mistaken though, please let me know so I can look into it further 🙂

Thanks for your feedback @Ibai. The next major version of Invision Community will be focusing on performance improvements such as this (adding width/height attributes, using native lazy loading, etc). We don't have any information to share yet, but things like this will be implemented by default in the future 🙂

On 3/14/2023 at 6:47 AM, Adlago said:

I use this:

Link edited

<img class="react" src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$reaction->_icon->url}' alt='{lang="reaction_title_{$reaction->id}" escape="true"}' width="24px" height="24px" loading="lazy">

 

The width and height tags only support numerical values. Adding units will make them invalid. Instead, you should simply use width="24" height="24"

Thanks Hisashi, I'll keep this in mind for a future update 🙂

You’d be surprised at some questions I’ve seen in the past, so I just assumed this was legit too 😅