[damned-lies/bootstrap-5] chore: use bootstrap 5 for base template
- From: Guillaume Bernard <gbernard src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [damned-lies/bootstrap-5] chore: use bootstrap 5 for base template
- Date: Sun, 18 Sep 2022 10:17:25 +0000 (UTC)
commit cf703b0fc8c7567c8b6e860f8a62077844f247b6
Author: Guillaume Bernard <associations guillaume-bernard fr>
Date: Sun Sep 18 12:17:17 2022 +0200
chore: use bootstrap 5 for base template
common/static/css/template.css | 36 -----
templates/base.html | 295 ++++++++++++++++++++++------------
templates/login/login_popup_form.html | 46 +++---
templates/login/login_usermenu.html | 23 ++-
4 files changed, 223 insertions(+), 177 deletions(-)
---
diff --git a/common/static/css/template.css b/common/static/css/template.css
index b27e2e13..107274f8 100644
--- a/common/static/css/template.css
+++ b/common/static/css/template.css
@@ -530,42 +530,6 @@ ul.foot li {
list-style-image: url(../img/foot-16.png);
}
-/* Input Forms */
-/* ========================================================================== */
-
-.form-group input {
- width: 100%;
- height: 34px;
- padding: 6px 12px;
- background-color: #fff;
- background-image: none;
- border: 1px solid #ccc;
- border-top-color: rgb(204, 204, 204);
- border-right-color: rgb(204, 204, 204);
- border-bottom-color: rgb(204, 204, 204);
- border-left-color: rgb(204, 204, 204);
- border-radius: 2px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
- -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
- -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
- transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
- transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
- transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s
ease-in-out;
-}
-
-.form-group input:focus {
- border-color: #66afe9;
- outline: 0;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-}
-
-.form-group input:focus {
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
/* About page */
/* ========================================================================== */
diff --git a/templates/base.html b/templates/base.html
index 93e408fb..e6cc7cbc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,141 +2,226 @@
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>{% block title %}{% trans "Damned Lies about GNOME" %}{% endblock %}</title>
- <link rel="icon" type="image/png" href="{% static 'img/favicon.ico' %}">
- <link rel="stylesheet" type="text/css" href="https://static.gnome.org/css/deneb.min.css"
crossorigin="anonymous">
- <link rel="stylesheet" type="text/css" href="{% static 'css/template.css' %}">
-{% if LANGUAGE_BIDI %}
- <link rel="stylesheet" href="{% static 'css/rtl.css' %}">
-{% endif %}
- <script src="{% static 'js/jquery.min.js' %}"></script>
- <script src="{% static 'js/js.cookie-2.2.1.min.js' %}"></script>
- <script src="{% static 'js/main.js' %}"></script>
- <script src="{% static 'js/modal.js' %}"></script>
- <script src="{% static 'js/login.js' %}"></script>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>{% block title %}{% trans "Damned Lies about GNOME" %}{% endblock %}</title>
+ <link rel="icon" type="image/png" href="{% static 'img/favicon.ico' %}">
+ <link rel="stylesheet" type="text/css" href="{% static 'css/template.css' %}">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
+ crossorigin="anonymous"></script>
+
+ {% if LANGUAGE_BIDI %}
+ <link rel="stylesheet" href="{% static 'css/rtl.css' %}">
+ {% endif %}
+ <script src="{% static 'js/jquery.min.js' %}"></script>
+ <script src="{% static 'js/js.cookie-2.2.1.min.js' %}"></script>
+ <script src="{% static 'js/main.js' %}"></script>
+ <script src="{% static 'js/modal.js' %}"></script>
+ <script src="{% static 'js/login.js' %}"></script>
- {% block extrahead %}{% endblock %}
+ {% block extrahead %}{% endblock %}
</head>
-<body class="gnome-body">
+<body class="d-flex flex-column min-vh-100">
<header class="gnome-header">
- <div class="navbar navbar-fixed-top navbar-default affix-top">
+ <nav class="navbar navbar-default navbar-expand-md navbar-expand-lg sticky-top">
<div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-wrapper" aria-expanded="false">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar top-bar"></span>
- <span class="icon-bar middle-bar"></span>
- <span class="icon-bar bottom-bar"></span>
- </button>
- <a class="gnome-navbar-brand" title="{% trans "Back to Damned Lies home page" %}"
href="/"><img src="{% static 'img/gnome-logo.svg' %}" alt="GNOME - Damned Lies"></a>
- <ul class="nav navbar-nav icons visible-xs">
- <li class="dropdown pull-right">
- {% if user.is_authenticated %}
- <a data-target="#userDropdownMenu" class="dropdown-toggle avatar"
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user.person|people_image
}}</a>
- {% else %}
- <a href="#userDropdownMenu" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><img src="{% static 'img/avatar-default.svg' %}"
alt="GNOME - Damned Lies"></a>
- {% endif %}
+ <a class="navbar-brand" title="{% trans "Back to Damned Lies home page" %}" href="/">
+ <img height="40" src="{% static 'img/gnome-logo.svg' %}" alt="GNOME − Damned Lies">
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbar-wrapper-dl-applications"
aria-controls="navbar-wrapper-dl-applications"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div id="navbar-wrapper-dl-applications" class="collapse navbar-collapse">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link {% if pageSection == "teams" %} active{% endif %}"
+ {% if pageSection == "teams" %}aria-current="page"{% endif %}
+ href="{% url 'teams' %}">
+ <span>{% trans "Teams" %}</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link {% if pageSection == "languages" %} active{% endif %}"
+ {% if pageSection == "languages" %}aria-current="page"{% endif %}
+ href="{% url 'languages' %}">
+ <span>{% trans "Languages" %}</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link {% if pageSection == "releases" %} active{% endif %}"
+ {% if pageSection == "releases" %}aria-current="page"{% endif %}
+ href="{% url 'releases' %}">
+ <span>{% trans "Release sets" %}</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link {% if pageSection == "module" %} active{% endif %}"
+ {% if pageSection == "module" %}aria-current="page"{% endif %}
+ href="{% url 'modules' %}">
+ <span>{% trans "Modules" %}</span>
+ </a>
</li>
</ul>
</div>
- <ul class="nav navbar-nav navbar-right no-padding">
- <li id="userDropdownMenu" class="dropdown">
- {% if user.is_authenticated %}
- <a href="{% url 'person_detail_username' user.username %}" class="dropdown-toggle
hidden-xs avatar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{
user.person|people_image }}</a>
- {% else %}
- <a href="{% url 'login' %}" class="dropdown-toggle hidden-xs" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">{% trans "Log in" %}</a>
- {% endif %}
- <ul class="dropdown-menu login_popup_form user-menu">
- <li>
+ <div id="navbar-user-profile-and-login-dropdown" class="navbar navbar-right no-padding">
+ <!-- Only logo visible to open popup -->
+ <ul class="navbar-nav d-block d-sm-none">
+ <li class="nav-item dropdown">
+ {% if user.is_authenticated %}
+ <a id="navbar-user-menu" href="#" class="nav-link dropdown-toggle"
+ role="button" data-bs-toggle="dropdown" aria-expanded="false">
+ {{ user.person|people_image }}
+ </a>
+ {% else %}
+ <a id="navbar-user-menu" href="#" class="nav-link dropdown-toggle"
+ role="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <img src="{% static 'img/avatar-default.svg' %}" alt="GNOME - Damned Lies">
+ </a>
+ {% endif %}
+ </li>
+ </ul>
+ <!-- Login visible to open popup -->
+ <ul class="navbar-nav d-none d-sm-block">
+ <li class="nav-item dropdown">
+ {% if user.is_authenticated %}
+ <a id="navbar-user-menu" href="#"
+ class="nav-link dropdown-toggle px-0 py-0" role="button"
data-bs-toggle="dropdown"
+ aria-expanded="false">
+ {{ user.person|people_image }}
+ </a>
+ {% else %}
+ <a id="navbar-user-menu" href="#" class="nav-link dropdown-toggle"
+ role="button" data-bs-toggle="dropdown" aria-expanded="false">
+ {% trans "Log in" %}
+ </a>
+ {% endif %}
+ <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-user-menu">
{% include "login/login_usermenu.html" %}
- </li>
- </ul>
- </li>
- </ul>
- <div id="navbar-wrapper" class="collapse navbar-collapse">
- <ul class="nav navbar-nav">
- <li{% if pageSection == "teams" %} class="active"{% endif %}><a href="{% url 'teams'
%}"><span>{% trans "Teams" %}</span></a></li>
- <li{% if pageSection == "languages" %} class="active"{% endif %}><a href="{% url
'languages' %}"><span>{% trans "Languages" %}</span></a></li>
- <li{% if pageSection == "releases" %} class="active"{% endif %}><a href="{% url
'releases' %}"><span>{% trans "Release sets" %}</span></a></li>
- <li{% if pageSection == "module" %} class="active"{% endif %}><a href="{% url 'modules'
%}"><span>{% trans "Modules" %}</span></a></li>
+ </div>
+ </li>
</ul>
</div>
</div>
- </div>
+ </nav>
</header>
{% if RUNNING_PRODUCTION_SYSTEM is False %}
<p class="errornote">{% translate "This is a preproduction instance of GNOME Damned Lies. If you wish to
contribute to GNOME, please, check out the official GNOME Damned Lies application." %}</p>
{% endif %}
-<div class="clearfix"></div>
-
-<div id="content" class="container gnome-content">
+<main id="content" class="container gnome-content mb-5">
{% if messages %}
{% for message in messages %}
- <p class="errornote {{ message.tags }}">{{ message|safe }}</p>
+ <p class="errornote {{ message.tags }}">{{ message|safe }}</p>
{% endfor %}
{% endif %}
{% block content-title %}{% endblock %}
{% block content %}{% endblock %}
-</div>
+</main>
-<div class="footer">
- <div class="container">
- <div class="row">
- <div class="col-xs-12 col-sm-2">
- <h4><a href="https://www.gnome.org">{% trans "The GNOME Project" %}</a></h4>
- <ul>
- <li><a href="https://www.gnome.org/about/">{% trans "About Us" %}</a></li>
- <li><a href="https://www.gnome.org/get-involved/">{% trans "Get Involved" %}</a></li>
- <li><a href="https://www.gnome.org/support-gnome/">{% trans "Support GNOME"
%}</a></li>
- <li><a href="https://shop.gnome.org/">{% trans "Merchandise" %}</a></li>
- <li><a href="https://www.gnome.org/contact/">{% trans "Contact Us" %}</a></li>
- <li><a href="https://www.gnome.org/foundation/">{% trans "The GNOME Foundation"
%}</a></li>
- </ul>
- </div>
- <div class="col-xs-12 col-sm-2">
- <h4><a href="#">{% trans "Resources" %}</a></h4>
- <ul class="sub-menu">
- <li><a href="https://developer.gnome.org">{% trans "Developer Center" %}</a></li>
- <li><a href="https://help.gnome.org">{% trans "Documentation" %}</a></li>
- <li><a href="https://wiki.gnome.org">{% trans "Wiki" %}</a></li>
- <li><a href="https://mail.gnome.org/mailman/listinfo">{% trans "Mailing Lists"
%}</a></li>
- <li><a href="https://wiki.gnome.org/GettingInTouch/IRC">{% trans "IRC Channels"
%}</a></li>
- <li><a href="https://gitlab.gnome.org/">{% trans "Bug Tracker" %}</a></li>
- <li><a href="https://gitlab.gnome.org/">{% trans "Development Code" %}</a></li>
- </ul>
- </div>
- <div class="col-xs-12 col-sm-2">
- <h4><a href="https://www.gnome.org/news/">{% trans "News" %}</a></h4>
- <ul class="sub-menu">
- <li><a href="https://www.gnome.org/press/">{% trans "Press Releases" %}</a></li>
- <li><a href="https://www.gnome.org/start/stable">{% trans "Latest Release"
%}</a></li>
- <li><a href="https://planet.gnome.org">{% trans "Planet GNOME" %}</a></li>
- </ul>
- </div>
- </div>
+<footer class="footer mt-auto bg-black">
+ <div class="container py-5 mt-5">
<div class="row">
- <div class="col-xs-12">
- <p>© <a href="https://www.gnome.org/">{% trans "The GNOME Project" %}</a>.</p>
- <p><a href="{% url 'about' %}">{% trans "Damned Lies" %}</a>. {% blocktrans with "<a
href='http://www.canonical.com/'>Canonical</a>" as link %}Hosted by {{ link }}.{% endblocktrans %}
- {% blocktrans with "<a href='https://www.djangoproject.com/'>Django</a>" as link %}Powered
by {{ link }}.{% endblocktrans %}</p>
+ <div class="col mb-3">
+ <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
+ <img height="60" src="{% static 'img/gnome-logo.svg' %}" alt="GNOME − Damned Lies">
+ </a>
+ </div>
+ <div class="col mb-3"></div>
+ <div class="col mb-3">
+ <h5 class="text-light fw-bold">
+ <a class="nav-link" href="https://www.gnome.org">{% trans "The GNOME Project" %}</a>
+ </h5>
+ <ul class="nav flex-column">
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0" href="{% url 'about' %}">{% trans "About Damned
Lies" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/about/">{% trans "About Us" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/get-involved/">{% trans "Get Involved" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/support-gnome/">{% trans "Support GNOME" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0" href="https://shop.gnome.org/">{% trans
"Merchandise" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/contact/">{% trans "Contact Us" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/foundation/">{% trans "The GNOME Foundation" %}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="col mb-3">
+ <h5 class="text-light fw-bold">{% trans "Resources" %}</h5>
+ <ul class="nav flex-column">
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://developer.gnome.org">{% trans "Developer Center" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://help.gnome.org">{% trans "Documentation" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0" href="https://wiki.gnome.org">{% trans "Wiki"
%}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://mail.gnome.org/mailman/listinfo">{% trans "Mailing Lists" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://wiki.gnome.org/GettingInTouch/IRC">{% trans "IRC Channels" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://gitlab.gnome.org/">{% trans "Bug Tracker" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://gitlab.gnome.org/">{% trans "Development Code" %}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="col mb-3">
+ <h5 class="text-light fw-bold">
+ <a class="nav-link" href="https://www.gnome.org/news/">{% trans "News" %}</a>
+ </h5>
+ <ul class="nav flex-column">
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/press/">{% trans "Press Releases" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://www.gnome.org/start/stable">{% trans "Latest Release" %}</a>
+ </li>
+ <li class="nav-item mb-2">
+ <a class="nav-link text-light p-0"
+ href="https://planet.gnome.org">{% trans "Planet GNOME" %}</a>
+ </li>
+ </ul>
</div>
</div>
</div>
-</div>
-
-<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-label="Damned Lies modal
window">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- </div>
- </div>
-</div>
+</footer>
-<script src="https://static.gnome.org/js/deneb.min.js" crossorigin="anonymous"></script>
</body>
</html>
diff --git a/templates/login/login_popup_form.html b/templates/login/login_popup_form.html
index b9ea6336..5a891056 100644
--- a/templates/login/login_popup_form.html
+++ b/templates/login/login_popup_form.html
@@ -1,25 +1,23 @@
-<div class="row">
- <div class="col-sm-12">
- <form action="{% url 'login' %}" method="post" class="form">
- {% csrf_token %}
- <div class="form-group">
- <input type="text" name="username" id="id_username" class="form-control" placeholder="{%
trans 'Username' %}"/>
- </div>
- <div class="form-group">
- <input type="password" name="password" id="id_password" class="form-control" placeholder="{%
trans 'Password' %}"/>
- </div>
- <input type="hidden" name="referer" value="{{ referer|default:"" }}" />
- <div class="form-group">
- <button type="submit" class="btn btn-action btn-block">{% trans "Log in" %}</button>
- </div>
- <div class="form-group">
- <a href="{% url 'password_reset' %}">{% trans 'Forgot your password?' %}</a>
- </div>
- <hr class="divider">
- <p>{% trans "Don’t have an account?" %}</p>
- <div class="form-group">
- <a href="{% url 'register' %}" class="btn btn-action btn-block">{% trans "Register" %}</a>
- </div>
- </form>
+<form class="py-3 px-3" action="{% url 'login' %}" method="post" class="form">
+ {% csrf_token %}
+ <div class="form-group mt-1 mb-1">
+ <label for="id_username" class="d-none"></label>
+ <input type="text" name="username" id="id_username" class="form-control"
+ placeholder="{% trans 'Username' %}"/>
</div>
-</div>
+ <div class="form-group mt-1 mb-1">
+ <label for="id_password" class="d-none"></label>
+ <input type="password" name="password" id="id_password" class="form-control"
+ placeholder="{% trans 'Password' %}"/>
+ </div>
+ <input type="hidden" name="referer" value="{{ referer|default:"" }}"/>
+ <div class="form-group">
+ <button type="submit" class="btn btn-success w-100">{% trans "Log in" %}</button>
+ </div>
+ <div class="dropdown-divider"></div>
+ <div class="form-group">
+ <a class="btn btn-primary w-100" href="{% url "register" %}">{% trans "Register" %}</a>
+ </div>
+</form>
+<div class="dropdown-divider"></div>
+<a class="dropdown-item" href="{% url 'password_reset' %}">{% trans 'Forgot your password?' %}</a>
diff --git a/templates/login/login_usermenu.html b/templates/login/login_usermenu.html
index 9e04fa38..b501c663 100644
--- a/templates/login/login_usermenu.html
+++ b/templates/login/login_usermenu.html
@@ -1,19 +1,18 @@
{% load people %}
{% if user.is_authenticated %}
- <div class="row">
- <div class="col-sm-12">
- <a class="btn btn-link" href="{% url 'person_detail_username' user.username %}">{% trans 'User
Settings' %}</a>
- <form action="{% url 'logout' %}" method="post" class="form">
- {% csrf_token %}
- <input type="hidden" name="logout" value="1">
- <input type="hidden" name="next" value="{{ request.path }}">
- <div class="form-group">
- <button type="submit" class="btn btn-link">{% trans 'Log out' %}</button>
- </div>
- </form>
+ <a class="dropdown-item" href="{% url 'person_detail_username' user.username %}">
+ {% trans 'User Settings' %}
+ </a>
+ <div class="dropdown-divider"></div>
+ <form class="py-3 px-3" action="{% url 'logout' %}" method="post" class="form">
+ {% csrf_token %}
+ <input type="hidden" name="logout" value="1">
+ <input type="hidden" name="next" value="{{ request.path }}">
+ <div class="form-group">
+ <button type="submit" class="btn btn-danger w-100">{% trans 'Log out' %}</button>
</div>
- </div>
+ </form>
{% else %}
{% include "login/login_popup_form.html" %}
{% endif %}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]