Resizing OOC tags

[Ozma]

The biggest features I use for OGMW(Over any other forum or discord) are and were OOC tags. I'm happy now because they exist in baldr(yay!).

But I wish they'd resize to fit what is put inside of them. 

For example.

 

Whereas OG looks like this 

 

 

 

 

 

 

 

 

 

This also has niche use-cases with text as well, seeing as long, vertical stretches of text can also be forced into a scrolling list, which requires more effort to navigate on mobile since it's a smaller box.

An example for text: 

Trogdor finds some treasure!100 gold
+1 longsword
+1 Shield
a piece of artwork worth 20gp
three diamonds
A small dragon egg
A partridge in a pear tree.
A small,nondescript teapot floating several inches off the ground
A guitar
A broken robot with a TV for a head
Fifteen small ducklings made out of Onyx
one half of a pair of [I]Boots of Striding and Springing[/I]
A pristine copy of [I]Howard the Duck #1[/I]
Ten lollipops of [I]cure light wounds[/I]
Trogdor's dignity
Trogdor's lack of dignity
A miniature Pony
An actual miniature pony
A sea urchin
A land urchin
A space urchin

Edited January 28, 2023 by Ozma (see edit history)

[bwatford]

Thanks for the feedback.

If memory serves, we had to address this issue and make the OOC box static because with it resizing to content it would give the user the ability to use a picture or text that was beyond the size limits of mobile users and since the site is responsive to mobile screen sizes it causes the OOC to jailbreak out of screen size and mobile users couldn't see all of the OOC box.

This is definitely worth revisiting now, and I might need to style that box differently for different screen sizes instead of a one size fits all solution. 

I will add it to my list of things to evaluate this week. It will also give me a chance to possibly theme the OOC box better for the different themes.

 

 

[Ozma]

42 minutes ago, bwatford said:

If memory serves, we had to address this issue and make the OOC box static because with it resizing to content it would give the user the ability to use a picture or text that was beyond the size limits of mobile users and since the site is responsive to mobile screen sizes it causes the OOC to jailbreak out of screen size and mobile users couldn't see all of the OOC box.

Yes, I remember that discussion shortly after OOC was first implemented on Baldr, but I haven't seen it brought up since so figured I'd put it in the feedback.

OOCs in general are also a little buggy on my end? Specifically they tend to 'eat' a line of text placed right before it and have trouble being re-aligned with text via the editor(haven't tried editing the HTML yet.)

 

It eats the first line, leaving just hte OOC, which has trouble being put into the right spot.

[Eric]

I can't replicate the buggy behavior you're describing. What browser/OS are you experiencing it on?

[Ozma]

2 hours ago, Eric said:

I can't replicate the buggy behavior you're describing. What browser/OS are you experiencing it on?

Vivaldi, on Linux in my main PC, as well as Firefox/Vivaldi/Chrome on mobile (just ran through a few of them to test)

To be clear, what I'm doing is adding an OOC to the end of the line on the first text.

So if I have a line like this[and then use OOC button with the cursor here<]

It becomes

[OOC] and clears the line in place.

Edited January 29, 2023 by Ozma (see edit history)

[Eric]

OK, I can replicate in Firefox now. Unfortunately it looks to be somewhere upstream in the CKEditor base package, which will make this somewhat more challenging to tackle... 😞

 

[Neopopulas]

I'd just like to hop in and say i agree with the original comment. The OOC tags are kinda problematic to use because they don't scale - for reasons mentioned - which means you have to scroll them which can be a pain on desktop and mobile. But if i'm being honest the biggest gripe i have with the ooc mechanic right now is that you have to click the same ooc button again to make the box disappear.

Being able to just click anywhere and have it disappear would be so much easier - though i understand it might work this way because in mobile you can't scroll without 'clicking' - especially if the ooc tag is especially wide, less so when its tall. A very wide ooc box can take up a lot of screen space and it can be sort of annoying to hit the same button again, and god help you if you open more than one ooc box at a time lol

Edited January 29, 2023 by Neopopulas (see edit history)

[bwatford]

Ok, a proposed fix for the width/height issue has been rolled out across the default theme as well as the default premium theme.

It is a compromise of what we can do and screen size aware, so gives you 400 px of width minimum on wider tablet and desktop screens and 275 px on mobile screens.  The length now auto resizes with content. Also, the OOC box color is now different from the background with an inset look to it.

Thoughts?

[Ozma]

1 hour ago, bwatford said:

Ok, a proposed fix for the width/height issue has been rolled out across the default theme as well as the default premium theme.

It is a compromise of what we can do and screen size aware, so gives you 400 px of width minimum on wider tablet and desktop screens and 275 px on mobile screens.  The length now auto resizes with content. Also, the OOC box color is now different from the background with an inset look to it.

Thoughts?

I like it! It seems to be displaying fine on PC and mobile.

 

Neat!

 

 

 

Edited January 29, 2023 by Ozma (see edit history)

[Neopopulas]

I like the background colour change, it really helps it pop.

[Eric]

We originally had an eye icon in the top left of the box that would serve as a dismiss point. Not recalling right off why we went away other than users didn't like icons cluttering their posts. I agree that a more robust dismiss mechanism would be helpful, though.

[bwatford]

If possible, we could put an X in the top right corner to close the boxes as well, everyone is used to that type of system.

 

So are we good to roll this system out to all themes?

[bwatford]

From a CSS perspective this issue (sizing and colors) has been addressed and rolled out across all themes.

This now falls to you @Eric if you want to make a Trello entry from closing the OOC boxes with a X or something similar.

[Eric]

I'll get it added to the board, @bwatford. If you can provide a recommendation on the necessary elements & CSS to show the X, the back-end work should be pretty easy.

[bwatford]

11 minutes ago, Eric said:

I'll get it added to the board, @bwatford. If you can provide a recommendation on the necessary elements & CSS to show the X, the back-end work should be pretty easy.

CSS

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

HTML

<a href="#" class="close">

Working Example: https://codepen.io/brissmyr/pen/egidw