From 47f3fc875ba7ea2c091ad60870568259828fafd5 Mon Sep 17 00:00:00 2001
From: Aljaz S <me@aljaxus.eu>
Date: Wed, 17 Nov 2021 12:03:15 +0100
Subject: [PATCH] updated the docs styling for pre, code

---
 src/index.html | 13 +++++++++++--
 src/style.css  | 10 ++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/index.html b/src/index.html
index 2ebadd0..da3f1b3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,11 +23,20 @@
     <section>
         <h1>API</h1>
         <h4 id="api-qrcode"><a href="#api-qrcode">&#128279;</a> <code>GET /api/qrcode</code></h4>
-        <p>Following the specification from official documentation - <a href="https://www.upn-qr.si/uploads/files/NavodilaZaProgramerjeUPNQR.pdf">NavodilaZaProgramerjeUPNQR.pdf</a>, section <code>4. Vsebina kode QR</code>.</p>
+        <div>
+            <span>Returns a <code>image/png</code> image if successful (OK 200), else returns the following JSON <code>{ ok: false, errors: String[] }</code> where <code>errors</code> is an array of descriptive strings.</span>
+            <br>
+            <pre>
+&#x3C;!-- Meant to be used as direct image source, for example --&#x3E;
+&#x3C;img src="https://upn-qr.gitapp.si/api/qrcode?client_name=Šolski center Nova Gorica&client_address=Cankarjeva ulica 8a&client_city=5000 Nova Gorica&amount=00000001000&payment_purpose=placilo&iban=SI56020170014356205&reference=SI121234567890120&issuer_name=Hitre Spletne Strani Na 123&issuer_address=Namisljena ulica 1a&issuer_city=1000 Ljubljana"&#x3E;
+            </pre>
+            <img src="/api/qrcode?client_name=Šolski center Nova Gorica&client_address=Cankarjeva ulica 8a&client_city=5000 Nova Gorica&amount=00000001000&payment_purpose=placilo&iban=SI56020170014356205&reference=SI121234567890120&issuer_name=Hitre Spletne Strani Na 123&issuer_address=Namisljena ulica 1a&issuer_city=1000 Ljubljana">
+        </div>
         <br>
-
+        
         <div>
             <b>Query parameters:</b>
+            <p>Following the specification from official documentation - <a href="https://www.upn-qr.si/uploads/files/NavodilaZaProgramerjeUPNQR.pdf">NavodilaZaProgramerjeUPNQR.pdf</a>, section <code>4. Vsebina kode QR</code>.</p>
             <h5 id="api-qrcode-client_name"><a href="#api-qrcode-client_name">&#128279;</a> <code>client_name</code></h5>
             <div>
                 Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
diff --git a/src/style.css b/src/style.css
index 40f0488..8e7795d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,7 +14,7 @@ html {
     padding: 0 0;
     width: 100vw;
     display: grid;
-    grid-template-columns: auto minmax(50vw, 550px) auto;
+    grid-template-columns: auto minmax(50vw, 650px) auto;
     background-color: var(--c-dark);
 }
 
@@ -35,19 +35,25 @@ body {
     font-family: monospace;
     font-size: 16px;
     line-height: 1.6em;
+    word-break: normal;
 }
 
 a {
     color: var(--c-accent);
     text-decoration: none;
 }
-code {
+code,
+pre {
     background-color: var(--c-dark);
     padding: 6px 4px 2px 4px;
     word-break: break-all;
 }
+pre {
+    overflow-x: scroll;
+}
 section div {
     padding-left: 25px;
+    display: grid;
 }
 
 .credits {