Background image rendering

#1

I have created a new ScrollView, like this

div.log
    div
    div....

For the log class i have set

background-image: linear-gradient(transparent 50%, rgba(0,0,0,0.2) 50%)
background-size: 49px 40px;

the background remains fixed and does not scroll with the content,

So i added background to the child divs, now the background scrolls witht the content, but the background is rendered for only that part of the window that is visible, if i scroll down the background breaks.

So what is the way to refresh the background so it is visible in the whole window or make the background scroll with the content.

56014409f4e600d7.png1366×768

#2

Sounds like you might be running into the same problem as from this topic?

#3

@NikhilKalige Also, I am looking forward to that git log package! It’s a great idea to compliment the existing git diff decorations, to start managing the repository more and more from inside Atom.

Good work so far!

#4

@leedohm I am able to scroll without any issues, but the issue is as you can see in the image, line like pattern is visible only in the top half.

When i open this pane, the pattern is proper, but when i scroll down you see the broken pattern. It seems like the background pattern is not rendered for the part which is not visible when the pane is opened.

#5

Ah ok … sorry I don’t have any suggestions for you on that one :cry:

But, like @batjko, I’m excited to see the release of this package :smiley:

#6

@NikhilKalige Can you post a link to your repo so that I can take a look at your code?

#7

git-log
branch feature/ui

#8

Seeing as people use different fonts and font sizes, wouldn’t it be better to change the background on every other row instead of doing it as a background?

#9

React decorations API?

#10

The problem here is that the svg being generated also needs to be changed if you change the font size

#11

do not know if that works… because i feel it works only if you have a editorview…

#12

@NikhilKalige I tried to install your package to test it lives and see how the markup was formed, but it seems I’ve got serious issues to install contextify (npm-debug.log here). I’m able to run npm install contextify on node v0.10 but not in v0.11, and apm install fails with the same errors as v0.11.

Is there some specific setup/actions to do in order to install it properly?

#13

@abe Nothing special… I just clone it to the packages directory. The only external requirement is “D3”. I am also using v0.10 so i am not sure about v0.11. i have updated the repo

#14

this may help https://github.com/TooTallNate/node-gyp/issues/363

#15

Thanks, it seems that just using npm install did the trick, but I wonder how it will behave once published, I never encountered a package where dependencies were not installed through apm.

A first question, now that I have the package running, why did you not used a table or a list instead?

It seems that your background issue would have been completely solved with the solution @danielbrodin suggested.

There’s may have a solution in between, if you use the :before element of the p in the first column to create the background appearing behind the graph. I tried the following snippet placed inside the .column rule of your stylesheet and it seems like it can do the trick with some tweaks:

p:nth-child(odd) {
    background: rgba(0,0,0,0.3);
    position: relative;
}

&:nth-child(3) {
    p:nth-child(odd):before {
        content: '';
        display: block;
        background: inherit;
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        right: 100%;
    }
}

You’ll have to tweak the z-index of the graph to make it appears above these decorations, and also tweaking the column padding to prevent the gaps appearing in the lines.

#16

@abe Did you pull the latest update… The background works now… As for as to using multiple divs… the svg file will create a problem

#17

Just pulled the latest version, and yes I got backgrounds :), but there’s a little issue with the graph column background:

Another remark, I would avoid using linear-gradient in favor of a more simplistic approach (using nth-child on paragraphs). One reason is that gradient are sometimes costly and tricky to setup.

As for the graph problem, you can have a list for the logs, with a big left padding, then you can place the graph above the list in the space created by the padding. At least the markup would make some sense to people willing to customize it.

My 2 cents

#18

@abe Regarding the table based layout… i thought of created a resizable column kind of layout… but found it too complicated and so opted out… Any help on that?

#19

I’ll try something when I come back home

#20

@abe I am trying to use gravatar in my package… so do you any way of caching the images