Discourse Vincent theme

Johani · 2018-01-06 11:19:50 UTC

v0.53 is out please READ CAREFULLY

This update includes a small update to the color scheme. I seem to be encoutering a small bug where the color scheme is updated after you run an update but the changes are not reflected in the compiled CSS.

So,

If you have installed this theme before, delete it and install it again.

Once the theme is installed the new color scheme name should be Vincent Dark Beta

@8bit thanks

This is now fixed:

fixed whos online

I might also end up moving “Category” a bit to the side.

Also,

I’m with you on this:

and this.

I’ll change those in the next version.

Here are the changes in this version:

Variables

I went through the variable section and spent a bit of time there, the theme should now generate a color palette based on a few colors that you can chose at the top.

The rest of the variables would then be derived from those colors.

Here’s what the variable section looks like now: (WIP)

// Variables  ---------------------------------------------------------------------------------

// palette colors -------------------------------

$theme-base: #009dd8;
$text-base: rgba(255, 255, 255, 1);
$main-background: rgba(19, 20, 24, 0.9);
$secondary-background: rgba(0, 0, 0, 0.4);
$danger-color: #96000e;

// derived colors -------------------------------

$border-color: rgba($text-base, .1);
$highlight-color: $border-color;
$theme-trim: adjust-hue($theme-base, 150deg);
$ok-color: adjust-hue($danger-color, 150deg);
$link-color: lighten($theme-base, 25%);

// theme settings -------------------------------

$body-background-pattern-opacity: 0.8;
$body-background-gradient-opacity: 0.35;
$body-background-gradient-direction: top left;
$body-background-gradient-color-first: adjust-hue($theme-base, 20deg);
$body-background-gradient-color-second: adjust-hue($theme-base, -10deg);
$highlight-speed: 1.5s;

I also worked on buttons for a while, they’re not finished yet and there will be quirks, but you should notice a big difference.

Here’s an example of the colors automagically generated by the $theme-base variable:

Overall, I liked the unified colors in v0.52 (previous) but it was a bit dull. So things are a little bit more lively v0.53 (current)

More photos

I also updated the photos in the op, so check those out.

nawthor · 2018-01-06 16:44:17 UTC

Haven’t had the time to do this in a while, but here’s some stuff:

Category and tag links such as #feature or #pr-welcome don’t have a fancy colour. And speaking of fancy colours, I’m not a fan of the colours on @mentions, @groupmentions or #hashtags (nor do I understand why the last one should have a special colour).

Staff highlight is hard to notice unless you know to look for it. I’m also unsure about having the text in highlighted posts be slightly more aligned to the left:

The text seems smaller on non-spaced bullet list compared to spaced bullet lists and regular text. It might also happen on the default themes, but is more noticeable here:

Ownership change is almost unreadable in edit history:

The selected date is almost unreadable on the /u (user) page:

The colour on the highlight to show yourself on the user page doesn’t match the colour scheme of the theme (I feel). Either way it stands out:

(First screenshot below is with Vincent, second the default theme, third is my black and white colour scheme).
The user card badge doesn’t show the user card background (when it does, it shows another part than the default theme):
It also wraps the “about me” text differently:

The highlight if the first poster is also the last poster is impossible to make out:

The Edit (category), New topic and the topic control buttons and the topic and post admin wrenches (and probably others that I missed) are capitalised where they aren’t by default. I do not like this at all.
I am also unsure about having the reply button red here:

When hovering over +New Topic button in the share button on a post the + is highlighted first and there is a slight delay before the rest of link highlights:

This seem to be an issue again, but only when it’s clicked.

barreeeiroo · 2018-01-06 17:17:35 UTC

I’m going to make an update of the Community now to install a new plugin, so check back in some minutes

Johani · 2018-01-07 05:51:14 UTC

TL;DR:

V0.54 is out please update

I just checked @barreeeiroo you’re still running a pervious version of the theme. Kindly update.

Also, I still don’t see this when I visit the page:

Your screen:

My screen:

I don’t see what you see.

I also don’t have enough input to modify the code for your child theme. I need to know what you want, but as a start, add this to a new theme and make it into a child theme for Vincent to make category badges behave a little better:

.badge-category-bg {
    border-radius: 0;
}

Moving on:

well it turns out a broke more than a few things.

So,

@8bit

Where are you seeing this?

I cannot seem to find it. The topic list looks like this on my screen:

^ this should be fixed now:

@nawthor

Thank you so much for the A++ feedback

My reply to the points above will be in reverse because things will make more sense that way.

First,

Links have a derived color that’s 25% lighter than the $theme-base color what ever that may be.

Sort of like this:

$link-color: lighten($theme-base, 25%);

The reason for this is to improve readability. This is not an issue if the background for the text is white, but it makes reading very difficult if the background is dark. Here’s the two of them next each other:

In the above example, both links are legible because the colors are light and there isn’t too much text to go through:

Now, if I set the $theme-base color to something darker, and add a little bit of extra text, here’s what that would look like:

You can see how the using a dark $theme-base color would create links that are too dark if left unmodified.

In short, I’m trying to make customization as easy as possible but limiting the occurrence of things like this. I hope this explains my reasoning.

Noted

So, here’s a little of a background on how those come to be.

a {
	color: $link-color;
	&:visited,
	&:hover,
	&:active,
	&.hashtag {
		color: $link-color;
	}
	&.mention {
		color: adjust-hue($link-color, 150deg);
	}
	&.mention-group {
		color: adjust-hue($link-color, -150deg);
	}
}

Default links have the color $link-color

mentions have a +150deg hue offset and group mentions have a a -150deg hue offset. So, the question is… why 150deg?

Because I’m trying to reduce the amount of work needed to customize the theme later on. 150 degrees (plus and minus) on a color wheel produces complimentary colors:

color wheel

So, the colors are generated by offsetting the $theme-base color and not manually selected.

With that being said, what bothers you about the colors? Too many colors? Too bright? What do you have in mind?

Regardless, point taken and I’ve made a note to move the variables to the top to allow for easy overrides down the line. (Also, this color generation method is not final and still needs work )

Moving on:

I agree.

They now share the $link-color because they are clickable links afterall.

both issues now fixed (not final, thoughts?),

Ownership change fixed:

User table now has a bit more styling (thoughts?)

User card is now fixed, may still have other bugs, please let me know:

I still need to look at the text wrapping.

OP highlight is now back (regression)

The move to capitalize the buttons has roots in the material design spec (which I am using as a very rough guideline for the theme)

Regardless, I understand where you’re coming from. I’ll set it to an optional variable at the top in the theme settings section.

I agree fixed:

^ This is also fixed

There are a couple of other issues in your post that I will address in the next update.

Again, thank you so much for all your time

8BIT · 2018-01-07 18:48:39 UTC

Some styling issues on mobile. Spacing and then the thread navigation jumps all over the place.

Love the work!!

Johani · 2018-01-07 06:45:36 UTC

Thanks

Things look a little different on my screen @8bit

Are you using the phone app by any chance?

click for full size

8BIT · 2018-01-07 07:41:32 UTC

I’m using chrome and an iPhone x

keyboardstaff · 2018-01-07 08:08:19 UTC

Are these places bugs?

nawthor · 2018-01-07 10:10:19 UTC

It seems I wasn’t clear on this. I get why @mentions and @groupmentions have colour (and I think having those distinct is a great idea).

What I don’t get is why #hashtags should have any special colour.

Mostly that I don’t feel they match the colour scheme of the theme. Red and yellow stand out when the theme is predominately blue, and while I think mentions should stand out, I feel the current colours make them stand out too much.

I like it, except for when the highlighted post is a single line. But I can’t think of any good way to do anything about that. I’m sure I’ll get used to it pretty quickly, anyway.

It’s really hard to make out on my page.

[Spoiler] tags don’t work properly. The “text” in the middle is spoilerised and doesn’t change when clicked:

Message that a post was flagged no longer floats below the post. Not major, but I preferred the floating one:

Mobile:

My title pushes the edited icon below the date:
The current shade of red on the “hottest” edits is hard to notice:

This is where the edited icon usually is:

The “in reply to” icon pushes the posted date and edited icon down (while the poster has a long title):

The “in reply to” icon overlaps the edit icon for others:

The “deleted by” icons and date half floats below the post:

barreeeiroo · 2018-01-07 12:08:44 UTC

Updated

In your Profile, enable signatures. I still see like mine in this update

Dax · 2018-01-07 19:04:49 UTC

I don’t know for the first on left (category border), but certainly the 3 on the right are not bugs.
The empty spaces are created because there are sub-categories that occupy more space in height (so the box is higher) and you display only 3 topics per category.

Johani · 2018-01-08 04:14:25 UTC

v0.55 is out please update:

@8bit

Noted, thanks. I’ll keep looking. Does the issue occur in the default theme? I only ask because I cannot reproduce the issue on my end.

@keyboardstaff

Yes, the border is a bug. Thank you

if the category description height is shorter than the latest link div height, the color does not stretch.

Extreme example:

this can be fixed like so:

but this fix bring back an old bug where the border sticks out from the table.

I won’t apply the fix now, I will think about a better way future versions.

category border fix causes more bugs

As for the other three arrows: @dax was kind enough to explain why that occurs.

@barreeeiroo

Signatures are now supported:

Before:

after:

As for the other bugs with the list-controls element. I cannot help without more input from you. Vincent has certain styles applied. Your app has other custom styles applied. If you like the way things look on Vincent, remove your customization, if you don’t like the way things look on Vincent, you need to let me know how you want them to look. I cannot do anything else without your input as I would be blindly guessing how you want things to look (people have very different tastes)

@nawthor

I see what you mean. I agree. I’ll stick to default behavior #hashtag colors are now removed.

Fair point. now that I look at the colors, they do come off a bit bright. I will tone things down in v0.56 (next version)

I forgot to merge the code for that one, it should really look like this after you update:

Capture

^ this is “fixed”

The way that the spoilers plugin works is pretty smart

There is no actual text color, it’s just text shadow and the amount of shadow blur is cut by half when you hover and completely removed (sharp shadow that looks like text) when you click the spoiler.

The reason I mention this is because I also use text-shadow to improve readability and that’s where the conflict is.

To fix this, I will remove Vincent’s text shadow from spoiler tags and let the plugin handle that. The down side to this is the text might be a little grey / dark after you click the spoiler and remove the blur because I have no way of changing the color of the shadow without interfering with how the plugin works.

Test this and let me know. If the text is really difficult to read, adding a lighter background to spoiler tags might be a future option.

This is intentional for now. I agree I prefer the floating messages.

For now I added a background to this section or “post-actions” because it’s shared between all the post action like people who liked, who deleted the post, if you flagged it etc…

I will revisit this later on. I like the floating messages better.

So, the mobile and desktop theme have different bases for highlight colors. I don’t know why for now, I will override the mobile colors to match desktop colors for this version. I will try to look into it some more in future versions:

For now:
click for full size

Can I please get a link to the pages where these bugs occur.

I am testing a new placeholder that’s displayed while the replies load (not in repo yet, let me know what you think)

before:

after:

should I merge this or leave the default alone?

Thank you everyone for you generous feedback

keyboardstaff · 2018-01-08 05:09:24 UTC

@lll In addition there is a problem, seemingly mobile terminal can not click the login button, a blank window pops up.

My mobile device is iphone 6s plus

nawthor · 2018-01-08 08:34:18 UTC

I do my testing in a hidden category, but if you sign up to eve.community I can give you access to it.

But it seems the edit icon being pushed down by my title is due to the text size on name and title being slightly larger on Vincent compared to the default themes.
The replying-to overlapping the post date only happens if the date is 3 characters or longer (on my iPhone SE).
But my Lumia 1020 has none of these issues, so I guess it comes down to screen size. I’ll try to borrow a couple of other phones to see how they behave.

I have no problem reading the text.

Looking forward to it.

I really like it.

Couple of other things:

In the flag dialog, the Flag post button is blue until an option is clicked, at which point it turns grey until hovered over. I’m not entirely sure what I would expect to happen here, but this isn’t it.

The gap here is quite wide:

Johani · 2018-01-08 12:03:08 UTC

So, floating messages

this is ready and if it looks okay, I will add it with tomorrow’s update:

Everything will float except for the post-actions in the OP

The other exception is who liked. I think I prefer it to be inside:

Yes? no? problems?

Grex315 · 2018-01-08 15:04:45 UTC

Been testing your theme. Very nice, I really like it. But there are two issues I am having.

The header is not thinned out
there is a underline on the “all categories” and “all tags” selection boxes

I have not touched the CSS in any way.

Johani · 2018-01-08 16:05:32 UTC

Thank you @Grex315

The thin header is optional. If you want the thin header you need to add a theme component which you can find here:

I’ll check the CSS for “all categories” tomorrow

Grex315 · 2018-01-08 18:18:23 UTC

Thanks for the quick reply. Did not realize it was a separate component.

Johani · 2018-01-09 05:55:36 UTC

V0.56 is out please update.

Thanks for reporting @keyboardstaff

I cannot replicate the issue on my phone, however I added position fixed to modals in the middle of the screen for mobiles. try it now and let me know.

It should look like this (Modal contents will be different in your app)

That’s pretty smart

I just did, with the same user name I have here. I’ll PM you my email address as well if you need it.

That’s true, the font is slightly larger because it’s white text on a black background, but I still think we might be able to make things fit nicely.

I’ll also try to make sure things work well across all different screen sizes my my end.

That’s great, so I assume all is well with spoilers now? no need for anything else, right?

I already mentioned this yesterday, but the floating messages are back:

I agree, buttons need a more consistent behavior I will spend more time here a bit later.

I’m not sure where ^ this is but I changed the padding for post-actions in the OP and that should at least reduced the gap above. Let me know if it’s still there.

The reply placeholder is still a bit buggy, so I will hold off on that for this release.

Now, for the colors of mentions and links… here’s where it is now, feedback welcome:

I might consider bringing back backgrounds to mentions if needed.

You’re right, @Grex315 it’s not very clear that it is. I added it to the OP. Thanks

I haven’t forgotten about the “all categories” issue, but it looks like I need register for your website to see the theme. I will do so either later today or by tomorrow. ( I actually tried to register today)

keyboardstaff · 2018-01-09 09:39:50 UTC

Today it is updated to 0.56, but the problem remains.