aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/base
diff options
context:
space:
mode:
authorSawyer Bergeron <sbergeron@iol.unh.edu>2022-01-10 18:45:53 +0000
committerGerrit Code Review <gerrit@opnfv.org>2022-01-10 18:45:53 +0000
commit934d698bb93b81448353edb4f085bf8e4e70b7a9 (patch)
tree3cd37d9d9c78d3b88948ef62cce3de5cc3cee979 /src/templates/base
parent3dc3f74157c6ddf779f27c6263eacbef91fa6798 (diff)
parent16ddeeac3f5fca5d62434b83c962505827a86448 (diff)
Merge "added CSS to email templates"
Diffstat (limited to 'src/templates/base')
-rw-r--r--src/templates/base/notifier/end_booking.html148
-rw-r--r--src/templates/base/notifier/expiring_booking.html149
-rw-r--r--src/templates/base/notifier/new_booking.html145
3 files changed, 369 insertions, 73 deletions
diff --git a/src/templates/base/notifier/end_booking.html b/src/templates/base/notifier/end_booking.html
index ebad027..22fbd58 100644
--- a/src/templates/base/notifier/end_booking.html
+++ b/src/templates/base/notifier/end_booking.html
@@ -1,36 +1,134 @@
<html>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+
+ <style>
+ h2{
+ font-family: 'Source Sans Pro';
+ }
+ p{
+ font-family: Montserrat;
+ }
+ li{
+ font-family: Montserrat;
+ }
+ a{
+ color: #f8f9fa;
+ text-decoration: none;
+ }
+ button{
+ background-color:#a3c1db;
+ color: #343a40;
+ border: 0px;
+ border-radius: 4mm;
+ height: 25px;
+ width: 310px;
+ text-align: center;
+ margin: 15px;
+ text-decoration: none;
+ font-family: Montserrat;
+ font-size: 16;
+ }
+ button:focus{
+ border: 0px;
+ }
+ .textFormatting{
+ text-align: center;
+ color:#343a40;
+ margin: auto;
+
+ }
+ .content{
+ background-color: #f8f9fa;
+ position: center;
+ }
+ table{
+ margin-left: auto;
+ margin-right: auto;
+ border: 1px solid #343a40;
+ border-collapse: collapse;
+ }
+ tr{
+ border-bottom: 1px solid #343a40;
+ }
+ td{
+ color:#343a40;
+ padding: 3px;
+ font-family: Montserrat
+ }
+ .row1{
+ background-color: #7598b6;
+ }
+ .row2{
+ background-color: #d7e2f0;
+ }
+ .row3{
+ background-color: #d2e5f3;
+ }
+ </style>
+
<body>
- <div id="message_content_wrapper">
+ <div id="message_content_wrapper" class="textFormatting content">
{% if owner %}
- <h3>Your booking has expired</h3>
+ <h2>Your Booking Has Expired.</h2>
<p>Your booking has ended and the machines have been cleaned up.</p>
<p>Thank you for working on {{booking.lab.project}}, and feel free to book more machines if you need them.</p>
{% else %}
- <h3>A booking that you collaborated on has expired</h3>
- <p>The booking owned by {{booking.owner.username}} that you worked on has ended</p>
+ <h2>A Booking That You Collaborated on Has Expired.</h2>
+ <p>The booking owned by {{booking.owner.username}} that you worked on has ended.</p>
<p>Thank you for contributing to {{booking.lab.project}}.</p>
{% endif %}
- <p>Booking information:</p>
- <ul>
- <li>owner: {{booking.owner.username}}</li>
- <li>id: {{booking.id}}</li>
- <li>lab: {{booking.resource.template.lab.lab_user.username}}</li>
- <li>resource: {{booking.resource.template.name}}</li>
- <li>start: {{booking.start}}</li>
- <li>end: {{booking.end}}</li>
- <li>purpose: {{booking.purpose}}</li>
- <li>collaborators:
- <ul>
- {% for user in booking.collaborators.all %}
- <li>{{user.username}}</li>
- {% empty %}
- <li>No collaborators</li>
- {% endfor %}
- </ul>
- </li>
- </ul>
-
- <p>You can find more detailed information <a href=/booking/detail/{{booking.id}}/>Here</a></p>
+ <br>
+ <table>
+ <tr class="row1">
+ <td style="text-align: center; font-size: larger;" colspan="2">Booking Information:</td>
+ </tr>
+ <tr class="row2">
+ <td>Owner:</td>
+ <td>{{booking.owner.username}}</td>
+ </tr>
+ <tr class="row3">
+ <td>id:</td>
+ <td>{{booking.id}}</td>
+ </tr>
+ <tr class="row2">
+ <td>lab:</td>
+ <td>{{booking.resource.template.lab.lab_user.username}}</td>
+ </tr>
+ <tr class="row3">
+ <td>resource:</td>
+ <td>{{booking.resource.template.name}}</td>
+ </tr>
+ <tr class="row2">
+ <td>start:</td>
+ <td>{{booking.start}}</td>
+ </tr>
+ <tr class="row3">
+ <td>end:</td>
+ <td>{{booking.end}}</td>
+ </tr>
+ <tr class="row2">
+ <td>purpose:</td>
+ <td>{{booking.purpose}}</td>
+ </tr>
+ <tr class="row3">
+ <td>collaborator{% booking.collaborators.all.count|pluralize:"s" %}:</td>
+ <td></td>
+ </tr>
+ {% for user in booking.collaborators.all %}
+ <tr class="{% cycle 'row2' 'row3' %}">
+ <td></td>
+ <td>{{user.username}}</td>
+ </tr>
+ {% empty %}
+ <tr class="row2">
+ <td></td>
+ <td>No collaborators</td>
+ </tr>
+ {% endfor %}
+ </table>
+ <button type="button" onclick="window.location.href='/booking/detail/{{booking.id}}'">You can find more detailed information here</button>
</div>
</body>
</html>
diff --git a/src/templates/base/notifier/expiring_booking.html b/src/templates/base/notifier/expiring_booking.html
index 89042fe..7247081 100644
--- a/src/templates/base/notifier/expiring_booking.html
+++ b/src/templates/base/notifier/expiring_booking.html
@@ -1,35 +1,134 @@
<html>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+
+ <style>
+ h2{
+ font-family: 'Source Sans Pro';
+ }
+ p{
+ font-family: Montserrat;
+ }
+ li{
+ font-family: Montserrat;
+ }
+ a{
+ color: #f8f9fa;
+ text-decoration: none;
+ }
+ button{
+ background-color:#a3c1db;
+ color: #343a40;
+ border: 0px;
+ border-radius: 4mm;
+ height: 25px;
+ width: 310px;
+ text-align: center;
+ margin: 15px;
+ text-decoration: none;
+ font-family: Montserrat;
+ font-size: 16;
+ }
+ button:focus{
+ border: 0px;
+ }
+ .textFormatting{
+ text-align: center;
+ color:#343a40;
+ margin: auto;
+
+ }
+ .content{
+ background-color: #f8f9fa;
+ position: center;
+ }
+ table{
+ margin-left: auto;
+ margin-right: auto;
+ border: 1px solid #343a40;
+ border-collapse: collapse;
+ }
+ tr{
+ border-bottom: 1px solid #343a40;
+ }
+ td{
+ color:#343a40;
+ padding: 3px;
+ font-family: Montserrat
+ }
+ .row1{
+ background-color: #7598b6;
+ }
+ .row2{
+ background-color: #d7e2f0;
+ }
+ .row3{
+ background-color: #d2e5f3;
+ }
+ </style>
+
+
<body>
- <div id="message_content_wrapper">
+ <div id="message_content_wrapper" class="textFormatting content">
{% if owner %}
- <h3>Your booking is about to expire</h3>
+ <h2>Your Booking Is About to Expire.</h2>
<p>Your booking will expire within 48 hours ({{booking.end}}).</p>
{% else %}
- <h3>A booking that you collaborate on is about to expire</h3>
- <p>The booking owned by {{booking.owner.username}} that you work on is about to expire</p>
+ <h2>A Booking That You Collaborate on Is About to Expire.</h2>
+ <p>The booking owned by {{booking.owner.username}} that you work on is about to expire.</p>
{% endif %}
<p>Please take the time to backup all data or extend the booking if needed.</p>
- <p>Booking information:</p>
- <ul>
- <li>owner: {{booking.owner.username}}</li>
- <li>id: {{booking.id}}</li>
- <li>lab: {{booking.resource.template.lab.lab_user.username}}</li>
- <li>resource: {{booking.resource.template.name}}</li>
- <li>start: {{booking.start}}</li>
- <li>end: {{booking.end}}</li>
- <li>purpose: {{booking.purpose}}</li>
- <li>collaborators:
- <ul>
- {% for user in booking.collaborators.all %}
- <li>{{user.username}}</li>
- {% empty %}
- <li>No collaborators</li>
- {% endfor %}
- </ul>
- </li>
- </ul>
-
- <p>You can find more detailed information <a href=/booking/detail/{{booking.id}}/>Here</a></p>
+ <br>
+ <table>
+ <tr class="row1">
+ <td style="text-align: center; font-size: larger;" colspan="2">Booking Information:</td>
+ </tr>
+ <tr class="row2">
+ <td>Owner:</td>
+ <td>{{booking.owner.username}}</td>
+ </tr>
+ <tr class="row3">
+ <td>id:</td>
+ <td>{{booking.id}}</td>
+ </tr>
+ <tr class="row2">
+ <td>lab:</td>
+ <td>{{booking.resource.template.lab.lab_user.username}}</td>
+ </tr>
+ <tr class="row3">
+ <td>resource:</td>
+ <td>{{booking.resource.template.name}}</td>
+ </tr>
+ <tr class="row2">
+ <td>start:</td>
+ <td>{{booking.start}}</td>
+ </tr>
+ <tr class="row3">
+ <td>end:</td>
+ <td>{{booking.end}}</td>
+ </tr>
+ <tr class="row2">
+ <td>purpose:</td>
+ <td>{{booking.purpose}}</td>
+ </tr>
+ <tr class="row3">
+ <td>collaborator{% booking.collaborators.all.count|pluralize:"s" %}:</td>
+ <td></td>
+ </tr>
+ {% for user in booking.collaborators.all %}
+ <tr class="{% cycle 'row2' 'row3' %}">
+ <td></td>
+ <td>{{user.username}}</td>
+ </tr>
+ {% empty %}
+ <tr class="row2">
+ <td></td>
+ <td>No collaborators</td>
+ </tr>
+ {% endfor %}
+ </table>
+ <button type="button" onclick="window.location.href='/booking/detail/{{booking.id}}'">You can find more detailed information here</button>
</div>
</body>
</html>
diff --git a/src/templates/base/notifier/new_booking.html b/src/templates/base/notifier/new_booking.html
index 7580694..6d3c344 100644
--- a/src/templates/base/notifier/new_booking.html
+++ b/src/templates/base/notifier/new_booking.html
@@ -1,34 +1,133 @@
<html>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+
+ <style>
+ h2{
+ font-family: 'Source Sans Pro';
+ }
+ p{
+ font-family: Montserrat;
+ }
+ li{
+ font-family: Montserrat;
+ }
+ a{
+ color: #f8f9fa;
+ text-decoration: none;
+ }
+ button{
+ background-color:#a3c1db;
+ color: #343a40;
+ border: 0px;
+ border-radius: 4mm;
+ height: 25px;
+ width: 310px;
+ text-align: center;
+ margin: 15px;
+ text-decoration: none;
+ font-family: Montserrat;
+ font-size: 16;
+ }
+ button:focus{
+ border: 0px;
+ }
+ .textFormatting{
+ text-align: center;
+ color:#343a40;
+ margin: auto;
+
+ }
+ .content{
+ background-color: #f8f9fa;
+ position: center;
+ }
+ table{
+ margin-left: auto;
+ margin-right: auto;
+ border: 1px solid #343a40;
+ border-collapse: collapse;
+ }
+ tr{
+ border-bottom: 1px solid #343a40;
+ }
+ td{
+ color:#343a40;
+ padding: 3px;
+ font-family: Montserrat
+ }
+ .row1{
+ background-color: #7598b6;
+ font-weight: bolder;
+ }
+ .row2{
+ background-color: #d7e2f0;
+ }
+ .row3{
+ background-color: #d2e5f3;
+ }
+ </style>
<body>
- <div id="message_content_wrapper">
+ <div id="message_content_wrapper" class="textFormatting content">
{% if owner %}
- <h3>You have created a new booking</h3>
+ <h2>You Have Created a New Booking.</h2>
<p>We have recieved your booking request and will start working on it right away.</p>
{% else %}
- <h3>You have been added as a collaborator to a booking</h3>
+ <h2>You Have Been Added as a Collaborator to a Booking.</h2>
<p>{{booking.owner.username}} has given you access to their booking.</p>
{% endif %}
- <p>Booking information:</p>
- <ul>
- <li>owner: {{booking.owner.username}}</li>
- <li>id: {{booking.id}}</li>
- <li>lab: {{booking.resource.template.lab.lab_user.username}}</li>
- <li>resource: {{booking.resource.template.name}}</li>
- <li>start: {{booking.start}}</li>
- <li>end: {{booking.end}}</li>
- <li>purpose: {{booking.purpose}}</li>
- <li>collaborators:
- <ul>
- {% for user in booking.collaborators.all %}
- <li>{{user.username}}</li>
- {% empty %}
- <li>No collaborators</li>
- {% endfor %}
- </ul>
- </li>
- </ul>
+ <br>
- <p>You can find more detailed information <a href=/booking/detail/{{booking.id}}/>Here</a></p>
+ <table>
+ <tr class="row1">
+ <td style="text-align: center; font-size: larger;" colspan="2">Booking Information:</td>
+ </tr>
+ <tr class="row2">
+ <td>Owner:</td>
+ <td>{{booking.owner.username}}</td>
+ </tr>
+ <tr class="row3">
+ <td>id:</td>
+ <td>{{booking.id}}</td>
+ </tr>
+ <tr class="row2">
+ <td>lab:</td>
+ <td>{{booking.resource.template.lab.lab_user.username}}</td>
+ </tr>
+ <tr class="row3">
+ <td>resource:</td>
+ <td>{{booking.resource.template.name}}</td>
+ </tr>
+ <tr class="row2">
+ <td>start:</td>
+ <td>{{booking.start}}</td>
+ </tr>
+ <tr class="row3">
+ <td>end:</td>
+ <td>{{booking.end}}</td>
+ </tr>
+ <tr class="row2">
+ <td>purpose:</td>
+ <td>{{booking.purpose}}</td>
+ </tr>
+ <tr class="row3">
+ <td>collaborator{% booking.collaborators.all.count|pluralize:"s" %}:</td>
+ <td></td>
+ </tr>
+ {% for user in booking.collaborators.all %}
+ <tr class="{% cycle 'row2' 'row3' %}">
+ <td></td>
+ <td>{{user.username}}</td>
+ </tr>
+ {% empty %}
+ <tr class="row2">
+ <td></td>
+ <td>No collaborators</td>
+ </tr>
+ {% endfor %}
+ </table>
+ <button type="button" onclick="window.location.href='/booking/detail/{{booking.id}}'">You can find more detailed information here</button>
</div>
</body>
</html>