Move inline CSS to layout.css

photo21/static/layout.css

@@ -0,0 +1,37 @@
+/* Login view */
+.login {
+  max-width: 35rem;
+}
+.login .asteriskField {
+  display: none;
+}
+.login .form-group {
+  margin-top: 0.5em;
+}
+
+/* Upload view */
+.upload-drop-zone {
+  height: 10em;
+  line-height: 10em;
+  border-width: 2px;
+  color: #a3a3a3;
+  border-style: dashed;
+  border-color: #a3a3a3;
+  border-radius: 0.5em;
+  text-align: center;
+  margin-bottom: 0.5em;
+}
+.upload-drop-zone.drop {
+  color: #222;
+  border-color: #222;
+  background-color: rgba(163, 163, 163, 0.274);
+}
+
+/* Language selector */
+.lang-select {
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}

photo21/templates/account/base.html

@@ -6,10 +6,3 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
 
 {% block title %}{% block head_title %}{% endblock %}{% endblock title %}
-
-{% block extracss %}
-<style>
-.asteriskField { display: none; }
-.form-group { margin-top: 0.5em;}
-</style>
-{% endblock %}

photo21/templates/account/login.html

@@ -8,7 +8,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% block head_title %}{% trans "Sign In" %}{% endblock %}
 
 {% block content %}
-<div class="card mx-auto" style="max-width: 35rem;">
+<div class="card mx-auto login">
     <h3 class="card-header text-center">
         {% trans "Sign In" %}
     </h3>

photo21/templates/base.html

@@ -16,6 +16,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <meta name="description" content="{% trans "The ENS Paris-Saclay pictures server." %}">
     <link rel="stylesheet" href="{% static "bootstrap5/css/bootstrap.min.css" %}">
     <link rel="stylesheet" href="{% static "bootstrap5/css/bootstrap-dark-plugin.min.css" %}">
+    <link rel="stylesheet" href="{% static "layout.css" %}">
     <link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon-16x16.png" %}">
     <link rel="icon" type="image/png" sizes="32x32" href="{% static "favicon-32x32.png" %}">
     <meta name="theme-color" content="#212529">
@@ -109,9 +110,25 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {% endblock %}
     </main>
     <footer>
-        <p class="small text-center text-muted mt-1">
+        <form action="{% url 'set_language' %}" method="post">
-            <a class="text-reset" href="https://gitlab.crans.org/bde/photo21/">{% trans "Source code" %}</a>
+            {% csrf_token %}
-        </p>
+            <p class="small text-center text-muted mt-1">
+                {% if request.user.is_authenticated %}
+                    {% trans "Connected as" %} <code>{{ request.user.username }}</code> &middot;
+                {% endif %}
+                <a class="text-reset" href="https://gitlab.crans.org/bde/photo21/">{% trans "Source code" %}</a> &middot;
+                <select title="language" name="language" class="lang-select" onchange="this.form.submit()">
+                    {% get_current_language as LANGUAGE_CODE %}
+                    {% get_available_languages as LANGUAGES %}
+                    {% for lang_code, lang_name in LANGUAGES %}
+                        <option value="{{ lang_code }}" {% if lang_code == LANGUAGE_CODE %}selected{% endif %}>
+                            {{ lang_name }} ({{ lang_code }})
+                        </option>
+                    {% endfor %}
+                </select>
+                <noscript><input type="submit"></noscript>
+            </p>
+        </form>
     </footer>
 
     <script src="{% static "bootstrap5/js/bootstrap.min.js" %}"></script>

photo21/templates/index.html

@@ -48,22 +48,4 @@ SPDX-License-Identifier: GPL-3.0-or-later
         </div>
         {% endfor %}
     </div>
-
-    <hr/>
-
-    {% trans "Connected as" %} <code>{{ request.user.username }}</code>.
-    <form action="{% url 'set_language' %}" method="post" style="max-width: 15em;">
-        {% csrf_token %}
-        {% trans "Select another language:" %}
-        <select title="language" name="language" class="form-control form-control-sm" onchange="this.form.submit()">
-            {% get_current_language as LANGUAGE_CODE %}
-            {% get_available_languages as LANGUAGES %}
-            {% for lang_code, lang_name in LANGUAGES %}
-                <option value="{{ lang_code }}" {% if lang_code == LANGUAGE_CODE %}selected{% endif %}>
-                    {{ lang_name }} ({{ lang_code }})
-                </option>
-            {% endfor %}
-        </select>
-        <noscript><input type="submit"></noscript>
-    </form>
 {% endblock %}

photologue/templates/photologue/upload.html

@@ -7,27 +7,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% load i18n crispy_forms_tags %}
 {% block title %}{% trans "Upload" %}{% endblock %}
 
-{% block extracss %}
-<style>
-.upload-drop-zone {
-  height: 10em;
-  line-height: 10em;
-  border-width: 2px;
-  color: #a3a3a3;
-  border-style: dashed;
-  border-color: #a3a3a3;
-  border-radius: 0.5em;
-  text-align: center;
-  margin-bottom: 0.5em;
-}
-.upload-drop-zone.drop {
-  color: #222;
-  border-color: #222;
-  background-color: rgba(163, 163, 163, 0.274);
-}
-</style>
-{% endblock %}
-
 {% block extrajs %}
 <script>
 // When user drags files, register them in the file field