From 46cb78df1ce799481de79b2ecc1aee2c62c2e255 Mon Sep 17 00:00:00 2001
From: husbando_enjoyer <husbando_enjoyer@altdom.simplelogin.com>
Date: Mon, 15 Dec 2025 19:11:03 +0100
Subject: [PATCH] Change layout and texts

---
 frontend/src/App.svelte     | 161 +++++++++++++++++++-----------------
 frontend/src/styles/app.css |   7 +-
 2 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 9c82b04..feb4870 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -99,8 +99,8 @@
                 está inspirada en la de nuestra querida escuela.
             </p>
             <div class="actions">
-                <button on:click={() => fetchMenu()} class="ghost">Refrescar menú</button>
-                <button on:click={() => fetchPrices()}>Recalcular desayunos</button>
+                <button on:click={() => fetchMenu()}>Refrescar menú</button>
+                <button on:click={() => fetchPrices()} class="ghost">Recalcular desayunos</button>
             </div>
             <p class="meta">
                 Backend: {API_BASE} · Endpoints: /menu · /prices · /prices/:item · /health
@@ -255,11 +255,42 @@
             {/if}
         </article>
 
+        <article class="card">
+            <div class="card-head">
+                <div class="label">Desayunos</div>
+                {#if loadingPrices}
+                    <span class="tag">cargando...</span>
+                {/if}
+            </div>
+
+            {#if prices.length}
+                <div class="price-grid">
+                    {#each prices as price}
+                        <div class="price-card">
+                            <p class="item">{prettify(price.item)}</p>
+                            <p class="value">{price.price} €</p>
+                            <p class="timestamp">{price.generated_at}</p>
+                        </div>
+                    {/each}
+                </div>
+                <p class="meta">
+                    Dependiendo de si vas por la mañana o por la tarde los precios cambian. No sé,
+                    como no ponen los precios al público... :p
+                </p>
+            {:else if !loadingPrices}
+                <p>No hay precios que mostrar.</p>
+            {/if}
+        </article>
+
         <article class="card ci-card">
             <div class="card-head">
                 <div>
                     <p class="label">Estado del sistema</p>
-                    <p class="sub">Información de build y backend</p>
+                    <p class="sub">
+                        Información de build y backend. Tanto el Build, Commit y Autor lo
+                        recuperamos gracias a Jenkins, inyectando ciertas variables a la hora de
+                        hacer despliegue del backend.
+                    </p>
                 </div>
                 {#if loadingCiStatus}
                     <span class="tag">comprobando...</span>
@@ -309,7 +340,11 @@
             <div class="card-head">
                 <div>
                     <p class="label">Historial</p>
-                    <p class="sub">Builds recientes en Jenkins</p>
+                    <p class="sub">
+                        Builds recientes en Jenkins. Esto lo conseguimos gracias a que Jenkins nos
+                        expone una API REST muy maja para consultar información de los jobs y
+                        builds.
+                    </p>
                 </div>
                 {#if loadingHistory}
                     <span class="tag">actualizando...</span>
@@ -363,88 +398,60 @@
             {/if}
         </article>
 
-        <article class="card">
-            <div class="card-head">
-                <div class="label">Desayunos</div>
-                {#if loadingPrices}
-                    <span class="tag">cargando...</span>
-                {/if}
-            </div>
-
-            {#if prices.length}
-                <div class="price-grid">
-                    {#each prices as price}
-                        <div class="price-card">
-                            <p class="item">{prettify(price.item)}</p>
-                            <p class="value">{price.price} €</p>
-                            <p class="timestamp">{price.generated_at}</p>
-                        </div>
-                    {/each}
-                </div>
-                <p class="meta">
-                    Dependiendo de si vas por la mañana o por la tarde los precios cambian. No sé,
-                    como no ponen los precios al público... :p
-                </p>
-            {:else if !loadingPrices}
-                <p>No hay precios que mostrar.</p>
-            {/if}
-        </article>
-
         <article class="card openbokeron-card">
-    <div class="card-head">
-        <div>
-            <p class="label">Open Bokeron</p>
-            <p class="sub">Quiénes estamos detrás del taller</p>
-        </div>
-        <a
-            class="tag link-tag"
-            href="https://openbokeron.org"
-            target="_blank"
-            rel="noreferrer"
-        >
-            openbokeron.org
-        </a>
-    </div>
-
-    <div class="openbokeron-body">
-        <div class="openbokeron-copy">
-            <p class="openbokeron-text">
-                Somos Open Bokeron, la asociación de software libre de la ETSII.
-            </p>
-
-            <p class="openbokeron-text subtle">
-                Este tinglado lo hemos montado nosotros, así que sí: esta tarjeta se queda todo el
-                taller
-            </p>
-
-            <ul class="openbokeron-list">
-                <li>Usamos Linux y te juzgamos severamente si vienes con Windows.</li>
-                <li>A veces hacemos cosas. #HazCosas dicen por aquí en la ETSII.</li>
-            </ul>
-
-            <div class="openbokeron-actions">
+            <div class="card-head">
+                <div>
+                    <p class="label">Open Bokeron</p>
+                    <p class="sub">Quiénes estamos detrás del taller</p>
+                </div>
                 <a
-                    class="button-link subtle"
+                    class="tag link-tag"
                     href="https://openbokeron.org"
                     target="_blank"
                     rel="noreferrer"
                 >
-                    Conócenos
+                    openbokeron.org
                 </a>
             </div>
-        </div>
 
-        <div class="openbokeron-logo">
-            <div class="logo-bubble">
-                <img
-                    src="/open-bokeron-logo.png"
-                    alt="Logo de Open Bokeron"
-                    loading="lazy"
-                />
+            <div class="openbokeron-body">
+                <div class="openbokeron-copy">
+                    <p class="openbokeron-text">
+                        Somos Open Bokeron, la asociación de software libre de la ETSII.
+                    </p>
+
+                    <p class="openbokeron-text subtle">
+                        Este tinglado lo hemos montado nosotros, así que sí: esta tarjeta se queda
+                        todo el taller
+                    </p>
+
+                    <ul class="openbokeron-list">
+                        <li>Usamos Linux y te juzgamos severamente si vienes con Windows.</li>
+                        <li>A veces hacemos cosas. #HazCosas dicen por aquí en la ETSII.</li>
+                    </ul>
+
+                    <div class="openbokeron-actions">
+                        <a
+                            class="button-link subtle"
+                            href="https://openbokeron.org"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Conócenos
+                        </a>
+                    </div>
+                </div>
+
+                <div class="openbokeron-logo">
+                    <div class="logo-bubble">
+                        <img
+                            src="/open-bokeron-logo.png"
+                            alt="Logo de Open Bokeron"
+                            loading="lazy"
+                        />
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
-</article>
-
+        </article>
     </section>
 </main>
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 2718590..370a26d 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -413,7 +413,7 @@ li {
     gap: 0.4rem;
 }
 
-.openbokeron-copy>*+* {
+.openbokeron-copy > * + * {
     margin-top: 0.3rem;
 }
 
@@ -429,8 +429,6 @@ li {
     font-size: 0.9rem;
 }
 
-
-
 .openbokeron-list {
     margin: 0.2rem 0 0;
     padding-left: 1.1rem;
@@ -442,7 +440,6 @@ li {
     gap: 0.3rem;
 }
 
-
 .openbokeron-actions {
     display: flex;
     gap: 0.6rem;
@@ -482,7 +479,6 @@ li {
     background: rgba(255, 255, 255, 0.14);
 }
 
-
 .openbokeron-logo {
     display: flex;
     align-items: center;
@@ -507,7 +503,6 @@ li {
     opacity: 0.9;
 }
 
-
 .price-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));