Skip to content
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

Custom styling #24

Open
bb4L opened this issue Dec 8, 2020 · 20 comments
Open

Custom styling #24

bb4L opened this issue Dec 8, 2020 · 20 comments
Labels
enhancement New feature or request

Comments

@bb4L
Copy link

bb4L commented Dec 8, 2020

Is there a way to customize the colors of the data browser?

ideally I would also love to customize the "logo" part
image

@tolomea
Copy link
Owner

tolomea commented Dec 8, 2020

All the styling is baked into the react app so currently the only way would be to modify and rebuild the react app, the process would be.
0: fork it
1: alter the css
2: run npm install in the frontend dir
2: run the build_fe script
3: commit the changes
4: install from your fork

In general I'm not opposed to making this more customizable. It's just a question of how much and how.

@bb4L
Copy link
Author

bb4L commented Dec 9, 2020

All the styling is baked into the react app so currently the only way would be to modify and rebuild the react app, the process would be.

i thought it would be like that

In general I'm not opposed to making this more customizable. It's just a question of how much and how.

Good question

How much?

I would propose to be able to

  • set a custom stylesheet
  • adjust those "title" values (DDB v3.1.1)
  • set the icon(s) / favicons

How ?

Probably all the variables could be defined over settings.py variable(s)?

DDB_SETTINGS = {
  css_path : 'path/to/file.css',
  title_text: 'Custom title',
  version_text: ''
}

@tolomea tolomea added the enhancement New feature or request label Dec 9, 2020
@bb4L
Copy link
Author

bb4L commented Dec 14, 2020

@tolomea

I was able to change the styling with the following basic steps:

  1. override template at templates/data_browser/index.html
  2. create a custom css and add it to the html file

but still it would be nice if the databrowser would use css classes or ids for the different parts (e.g. the saved views on the home page)

this would make style adjustments less hacky, now I had to do something like:

div.Index > div {
    background: white;
}

@tolomea
Copy link
Owner

tolomea commented Dec 14, 2020

You will want to pin the specific version of data browser. I believe you will have to update it every time the version shifts.
The CSS classes is an interesting point, so far I've just been adding the stuff I needed to get it styled, and the more dynamic styling is inline in the react code.

@tolomea
Copy link
Owner

tolomea commented Dec 14, 2020

nts: it should be possible to use django templating to include another css file, but any form of compilation for that file will be a host developer problem
and maybe I should have a standard practice of the top element in react component having a class matching the component name

@bb4L
Copy link
Author

bb4L commented Dec 14, 2020

it should be possible to use django templating to include another css file, but any form of compilation for that file will be a host developer problem

there is no compilation needed if the .css is added to the "index.html" in the templates folder 😃

and maybe I should have a standard practice of the top element in react component having a class matching the component name

i guess that would support / ease the setup for a custom css

does the index.html change if you change something in the library?

@tolomea
Copy link
Owner

tolomea commented Dec 14, 2020

the source for it is here https://github.com/tolomea/django-data-browser/blob/master/frontend/public/index.html
that goes into the JS build process which results in the one you see here https://github.com/tolomea/django-data-browser/blob/master/data_browser/templates/data_browser/index.html
AFAIK the JS build process mostly replaces the <div id="root"></div> with the webpack load guff, that has hardcoded references to webpack chunks like ./static/js/main.71e3e868.chunk.js which are going to change on every JS build
that said django template variables survive this process and I use django templating to inject the config(aka contex) info into the page, so I could in theory add a css include the same way

@bb4L
Copy link
Author

bb4L commented Dec 14, 2020

ok thank you for the detailed explanation

would django template "blocks" survive this procedure? 🤔 if yes they might be the solution to add custom css/head data or change the code around the <div id="root"></div>

or are there better solutions for that? 🤔

@baltadlakd
Copy link

All the styling is baked into the react app so currently the only way would be to modify and rebuild the react app, the process would be.
0: fork it
1: alter the css
2: run npm install in the frontend dir
2: run the build_fe script
3: commit the changes
4: install from your fork

In general I'm not opposed to making this more customizable. It's just a question of how much and how.

but what if i want to check if i like the style before the build? i mean, how can i start the development server from this react app to watch it in real time? can you help us?

@tolomea
Copy link
Owner

tolomea commented Dec 17, 2020

Instructions for running the JS dev server are available here https://github.com/tolomea/django-data-browser/blob/master/CONTRIBUTING.rst#development

@tolomea
Copy link
Owner

tolomea commented Dec 19, 2020

@bb4L I added an extrahead block and tested to make sure I could use it to inject some CSS, instructions are in the CSS, I will spin a 3.1.4 release with this in, I also tidied up some of the CSS class name stuff, so there's more class names in the code and they are more consistent in naming. Let me know how that goes.

@bb4L
Copy link
Author

bb4L commented Dec 22, 2020

@tolomea

Thank you for the update.

I will test it and let you know how it goes.

As far as I remember I also would have needed a block around the root div.

Then I would have been able to embed it into the existing page (e.g. with the same navbar/ footer)

@tolomea
Copy link
Owner

tolomea commented Dec 22, 2020 via email

@bb4L
Copy link
Author

bb4L commented Dec 22, 2020

Sorry for that.

I probably wasn't precise enough.

Ah, I hadn't thought of it like that, changes the way you look at it a bit.

On Tue, Dec 22, 2020 at 10:09 AM L P @.***> wrote: @tolomea https://github.com/tolomea Thank you for the update. I will test it and let you know how it goes. As far as I remember I also would have needed a block around the root div. Then I would have been able to embed it into the existing page (e.g. with the same navbar/ footer) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#24 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGERUAB3MDKLVSNUFLG7PDSWBV45ANCNFSM4USDQAJQ .

@tolomea tolomea reopened this Dec 23, 2020
@tolomea
Copy link
Owner

tolomea commented Dec 23, 2020

There is lot of stuff that could potentially be done here, so I'd like to start by putting some limits on the scope.

1: Right off I'm not interested in trying to support anything resembling splitting up / rearranging the core app. Particularly the triplet of index, query and saved query pages.

2: I am partial to supporting that core app being nested within other stuff.

3: As for customizing the style of the app itself, I'd like it to be possible, but there are limits on how much effort I want to expend on accommodating it. An example might help, I use particular fonts and font sizes and I will write the CSS assuming that those are the fonts in use. It should be possible for you to replace the fonts, but any collateral styling damage from that is your problem.

Maybe I'm overthinking this, I'm not a frontend dev, but my current thought it is roughly I want to support both:
1: Replace base.html entirely, import font-head to get the font links
2: Override just the title and favicons, or inject something into the body around the ddb-app etc

I think that will require the following changes:
1: split index.html into base.html, font-head.html and index.html.
1a: Index will extend base and will have only the core app and it's associated data.
1b: font-head will have the links for the google fonts and will be included in the head section of base
2: move the logo from the JS to pure html in base
3: scope all of my css so it only applies inside the logo or the core app
4: base needs blocks for head, extra-head, favicon-head, title, body, ddb-logo and ddb-app(index implements this)

How does that sound to you?
Is there anything missing?
Is any of it overkill?

edit: don't need font-head.html, it can be another block in index.html

@bb4L
Copy link
Author

bb4L commented Jan 4, 2021

@tolomea sorry for the late reply

1: Right off I'm not interested in trying to support anything resembling splitting up / rearranging the core app. Particularly the triplet of index, query and saved query pages.

I completely understand, this shouldn't be needed

2: I am partial to supporting that core app being nested within other stuff.

happy to hear that

3: As for customizing the style of the app itself, I'd like it to be possible, but there are limits on how much effort I want to expend on accommodating it. An example might help, I use particular fonts and font sizes and I will write the CSS assuming that those are the fonts in use. It should be possible for you to replace the fonts, but any collateral styling damage from that is your problem.

I can agree / understand on that point as well

I think that will require the following changes:
1: split index.html into base.html, font-head.html and index.html.
1a: Index will extend base and will have only the core app and it's associated data.
1b: font-head will have the links for the google fonts and will be included in the head section of base
2: move the logo from the JS to pure html in base
3: scope all of my css so it only applies inside the logo or the core app
4: base needs blocks for head, extra-head, favicon-head, title, body, ddb-logo and ddb-app(index implements this)

Yes that all makes sense, in terms of the body it might be tricky since one would want to override / add classes to the body tag
and change/ embed the "root" div inside some custom html.

eg:

....

<body class="foo">

<div class="bar">

<div id="root">
</div>

</div>
....
</body>

3: scope all of my css so it only applies inside the logo or the core app

I guess this is more a "nice to have" as long as a user is able to completely override the styling

@tolomea
Copy link
Owner

tolomea commented Jan 4, 2021

4: I believe for that usecase you can override the base template with another base that extends the original and implements the body block and then have the ddb-app block inside your body block. This essentially lets you replace the whole body but keep everything else.

3: Because of the way my CSS is built into the React chunks I don't think you are going to be able to not have my CSS loaded and loaded late, so getting round it is going to require being more specific / important with selectors. I'm ok with that inside the data browser components, but it seems a lil harsh for the global changes I make.

@bb4L
Copy link
Author

bb4L commented Jan 4, 2021

4: I believe for that usecase you can override the base template with another base that extends the original and implements the body block and then have the ddb-app block inside your body block. This essentially lets you replace the whole body but keep everything else.

that's correct but the script tag's are usually inside the body

i'm not sure if a can access those unless they are specified inside a seperate html? 🤔

3: Because of the way my CSS is built into the React chunks I don't think you are going to be able to not have my CSS loaded and loaded late, so getting round it is going to require being more specific / important with selectors. I'm ok with that inside the data browser components, but it seems a lil harsh for the global changes I make.

Yes that's fine, it doesn't really matters as long as i can override/add a stylesheet after it 😇

@tolomea
Copy link
Owner

tolomea commented Jan 4, 2021

that's correct but the script tag's are usually inside the body

Yes, they are immediately before and after what is currently the "root" div (will be the ddb-app div) I intend for that div and the script tags to end up in the ddb-app block which will get defined by index.html, so as long as you keep the placeholder block when you override base.html I think it should be good, but I will verify that when I make the changes

@bb4L
Copy link
Author

bb4L commented Jan 4, 2021

Yes, they are immediately before and after what is currently the "root" div (will be the ddb-app div) I intend for that div and the script tags to end up in the ddb-app block which will get defined by index.html, so as long as you keep the placeholder block when you override base.html I think it should be good, but I will verify that when I make the changes

alright that sounds like it should work :-)

thank you very much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants