voussoir/bringrss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Some visual html/css tweaks.

Browse source
This commit is contained in:
voussoir 2022-12-02 17:34:42 -08:00
parent b7e1f81a9d
commit 8db9494a5e
6 changed files with 119 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontends/bringrss_flask/static/css/bringrss.css
View file

@ -13,3 +13,8 @@ p:last-child
{ {
margin-bottom: 0; margin-bottom: 0;
} }
.navigation_link:hover
{
background-color: var(--color_secondary);
}

4
frontends/bringrss_flask/static/css/common.css
View file

@ -29,7 +29,7 @@ getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() =
html html
{ {
height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
color: var(--color_text_normal); color: var(--color_text_normal);
} }
@ -48,7 +48,7 @@ body
"content_body" 1fr "content_body" 1fr
/1fr; /1fr;
min-height: 100%; min-height: 100vh;
margin: 0; margin: 0;
padding: 8px; padding: 8px;
grid-row-gap: 8px; grid-row-gap: 8px;

196
frontends/bringrss_flask/templates/feed_settings.html
View file

@ -53,16 +53,11 @@ h1:first-child
width: 3em; width: 3em;
text-align: right; text-align: right;
} }
.group
{
border: 1px solid var(--color_highlight);
border-radius: 4px;
padding: 4px;
}
#filters_group h2:first-child, #filters_group h2:first-child,
.group h2:first-child .group h2:first-child
{ {
margin-top: 0; margin-top: 0;
margin-bottom: 0;
} }
#filters .filter #filters .filter
@ -124,111 +119,112 @@ h1:first-child
<input id="set_icon_input" type="file"/> <input id="set_icon_input" type="file"/>
<button id="set_icon_button" class="button_with_spinner" data-spinner-text="⌛" onclick="return set_icon_form(event)">Set icon</button> <button id="set_icon_button" class="button_with_spinner" data-spinner-text="⌛" onclick="return set_icon_form(event)">Set icon</button>
</div> </div>
</div>
{% set autorefresh_group_hidden = '' if feed.rss_url else 'hidden' %} {% set autorefresh_group_hidden = '' if feed.rss_url else 'hidden' %}
<div id="autorefresh_group" class="group {{autorefresh_group_hidden}}"> <div id="autorefresh_group" class="group panel {{autorefresh_group_hidden}}">
{% set checked = 'checked' if feed.autorefresh_interval > 0 else '' %} {% set checked = 'checked' if feed.autorefresh_interval > 0 else '' %}
<span> <span>
<label><input type="checkbox" {{checked}} onchange="return set_autorefresh_enabled_form(event);"/> Automatically refresh this feed regularly.</label> <label><input type="checkbox" {{checked}} onchange="return set_autorefresh_enabled_form(event);"/> Automatically refresh this feed regularly.</label>
<span id="set_autorefresh_enabled_spinner" class="hidden">⌛</span> <span id="set_autorefresh_enabled_spinner" class="hidden">⌛</span>
</span> </span>
{% set autorefresh_interval_hidden = '' if checked else 'hidden' %} {% set autorefresh_interval_hidden = '' if checked else 'hidden' %}
<p id="set_autorefresh_interval_inputs" class="{{autorefresh_interval_hidden}}"> <p id="set_autorefresh_interval_inputs" class="{{autorefresh_interval_hidden}}">
{% set interval = feed.autorefresh_interval|abs %} {% set interval = feed.autorefresh_interval|abs %}
{% set hours = (interval / 3600)|int %} {% set hours = (interval / 3600)|int %}
{% set minutes = ((interval % 3600) / 60)|int %} {% set minutes = ((interval % 3600) / 60)|int %}
Refresh every Refresh every
<input type="number" min="0" id="autorefresh_input_hours" size="4" value="{{hours}}"/> hours, <input type="number" min="0" id="autorefresh_input_hours" size="4" value="{{hours}}"/> hours,
<input type="number" min="0" id="autorefresh_input_minutes" size="4" value="{{minutes}}"/> minutes <input type="number" min="0" id="autorefresh_input_minutes" size="4" value="{{minutes}}"/> minutes
<button class="button_with_spinner" data-spinner-text="⌛" onclick="return set_autorefresh_interval_form(event);">Set autorefresh</button> <button class="button_with_spinner" data-spinner-text="⌛" onclick="return set_autorefresh_interval_form(event);">Set autorefresh</button>
</p> </p>
<p>Note: autorefresh is not inherited from parent to child. When you manually click the refresh button on a parent, its children will also be refreshed, but if the parent is refreshed automatically, the children will wait for their own autorefresh.</p> <p>Note: autorefresh is not inherited from parent to child. When you manually click the refresh button on a parent, its children will also be refreshed, but if the parent is refreshed automatically, the children will wait for their own autorefresh.</p>
{% if feed.last_refresh %} {% if feed.last_refresh %}
<p>Last refresh: {{feed.last_refresh|timestamp_to_8601_local}}</p> <p>Last refresh: {{feed.last_refresh|timestamp_to_8601_local}}</p>
{% endif %} {% endif %}
{% if feed.next_refresh < INF %} {% if feed.next_refresh < INF %}
<p>Next refresh: {{feed.next_refresh|timestamp_to_8601_local}}</p> <p>Next refresh: {{feed.next_refresh|timestamp_to_8601_local}}</p>
{% endif %} {% endif %}
{% if feed.last_refresh_error %} {% if feed.last_refresh_error %}
<p>The last refresh attempt at {{feed.last_refresh_attempt|timestamp_to_8601_local}} encountered the following error:</p> <p>The last refresh attempt at {{feed.last_refresh_attempt|timestamp_to_8601_local}} encountered the following error:</p>
<pre> <pre>
{{-feed.last_refresh_error|trim-}} {{-feed.last_refresh_error|trim-}}
</pre> </pre>
{% endif %} {% endif %}
</div> </div>
<div class="group"> <div class="group panel">
{% set checked = 'checked' if feed.refresh_with_others else '' %} {% set checked = 'checked' if feed.refresh_with_others else '' %}
<span> <span>
<label><input type="checkbox" {{checked}} onchange="return set_refresh_with_others_form(event);"/> Refresh this feed and its children when I refresh its parent or press the "Refresh all" button.</label> <label><input type="checkbox" {{checked}} onchange="return set_refresh_with_others_form(event);"/> Refresh this feed and its children when I refresh its parent or press the "Refresh all" button.</label>
<span id="set_refresh_with_others_spinner" class="hidden">⌛</span> <span id="set_refresh_with_others_spinner" class="hidden">⌛</span>
</span> </span>
<p>If disabled, this feed will only be refreshed when you click its own refresh button, or when its autorefresh timer is ready.</p> <p>If disabled, this feed will only be refreshed when you click its own refresh button, or when its autorefresh timer is ready.</p>
</div> </div>
<div id="isolate_guids_group" class="group"> <div id="isolate_guids_group" class="group panel">
{% set checked = 'checked' if feed.isolate_guids else '' %} {% set checked = 'checked' if feed.isolate_guids else '' %}
<span> <span>
<label><input type="checkbox" {{checked}} onchange="return set_isolate_guids_form(event);"/> Isolate RSS GUIDs from other feeds.</label> <label><input type="checkbox" {{checked}} onchange="return set_isolate_guids_form(event);"/> Isolate RSS GUIDs from other feeds.</label>
<span id="set_isolate_guids_spinner" class="hidden">⌛</span> <span id="set_isolate_guids_spinner" class="hidden">⌛</span>
</span> </span>
<p>When feeds are refreshed, the system uses GUIDs and other news attributes to detect which items are new and which are duplicates from the previous refresh.</p> <p>When feeds are refreshed, the system uses GUIDs and other news attributes to detect which items are new and which are duplicates from the previous refresh.</p>
<p>If the feed is isolated, the GUIDs will only be used to search for duplicates within this feed. If the feed is not isolated, the GUIDs will be used to search for duplicates among all news in the database.</p> <p>If the feed is isolated, the GUIDs will only be used to search for duplicates within this feed. If the feed is not isolated, the GUIDs will be used to search for duplicates among all news in the database.</p>
<p>If you have two feeds that may produce the same items (e.g. two newspaper category feeds, and a news article belongs to both categories), this setting will control whether the news item appears in both feeds or just the one that got it first.</p> <p>If you have two feeds that may produce the same items (e.g. two newspaper category feeds, and a news article belongs to both categories), this setting will control whether the news item appears in both feeds or just the one that got it first.</p>
</div> </div>
<div id="filters_group" class="group"> <div id="filters_group" class="group panel">
<h2>Filters</h2> <h2>Filters</h2>
<p>Filters will execute in the order they are listed here:</p> <p>Filters will execute in the order they are listed here:</p>
<div id="filter_rearrange_guideline"></div> <div id="filter_rearrange_guideline"></div>
<div <div
id="filters" id="filters"
ondragstart="return filter_drag_start(event);" ondragstart="return filter_drag_start(event);"
ondragend="return filter_drag_end(event);" ondragend="return filter_drag_end(event);"
ondragover="return filter_drag_over(event);" ondragover="return filter_drag_over(event);"
ondragenter="return filter_drag_enter(event);" ondragenter="return filter_drag_enter(event);"
ondragleave="return filter_drag_leave(event);" ondragleave="return filter_drag_leave(event);"
ondrop="return filter_drag_drop(event);" ondrop="return filter_drag_drop(event);"
> >
{% for filt in feed_filters %} {% for filt in feed_filters %}
<div class="filter" data-id="{{filt.id}}" draggable="true"> <div class="filter" data-id="{{filt.id}}" draggable="true">
<span class="name">{{filt.display_name}}</span> <span class="name">{{filt.display_name}}</span>
<a class="edit_link" href="/filter/{{filt.id}}">Edit</a> <a class="edit_link" href="/filter/{{filt.id}}">Edit</a>
<button
class="red_button button_with_confirm"
data-prompt="Remove this filter?"
data-onclick="return remove_filter_form(event);"
>Remove</button>
</div>
{% endfor %}
</div>
<select id="add_filter_select" onchange="return add_filter_form(event);">
<option value="">Add another filter</option>
{% for filt in available_filters %}
<option value="{{filt.id}}">{{filt.display_name}}</option>
{% endfor %}
</select>
<span id="set_filters_spinner" class="hidden">⌛</span>
</div>
{% set http_headers_hidden = '' if feed.rss_url else 'hidden' %}
<div id="http_headers_group" class="group {{http_headers_hidden}}">
<p>If you need to define additional HTTP headers which will be sent on every refresh request for this feed, you can add them below. Write one header per line like <code>Key: value</code>, e.g. <code>Host: example.com</code></p>
<textarea id="set_http_headers_input" placeholder="HTTP headers" data-bind-ctrl-enter-to-button="set_http_headers_button">{{feed.http_headers|http_headers_dict_to_lines}}</textarea>
<button id="set_http_headers_button" class="button_with_spinner" data-spinner-text="⌛" onclick="return set_http_headers_form(event);">Set HTTP headers</button>
</div>
<div>
<button <button
class="red_button button_with_confirm" class="red_button button_with_confirm"
data-prompt="Delete feed and all associated news?" data-prompt="Remove this filter?"
data-onclick="return delete_feed_form(event);" data-onclick="return remove_filter_form(event);"
>Delete feed</button> >Remove</button>
</div>
{% endfor %}
</div> </div>
<select id="add_filter_select" onchange="return add_filter_form(event);">
<option value="">Add another filter</option>
{% for filt in available_filters %}
<option value="{{filt.id}}">{{filt.display_name}}</option>
{% endfor %}
</select>
<span id="set_filters_spinner" class="hidden">⌛</span>
</div>
{% set http_headers_hidden = '' if feed.rss_url else 'hidden' %}
<div id="http_headers_group" class="group panel {{http_headers_hidden}}">
<h2>HTTP Headers</h2>
<p>If you need to define additional HTTP headers which will be sent on every refresh request for this feed, you can add them below. Write one header per line like <code>Key: value</code>, e.g. <code>Host: example.com</code></p>
<textarea id="set_http_headers_input" placeholder="HTTP headers" data-bind-ctrl-enter-to-button="set_http_headers_button">{{feed.http_headers|http_headers_dict_to_lines}}</textarea>
<button id="set_http_headers_button" class="button_with_spinner" data-spinner-text="⌛" onclick="return set_http_headers_form(event);">Set HTTP headers</button>
</div>
<div class="panel">
<button
class="red_button button_with_confirm"
data-prompt="Delete feed and all associated news?"
data-onclick="return delete_feed_form(event);"
>Delete feed</button>
</div> </div>
</div> </div>
</body> </body>

9
frontends/bringrss_flask/templates/filters.html
View file

@ -15,6 +15,10 @@
<script src="/static/js/spinners.js"></script> <script src="/static/js/spinners.js"></script>
<style> <style>
html
{
height: 100vh;
}
h2:first-child h2:first-child
{ {
margin-top: 0; margin-top: 0;
@ -55,6 +59,10 @@ h2:first-child
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
#left ::-webkit-scrollbar-track
{
background-color: pink;
}
.filter textarea .filter textarea
{ {
min-width: 300px; min-width: 300px;
@ -79,6 +87,7 @@ h2:first-child
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
overflow-x: auto; overflow-x: auto;
white-space: pre-line;
} }
</style> </style>
</head> </head>

6
frontends/bringrss_flask/templates/header.html
View file

@ -1,8 +1,8 @@
{% macro make_header(site, request) %} {% macro make_header(site, request) %}
<nav id="header"> <nav id="header">
<a class="header_element" href="/">BringRSS</a> <a class="header_element navigation_link" href="/">BringRSS</a>
<a class="header_element" href="/filters">Filters</a> <a class="header_element navigation_link" href="/filters">Filters</a>
<a class="header_element" href="/about">About</a> <a class="header_element navigation_link" href="/about">About</a>
{% if site.demo_mode %} {% if site.demo_mode %}
<span class="demo_mode_alert" title="The site is in demo mode. No changes you make will be saved.">(demo mode)</span> <span class="demo_mode_alert" title="The site is in demo mode. No changes you make will be saved.">(demo mode)</span>
{% endif %} {% endif %}

4
frontends/bringrss_flask/templates/root.html
View file

@ -18,6 +18,10 @@
<script src="/static/js/dompurify.js"></script> <script src="/static/js/dompurify.js"></script>
<style> <style>
html
{
height: 100vh;
}
body body
{ {
font-family: sans-serif; font-family: sans-serif;