You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
4.9 KiB
148 lines
4.9 KiB
{% extends "bootstrap/base.html" %}
|
|
{% block title %}Read TI Later{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{super()}}
|
|
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
|
|
{% endblock %}
|
|
|
|
{% block navbar %}
|
|
<div id="navbar" class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
|
|
<div class="navbar-brand">Read TI Later</div>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
|
|
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('index') }}">My List</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('archived') }}">Archived</a>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline ml-auto">
|
|
<a class="btn btn-primary" href="/logout" role="button">Logout</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="wrapper">
|
|
<!-- Sidebar -->
|
|
<div id="sidebar">
|
|
<ul class="list-unstyled components">
|
|
{% if request.path == url_for('index') %}
|
|
<li class="nav-item active">
|
|
{% else %}
|
|
<li class="nav-item">
|
|
{% endif %}
|
|
<a href="{{ url_for('index') }}">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
|
|
</svg>My List
|
|
</a>
|
|
</li>
|
|
{% if request.path == url_for('archived') %}
|
|
<li class="nav-item active">
|
|
{% else %}
|
|
<li class="nav-item">
|
|
{% endif %}
|
|
<a href="{{ url_for('archived') }}"><svg
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
|
|
</svg>Archived</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Page Content -->
|
|
<div id="content">
|
|
<div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
<form>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<label for="formGroupExampleInput4">URL</label>
|
|
<input id="link-form" type="text" class="form-control" placeholder="https://example.com">
|
|
<br>
|
|
<button type="button" class="btn btn-primary" onclick="addUrl();">Add</button>
|
|
<br>
|
|
<br>
|
|
</div>
|
|
<div style="position:fixed; bottom: 20px;">
|
|
<p style="text-align: center;">Would you rather save on the go? Try our bookmarklet!</p>
|
|
<code>
|
|
javascript:(function(){var%20url%20=%20location.href;var%20otherWindow=window.open('about:blank','_blank');otherWindow.opener=null;otherWindow.location='{{ request.url_root }}add?close=1&url='+encodeURIComponent(url);})();
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script>
|
|
function addUrl() {
|
|
url = $('#link-form').val();
|
|
|
|
if (url.trim().length === 0) {
|
|
showError('URL is required');
|
|
return false;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/add',
|
|
method: 'POST',
|
|
data: { "url": url },
|
|
success: function(data) {
|
|
if (data !== 'Error')
|
|
window.location.reload();
|
|
else
|
|
showError('URL cannot be empty');
|
|
}
|
|
});
|
|
}
|
|
|
|
function showError(error) {
|
|
hideSuccess();
|
|
$('#error-alert').text(error);
|
|
$('#error-alert').show();
|
|
}
|
|
|
|
function showArticle(message) {
|
|
hideError();
|
|
$('#article').html(message);
|
|
$('#article img').css('max-width', '100%')
|
|
$('#article').show();
|
|
}
|
|
|
|
function hideError(error) {
|
|
$('#error-alert').hide();
|
|
}
|
|
|
|
function hideArticle(error) {
|
|
$('#article').hide();
|
|
}
|
|
</script>
|
|
{% endblock %}
|