From 34be75ba9fb7988ed6d120c29f0a0157e7b779e3 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sun, 6 Oct 2024 14:09:40 -0700
Subject: [PATCH] firstboot: Make logo image responsive during first setup

- Earlier the main logo image was not responsive. In a mobile layout, it would
overflow the page. Fix this by using correct CSS classes.

- Also move the message to bottom of the log (to be later replaced by the a
spinner).

Tests:

- Remove /var/lib/plinth/plinth.sqlite3 and start service. It will perform
first setup operations. During this time, visit web interface in mobile layout
and notice that logo is taking 100% of the width but not overflowing.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 plinth/templates/first_setup.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/plinth/templates/first_setup.html b/plinth/templates/first_setup.html
index a68dffef8..32bb90b75 100644
--- a/plinth/templates/first_setup.html
+++ b/plinth/templates/first_setup.html
@@ -13,6 +13,11 @@ no-brand
 
 {% block content %}
 
+  <div class="logo">
+    <img class="firstboot img-fluid" alt="{{ box_name }}"
+         src="{% static 'theme/img/freedombox-logo-standard.svg' %}"/>
+  </div>
+
   {% if is_first_setup_running %}
     <div class="alert alert-warning" role="alert">
       {% blocktrans trimmed %}
@@ -22,9 +27,4 @@ no-brand
     </div>
   {% endif %}
 
-  <p class="text-center">
-    <img src="{% static 'theme/img/freedombox-logo-standard.svg' %}"
-         alt="{{ box_name }}" width="640"/>
-  </p>
-
 {% endblock %}