Topic is cut off

[GriffinCodes]

If a topic is too long, I can't see the entire thing on the top bar. http://screencloud.net/v/6EhZ

I would suggest making it expand when you hover over it or click on it.

[TheSonAlsoRises]

I would suggest making it expand when you hover over it or click on it.

It would probably deserve a different issue, but clicking on the topic should allow you to edit it, not view it.

[AlMcKinlay]

@TheSonAlsoRises Yes, make another issue. But that's a brilliant idea, actually. (although highly unlikely anyone will find the time to do it anytime soon)

Regarding this issue, yeah, thanks for the issue, @pugabear, we will look into this. Current thought is about making it show when you over over it, but that would take a bit of work making it look nice with our current CSS. But I'll leave this here for if it ever gets done.

[dgw]

Glad I searched after wanting the topic bar to expand instead of #515 filling out the title attribute solution. I was about to create a duplicate issue.

Alternatively, it doesn't have to expand on desktop browsers. Textual (yes, I'm being that guy again) shows the whole topic in a semitransparent div on top of the chat—or does in the nox theme, at least. It works quite well, and shows the whole thing with formatting.

[MaxLeiter]

Mind sharing a screenshot @dgw?

[dgw]

Something like this, @MaxLeiter? Here's a grab from #znc on freenode showing the transparency:

At the very least, I think that's a good sort of target for the look when expanded (buggy line breaking notwithstanding), if The Lounge sticks with the single-line topic bar and expands it on hover/tap. (That just made me think about how hovering isn't really a thing on mobile.)

[MaxLeiter]

Also worth noting is the channel mode being nicely displayed after the title

[maxpoulin64]

This looks nice. I think a good idea for lounge would be to display it the same but on mouse over (since we tend to have bigger fonts and everything). Clicking on it could automatically set the input box to /topic <topic> as a temporary measure until we figure out how we want to make it editable in-place.

[xPaw]

If someone wants to jump on this, it should be possible to make topic scrollable by making the .header a flex element, topic contenteditable and set overflow:auto; white-space:nowrap; on it.

[astorije]

I would like to have it expand/collapse on click, with a max height, then scroll the rest if too big. But yeah, what @xPaw describes would be an acceptable first step if someone wants to try something simpler than my solution.

[Jay2k1]

I played around with this and came up with this custom css:

div.header {
    position: absolute;
    z-index: 1;
    background: inherit;
    width: 100%;
    height: 51px !important;
}
div.header:hover {
  height: auto !important;
}
span.topic {
  line-height: 28px;
  padding-top: 11px;
  padding-bottom: 11px;
  white-space:nowrap !important;
}
span.topic:hover {
  word-break: normal !important;
  white-space: pre-wrap !important;
}
.chat-content, .container {
  margin-top: 51px;
}

Tested on morning theme on master (5a9233c).

Explanation:

• without the absolute positioning, an expanding header would move the rest of the chat window and nicklist down, which is quite disturbing
• absolute positioning means the header floats below the chat, so it needed to be made opaque via background and float on top via z-index

Known issues:

• if a word in the topic ends in the right end of the box (and thus gets faded out), this will not change (probably an easy fix, the mask-image gradient needs to be removed on hover)
• since the header div is now positioned absolutely, the chat window lies below and begins at top:0. This means that the very top content is invisible, which is a problem when the "loading more messages..." message is being shown (it's hidden below the header bar) or you're in the settings fixed by margin-top

I'm no CSS guru, but maybe this can act as a base to work with for someone with more knowledge.

[Jay2k1]

New version (new comment, so you guys get notified). This has the issues fixed, please test ❤️ (I guess the !important statements can be removed when integrating this with style.css)

div.header {
  position: absolute;
  width: 100%;
  height: 51px !important;
}
.chat-content, .container {
  margin-top: 51px;
}
div.header:hover {
  height: auto !important;
  background: inherit;
  z-index: 1;
}
span.topic {
  line-height: 24px;
  padding: 14px 0;
  white-space:nowrap !important;
}
span.topic:hover {
  word-break: normal !important;
  white-space: pre-wrap !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  span.topic:hover {
    line-height: 20px;
  }
}

Looking good on mobile too (tap header to expand, tap elsewhere to collapse):

[starquake]

That looks like a good start. It has some weird side effects though. Not sure if they were introduced recently. I will see if I can take your css and fix the issues.

[itsjohncs]

Spent some time playing with this this evening and I have a pitch. As this is a interface-design-heavy feature, I'd love to get the interface critique out of the way before implementation. So please comment if you have concerns.

Without more ado... there are two high-level changes:

1. Expand the topic on click or touch. Unexpand the topic when the the mouse leaves the topic or the user touches somewhere else on the screen.
2. Drop the topic to a row of its own on small screens.

This means there are four layouts: large-screen, large-screen-expanded, small-screen, and small-screen-expanded. Below are mocks showing what each of these states would (roughly) look like:

large-screen

large-screen-expanded

small-screen

small-screen-expanded

[brunnre8]

I like the version for the desktop.
However on the mobile version I personally don't like that the topic will use up additional space that's normally wasted, I'd rather look at the messages.
Generally the topic is only useful when you first enter a channel or when you need a link from it, which is not often the case I think.
Could we leave it where it is but move it to its own line when being clicked on?

(Note that's the same answer I gave on IRC... just dumping this also here to keep a record)

[maxpoulin64]

I agree with @brunnre8. I'll also add that other chat apps seems to do a similar thing. For example, Slack has a topic on desktop, but not on mobile, to conserve space.

I'd vote to keep the current behavior on any screen size, and when clicked/tapped, go to a new line and display in full. Even on desktop, I think expanding like the small-screen-expanded would look better, especially with long channel names and long topic lines. Makes the best possible use of the space in every situation with no special cases.

[itsjohncs]

Seems worth playing with to save the row. I'm worried about cases when the topic is scrunched small enough to be barely-or-not-at-all visible. Like I only get a few words in the topic of ##thelounge on my phone. In these cases, there'll be very little visual cue that tapping the channel name would show the topic. But I can play around with it. Even in that case though this would still be a positive change.

Even on desktop, I think expanding like the small-screen-expanded would look better, especially with long channel names and long topic lines. Makes the best possible use of the space in every situation with no special cases.

I don't think we should do this, even though it would be nice to have the exact same interface on both. The problem is the jumping text.

On mobile the jumping text will probably be only a little annoying. But on desktop I think it would be more significant because (1) double-clicking to edit the topic gets weird, and (2) selecting some text in the topic will be a surreal experience as the text runs from you.

Not the worst thing but I don't think it'd be worth the benefit of keeping the experience between mobile and desktop the same in this case.