Improve the service listing

* Show service logos next to their names.
 * Make the details toggles more explicit, by also including the
   service names.
This commit is contained in:
Mikkel Munch Mortensen 2019-02-12 14:12:19 +01:00
parent 509f927612
commit 89cce7d85c
Signed by untrusted user: decibyte
GPG key ID: 261C257C74AA764B
6 changed files with 87 additions and 12 deletions

View file

@ -4,16 +4,70 @@ title: Tjenester
permalink: /tjenester/ permalink: /tjenester/
--- ---
Her er en oversigt over de tjenester vi tilbyder. Nogle er [åbne for Her er en oversigt over de tjenester vi tilbyder. Nogle er [kun for vores
alle](#tjenester-der-er-åbne-for-alle), andre er kun for vores medlemmer. Alle medlemmer](#tjenester-der-kun-er-for-vores-medlemmer), andre er [åbne for
tjenester er markeret med nogle badges, der deklarerer i hvor høj grad den alle](#tjenester-der-er-åbne-for-alle). Alle tjenester er markeret med nogle
enkelte tjeneste lever op til [kerneprincipperne defineret i formålsparagraffen badges, der deklarerer i hvor høj grad den enkelte tjeneste lever op til
i vores vedtægter](/_pages/vedtaegter.html#-2-form%C3%A5l). Vi har også skrevet [kerneprincipperne defineret i formålsparagraffen i vores
en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/). vedtægter](/_pages/vedtaegter.html#-2-form%C3%A5l). Vi har også skrevet en
uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
## Tjenester der kun er for vores medlemmer
<h3 class="service nextcloud"><a href="https://cloud.data.coop/">Nextcloud</a> filer, kalender, adressebog</h3>
<section class="service-details">
<p>Gem dine filer, din kalender og dine kontakter i skyen og tilgå alt fra alle dine enheder.</p>
<h4>Badges</h4>
<ul class="badges">
<li>
<span class="badge badge-positive badge-secure-connection">Positiv:</span>
<a href="/tjenester/badges/#sikker-forbindelse">
Sikker forbindelse
</a>
</li>
<li>
<span class="badge badge-negative badge-encrypted-data-storage">Negativ:</span>
<a href="/tjenester/badges/#krypteret-opbevaring-af-data">
Data opbevares <em>ikke</em> krypteret
</a>
</li>
<li>
<span class="badge badge-negative badge-zero-knowledge">Negativ:</span>
<a href="/tjenester/badges/#zero-knowledge">
<em>Ikke</em> omfattet af zero knowledge
</a>
</li>
<li>
<span class="badge badge-negative badge-backup">Negativ:</span>
<a href="/tjenester/badges/#backup">
<em>Ingen</em> backup af data
</a>
</li>
<li>
<span class="badge badge-negative badge-logging">Negativ:</span>
<a href="/tjenester/badges/#logning">
Der foretages logning
</a>
</li>
<li>
<span class="badge badge-partial badge-anonymous-access">Delvis:</span>
<a href="/tjenester/badges/#anonym-adgang">
Delvis anonym adgang
</a>[1]
</li>
</ul>
<p class="badge-notes">
[1] Det kræver login at sende data til skyen. Men det er muligt at dele
dine data med andre (eller dig selv) uden at de skal logge ind.
</p>
</section>
## Tjenester der er åbne for alle ## Tjenester der er åbne for alle
### [Gitea](https://git.data.coop/) hosting af <a href="https://da.wikipedia.org/wiki/Git">git-versionsstyringssystem</a> <h3 class="service gitea"><a href="https://git.data.coop/">Gitea</a> hosting af <a href="https://da.wikipedia.org/wiki/Git">git-versionsstyringssystem</a></h3>
<section class="service-details"> <section class="service-details">
<p>Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p> <p>Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p>
@ -52,7 +106,7 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
<li> <li>
<span class="badge badge-partial badge-anonymous-access">Delvis:</span> <span class="badge badge-partial badge-anonymous-access">Delvis:</span>
<a href="/tjenester/badges/#anonym-adgang"> <a href="/tjenester/badges/#anonym-adgang">
Anonym adgang Delvis anonym adgang
</a>[1] </a>[1]
</li> </li>
</ul> </ul>
@ -63,7 +117,7 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
</section> </section>
### [Passit](https://passit.data.coop/) password manager <h3 class="service passit"><a href="https://passit.data.coop/">Passit</a> password manager</h3>
<section class="service-details"> <section class="service-details">
<p>Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p> <p>Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>

View file

@ -68,3 +68,22 @@
.hidden { .hidden {
display: none; display: none;
} }
.service {
text-indent: 2.25em;
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
}
.service.nextcloud {
background-image: url(/images/logos/nextcloud.png);
}
.service.gitea {
background-image: url(/images/logos/gitea.png);
}
.service.passit {
background-image: url(/images/logos/passit.png);
}

BIN
images/logos/gitea.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/logos/nextcloud.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

BIN
images/logos/passit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View file

@ -2,11 +2,13 @@ window.onload = function(e) {
var details = document.querySelectorAll("section.service-details"); var details = document.querySelectorAll("section.service-details");
for (var detail of details) { for (var detail of details) {
var toggle = document.createElement("a"); var toggle = document.createElement("a");
toggle.text = "Læs mere"; var service_name = detail.previousElementSibling.querySelector("a").text;
toggle.text = "Læs mere om " + service_name;
toggle.onclick = function(e) { toggle.onclick = function(e) {
e.preventDefault(); e.preventDefault();
var hide = e.target.previousSibling.classList.toggle("hidden"); var service_name = e.target.previousElementSibling.previousElementSibling.querySelector("a").text;
e.target.text = hide ? "Læs mere" : "Skjul detaljer"; var hide = e.target.previousElementSibling.classList.toggle("hidden");
e.target.text = (hide ? "Læs mere om " : "Skjul detaljer om ") + service_name;
} }
detail.insertAdjacentElement('afterend', toggle); detail.insertAdjacentElement('afterend', toggle);
detail.classList.add("hidden"); detail.classList.add("hidden");