New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for custom css across all notes #925

Merged
merged 2 commits into from Nov 7, 2018

Conversation

Projects
None yet
4 participants
@CalebJohn
Contributor

CalebJohn commented Oct 27, 2018

This allows a user to place custom css in the config folder. It works exactly the same as putting a <style> tag at the top of each document but it applies to all documents.

I haven't included a default file here, but it might be worthwhile to change this pull from userstyle.css to just style.css we can take this opportunity to add a bit of custom styling to the rendered documents and still support user customization.
If you think it's valuable, I can change this to add a more beautiful default render output. If anyone has actual experience with styling and wants to submit any ideas, I'd like to hear them.

@subi54

This comment has been minimized.

subi54 commented Oct 27, 2018

Numbered lists are too far right for my tastes so I usually have to fix that with margin-left. But lists that go 100+ go out of bounds on mobile. I'll fix that.

The usual are fonts I suppose. To each their own in that department.
<mark> has a desktop bug at the moment. Showing red instead of yellow. Will fix that with this. I don't like bright yellow so I'll probably add a lighter, milder yellow.

Definitely margin-bottom between <li>. Lists look too cramped otherwise.

There are no glaring css problems as such, just boils down to personal preference.

Will this be added soon? Also, will this just effect preview or editor as well? Thanks for your hard work.

throw error;
}
}

This comment has been minimized.

@laurent22

laurent22 Nov 2, 2018

Owner

Please could you move the code above to a function and call it from here?

case 'LOAD_CUSTOM_CSS':
newState = Object.assign({}, state);
newState.customCss = '<style>' + action.css + '</style>\n';

This comment has been minimized.

@laurent22

laurent22 Nov 2, 2018

Owner

Let's put only CSS in this variable without any <style> tags so that it can later be combined with other CSS (or minified etc.) if needed. So it would be newState.customCss =action.css;

and only add the style tags at the last moment:

bodyToRender = '<style>' + this.props.customCss + '</style>' + bodyToRender;

@laurent22

This comment has been minimized.

Owner

laurent22 commented Nov 2, 2018

I've added a few comments again, but mostly the pull request is good. For the default styling if you have some suggestions on how to make the UI look better, feel free to provide the CSS.

@CalebJohn CalebJohn force-pushed the CalebJohn:custom-styles branch from d38dfe6 to 4da69f9 Nov 2, 2018

@CalebJohn

This comment has been minimized.

Contributor

CalebJohn commented Nov 2, 2018

Thanks for the suggestions, I've updated the code to reflect them.

@tessus

This comment has been minimized.

Collaborator

tessus commented Nov 4, 2018

I like this idea and the PR, but I'm wondering how it could also be made available to the mobile apps.

Maybe by adding a separate db table, or use a new record in the settings table?

@laurent22

This comment has been minimized.

Owner

laurent22 commented Nov 7, 2018

@tessus, styling is done quite differently in the mobile app, there's no CSS file for instance and style is applied via Javascript objects so it would be difficult to get the same feature works in both. Probably it would need its own implementation.

@laurent22

This comment has been minimized.

Owner

laurent22 commented Nov 7, 2018

Other than that it's all looking good. Thanks again for this cool PR @CalebJohn!

@laurent22 laurent22 merged commit cb1fd85 into laurent22:master Nov 7, 2018

1 check was pending

continuous-integration/appveyor/pr Waiting for AppVeyor build to complete
Details

@CalebJohn CalebJohn deleted the CalebJohn:custom-styles branch Nov 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment