Skip to content

Commit a96c1e9

Browse files
MariattaMariatta
authored
Modernize the UI (#476)
Move from Bootstrap 4.1 with jQuery and the social-buttons stylesheet to Bootstrap 5.3 with the Bootswatch Pulse theme, pinned on jsDelivr with integrity hashes. The header becomes a navbar that collapses on small screens, the add_blurb form sits in a card with labels stacked above full-width inputs in a two-column grid, and the landing, install, howto and error pages share the same centred layout. The 14px base font size is dropped in favour of the Bootstrap default.
1 parent 47e21b0 commit a96c1e9

8 files changed

Lines changed: 129 additions & 296 deletions

File tree

‎static/css/bootstrap-social.css‎

Lines changed: 0 additions & 147 deletions
This file was deleted.

‎static/css/cover.css‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
1-
html {
2-
font-size: 14px;
3-
}
4-
@media (min-width: 768px) {
5-
html {
6-
font-size: 16px;
7-
}
8-
}
9-
101
.container {
112
max-width: 960px;
123
}
134

14-
.pricing-header {
15-
max-width: 700px;
16-
}
17-
18-
.card-deck .card {
19-
min-width: 220px;
5+
.narrow {
6+
max-width: 40rem;
207
}

‎templates/add_blurb.html‎

Lines changed: 61 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,78 +2,77 @@
22

33
{% block content %}
44

5-
<div class="row">
6-
<div class="col-md-12">
5+
<div class="row justify-content-center">
6+
<div class="col-lg-8">
77
{% if status == "success" %}
8-
<div class="alert alert-success" role="alert">✅ News file (<a href="{{ commit_url }}">{{ path }}</a>) created for <strong><a href="{{ pr_url }}">GH-{{ pr_number }}</a></strong></div>
9-
<h3>📜🤖 Blurb it again?</h3>
8+
<div class="alert alert-success" role="alert">✅ News file (<a href="{{ commit_url }}" class="alert-link">{{ path }}</a>) created for <strong><a href="{{ pr_url }}" class="alert-link">GH-{{ pr_number }}</a></strong></div>
9+
<p class="h4 mb-3">📜🤖 Blurb it again?</p>
1010
{% else %}
1111
{% if status == "failure" %}
12-
<div class="alert alert-danger" role="alert">❌ Cannot create news file for <strong><a href="{{ pr_url }}">GH-{{ pr_number }}</a></strong>! Make sure you have access to that PR!</div>
13-
<h3>📜🤖 Blurb it again?</h3>
12+
<div class="alert alert-danger" role="alert">❌ Cannot create news file for <strong><a href="{{ pr_url }}" class="alert-link">GH-{{ pr_number }}</a></strong>! Make sure you have access to that PR!</div>
13+
<p class="h4 mb-3">📜🤖 Blurb it again?</p>
1414
{% endif %}
1515
{% endif %}
1616

17-
<form action="/add_blurb" method="post" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">
18-
<input type="hidden" name="csrf" value="{{ csrf }}">
19-
<div class="mb-3">
20-
<div class="col form-inline">
21-
<label for="issue_number" class="form-inline">GH Issue #</label><input type="text" class="form-control form-inline" pattern="^\d{1,6}$" maxlength="6" placeholder="12345" id="issue_number" name="issue_number" required>
22-
</div>
23-
<div class="col form-inline">
24-
<small id="issue_number-help" class="form-text text-muted">The CPython GitHub issue number.</small>
25-
</div>
26-
</div>
27-
<div class="mb-3">
28-
<div class="col form-inline">
29-
<label for="pr_number" class="form-inline">GH Pull Request #</label><input type="text" class="form-control form-inline" pattern="^\d{1,6}$" maxlength="6" placeholder="12345" id="pr_number" name="pr_number" required>
30-
</div>
31-
<div class="col form-inline">
32-
<small id="gh-help" class="form-text text-muted">The CPython GitHub pull request number.</small>
33-
</div>
34-
</div>
35-
<div class="mb-3">
36-
<div class="col form-inline">
37-
<label for="section" class="form-inline">Choose an option: </label>
38-
<select id="section" name="section" class="form-control form-inline" required>
39-
<option></option>
40-
<option>Security</option>
41-
<option value="Core_and_Builtins">Core and Builtins</option>
42-
<option>Library</option>
43-
<option>Documentation</option>
44-
<option>Tests</option>
45-
<option>Build</option>
46-
<option>Windows</option>
47-
<option>macOS</option>
48-
<option>iOS</option>
49-
<option>Android</option>
50-
<option>FreeBSD</option>
51-
<option>WASI</option>
52-
<option>Emscripten</option>
53-
<option value="Unsupported_platforms">Unsupported platforms</option>
54-
<option>IDLE</option>
55-
<option value="Tools-Demos">Tools and Demos</option>
56-
<option value="C_API">C API</option>
57-
</select>
58-
</div>
59-
</div>
60-
<div class="mb-3" id="cve-group">
61-
<div class="col form-inline">
62-
<label for="cve" class="form-inline">CVE</label><input type="text" class="form-control form-inline" pattern="^(?:[Cc][Vv][Ee]-)?\d{4}-\d{4,}$" maxlength="20" placeholder="CVE-2025-12345" id="cve" name="cve">
63-
</div>
64-
<div class="col form-inline">
65-
<small id="cve-help" class="form-text text-muted">Optional. The CVE identifier (CVE-YYYY-NNNN) for this security fix.</small>
66-
</div>
67-
</div>
68-
<div class="mb-3">
69-
<textarea class="form-control" id="news_entry" name="news_entry" rows="10" placeholder="Write your Misc/NEWS entry below.
17+
<div class="card shadow-sm">
18+
<div class="card-body p-4">
19+
<h1 class="h4 card-title mb-4">Add a NEWS entry</h1>
20+
<form action="/add_blurb" method="post" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">
21+
<input type="hidden" name="csrf" value="{{ csrf }}">
22+
<div class="row g-3">
23+
<div class="col-sm-6">
24+
<label for="issue_number" class="form-label">GH Issue #</label>
25+
<input type="text" class="form-control" pattern="^\d{1,6}$" maxlength="6" placeholder="12345" id="issue_number" name="issue_number" aria-describedby="issue_number-help" required>
26+
<div id="issue_number-help" class="form-text">The CPython GitHub issue number.</div>
27+
</div>
28+
<div class="col-sm-6">
29+
<label for="pr_number" class="form-label">GH Pull Request #</label>
30+
<input type="text" class="form-control" pattern="^\d{1,6}$" maxlength="6" placeholder="12345" id="pr_number" name="pr_number" aria-describedby="pr_number-help" required>
31+
<div id="pr_number-help" class="form-text">The CPython GitHub pull request number.</div>
32+
</div>
33+
<div class="col-sm-6">
34+
<label for="section" class="form-label">Section</label>
35+
<select id="section" name="section" class="form-select" required>
36+
<option value="">Choose a section</option>
37+
<option>Security</option>
38+
<option value="Core_and_Builtins">Core and Builtins</option>
39+
<option>Library</option>
40+
<option>Documentation</option>
41+
<option>Tests</option>
42+
<option>Build</option>
43+
<option>Windows</option>
44+
<option>macOS</option>
45+
<option>iOS</option>
46+
<option>Android</option>
47+
<option>FreeBSD</option>
48+
<option>WASI</option>
49+
<option>Emscripten</option>
50+
<option value="Unsupported_platforms">Unsupported platforms</option>
51+
<option>IDLE</option>
52+
<option value="Tools-Demos">Tools and Demos</option>
53+
<option value="C_API">C API</option>
54+
</select>
55+
</div>
56+
<div class="col-sm-6" id="cve-group">
57+
<label for="cve" class="form-label">CVE</label>
58+
<input type="text" class="form-control" pattern="^(?:[Cc][Vv][Ee]-)?\d{4}-\d{4,}$" maxlength="20" placeholder="CVE-2025-12345" id="cve" name="cve" aria-describedby="cve-help">
59+
<div id="cve-help" class="form-text">Optional. The CVE identifier (CVE-YYYY-NNNN) for this security fix.</div>
60+
</div>
61+
<div class="col-12">
62+
<label for="news_entry" class="form-label">NEWS entry</label>
63+
<textarea class="form-control" id="news_entry" name="news_entry" rows="8" placeholder="Write your Misc/NEWS entry below.
7064
It should be a simple ReST paragraph.
7165
Don't start with '- Issue #<n>: ' or '- gh-issue-<n>: ' or that sort of stuff." required></textarea>
66+
</div>
67+
<div class="col-12">
68+
<button type="submit" class="btn btn-primary">📜🤖 blurb it!</button>
69+
</div>
70+
</div>
71+
</form>
7272
</div>
73-
<button type="submit" class="btn btn-primary mb-2">📜🤖 blurb it!</button>
74-
</form>
73+
</div>
74+
<p class="text-body-secondary small mt-3">Alternatively, you can use <a href="https://devguide.python.org/getting-started/pull-request-lifecycle/#news-entry">blurb on the command line</a>.</p>
7575
</div>
76-
<div class="col-md-12">Alternatively, you can use <a href="https://devguide.python.org/getting-started/pull-request-lifecycle/#news-entry">blurb on the command line</a>.</div>
7776
</div>
7877

7978
<script>

‎templates/base.html‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,56 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<!-- Required meta tags -->
54
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
76

8-
<!-- Bootstrap CSS -->
9-
<link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.min.css">
10-
<link href="/static/css/cover.css" rel="stylesheet">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.3/dist/pulse/bootstrap.min.css" integrity="sha384-UdDEQwDvXGE7/pvhxutoJGxqwNNAExBrA2jeFAk3UpSlFrtRNYaxtoG0o61I0Fdt" crossorigin="anonymous">
118
<link href="/static/css/font-awesome.css" rel="stylesheet">
12-
<link href="/static/css/bootstrap-social.css" rel="stylesheet">
9+
<link href="/static/css/cover.css" rel="stylesheet">
1310

1411
{% block css %}
1512
{% endblock %}
1613
<title>📜🤖 Blurb It!</title>
1714
</head>
18-
<body>
19-
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
20-
<h5 class="my-0 mr-md-auto font-weight-normal"><a href="/">📜🤖 Blurb it!</a></h5>
21-
<h5 class="my-0 mr-md-auto font-weight-normal"><a href="/howto">How do I use Blurb It?</a></h5>
22-
{% if not username %}
23-
<a class="btn btn-outline-primary btn-social btn-github" href="https://github.com/login/oauth/authorize?client_id={{ client_id }}&scope=repo&redirect_uri={{ app_protocol }}://{{ app_url }}/add_blurb">
24-
<span class="fa fa-github"></span>
25-
Sign in with GitHub
26-
</a>
27-
{% else %}
28-
<span>Hello, <a href="https://github.com/{{ username }}">{{ username }}</a></span>
29-
{% endif %}
30-
</div>
15+
<body class="d-flex flex-column min-vh-100">
16+
<nav class="navbar navbar-expand-md bg-body border-bottom shadow-sm mb-4">
17+
<div class="container">
18+
<a class="navbar-brand" href="/">📜🤖 Blurb it!</a>
19+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
20+
<span class="navbar-toggler-icon"></span>
21+
</button>
22+
<div class="collapse navbar-collapse" id="navbar">
23+
<ul class="navbar-nav me-auto">
24+
<li class="nav-item"><a class="nav-link" href="/howto">How do I use Blurb It?</a></li>
25+
</ul>
26+
{% if not username %}
27+
<a class="btn btn-dark" href="https://github.com/login/oauth/authorize?client_id={{ client_id }}&scope=repo&redirect_uri={{ app_protocol }}://{{ app_url }}/add_blurb">
28+
<span class="fa fa-github me-1" aria-hidden="true"></span>
29+
Sign in with GitHub
30+
</a>
31+
{% else %}
32+
<span class="navbar-text">Hello, <a href="https://github.com/{{ username }}">{{ username }}</a></span>
33+
{% endif %}
34+
</div>
35+
</div>
36+
</nav>
3137

32-
<div class="container">
38+
<main class="container flex-grow-1">
3339
{% if error_message %}
3440
<div class="alert alert-danger" role="alert">
35-
{{ error_message }}
41+
{{ error_message }}
3642
</div>
3743
{% endif %}
3844
{% block content %}
3945
{% endblock %}
40-
</div>
46+
</main>
4147

42-
<footer class="pt-4 my-md-5 pt-md-5 border-top">
43-
<div class="row">
44-
<div class="col-12 col-md text-center">
45-
<small class="d-block mb-3 text-muted">&copy; 2018 <a href="https://www.python.org/psf-landing/">Python Software Foundation</a> | <a href="https://github.com/python/blurb_it">View source</a> | <a href="https://github.com/python/blurb_it/issues/new">Report an issue</a></small>
46-
</div>
48+
<footer class="border-top py-4 mt-5">
49+
<div class="container text-center text-body-secondary small">
50+
&copy; 2018 <a href="https://www.python.org/psf-landing/">Python Software Foundation</a> | <a href="https://github.com/python/blurb_it">View source</a> | <a href="https://github.com/python/blurb_it/issues/new">Report an issue</a>
4751
</div>
4852
</footer>
4953

50-
<!-- Optional JavaScript -->
51-
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
52-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
53-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
54-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
54+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
5555
</body>
5656
</html>

‎templates/error.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends "base.html" %}
22
{% block content %}
3-
<a href="/"><img class="mb-4" src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png" alt="" height="72"></a>
4-
5-
<h1>{{ status }}</h1>
6-
<h1> {{ error_message }}</h1>
3+
<div class="text-center py-5">
4+
<a href="/"><img class="mb-4" src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png" alt="" height="72"></a>
5+
<h1>{{ status }}</h1>
6+
</div>
77
{% endblock %}

0 commit comments

Comments
 (0)