Skip to content

Commit

Permalink
formats templates for more-consistent indentation
Browse files Browse the repository at this point in the history 
A refactoring like #5986 seems like a good opportunity for this kind of
reformatting.
  • Loading branch information
@cfm
cfm committed Aug 9, 2021
1 parent 7d26aaa commit 8f2b503
Show file tree
Hide file tree
Showing 18 changed files with 326 additions and 265 deletions.
11 changes: 6 additions & 5 deletions securedrop/source_templates/banner_warning_flashed.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{# these are flash messages that appear at the top and are really scary, like if you're using tor2web #}
{% with messages = get_flashed_messages(with_categories=True, category_filter=["banner-warning"]) %}
{% for category, message in messages %}
<p class="flash {{ category }}" role="alert">
{{ message }}</p>
{% endfor %}
{% endwith %}
{% for category, message in messages %}
<p class="flash {{ category }}" role="alert">
{{ message }}
</p>
{% endfor %}
{% endwith %}
93 changes: 49 additions & 44 deletions securedrop/source_templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,60 @@
<!DOCTYPE html>
<html lang="{{ g.localeinfo.language_tag }}" dir="{{ g.localeinfo.text_direction }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if g.organization_name == "SecureDrop" %}
<title>{{ g.organization_name }} | {{ gettext('Protecting Journalists and Sources') }}</title>
{% else %}
<title>{{ g.organization_name }} | {{ gettext('SecureDrop') }}</title>
{% endif %}

<link rel="stylesheet" href="/static/css/source.css">
<link rel="icon" type="image/png" href="/static/i/favicon.png">
{% block extrahead %}{% endblock %}
</head>
<body>
{% include 'banner_warning_flashed.html' %}

<div class="content">
<div class="container">
<header>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if g.organization_name == "SecureDrop" %}
<title>{{ g.organization_name }} | {{ gettext('Protecting Journalists and Sources') }}</title>
{% else %}
<title>{{ g.organization_name }} | {{ gettext('SecureDrop') }}</title>
{% endif %}

<link rel="stylesheet" href="/static/css/source.css">
<link rel="icon" type="image/png" href="/static/i/favicon.png">
{% block extrahead %}{% endblock %}
</head>

<body>
{% include 'banner_warning_flashed.html' %}

<div class="content">
<div class="container">
<header>
{% block header %}
<a href="{% if 'logged_in' in session %}{{ url_for('main.lookup') }}{% else %}{{ url_for('main.index') }}{% endif %}" class="no-bottom-border">
<img src="{{ g.logo }}" class="logo small" alt="{{ g.organization_name }} logo" width="250">
</a>
{% include 'locales.html' %}
<a href="{% if 'logged_in' in session %}{{ url_for('main.lookup') }}{% else %}{{ url_for('main.index') }}{% endif %}"
class="no-bottom-border">
<img src="{{ g.logo }}" class="logo small" alt="{{ g.organization_name }} logo" width="250">
</a>
{% include 'locales.html' %}
{% endblock %}
</header>
</header>

<main>
{% if g.show_offline_message %}
<section>
<main>
{% if g.show_offline_message %}
<section>
<h1>{{ gettext("We're sorry, our SecureDrop is currently offline.") }}</h1>
<p>{{ gettext("Please try again later. Check our website for more information.") }}</p>
</section>
{% else %}
</section>
{% else %}

{% if 'logged_in' in session %}
<nav>
<a href="{{ url_for('main.logout') }}" class="btn pull-right" id="logout" aria-label="{{ gettext('Log Out') }}">{{ gettext('LOG OUT') }}</a>
</nav>
{% endif %}
{% if 'logged_in' in session %}
<nav>
<a href="{{ url_for('main.logout') }}" class="btn pull-right" id="logout"
aria-label="{{ gettext('Log Out') }}">{{ gettext('LOG OUT') }}</a>
</nav>
{% endif %}

{% endif %}
{% endif %}

{% block body %}{% endblock %}
</main>
</div>

{% block footer %}
{% include 'footer.html' %}
{% endblock %}
{% block body %}{% endblock %}
</main>
</div>
</body>
</html>

{% block footer %}
{% include 'footer.html' %}
{% endblock %}
</div>
</body>

</html>
2 changes: 1 addition & 1 deletion securedrop/source_templates/error.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ <h1>{{ gettext('Server error') }}</h1>
<p>{{ gettext('Sorry, the website encountered an error and was unable to complete your request.') }}</p>

<p><a href="{{ url_for('main.login') }}">{{ gettext('Look up a codename...') }}</a></p>
{% endblock %}
{% endblock %}
4 changes: 2 additions & 2 deletions securedrop/source_templates/first_submission_flashed_message.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<h2>{{ gettext('Success!') }}</h2>
<p>{{ gettext('Thank you for sending this information to us. Please check back later for replies.') }}
<a href="#codename-hint">
{{ gettext('Forgot your codename?') }}
{{ gettext('Forgot your codename?') }}
</a>
</p>
</section>
</section>
12 changes: 6 additions & 6 deletions securedrop/source_templates/flashed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
{% if messages %}
<section id="flashed" role="alert">
<ul>
{% for category, message in messages %}
{% for category, message in messages %}
{% if category != 'banner-warning' %}
<li class="flash {{ category }}" aria-label="{{ gettext(category) }}">
{{ message }}
</li>
<li class="flash {{ category }}" aria-label="{{ gettext(category) }}">
{{ message }}
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</section>
{% endif %}
{% endwith %}
{% endwith %}
2 changes: 1 addition & 1 deletion securedrop/source_templates/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@
<p id="footer-fpf">
{{ gettext('SecureDrop is a project of Freedom of the Press Foundation.') }}
</p>
</footer>
</footer>
20 changes: 13 additions & 7 deletions securedrop/source_templates/generate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@
{% block body %}
<h1>{{ gettext('Welcome') }}</h1>

<p id="codename-instructions" class="aside center">{{ gettext('Please either write this codename down and keep it in a safe place, or memorize it.') }}</p>
<p id="codename-instructions" class="aside center">
{{ gettext('Please either write this codename down and keep it in a safe place, or memorize it.') }}</p>

<p id="codename-explanation" class="explanation">{{ gettext('This codename is what you will use in future visits to receive messages from our team in response to what you submit on the next screen.') }}</p>
<p id="codename-explanation" class="explanation">
{{ gettext('This codename is what you will use in future visits to receive messages from our team in response to what you submit on the next screen.') }}
</p>

<section class="code" aria-labelledby="codename-heading">
<h2 id="codename-heading" class="visually-hidden">{{ gettext('Codename') }}</h2>
<mark id="codename" class="codename" aria-describedby="codename-instructions codename-explanation">{{ codename }}</mark>
<mark id="codename" class="codename"
aria-describedby="codename-instructions codename-explanation">{{ codename }}</mark>
<div class="pull-right">
<form id="regenerate-form" method="post">
<input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
Expand All @@ -20,16 +24,18 @@ <h2 id="codename-heading" class="visually-hidden">{{ gettext('Codename') }}</h2>
</div>
</section>

<p class="explanation">{{ gettext('Because we do not track users of our <b>SecureDrop</b>
<p class="explanation">
{{ gettext('Because we do not track users of our <b>SecureDrop</b>
service, in future visits, using this codename will be the only way we have to communicate with you should we have
questions or are interested in additional information. Unlike passwords, there is no way to retrieve a lost codename.') }}
</p>

<form id="create-form" method="post" action="/create" autocomplete="off">
<input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
<input name="tab_id" type="hidden" value="{{ tab_id }}">
<button type="submit" class="btn--space pull-right" id="continue-button" aria-label="{{ gettext('Submit Documents') }}">
{{ gettext('SUBMIT DOCUMENTS') }}
<button type="submit" class="btn--space pull-right" id="continue-button"
aria-label="{{ gettext('Submit Documents') }}">
{{ gettext('SUBMIT DOCUMENTS') }}
</button>
</form>
{% endblock %}
{% endblock %}
157 changes: 89 additions & 68 deletions securedrop/source_templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,111 @@
<!DOCTYPE html>
<html lang="{{ g.localeinfo.language_tag }}" dir="{{ g.localeinfo.text_direction }}">
<head>
{% if g.organization_name == "SecureDrop" %}
<title>{{ g.organization_name }} | {{ gettext('Protecting Journalists and Sources') }}</title>
{% else %}
<title>{{ g.organization_name }} | {{ gettext('SecureDrop') }}</title>
{% endif %}

<link rel="stylesheet" href="/static/css/source.css">
<link rel="icon" type="image/png" href="/static/i/favicon.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
{% if g.organization_name == "SecureDrop" %}
<title>{{ g.organization_name }} | {{ gettext('Protecting Journalists and Sources') }}</title>
{% else %}
<title>{{ g.organization_name }} | {{ gettext('SecureDrop') }}</title>
{% endif %}

{% assets filters="jsmin", output="gen/source.js", "js/source.js" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
</head>
<body id="source-index">
<div id="js-warning" class="warning" role="alert">
<p>{{ gettext('Your Tor Browser\'s <a id="disable-js" href=""><b>Security Level</b></a> is too low. Use the <img src="{icon}" alt="&quot;Security Level&quot;"> button in your browser’s toolbar to change it.').format(icon=url_for("static", filename="i/font-awesome/white/guard.svg")) }}</p>
</div>
{# Warning bubble to help TB users disable JavaScript with NoScript.
<link rel="stylesheet" href="/static/css/source.css">
<link rel="icon" type="image/png" href="/static/i/favicon.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

{% assets filters="jsmin", output="gen/source.js", "js/source.js" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
</head>

<body id="source-index">
<div id="js-warning" class="warning" role="alert">
<p>
{{ gettext('Your Tor Browser\'s <a id="disable-js" href=""><b>Security Level</b></a> is too low. Use the <img src="{icon}" alt="&quot;Security Level&quot;"> button in your browser’s toolbar to change it.').format(icon=url_for("static", filename="i/font-awesome/white/guard.svg")) }}
</p>
</div>
{# Warning bubble to help TB users disable JavaScript with NoScript.
Included here so the images can preload while the user is first
reading the page. Hidden by default. #}
<dialog open class="bubble info" id="security-setting-info" aria-labelledby="security-level-heading" aria-describedby="security-level-instructions">
<h2 id="security-level-heading" hidden>{{ gettext('How to change your security level') }}</h2>
<ol id="security-level-instructions">
<li>{{ gettext('Click the <img src="{icon}" alt="&quot;Security Level&quot; button"> in the toolbar above').format(icon=url_for("static", filename="i/font-awesome/black/guard.svg")) }}</li>
<li>{{ gettext('Select <b>Advanced Security Settings</b>') }}</li>
<li>{{ gettext('Select <b>Safest</b>') }}</li>
</ol>
<p>{{ gettext('<a href="/" aria-label="Follow these instructions, then refresh this page">Refresh this page</a>, and you\'re done!') }}</p>
<dialog open class="bubble info" id="security-setting-info" aria-labelledby="security-level-heading"
aria-describedby="security-level-instructions">
<h2 id="security-level-heading" hidden>{{ gettext('How to change your security level') }}</h2>
<ol id="security-level-instructions">
<li>
{{ gettext('Click the <img src="{icon}" alt="&quot;Security Level&quot; button"> in the toolbar above').format(icon=url_for("static", filename="i/font-awesome/black/guard.svg")) }}
</li>
<li>{{ gettext('Select <b>Advanced Security Settings</b>') }}</li>
<li>{{ gettext('Select <b>Safest</b>') }}</li>
</ol>
<p>
{{ gettext('<a href="/" aria-label="Follow these instructions, then refresh this page">Refresh this page</a>, and you\'re done!') }}
</p>

</dialog>
<div id="use-tor-browser" class="warning" role="alert">{{ gettext('<strong>It is recommended to use Tor Browser to access SecureDrop:</strong> <a class="recommend-tor" href="{tor_browser_url}">Learn how to install it</a>, or ignore this warning to continue.').format(tor_browser_url=url_for('info.recommend_tor_browser')) }} <img id="use-tor-browser-close" class="close" src="{{ url_for('static', filename='i/font-awesome/times-white.png') }}" alt="{{ gettext('Close') }}" width="12" height="12"></div>
<div id="orfox-browser" class="warning" role="alert">{{ gettext('<strong>It is recommended you use the desktop version of Tor Browser to access SecureDrop, as Orfox does not provide the same level of security and anonymity as the desktop version.</strong> <a class="recommend-tor" href="{tor_browser_url}">Learn how to install it</a>, or ignore this warning to continue.').format(tor_browser_url=url_for('info.recommend_tor_browser')) }} <img id="orfox-browser-close" class="close" src="{{ url_for('static', filename='i/font-awesome/times-white.png') }}" alt="{{ gettext('Close') }}" width="12" height="12"></div>
</dialog>
<div id="use-tor-browser" class="warning" role="alert">
{{ gettext('<strong>It is recommended to use Tor Browser to access SecureDrop:</strong> <a class="recommend-tor" href="{tor_browser_url}">Learn how to install it</a>, or ignore this warning to continue.').format(tor_browser_url=url_for('info.recommend_tor_browser')) }}
<img id="use-tor-browser-close" class="close"
src="{{ url_for('static', filename='i/font-awesome/times-white.png') }}" alt="{{ gettext('Close') }}" width="12"
height="12"></div>
<div id="orfox-browser" class="warning" role="alert">
{{ gettext('<strong>It is recommended you use the desktop version of Tor Browser to access SecureDrop, as Orfox does not provide the same level of security and anonymity as the desktop version.</strong> <a class="recommend-tor" href="{tor_browser_url}">Learn how to install it</a>, or ignore this warning to continue.').format(tor_browser_url=url_for('info.recommend_tor_browser')) }}
<img id="orfox-browser-close" class="close" src="{{ url_for('static', filename='i/font-awesome/times-white.png') }}"
alt="{{ gettext('Close') }}" width="12" height="12"></div>

{% include 'banner_warning_flashed.html' %}
{% include 'banner_warning_flashed.html' %}

<div class="content">
<div class="grid">
{% include 'flashed.html' %}
{# The div `index-wrap` MUST be ordered this way so that the flexbox works on large and small screens
<div class="content">
<div class="grid">
{% include 'flashed.html' %}
{# The div `index-wrap` MUST be ordered this way so that the flexbox works on large and small screens
See _source_index.sass for a more full understanding. #}
<div class="index-wrap">
<header class="header">
<h1><img src="{{ g.logo }}" alt="{{ gettext('{} logo'.format(g.organization_name)) }}" class="logo-image"></h1>
<div id="index-locales">
{% include 'locales.html' %}
</div>
</header>
<div class="index-wrap">
<header class="header">
<h1><img src="{{ g.logo }}" alt="{{ gettext('{} logo'.format(g.organization_name)) }}" class="logo-image">
</h1>
<div id="index-locales">
{% include 'locales.html' %}
</div>
</header>

<main class="index-row">
<section class="index-column index-left" aria-labelledby="first-submission-heading">
<div class="index-column-top-container">
<main class="index-row">
<section class="index-column index-left" aria-labelledby="first-submission-heading">
<div class="index-column-top-container">
<h2 id="first-submission-heading" class="welcome-text">
{{ gettext('First submission') }}
</h2>
<p class="extended-welcome-text">{{ gettext('First time submitting to our SecureDrop? Start here.') }}</p>
</div>
<div class="index-column-bottom-container">
<a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="btn alt" aria-label="{{ gettext('Get Started') }}">
{{ gettext('GET STARTED') }}
</a>
</div>
</section>
<div id="middle-separator"></div>
<section class="index-column index-right" aria-labelledby="return-visit-heading">
<div class="index-column-top-container">
</div>
<div class="index-column-bottom-container">
<a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="btn alt"
aria-label="{{ gettext('Get Started') }}">
{{ gettext('GET STARTED') }}
</a>
</div>
</section>
<div id="middle-separator"></div>
<section class="index-column index-right" aria-labelledby="return-visit-heading">
<div class="index-column-top-container">
<h2 id="return-visit-heading" class="welcome-text">
{{ gettext('Return visit') }}
</h2>
<p class="extended-welcome-text">{{ gettext('Already have a codename? Check for replies or submit something new.') }}</p>
</div>
<div class="index-column-bottom-container">
<a href="{{ url_for('main.login') }}" id="login-button" class="btn secondary" aria-label="{{ gettext('Log In') }}">
{{ gettext('LOG IN') }}
</a>
</div>
</section>
</main>
</div>
{% include 'footer.html' %}
<p class="extended-welcome-text">
{{ gettext('Already have a codename? Check for replies or submit something new.') }}</p>
</div>
<div class="index-column-bottom-container">
<a href="{{ url_for('main.login') }}" id="login-button" class="btn secondary"
aria-label="{{ gettext('Log In') }}">
{{ gettext('LOG IN') }}
</a>
</div>
</section>
</main>
</div>
{% include 'footer.html' %}
</div>
</div>


</body>

</body>
</html>
</html>
Loading

0 comments on commit 8f2b503

Please sign in to comment.