Discourse Vincent theme

theme-full

(Joe) #14

Just pushed a small update which should sort out the position of the replies and post replied to like so:

Post replied to:

Replies:

Suggestions / feedback always welcome


(Anders Thengs Kristensen) #15

Group avatar flair and scrollbar in the search bar seem to be fixed.


Then to even more stuff:

The admin notification bubble still shrinks when opening the hamburger menu (but now it’s the right size at least half of the times it shows up):
imageimage

The delete topic button in the admin wrench is the same colour as the other options, not highlighted with the danger colour. I am torn on this.
image

The gap below a quote is wider than the one above.

There is a miniature scrollbar on the tags field in the composer

Spoilerising the first line of a post makes the gap between the post “header” and the text wider than usual:

If the op in a topic is flagged, the message telling admins it’s been flagged creates a gap between the post and the topic information bit. While I love the floating flag messages under posts, I don’t think it looks good as is on topics:

When viewing a deleted post the only indication that it is deleted is the red bar at the bottom. Perhaps making the post header red would look better?
The icon of the user who deleted the post is crammed into the bottom of the red bar:

The notification bubbles are misaligned:
image

The highlight if the op is also the latest poster is almost impossible to see:
image

Unchanged text in the edit history is quite dark and hard to read:

Text removed in the edit history is even harder to read:

But I really like the text added in the edit history, so you can/ should leave that alone.

On my iPhone SE, the new topic button showed up like this, but after reloading the page I am unable to repro. I’ll report back if it happens again.
IMG_0045

When pressing the post menu show more button there is a wave/ ripple-like effect on the buttons that show up.


Really like this. I was writing that I was looking forward to seeing this, and then you went ahead and made change as I was writing.


Also, I’ve been meaning to ask, why call the theme Vincent?



#16

27 AM

plugin compatibility with retort. doesn’t show emojis well.

scrunches the admin panel data in some ways.

can’t see text as scroll…

you could align the avatars a bit more?

26 AM

category colors stick out a bit? and above and below at the end.

07 AM

01 AM

it’s a bit hard to make out @ usernames:

49 AM

formatting here:

mobile css issues:

User names on posts overlaps background

33eea76eba21dfc7b969bdf4e2f759230775747c_1_281x500

Links don’t shrink and stretches out posts

988a65bb2e2213ac647f0fe265349efc0fde22b7_1_281x500

Maybe get a color change on the search titles see screen shot below.

64a2fafffe8918de27602ecbce5517b1ae664675_1_684x500


(Joe) #17

Thank you so much for the great feedback @nawthor & @8bit

v0.45 v0.46 is out please update

Rather that spend a bunch of time explaining things, I will be brief and add photos. I spent a bit of time on the mobile layout. Mobile devices should now have more space for content as I moved the avatar inside the reply card for mobiles.

click for full size

This should also fix this issue:

With this out of the way here’s what I also looked at:

The history modal:

the admin panel:

quotes and spoilers:

Post avatars:

post avatar margins

OP highlight should be brighter now: (thoughts?)

Delete - all danger buttons - will now follow a variable set at the top for color:

I worked a bit on inputs and the scroll bar should be gone now @anders:

inputs still need more time though.

I like this idea a lot. I think that works really well:

The color can also be set using the danger color variable at the top.

Oneboxes should now play nice on mobiles:

click for full size:

Category borders are now aligned better:

The admin notification bubble is acting better now (please confirm if possible @nawthor )

There’s more to be done with the other notification bubbles.


@8bit

I think these issues…










…are caused by something else on your end. Make sure you’ve selected the “Dark Vincent” color scheme

Things are different on your site:

Also, Retort should be working fine now:


Thank you again @nawthor & @8bit

There are still a couple of items on your bug list that I have not gotten too and will address in the next update.

Keep the bug reports and ideas coming :+1:


Vincent is a working name for theme development, I like to name things I work on. As for why Vincent and not something else:

possible spoilers

YouTube


#19

This is looking great. How do I install it?


(Daniela) #20

In this way:


#21

a few things with mobile today. spacing, styling.


(Joe) #22

:warning: DO NOT DO ANY OF THIS NOW. THIS IS JUST AN IDEA and the theme structure is not final yet

I think I’ve figured out a way to do this.

first you create your own empty theme.

Call it “Parent” for the sake of this post:

then install Vincent

then you add the SCSS variables in the common CSS section for the Parent theme:

then you add Vincent as a child theme or theme component of the Parent theme we just created:

Then you set the color scheme for the Parent to that of Vincent’s


As a child theme, Vincent will then inherit the variables from the Parent theme

This will allow you to change the variables safely and not have to worry about them being overwritten.

So you can for example change the gradient color to blue:

It will also allow you to rename the theme to whatever you like to match your app. For example Vincent, doesn’t really go with EVE. You can call the Parent theme EVE Midnight and that’s what would show in theme selection menu:

Now, let’s say a new version of Vincent comes out, well, you just go to Vincent and update… that’s all.

And the variables will be safe in your parent theme.

Thoughts?


Addendum:

@sam

injecting the current color scheme variables into the Parent theme here would be a major plus. The variables could then be incorporated into child themes / theme components easily.


(Vincent) #23

Just a thought:

image

I wouldn’t capitalize first letters here. It might make sense in Internet-English but that’s about it.

On to the next matter… Did you think about changing the default font? I think it may give your theme even more character, but that’s just me :slight_smile:

Edit: about the overwriting of modified files when updating a theme – since themes are updated using git, would it be possible that:

  • when users make their first modification to a theme, Discourse creates a local branch for the theme;
  • users can now view DIFF when there’s a theme update via git;
  • then they may apply, discard, etc. changes, following their modifications.

(Joe) #24

v0.47 is out please update.

Fixes include:

slight color logic changes for improved readability like this:

Before:

After:

This change also affects unread bubbles and a few other elements.

Also on the list of changes is fixing a bit of horizontal scroll that was present on mobiles.


mobile layout is improved and things fit better. More work is still needed.

I added support for Who’s online @8BIT :

@nawthor First-post flags are inside the post:

Reply flags are floating:

does this work for you? Further feedback welcome.

^ This is also fixed now. Thank you @_vincent :heart:

There may be a couple of minor other changes here and there.


v0.48 will be out tomorrow and it’s probably just going to be cleaner code and no further changes.

I will focus on fixing the smooth-scroll bug in Edge for v0.49 and further changes will follow in v0.50


I completely support that idea. Right now the theme uses Roboto - not the default font - for many reasons, let me know what other fonts you want me to look at.

I like where this is going but feel that it would be far beyond my skill to implement - Mad scripting skill over here :upside_down_face:

Thank you for all your time and feedback :heart::wine_glass::+1:


(Vincent) #25

That would be Discourse-side logic anyway.

I find Nunito very pretty


#26

you’re doing a fantastic job! i’ll wait for tomorrow’s update and then provide even more feedback! can’t wait!


#27

How do you change the background image and can an image also be added to the header bar?


(Joe) #28

v0.48 is out please update.

I’ve cleaned up the code for everything.

I will add support for multiple fonts and make it very easy to customize :+1:

That depends @Tyson, long story short, in order to keep scrolling performance high, a few things need to be taken care of. I am not finished with the background yet.

HOWEVER… (What follows is not yet supported and may be buggy / cumbersome)

Let’s say you want to change the background anyway,

Well you add this CSS

#background {
    background: url(https://i.imgur.com/hxPlUEk.jpg); // <-- Change this to the background image url
    background-size: cover;
}

And then go to

Then to:

highlight the src attribute and delete it!
And the final code there should look like this:

Then click save.

The will be overwritten after every update and need to be redone again, so I won’t recommend doing it.

I will make this a lot easier as I get nearer to v1.0

The end result if you do it right is this

Let me know if you need more help.


Do you mean like a logo or like a background for the header?


(Joe) #29

v0.49 is out.

Buggy background scrolling is now fixed on IE / Edge (mouse wheel / track-pad / arrow scroll) .

Please confirm on your end. :wine_glass:


(Joe) #30

v0.50 is out please update.

I focused on readability.

before:

After:

Still more work needs to be done there.

The default Discourse post highlight is now back - albeit a bit faster than default.

I had disabled it temporarily as I was trying to get my head around it.

@dax was kind enough to explain it here:

It now follows 2 variables set at the top. One for color and the other for duration.

On the overall, things should feel much snappier now.

There other minor fixes here and there.


Finally, I started to work on Vincent Light (Not included in the repo yet) will update when it’s ready to release.


(Keyboardstaff) #31

Vincent Light It looks very good!:blush:


(Michael Howell) #32

I don’t see any difference between the before and the after.


(Vincent) #33

Line spacing and font weight. Subtle – very well thought.


(Joe) #34

Thank you for the feedback @notriddle

First things first, let me share the problem I’m trying to fix and I won’t go into too much detail unless you’re interested.

When I look at white text on a dark background, my eyes see something like:

The text is always fuzzy and I have trouble reading. This is easy to get through if it’s just a few lines but after reading paragraph after paragraph for 15 or 20 minutes my eyes feel the strain.


@_vincent is correct :+1: :wine_glass:

I did increase the line height for paragraphs from 1.5 to 1.6 and added a slight margin to list items for a similar result.

I would have loved to reduce the font-weight further but it was already at 300 and going to 200 on such a thin font creates way to much aliasing when I scroll.

So, I added these:

-webkit-font-smoothing: antialiased; // <-- this one is present by default in Discourse
-moz-osx-font-smoothing: grayscale;
text-shadow: -0.07em 0 #222, 0 -0.07em #111, -0.07em 0 #111, 0 0.07em #222;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);

Here are a few more samples of what that does: (Before and after pics both have the same line-height of 1.6)

IE before with highlight

IE after with highlight:

IE before:

IE after:


As for a webkit based browser, here’s Chrome,

Chrome before with highlight:

Chrome after with highlight:

Chrome before:

Chrome after:


I found that the changes reduced the glare around the text and made it easier for me to read big chunks of text.

With all of that being said, I will still continue to try to improve readability because I personally have an issue with white text on a dark background.

Suggestions / tips / feedback always welcome :wine_glass: