CSS issues?

[christianalfoni]

Hi there,

Really great project!

Running this project there seems to be CSS issues with it? Notice that the content of the modal is not taking up all the space, the right scrollbar there.

There is no save button, so can not create examples of my components?

[wmertens]

Seeing the same thing, also the sidebar does not scroll if there are too many components.

The props are auto-save though, so that works.

[mxstbr]

Dang, @nikgraf that ones for you I think!

@christianalfoni what browser/device are you on?

The props are auto-save though, so that works.

We should add a "Saving…"/"Saved!" indicator for the autosave functionality! #305

[christianalfoni]

Using latest Chrome.

would suggest adding a bit opacity to the modal so that you can see the component changing in the background. Makes it a little bit more intuitive maybe.

I think I was confused by the demo picture where it looked like you were adding multiple components to "Core" and "edge case". Maybe use an example with a simple button where you say "primary", "secondary" etc. The list just threw me off a bit, so was looking for a way to add and save multiple components. Anyways... it might be me being stupid :)

I can send you a picture of our project with some buttons to suggest changing it.

[mxstbr]

Yeah, the UI/UX of the thing is by far not perfect yet. See #246 and #259 for more information.

[nikgraf]

@christianalfoni I just tried to run it. Checkout out the branch and did npm install & npm start, but id didn't work. Anything else I need to do?

I get a couple of these:

ERROR in ./common/IconSVG/index.js
Module not found: Error: Cannot resolve module 'ducky-assets/vector_graphics/activities/act_consumption_01_repair.svg' in /path/to/project/ducky-components/common/IconSVG
 @ ./common/IconSVG/index.js 19:33-113

One thing I noticed is that you guys use React 0.14.8. In theory we could package React into the client bundle and only use your React version for the iFrame. This is not the case right now, which might break the app.

[christianalfoni]

Be sure to check out the cartheblanch branch... typo there, hehe.

Also I have pushed the ducky-assets in there now, so it is part of the project. ACtually a hidden repo... but nothing secret there.

So just pull and checkout cartheblanch, it should work :)

[nikgraf]

@christianalfoni works now, thx

[nikgraf]

@christianalfoni Just discovered the issue: right now we don't get out the css from ExtractTextPlugin inside the iFrame. We need to fix this on our side. Hopefully in the next couple days. I got it working using the raw style loader. For some reason the icons inside an ActionButton are missing while working fine on the / root page. Any ideas?

I created a PR: https://github.com/DuckyTeam/ducky-components/pull/107

[christianalfoni]

Great stuff, thanks :)

We do not need to use extract plugin in development anyways, so I can turn that off.

About the images it might be because we use a relative path to get them, but should absolute path. So it tries to find image on /carte-blanche/someimage.png, but it is located on : /someimage.png... Let me look into it and let you know :)

[christianalfoni]

Ah no, it is some fonts we load in our index.html file

[christianalfoni]

Hm, is there any strategy for loading stylesheets in the carte-blanche dashboard?

[christianalfoni]

I can write a stylesheet loader plugin maybe :)

[nikgraf]

@christianalfoni yep there is a files option as well as the injectTags option for the React plugin. Still need to document them 😄

https://github.com/carteb/carte-blanche/blob/master/examples/redux/todomvc/webpack.config.babel.js#L29-L33

https://github.com/carteb/carte-blanche/blob/master/examples/users/webpack.dev.babel.js#L35-L37

[christianalfoni]

Sweet! though... hm:

    ReactPlugin = require('carte-blanche-react-plugin');

...

        new CarteBlanche({
            componentRoot: './common',
            plugins: [
                new ReactPlugin({
                    injectTags: [
                        '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">',
                    ]
                })
            ]
        }),

Can not see the tag is injected looking at the source of the html, and no icon there, hm hm

[nikgraf]

Did you push? I can double check what's going on 🙌

[christianalfoni]

Pushed, awesome, big thanks :)

[nikgraf]

@christianalfoni Just checkout out your version. The tag actually was injected, but in the body. I moved them into the head with this PR https://github.com/carteb/carte-blanche/pull/310, but I don't think it makes a difference. May it be that it was the wrong CSS file?

In the css file I could only find classes like: zmdi-battery, but even by using the string zmdi-battery I saw a broken character in the action button. At least it was there, but seems like font-loading didn't execute properly.

[nikgraf]

@wmertens @christianalfoni Max already merged a PR to make the left sidebar scrollable 🙌

[christianalfoni]

Can you have tags in the body? Thought they were required in the head tag... hm hm... anyways, big thanks. Will try it out next week again. Big thanks for all your help @nikgraf !

[mxstbr]

Can you have tags in the body?

It's HTML, you can have everything everywhere. :grin:

[christianalfoni]

Aha, in HTML4: “This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.” HTML5 it is okay :) Though yes, bad practice I would suggest as styles are not added before body renders... of course depending on scenario. Anyways, good to know :)

[mxstbr]

Absolutely agreed, very bad practice! It's fixed now anyway, that was just my quickly-finish-this-before-launch-coding :grin: