zev/computer-science-flash-cards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making good progress. Added styling and a toggle for card type.

Browse Source
This commit is contained in:
John Washam
2016-06-30 21:10:33 -07:00
parent 4b1cf0afdb
commit 660049c379
7 changed files with 163 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
templates/cards.html
View File

@@ -2,42 +2,85 @@
{% block body %}
{% if session.logged_in %}
<form action="{{ url_for('add_card') }}" method=post class=add-card>
<dl>
<dt>
<label for="type">Type:</label>
</dt>
<dd>
<select name="type">
<option value="1">General</option>
<option value="2">Code</option>
</select>
</dd>
<dt>
<label for="front">Front:</label>
</dt>
<dd><input type="text" size=30 name="front" /></dd>
<dt>
<label for="back">Back:</label>
</dt>
<dd><textarea name="back" rows="15" cols="60"></textarea></dd>
<dd><input type="submit" value="Save" /></dd>
</dl>
<div class="form-group">
<label for="type">Type</label>
<label for="general" class="toggleButton btn btn-default btn-lg">General &nbsp;
<input type="radio" name="type" value="1" id="general"/>
</label>
<label for="code" class="toggleButton btn btn-default btn-lg">Code &nbsp;
<input type="radio" name="type" value="2" id="code"/>
</label>
</div>
<div class="form-group fieldFront">
<label for="front">Front of Card</label>
<input type="text" name="front" class="form-control">
</div>
<div class="form-group fieldBack">
<label for="back">Back of Card</label>
<textarea name="back"
class="form-control"
id="back"
placeholder="back of card"
rows="12"></textarea>
</div>
<div class="form-group">
<button type="submit" class="saveButton btn btn-lg btn-primary">Save</button>
</div>
</form>
{% endif %}
<hr />
<ul class=cards>
{% for card in cards %}
<li>
<h3>{{ card.front }}</h3>
{% if card.type == 1 %}
{{ card.back|replace("\n", "<br />") }}
{% else %}
<pre><code>{{ card.back|safe }}</code></pre>
{% endif %}
<hr>
</li>
{% else %}
<li><em>Unbelievable. No cards here so far.</em>
{% endfor %}
</ul>
{% endblock %}
<hr/>
<div class="page-header">
<h2>{{ cards|length }} Card{{ '' if (cards|length == 1) else 's' }}</h2>
</div>
{% for card in cards %}
<div>
<h3>{{ card.front }}</h3>
{% if card.type == 1 %}
{{ card.back|replace("\n", "<br />") }}
{% else %}
<pre>{{ card.back|safe }}</pre>
{% endif %}
<hr>
</div>
{% else %}
<li><em>Unbelievable. No cards here so far.</em>
{% endfor %}
<script type=text/javascript>
$(document).ready(function () {
function checkit() {
var checkedVal = $('input[name=type]:checked').val();
if (checkedVal === undefined) {
// hide the fields
$('.fieldFront').hide();
$('.fieldBack').hide();
$('.saveButton').hide();
} else {
$('.toggleButton').removeClass('toggleSelected');
$(this).addClass('toggleSelected');
if (checkedVal == '1') {
$('textarea[name=back]').attr('rows', 5);
} else {
$('textarea[name=back]').attr('rows', 12);
}
$('.fieldFront').show();
$('.fieldBack').show();
$('.saveButton').show();
}
}
$('.toggleButton').click(checkit);
checkit();
});
</script>
{% endblock %}

4
templates/code.html Normal file
View File

@@ -0,0 +1,4 @@
{% extends "layout.html" %}
{% block body %}
code
{% endblock %}

4
templates/general.html Normal file
View File

@@ -0,0 +1,4 @@
{% extends "layout.html" %}
{% block body %}
general
{% endblock %}

71
templates/layout.html
View File

@@ -1,20 +1,55 @@
<!doctype html>
<title>CS Flash Cards</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>CS Flash Cards</h1>
<div class=metanav>
{% if not session.logged_in %}
<a href="{{ url_for('login') }}">log in</a>
{% else %}
<a href="{{ url_for('cards') }}">cards</a>
&nbsp;
&nbsp;
<a href="{{ url_for('logout') }}">log out</a>
{% endif %}
<html>
<head>
<title>CS Flash Cards</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}" />
<!-- I know this doesn't belong in head, but I have script in a template that needs to have jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<br />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- toggle menu -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CS Flash Cards</a>
</div>
<!-- full menu -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
{% if not session.logged_in %}
<li><a href="{{ url_for('login') }}">log in</a></li>
{% else %}
<li><a href="{{ url_for('cards') }}">cards</a></li>
<li><a href="{{ url_for('general') }}">general</a></li>
<li><a href="{{ url_for('code') }}">code</a></li>
<li><a href="{{ url_for('logout') }}">log out</a></li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% for message in get_flashed_messages() %}
<div class="alert alert-success" role="alert">{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
</div>
</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

2
templates/login.html
View File

@@ -1,7 +1,7 @@
{% extends "layout.html" %}
{% block body %}
<h2>Login</h2>
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
{% if error %}<div class="alert alert-danger" role="alert">{{ error }}</div>{% endif %}
<form action="{{ url_for('login') }}" method=post>
<dl>
<dt>Username: