Commit 2b26ce7e authored by Mark Ghiorso's avatar Mark Ghiorso

Add styling and attribution

parent 703bed34
......@@ -16,7 +16,6 @@ import {
import '../style/index.css';
/**
* Initialization data for the jupyterlab_gitlab extension.
*/
......@@ -32,11 +31,22 @@ const extension: JupyterLabPlugin<void> = {
widget.id = 'xkcd-jupyterlab';
widget.title.label = 'xkcd.com';
widget.title.closable = true;
widget.addClass('jp-xkcdWidget'); // new line
// Add an image element to the panel
let img = document.createElement('img');
img.className = 'jp-xkcdCartoon'; // new line
widget.node.appendChild(img);
// New: add an attribution badge
img.insertAdjacentHTML('afterend',
`<div class="jp-xkcdAttribution">
<a href="https://creativecommons.org/licenses/by-nc/2.5/" class="jp-xkcdAttribution" target="_blank">
<img src="https://licensebuttons.net/l/by-nc/2.5/80x15.png" />
</a>
</div>`
);
// Fetch info about a random comic
let settings = ServerConnection.makeSettings();
ServerConnection.makeRequest({url: 'https:////egszlpbmle.execute-api.us-east-1.amazonaws.com/prod'}, settings).then(response => {
......
.jp-xkcdWidget {
display: flex;
flex-direction: column;
overflow: auto;
}
.jp-xkcdCartoon {
margin: auto;
}
.jp-xkcdAttribution {
margin: 20px auto;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment