Improve the service listing

* Show service logos next to their names.
 * Make the details toggles more explicit, by also including the
   service names.

_pages/tjenester.md

@@ -4,16 +4,70 @@ title: Tjenester
 permalink: /tjenester/
 ---
 
-Her er en oversigt over de tjenester vi tilbyder. Nogle er [åbne for
-alle](#tjenester-der-er-åbne-for-alle), andre er kun for vores medlemmer. Alle
-tjenester er markeret med nogle badges, der deklarerer i hvor høj grad den
-enkelte tjeneste lever op til [kerneprincipperne defineret i formålsparagraffen
-i vores 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/).
+Her er en oversigt over de tjenester vi tilbyder. Nogle er [kun for vores
+medlemmer](#tjenester-der-kun-er-for-vores-medlemmer), andre er [åbne for
+alle](#tjenester-der-er-åbne-for-alle). Alle tjenester er markeret med nogle
+badges, der deklarerer i hvor høj grad den enkelte tjeneste lever op til
+[kerneprincipperne defineret i formålsparagraffen i vores
+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
 
-### [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">
     <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>
             <span class="badge badge-partial badge-anonymous-access">Delvis:</span>
             <a href="/tjenester/badges/#anonym-adgang">
-                Anonym adgang
+                Delvis anonym adgang
             </a>[1]
         </li>
     </ul>
@@ -63,7 +117,7 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
 </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">
     <p>Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>

_sass/_datacoop.scss

@@ -68,3 +68,22 @@
 .hidden {
     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);
+}

js/datacoop.js

@@ -2,11 +2,13 @@ window.onload = function(e) {
     var details = document.querySelectorAll("section.service-details");
     for (var detail of details) {
         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) {
             e.preventDefault();
-            var hide = e.target.previousSibling.classList.toggle("hidden");
-            e.target.text = hide ? "Læs mere" : "Skjul detaljer";
+            var service_name = e.target.previousElementSibling.previousElementSibling.querySelector("a").text;
+            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.classList.add("hidden");