What to do with problem statement template

[vexorian]

In #112 @shivawu talks about maybe simplifying this template and that there seem to be alignment issues in it.

• Circle decorations around example cases might be a bit excessive.

  They don't really make the template too complex but they do add make customization need more options and tweaking. Color scheme needs to declare extra colors for them, and we have a whole new option to disable them.

  Also, since they are now based completely on CSS we can get rid of them by default and let the people put them back in custom CSS.

• Regarding the alignment issues. They can be fixed, although I don't notice them. This is probably browser-dependent. It would help to have a screenshot of what it looks like and how would you like it to look like.
• I think the markup itself is fine and simple enough. The complications come from the CSS, the current markup could stay the way it is as it allows many possibilities through custom CSS tricks.
• Something we could do away with is the input, output and comment tags. They are the things that force the complicated float:left layout, they require extra color and font options in CSS and extra options to remove them. Adding an -> or Returns: before expected result and including variable names already makes it clear what thing is what in the statement. We could leave the input/output/comment divs in the markup (they are useful when the style is disabled and people who like something like them can still enable them through CSS), but hide them with CSS.

[zen0wu]

I've removed the circle. When I first came up with it, it's not the optimal one, just because I can't find a better looking :-|. It does not go well with other color schemes. Just go with the n) approach, consistent with the arena and no UI issues.

About the non-alignment, see this image. The fonts for the data are too big, and the comment tag with its corresponding text on the right does not align on the top.

[vexorian]

I never really knew what you wanted to do with the tags. So you wanted them to always be aligned and never break. If we decide to keep the tags, I can try to make changes to the CSS so that they always align.

Regarding #119, I think setting false to all color themes is best. White background with dark gray text looks "professional" and is easy on the eyes.

[vexorian]

I also think it is best to reduce the contrast from the black theme. Although it is meant to mimic the arena, is it really worth it to mimic it so much? With slightly tweaked values it can give the same impression as the arena's theme but with less eye strain.

[zen0wu]

I changed the default to black just for debugging :-), will use the white one for release. For the tags, I think the texts from left and right should align vertically. But line breaking is another issue, not about styles, but about the long texts. So if the tags are causing too many problems, maybe we should remove them too.

[vexorian]

I think it is possible to make the tags always align, regardless of height of data. Width is not an issue because long vectors are wrapped - the only way for a wide enough variable value to appear would be if TC increased the limit for number of characters.

[zen0wu]

I've rearrange the conf and templates, the shared styles now goes into a default.css, much cleaner :-) We should also move the themes into separate css too.

[vexorian]

That's actually exactly what I didn't want to happen :) But I guess it is better this way?. The themes modify just a small part of the CSS, can they be completely separate?

Without the fancy example numbers, I think it is best to remove the tags. They now use space right now.

You know you could move many of the options to the css template . The only options that NEED to be in problem statement are grid, favIcon, forceDefLanguage. I think that you can now remove the option to hide problem definition, if anyone doesn't like it can just modify the CSS to hide it...

[vexorian]

I was fiddling with the black color scheme, but since you are modifying the template too, maybe you can do the change. These are colors that are easier on the eye but still look like black background and white text (slightly)

            body { color: #f0f0f0; background-color: #0c0c0c; }
            .section .section-title { color: #f8f8f8; }
            li.testcase .tag { color: #000; background: #808080; }
            li.testcase .data { background: #141414; }

A benefit of removing the tags is we won't need to include color setting for each color theme.

[zen0wu]

I'm not sure you mean you don't want to separate the conf, the default styles? or the themes?

[vexorian]

At first I didn't understand, So it is just a separate template for CSS. Disregard that suggestion.

Separating the color themes seems like more work than it is worth, each is two lines long?

[zen0wu]

The separation for themes (color schemes) is for simplifying user options, instead of a list of options like colorThemeBlack, colorThemeBlue, we can just have one option like theme or color-scheme, and set that to things like theme = light, then the template will include the corresponding css, like theme.light.css. If we don't separate themes into other templates, maybe there's no way to do this.

[zen0wu]

Theme functionality added. Now I think the code structure will not change anymore, unless new functionality needed. Also, a format renderer is added using String.format in Java, quite straightforward.

About the problem desc template, I've removed the tag, but not sure whether something dirty is left. The css is quite complicated, so maybe you can help to look at it. My suggestion is to leave as few options as possible, and leave these things like outputPrefix, highlightData, fontSize to custom styles. Options are better used for things not possible using CSS.

[vexorian]

I didn't read your second paragraph until now.

Now that themes are more flexible we can remove those options, leave 16px, highlighted data and 16px as defaults. Let me commit...