aiisahik/list_tasks.html

## list_tasks.html
<html>
<head>
<script src="{{url_for('static', filename='jquery-1.7.2.min.js')}}" type="text/javascript"></script>
<script src="{{url_for('static', filename='bootstrap.js')}}" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='bootstrap.css')}}" />
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='bootstrap-responsive.css')}}" />
<style>

.completed_list {
  position: relative;
  width: 100%;
  overflow: hidden;

}
.completed_list .inner {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<script type="text/javascript">
    $(function(){
        // set the height of outer div to be at least height as completed list
        $('.completed_list').height($(".inner").height()+200);

        // move the completed list beyond the right side of the window.
        $('.inner').offset({left: $(window).width()});

        //global toggle variable
        window.completed_list_visible = false;

        $('#toggle_completed_list').click(function(event) {
            event.preventDefault();
            var $outer = $('.completed_list');
            var $inner = $('.inner');
            if (window.completed_list_visible) {
                // if visible, hide
                $inner.animate({
                  left: parseInt($inner.css('left'),10) == 0 ?
                    +$outer.outerWidth() :0
                }, 'fast', 'swing',function(){
                    // after animation, change link text
                    $('#toggle_completed_list').html("Show Completed Tasks");
                    window.completed_list_visible = false;
                });
            } else {
                // if not visible, show

                $inner.animate({
                  left: parseInt($inner.css('left'),10) == 0 ?
                    -$outer.outerWidth() :0
                }, 'fast', 'swing',function(){
                    // after animation, change link text
                    $('#toggle_completed_list').html("Hide Completed Tasks");
                    window.completed_list_visible = true;
                });
            }
        });

    });
</script>

</head>
    <body>
        <div class="container">
        <h1>TASK LIST</h1>

        <div class="row-fluid">
            <div class="span6">
                <h3>Add a new <a href="/add"> task</a></h3>
            </div>
            <div class="span6">
                <h3><a href="#" id="toggle_completed_list">Show Completed Tasks</a></h3>

            </div>
        </div>

        <div class="row-fluid">
            <div class="span6" id="incomplete_span">


                <h2>Incomplete</h2>
                {% for task in tasks if task.done == False %}
                <div style="float:left; width:80%">
                    <ul>
                        <li style="line-height:4px;"><a href="{{url_for('view', task_id=task.id)}}">{{task.id}} {{task.title}}</a></li>
                    </ul>
                </div>
                <div style="float:left; width:10%;margin-top:3px">
                    <form action="/list_tasks.html" method="POST">
                        <input type="submit" value="&#10003;" >
                    </form>
                </div>
                {% endfor %}

            </div>
            <div class="span6">
                <div class="completed_list">

                    <div class="inner" id="completed_list">
                        <h2>Complete</h2>
                        <ol>
                        {% for task in tasks if task.done == True %}
                            <li>{{task.title}} {{task.completed_at}}</li>
                        {% endfor %}
                        </ol>
                    </div>
                </div>

            </div>
        </div>

        <div style="float:left; width:100%">

        </div>
        </div>
    </body>

</html>
	<html>
	<head>
	<script src="{{url_for('static', filename='jquery-1.7.2.min.js')}}" type="text/javascript"></script>
	<script src="{{url_for('static', filename='bootstrap.js')}}" type="text/javascript"></script>
	<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='bootstrap.css')}}" />
	<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='bootstrap-responsive.css')}}" />
	<style>

	.completed_list {
	position: relative;
	width: 100%;
	overflow: hidden;

	}
	.completed_list .inner {
	position: absolute;
	left: 0;
	top: 0;
	}
	</style>
	<script type="text/javascript">
	$(function(){
	// set the height of outer div to be at least height as completed list
	$('.completed_list').height($(".inner").height()+200);

	// move the completed list beyond the right side of the window.
	$('.inner').offset({left: $(window).width()});

	//global toggle variable
	window.completed_list_visible = false;

	$('#toggle_completed_list').click(function(event) {
	event.preventDefault();
	var $outer = $('.completed_list');
	var $inner = $('.inner');
	if (window.completed_list_visible) {
	// if visible, hide
	$inner.animate({
	left: parseInt($inner.css('left'),10) == 0 ?
	+$outer.outerWidth() :0
	}, 'fast', 'swing',function(){
	// after animation, change link text
	$('#toggle_completed_list').html("Show Completed Tasks");
	window.completed_list_visible = false;
	});
	} else {
	// if not visible, show

	$inner.animate({
	left: parseInt($inner.css('left'),10) == 0 ?
	-$outer.outerWidth() :0
	}, 'fast', 'swing',function(){
	// after animation, change link text
	$('#toggle_completed_list').html("Hide Completed Tasks");
	window.completed_list_visible = true;
	});
	}
	});

	});
	</script>

	</head>
	<body>
	<div class="container">
	<h1>TASK LIST</h1>

	<div class="row-fluid">
	<div class="span6">
	<h3>Add a new <a href="/add"> task</a></h3>
	</div>
	<div class="span6">
	<h3><a href="#" id="toggle_completed_list">Show Completed Tasks</a></h3>

	</div>
	</div>

	<div class="row-fluid">
	<div class="span6" id="incomplete_span">



	<h2>Incomplete</h2>
	{% for task in tasks if task.done == False %}
	<div style="float:left; width:80%">
	<ul>
	<li style="line-height:4px;"><a href="{{url_for('view', task_id=task.id)}}">{{task.id}} {{task.title}}</a></li>
	</ul>
	</div>
	<div style="float:left; width:10%;margin-top:3px">
	<form action="/list_tasks.html" method="POST">
	<input type="submit" value="✓" >
	</form>
	</div>
	{% endfor %}

	</div>
	<div class="span6">
	<div class="completed_list">

	<div class="inner" id="completed_list">
	<h2>Complete</h2>
	<ol>
	{% for task in tasks if task.done == True %}
	<li>{{task.title}} {{task.completed_at}}</li>
	{% endfor %}
	</ol>
	</div>
	</div>

	</div>
	</div>

	<div style="float:left; width:100%">

	</div>
	</div>
	</body>

	</html>