From 660049c37916248c0ec6d1f3591209d013270132 Mon Sep 17 00:00:00 2001 From: John Washam <john@readyprompt.com> Date: Thu, 30 Jun 2016 21:10:33 -0700 Subject: [PATCH] Making good progress. Added styling and a toggle for card type. --- flash_cards.py | 21 ++++++-- static/style.css | 22 ++------ templates/cards.html | 117 ++++++++++++++++++++++++++++------------- templates/code.html | 4 ++ templates/general.html | 4 ++ templates/layout.html | 71 ++++++++++++++++++------- templates/login.html | 2 +- 7 files changed, 163 insertions(+), 78 deletions(-) create mode 100644 templates/code.html create mode 100644 templates/general.html diff --git a/flash_cards.py b/flash_cards.py index b815231c..f8dfb711 100644 --- a/flash_cards.py +++ b/flash_cards.py @@ -62,6 +62,8 @@ def index(): @app.route('/cards') def cards(): + if not session.get('logged_in'): + return redirect(url_for('login')) db = get_db() cur = db.execute('SELECT type, front, back, known FROM cards ORDER BY id DESC') cards = cur.fetchall() @@ -71,7 +73,7 @@ def cards(): @app.route('/add', methods=['POST']) def add_card(): if not session.get('logged_in'): - abort(401) + return redirect(url_for('login')) db = get_db() db.execute('INSERT INTO cards (type, front, back) VALUES (?, ?, ?)', [request.form['type'], @@ -83,13 +85,24 @@ def add_card(): return redirect(url_for('cards')) +@app.route('/general') +def general(): + if not session.get('logged_in'): + return redirect(url_for('login')) + return render_template('general.html') + + +@app.route('/code') +def code(): + if not session.get('logged_in'): + return redirect(url_for('login')) + return render_template('code.html') + + @app.route('/login', methods=['GET', 'POST']) def login(): error = None if request.method == 'POST': - # return request.form['username'] + " / " + app.config['USERNAME'] + " / " \ - # + request.form['password'] + " / " + app.config['PASSWORD'] - if request.form['username'] != app.config['USERNAME']: error = 'Invalid username' elif request.form['password'] != app.config['PASSWORD']: diff --git a/static/style.css b/static/style.css index 466f615b..64b90775 100644 --- a/static/style.css +++ b/static/style.css @@ -1,18 +1,4 @@ -body { font-family: sans-serif; background: #eee; } -a, h1, h2 { color: #377ba8; } -h1, h2 { font-family: 'Georgia', serif; margin: 0; } -h1 { border-bottom: 2px solid #eee; } -h2 { font-size: 1.2em; } - -.page { margin: 2em auto; width: 80%; border: 5px solid #ccc; - padding: 0.8em; background: white; } -.entries { list-style: none; margin: 0; padding: 0; } -.entries li { margin: 0.8em 1.2em; } -.entries li h2 { margin-left: -1em; } -.add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; } -.add-entry dl { font-weight: bold; } -.metanav { text-align: right; font-size: 0.8em; padding: 0.3em; - margin-bottom: 1em; background: #fafafa; } -.flash { background: #cee5F5; padding: 0.5em; - border: 1px solid #aacbe2; } -.error { background: #f0d6d6; padding: 0.5em; } +.toggleSelected { + background-color: #62b06b; + color: #ffffff; +} diff --git a/templates/cards.html b/templates/cards.html index a3884f22..041c3fd1 100644 --- a/templates/cards.html +++ b/templates/cards.html @@ -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 + <input type="radio" name="type" value="1" id="general"/> + </label> + <label for="code" class="toggleButton btn btn-default btn-lg">Code + <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 %} \ No newline at end of file + + <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 %} diff --git a/templates/code.html b/templates/code.html new file mode 100644 index 00000000..58d5dce0 --- /dev/null +++ b/templates/code.html @@ -0,0 +1,4 @@ +{% extends "layout.html" %} +{% block body %} + code +{% endblock %} \ No newline at end of file diff --git a/templates/general.html b/templates/general.html new file mode 100644 index 00000000..3838823b --- /dev/null +++ b/templates/general.html @@ -0,0 +1,4 @@ +{% extends "layout.html" %} +{% block body %} + general +{% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 6dac244e..212c7d5c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -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> - - - <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> \ No newline at end of file + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> +</body> +</html> diff --git a/templates/login.html b/templates/login.html index d44fb952..9cdc4905 100644 --- a/templates/login.html +++ b/templates/login.html @@ -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: