forked from XimeX/usrspace-browser-addon
add icons and improve styling
This commit is contained in:
parent
9381c4851a
commit
92c2e8ffd6
|
@ -18,5 +18,9 @@ $ git clone https://gitlab.usrspace.at/XimeX/usrspace-browser-addon.git
|
||||||
- Open `manifest.json`
|
- Open `manifest.json`
|
||||||
- Use it
|
- Use it
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
Used icons from FontAwesome
|
||||||
|
https://fontawesome.com/license
|
||||||
|
|
||||||
## License
|
## License
|
||||||
MIT
|
MIT
|
1
icons/font-awesome/clock-regular.svg
Normal file
1
icons/font-awesome/clock-regular.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" data-prefix="far" data-icon="clock" class="svg-inline--fa fa-clock fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>
|
After Width: | Height: | Size: 536 B |
1
icons/font-awesome/cloud-solid.svg
Normal file
1
icons/font-awesome/cloud-solid.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" data-prefix="fas" data-icon="cloud" class="svg-inline--fa fa-cloud fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>
|
After Width: | Height: | Size: 466 B |
1
icons/font-awesome/gitlab-brands.svg
Normal file
1
icons/font-awesome/gitlab-brands.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>
|
After Width: | Height: | Size: 636 B |
1
icons/font-awesome/home-solid.svg
Normal file
1
icons/font-awesome/home-solid.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg>
|
After Width: | Height: | Size: 749 B |
1
icons/font-awesome/wikipedia-w-brands.svg
Normal file
1
icons/font-awesome/wikipedia-w-brands.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg aria-hidden="true" data-prefix="fab" data-icon="wikipedia-w" class="svg-inline--fa fa-wikipedia-w fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M640 51.2l-.3 12.2c-28.1.8-45 15.8-55.8 40.3-25 57.8-103.3 240-155.3 358.6H415l-81.9-193.1c-32.5 63.6-68.3 130-99.2 193.1-.3.3-15 0-15-.3C172 352.3 122.8 243.4 75.8 133.4 64.4 106.7 26.4 63.4.2 63.7c0-3.1-.3-10-.3-14.2h161.9v13.9c-19.2 1.1-52.8 13.3-43.3 34.2 21.9 49.7 103.6 240.3 125.6 288.6 15-29.7 57.8-109.2 75.3-142.8-13.9-28.3-58.6-133.9-72.8-160-9.7-17.8-36.1-19.4-55.8-19.7V49.8l142.5.3v13.1c-19.4.6-38.1 7.8-29.4 26.1 18.9 40 30.6 68.1 48.1 104.7 5.6-10.8 34.7-69.4 48.1-100.8 8.9-20.6-3.9-28.6-38.6-29.4.3-3.6 0-10.3.3-13.6 44.4-.3 111.1-.3 123.1-.6v13.6c-22.5.8-45.8 12.8-58.1 31.7l-59.2 122.8c6.4 16.1 63.3 142.8 69.2 156.7L559.2 91.8c-8.6-23.1-36.4-28.1-47.2-28.3V49.6l127.8 1.1.2.5z"></path></svg>
|
After Width: | Height: | Size: 921 B |
|
@ -1,4 +1,32 @@
|
||||||
|
h2 {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-list-item > .icon {
|
||||||
|
text-align: center;
|
||||||
|
width: 23px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.panel-list-item > .icon > img {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar {
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
#calendar > img {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
#space-api {
|
#space-api {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 8px;
|
||||||
|
height: 128px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
#space-api code {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
|
@ -13,22 +13,22 @@
|
||||||
<h2>Links</h2>
|
<h2>Links</h2>
|
||||||
<div class="panel-section panel-section-list">
|
<div class="panel-section panel-section-list">
|
||||||
<div class="panel-list-item link" data-url="https://usrspace.at/">
|
<div class="panel-list-item link" data-url="https://usrspace.at/">
|
||||||
<div class="icon"><img src="../icons/logo.svg" width="19" height="19" alt="/usr/space" /></div>
|
<div class="icon"><img src="../icons/font-awesome/home-solid.svg" width="19" height="19" alt="Home" /></div>
|
||||||
<div class="text">Homepage</div>
|
<div class="text">Homepage</div>
|
||||||
<div class="text-shortcut"></div>
|
<div class="text-shortcut"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-list-item link" data-url="https://www.usrspace.at/w/">
|
<div class="panel-list-item link" data-url="https://www.usrspace.at/w/">
|
||||||
<div class="icon"></div>
|
<div class="icon"><img src="../icons/font-awesome/wikipedia-w-brands.svg" width="19" height="19" alt="Wiki" /></div>
|
||||||
<div class="text">Wiki</div>
|
<div class="text">Wiki</div>
|
||||||
<div class="text-shortcut"></div>
|
<div class="text-shortcut"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-list-item link" data-url="https://gitlab.usrspace.at/">
|
<div class="panel-list-item link" data-url="https://gitlab.usrspace.at/">
|
||||||
<div class="icon"></div>
|
<div class="icon"><img src="../icons/font-awesome/gitlab-brands.svg" width="19" height="19" alt="Gitlab" /></div>
|
||||||
<div class="text">Gitlab</div>
|
<div class="text">Gitlab</div>
|
||||||
<div class="text-shortcut"></div>
|
<div class="text-shortcut"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-list-item link" data-url="https://cloud.usrspace.at/">
|
<div class="panel-list-item link" data-url="https://cloud.usrspace.at/">
|
||||||
<div class="icon"></div>
|
<div class="icon"><img src="../icons/font-awesome/cloud-solid.svg" width="19" height="19" alt="Cloud" /></div>
|
||||||
<div class="text">NextCloud</div>
|
<div class="text">NextCloud</div>
|
||||||
<div class="text-shortcut"></div>
|
<div class="text-shortcut"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
<h2>Nächster Termine</h2>
|
<h2>Nächster Termine</h2>
|
||||||
<div id="calendar">loading...</div>
|
<div id="calendar">loading...</div>
|
||||||
<h2>Infos</h2>
|
<h2>Infos</h2>
|
||||||
<pre><code id="space-api">loading...</code></pre>
|
<pre id="space-api"><code>loading...</code></pre>
|
||||||
|
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -23,7 +23,8 @@ const updateNextEvent = (nextEvent) => {
|
||||||
const strongElement = document.createElement('strong');
|
const strongElement = document.createElement('strong');
|
||||||
strongElement.textContent = nextEvent.name;
|
strongElement.textContent = nextEvent.name;
|
||||||
const dateNode = document.createTextNode(' ' + new Date(nextEvent.begin).toLocaleString());
|
const dateNode = document.createTextNode(' ' + new Date(nextEvent.begin).toLocaleString());
|
||||||
calendarElement.innerText = '';
|
// calendarElement.innerText = '';
|
||||||
|
calendarElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
|
||||||
calendarElement.append(strongElement);
|
calendarElement.append(strongElement);
|
||||||
calendarElement.append(dateNode);
|
calendarElement.append(dateNode);
|
||||||
if (nextEvent.location) {
|
if (nextEvent.location) {
|
||||||
|
@ -33,7 +34,7 @@ const updateNextEvent = (nextEvent) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateSpaceApiJson = (spaceApi) => {
|
const updateSpaceApiJson = (spaceApi) => {
|
||||||
const spaceApiElement = document.getElementById('space-api');
|
const spaceApiElement = document.querySelector('#space-api code');
|
||||||
const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, ' ').replace(/\n/g, '<br/>');
|
const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, ' ').replace(/\n/g, '<br/>');
|
||||||
spaceApiElement.innerHTML = json;
|
spaceApiElement.innerHTML = json;
|
||||||
// const jsonNode = document.createTextNode(json);
|
// const jsonNode = document.createTextNode(json);
|
||||||
|
|
Loading…
Reference in a new issue