search

materialscloud-org / voila-materialscloud-template

The Voila template for Materials Cloud.
Other
2 stars 3 forks source link

Using the MaterialsCloud loading logo and eliminate loading spinner when toggling between pages #18

Closed dou-du closed 4 years ago

dou-du commented 4 years ago

I found there are two spinners appearing in the template. One is from the base.html and the other is from the default for lab. I think there is no need to show the spinner when toggling between different notebooks. So I remove it. The MaterialsCloud loading spinner will only be shown at the beginning.

CasperWA commented 4 years ago

@dou-du Some suggestions :) When going over a review, I suggest you do the following:

dou-du commented 4 years ago

@dou-du Some suggestions :) When going over a review, I suggest you do the following:

  • "Resolve conversation" when you have implemented the suggested change.
  • Re-request a review when you feel you have addressed the latest review, i.e., when you have either resolved all conversations because you agree with them or responded to all comments you don't agree with or need more information about.

Thanks :) I will do as your suggestions.

CasperWA commented 4 years ago

@dou-du I have just pushed a commit that adds the file spinner.macro.html.j2. I couldn't get your implementation to work, and I couldn't figure out why. I delved far and deep into the world of Voilà and nbconvert templates until I finally found the root template(s) being used to create the HTML page.

The MaterialsCloud template extends from itself (the voila template extends the nbconvert template). The MaterialsCloud nbconvert template then extends the lab template. Again, the voila template for lab takes precedence over the nbconvert template for lab. This points from the index.html.j2 to the base.html.j2 template within lab, which finally points to the base templates display_priority.j2 and eventually null.j2.

However, the spinner is invoked in the voila (not nbconvert) template for lab (index.html.j2), where it is invoked through the spinner.macro.html.j2. Hence, if we create this file in out voila (not nbconvert) template, we essentially "overwrite" the existing one and replace it with whatever we want - in this case the animated MaterialsCloud logo in SVG.

So TL;DR: By adding the spinner.macro.html.j2 and pointing to the animated MaterialsCloud logo, I finally have it working locally (using make serve).

dou-du commented 4 years ago

@dou-du I have just pushed a commit that adds the file spinner.macro.html.j2. I couldn't get your implementation to work, and I couldn't figure out why. I delved far and deep into the world of Voilà and nbconvert templates until I finally found the root template(s) being used to create the HTML page.

The MaterialsCloud template extends from itself (the voila template extends the nbconvert template). The MaterialsCloud nbconvert template then extends the lab template. Again, the voila template for lab takes precedence over the nbconvert template for lab. This points from the index.html.j2 to the base.html.j2 template within lab, which finally points to the base templates display_priority.j2 and eventually null.j2.

However, the spinner is invoked in the voila (not nbconvert) template for lab (index.html.j2), where it is invoked through the spinner.macro.html.j2. Hence, if we create this file in out voila (not nbconvert) template, we essentially "overwrite" the existing one and replace it with whatever we want - in this case the animated MaterialsCloud logo in SVG.

So TL;DR: By adding the spinner.macro.html.j2 and pointing to the animated MaterialsCloud logo, I finally have it working locally (using make serve).

Great! Thanks for figuring out this.

ltalirz commented 4 years ago

Nice work with the loading banner - looks great!