Skip to content

Commit 2568eb2

Browse files
jasonjohjasonjoh
committed
Updated visuals in tutorial
Added basic Boostrap styling
1 parent 1f6b73a commit 2568eb2

6 files changed

Lines changed: 112 additions & 61 deletions

File tree

‎tutorial/templates/tutorial/contacts.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
<html>
2-
<body>
3-
<h1>Your Contacts</h1>
4-
<table width="100%" border="1">
5-
<tr>
6-
<th>First Name</th>
7-
<th>Last Name</th>
8-
<th>Email Address</th>
9-
</tr>
10-
11-
{% for contact in contacts %}
12-
<tr>
13-
<td>{{ contact.GivenName }}</td>
14-
<td>{{ contact.Surname }}</td>
15-
<td>{{ contact.EmailAddresses.0.Address }}</td>
16-
</tr>
17-
{% endfor %}
18-
</table>
19-
</body>
20-
</html>
1+
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE.txt in the project root for license information. -->
2+
{% extends "tutorial/layout.html" %}
3+
{% block content %}
4+
<h1>Your Contacts</h1>
5+
<table class="table">
6+
<tr>
7+
<th>First Name</th>
8+
<th>Last Name</th>
9+
<th>Email Address</th>
10+
</tr>
11+
12+
{% for contact in contacts %}
13+
<tr>
14+
<td>{{ contact.GivenName }}</td>
15+
<td>{{ contact.Surname }}</td>
16+
<td>{{ contact.EmailAddresses.0.Address }}</td>
17+
</tr>
18+
{% endfor %}
19+
</table>
20+
{% endblock %}

‎tutorial/templates/tutorial/events.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
<html>
2-
<body>
3-
<h1>Your Events</h1>
4-
<table width="100%" border="1">
5-
<tr>
6-
<th>Subject</th>
7-
<th>Start</th>
8-
<th>End</th>
9-
</tr>
10-
11-
{% for event in events %}
12-
<tr>
13-
<td>{{ event.Subject }}</td>
14-
<td>{{ event.Start }}</td>
15-
<td>{{ event.End }}</td>
16-
</tr>
17-
{% endfor %}
18-
</table>
19-
</body>
20-
</html>
1+
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE.txt in the project root for license information. -->
2+
{% extends "tutorial/layout.html" %}
3+
{% block content %}
4+
<h1>Your Events</h1>
5+
<table class="table">
6+
<tr>
7+
<th>Subject</th>
8+
<th>Start</th>
9+
<th>End</th>
10+
</tr>
11+
12+
{% for event in events %}
13+
<tr>
14+
<td>{{ event.Subject }}</td>
15+
<td>{{ event.Start.DateTime }} ({{ event.Start.TimeZone }})</td>
16+
<td>{{ event.End.DateTime }} ({{ event.End.TimeZone }})</td>
17+
</tr>
18+
{% endfor %}
19+
</table>
20+
{% endblock %}

‎tutorial/templates/tutorial/home.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE.txt in the project root for license information. -->
2+
{% extends "tutorial/layout.html" %}
3+
{% block content %}
4+
<div class="jumbotron">
5+
<h1>Python Outlook Sample</h1>
6+
<p>This example shows how to get an OAuth token from Azure using the <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols-oauth-code" target="_blank">authorization code grant flow</a> and to use that token to make calls to the Outlook APIs.</p>
7+
<p>
8+
<a class="btn btn-lg btn-primary" href="{{signin_url}}" role="button" id="connect-button">Connect to Outlook</a>
9+
</p>
10+
</div>
11+
{% endblock %}

‎tutorial/templates/tutorial/layout.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE.txt in the project root for license information. -->
3+
<html>
4+
<head>
5+
<title>Python Outlook API Sample</title>
6+
<!-- Latest compiled and minified CSS -->
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
8+
9+
<!-- Optional theme -->
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
11+
</head>
12+
<body style="padding-top: 70px;">
13+
<nav class="navbar navbar-inverse navbar-fixed-top">
14+
<div class="container">
15+
<div class="navbar-header">
16+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
17+
<span class="sr-only">Toggle navigation</span>
18+
<span class="icon-bar"></span>
19+
<span class="icon-bar"></span>
20+
<span class="icon-bar"></span>
21+
</button>
22+
<a class="navbar-brand" href="/">Python Outlook Sample</a>
23+
</div>
24+
<div id="navbar" class="navbar-collapse collapse">
25+
<ul class="nav navbar-nav authed-nav">
26+
<li id='home-nav'><a href="/">Home</a></li>
27+
<li id='inbox-nav'><a href="/tutorial/mail">Inbox</a></li>
28+
<li id='calendar-nav'><a href="/tutorial/events">Calendar</a></li>
29+
<li id='contacts-nav'><a href="/tutorial/contacts">Contacts</a></li>
30+
</ul>
31+
</div>
32+
</div>
33+
</nav>
34+
35+
<div class="container main-container">
36+
{% block content %}{% endblock %}
37+
</div>
38+
39+
</body>
40+
</html>

‎tutorial/templates/tutorial/mail.html‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE.txt in the project root for license information. -->
2-
<html>
3-
<body>
4-
<h1>Your Email</h1>
5-
<table width="100%" border="1">
6-
<tr>
7-
<th>From</th>
8-
<th>Subject</th>
9-
<th>Received</th>
10-
</tr>
11-
12-
{% for message in messages %}
13-
<tr>
14-
<td>{{ message.From.EmailAddress.Name }}</td>
15-
<td>{{ message.Subject }}</td>
16-
<td>{{ message.ReceivedDateTime }}</td>
17-
</tr>
18-
{% endfor %}
19-
</table>
20-
</body>
21-
</html>
2+
{% extends "tutorial/layout.html" %}
3+
{% block content %}
4+
<h1>Your Email</h1>
5+
<table class="table">
6+
<tr>
7+
<th>From</th>
8+
<th>Subject</th>
9+
<th>Received</th>
10+
</tr>
11+
12+
{% for message in messages %}
13+
<tr>
14+
<td>{{ message.From.EmailAddress.Name }}</td>
15+
<td>{{ message.Subject }}</td>
16+
<td>{{ message.ReceivedDateTime }}</td>
17+
</tr>
18+
{% endfor %}
19+
</table>
20+
{% endblock %}

‎tutorial/views.py‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
def home(request):
1212
redirect_uri = request.build_absolute_uri(reverse('tutorial:gettoken'))
1313
sign_in_url = get_signin_url(redirect_uri)
14-
return HttpResponse('<a href="' + sign_in_url +'">Click here to sign in and view your mail</a>')
14+
context = { 'signin_url': sign_in_url }
15+
return render(request, 'tutorial/home.html', context)
1516

1617
def gettoken(request):
1718
auth_code = request.GET['code']

0 commit comments

Comments
 (0)