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.
185 lines
7.4 KiB
185 lines
7.4 KiB
{% extends "bootstrap/base.html" %}
|
|
{% block title %}Read TI Later{% endblock %}
|
|
|
|
{% block metas %}
|
|
{{super()}}
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
|
|
<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{super()}}
|
|
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
|
|
{% endblock %}
|
|
|
|
{% block navbar %}
|
|
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
|
|
{% if article[5] == 1 %}
|
|
<a href="{{url_for('archived')}}"><div class="navbar-brand"><svg
|
|
{% else %}
|
|
<a href="{{url_for('index')}}"><div class="navbar-brand"><svg
|
|
{% endif %}
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#arrow-left"/>
|
|
</svg></div></a>
|
|
<form class="form-inline ml-auto">
|
|
{# <div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
|
|
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
|
|
</div>
|
|
<div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
|
|
<div id="type-button" class="toolbar-button" onclick="showTypeMenu();"><svg
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#type"/>
|
|
</svg><svg
|
|
width="16"
|
|
height="16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#chevron-down"/>
|
|
</svg></div>
|
|
{% if article[5] == 1 %}
|
|
<a class="toolbar-button" href="/unarchive/{{ article[0] }}" data-toggle="tooltip" data-placement="bottom" title="Unarchive"><svg
|
|
{% else %}
|
|
<a class="toolbar-button" href="/archive/{{ article[0] }}" data-toggle="tooltip" data-placement="bottom" title="Archive"><svg
|
|
{% endif %}
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
|
|
{% if article[5] == 1 %}
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#plus-square"/>
|
|
{% else %}
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
|
|
{% endif %}
|
|
</svg></a>
|
|
<a class="toolbar-button" href="/delete/{{ article[0] }}" style="padding-right: 1rem;" data-toggle="tooltip" data-placement="bottom" title="Trash"><svg
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
|
|
<use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#trash"/>
|
|
</svg></a>
|
|
</form>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container wrapper" style="padding-left: 15px !important; padding-right: 15px !important; margin-right: auto !important; margin-left: auto !important; left: 0; right: 0;">
|
|
<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-6">
|
|
<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 class="col-lg-12">
|
|
<div style="padding: 10px; word-wrap: break-word; display: none;" id="article">
|
|
<h1 style="text-align: center;">{{ article[3] }}</h1>
|
|
<a href="{{ article[1] }}" class="text-info" target="_blank" style="display: block; text-align: center; margin-bottom: 20px;">View Original</a>
|
|
{{ article[2] | safe}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% include 'fragments/type_menu.j2' %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script type="text/javascript" src="{{url_for('.static', filename='cookies.js')}}"></script>
|
|
<script>
|
|
$('#article img').css('max-width', '100%');
|
|
$('#article img').css('height', 'auto');
|
|
|
|
window.addEventListener( 'DOMContentLoaded', function( event ) {
|
|
var x = readCookie('fontcookie');
|
|
if (x) {
|
|
$('#article').css('font-family', x);
|
|
} else {
|
|
createCookie('fontcookie', 'sans-serif', 365);
|
|
}
|
|
|
|
var x = readCookie('fontsizecookie');
|
|
if (x) {
|
|
$('#article').css('font-size', x);
|
|
} else {
|
|
createCookie('fontsizecookie', '1.25rem', 365);
|
|
}
|
|
|
|
$('#article').show();
|
|
}, true );
|
|
|
|
$(function () {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
});
|
|
|
|
function showTypeMenu() {
|
|
pos = $('#type-button').first().position();
|
|
left = pos.left-$('#type-menu').width() + 50
|
|
if (left < 0) left = 0
|
|
$('#type-menu').css({top: pos.top+30, left: left});
|
|
$('#type-menu').show();
|
|
var overlay = jQuery('<div id="overlay" onclick="closeTypeMenu();"> </div>');
|
|
overlay.appendTo(document.body)
|
|
}
|
|
|
|
function closeTypeMenu() {
|
|
$('#type-menu').hide();
|
|
$('#overlay').remove();
|
|
}
|
|
|
|
function setFont(fonts) {
|
|
createCookie('fontcookie', fonts, 365);
|
|
$('#article').css('font-family', "'" + fonts + "'");
|
|
}
|
|
|
|
function setSize(size) {
|
|
createCookie('fontsizecookie', size, 365);
|
|
$('#article').css('font-size', size);
|
|
}
|
|
|
|
$( window ).resize(function() {
|
|
pos = $('#type-button').first().position();
|
|
left = pos.left-$('#type-menu').width() + 50;
|
|
if (left < 0) left = 0;
|
|
$('#type-menu').css({top: pos.top+30, left: left});
|
|
});
|
|
</script>
|
|
{% endblock %}
|