@ -0,0 +1,37 @@ | |||
function openLinkModal() { | |||
$('#addLinkModal').modal('show'); | |||
} | |||
function addUrl() { | |||
$("#link-btn").prop("disabled", true); | |||
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) { | |||
$('#link-form').val(''); | |||
$("#link-btn").prop("disabled", false); | |||
if (data !== 'Error') | |||
window.location.reload(); | |||
else | |||
showError('URL cannot be empty'); | |||
} | |||
}); | |||
} | |||
function showError(error) { | |||
$('#error-alert').text(error); | |||
$('#error-alert').show(); | |||
} | |||
$('#addLinkModal').on('shown.bs.modal', function () { | |||
$('#link-form').trigger('focus'); | |||
}); |
@ -0,0 +1,53 @@ | |||
{% 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"> | |||
{% include "fragments/sidebar.j2" %} | |||
</div> | |||
<!-- Page Content --> | |||
<div id="content"> | |||
<div> | |||
<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='https://read.technicalincompetence.club/add?close=1&url='+encodeURIComponent(url);})(); | |||
</code> | |||
</div> | |||
</div> | |||
</div> | |||
{% endblock %} | |||
{% block scripts %} | |||
{{ super() }} | |||
{% endblock %} |
@ -0,0 +1,16 @@ | |||
<div class="modal fade" id="addLinkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |||
<div class="modal-dialog modal-dialog-centered" role="document"> | |||
<div class="modal-content"> | |||
<div class="modal-header"> | |||
<h5 class="modal-title" id="exampleModalLabel">Add Link</h5> | |||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |||
<span aria-hidden="true">×</span> | |||
</button> | |||
</div> | |||
<div class="modal-body"> | |||
<input id="link-form" type="text" class="form-control" placeholder="https://example.com" style="width: 80%; float: left;"> | |||
<button id="link-btn" type="button" class="btn btn-primary" onclick="addUrl();" style="float: right;">Add</button> | |||
</div> | |||
</div> | |||
</div> | |||
</div> |
@ -0,0 +1,56 @@ | |||
<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> | |||
{% if request.path == url_for('bookmarklet') %} | |||
<div style="position: fixed; bottom: 20px;" class="active"> | |||
{% else %} | |||
<div style="position: fixed; bottom: 20px;"> | |||
{% endif %} | |||
<a href="{{ url_for('bookmarklet') }}"><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')}}#book"/> | |||
</svg>Bookmarklet</a> | |||
</div> |
@ -1,148 +0,0 @@ | |||
{% 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 %} |