Browse Source

rewriting the template to make the page mobile-proof + adding short descriptions + new color scheme

master
manetta 4 years ago
parent
commit
9c02d34f02
  1. 4
      feedtools.py
  2. 68
      static/css/stylesheet.css
  3. 121
      static/img/multifeeder.svg
  4. 33
      templates/index.html

4
feedtools.py

@ -16,11 +16,10 @@ def update():
parsed = feedparser.parse(feed)
x = str(x)
print(parsed)
tmp['feeds'][x] = {}
tmp['feeds'][x]['title'] = parsed.feed.title
tmp['feeds'][x]['link'] = parsed.feed.link
tmp['feeds'][x]['rss'] = parsed.entries[0].title_detail.base
tmp['feeds'][x]['description'] = parsed.feed.description
for post in parsed.entries:
@ -35,6 +34,7 @@ def update():
post['feed_details'] = {}
post['feed_details']['title'] = parsed.feed.title
post['feed_details']['link'] = parsed.feed.link
post['feed_details']['rss'] = parsed.entries[0].title_detail.base
post['feed_details']['description'] = parsed.feed.description
tmp['all_posts_sorted'][str(post_date)].append(post)

68
static/css/stylesheet.css

@ -1,6 +1,6 @@
body{
background-color: pink;
/*color: red;*/
background-color: #e1cfd9;
color: #7137c8ff;
margin: 1em;
font-size: 16px;
line-height: 1.6;
@ -12,38 +12,64 @@ h1#title{
margin: 1em auto;
}
h1#title img{
width: 500px;
width: 90%;
max-width: 500px;
}
h1{
text-align: center;
margin: 3em auto 0;
}
h2{
margin: 0 0 1em;
}
table{
table-layout: fixed;
width: 100%;
border-collapse: collapse;
div.add{
color: blue;
margin: 2em auto;
text-align: center;
}
table tr{
border-bottom: 20px solid white;
section#feeds{
margin: 5em 0;
text-align: center;
}
table td{
section#feeds div.feed{
padding: 1em 2em;
vertical-align: top;
}
table td:first-of-type{
width: 100px;
}
border-bottom: 20px solid white;
}
section#feeds div.feed.el0{
border-top: 20px solid white;
}
section#feeds div.feed div{
margin: 1em auto;
}
section#feeds div.feed div.description{
max-width: 400px;
}
section#api{
margin: 6em 0em;
color: fuchsia;
margin: 5em 0;
}
section#api div.accesspoint{
margin: 0;
section#api div.accesspoint{
padding: 1em 2em;
border-bottom: 20px solid black;
border-bottom: 20px solid #aa87deff;
}
section#api div.accesspoint:first-of-type{
border-top: 20px solid #aa87deff;
}
footer{
font-size: small;
text-align: center;
margin: 3em 0;
}
p{
color: blue;
font-size: small;
margin: 2em auto 3em;
max-width: 400px;
}
a,
a:active,
a:visited,

121
static/img/multifeeder.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 143 KiB

33
templates/index.html

@ -4,31 +4,27 @@
<meta charset="utf-8">
<title>multifeeder</title>
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 id="title">
<img src="/img/multifeeder.svg">
</h1>
<div align="center">(<a href="https://git.vvvvvvaria.org/varia/multifeeder/src/branch/master/feeds.txt" target="_blank">Add a feed</a>)</div>
<div align="center">Currently feeding:</div>
<br>
<br>
<table>
<tbody>
<div class="add">(<a href="https://git.vvvvvvaria.org/varia/multifeeder/src/branch/master/feeds.txt" target="_blank">Add a feed</a>)</div>
<section id="feeds">
<h1>Currently feeding</h1>
<p>The following feeds are rendered in the Multifeeder. The feeds in this list include streams of projects and activities in and around Varia.</p>
{% for x, feed in db['feeds'].items() %}
<tr>
<td class="title">{{ feed.title }}</td>
<td class="link"><a href="{{ feed.link }}" target="_blank">{{ feed.link }}</a></td>
<td class="description">{{ feed.description }}</td>
</tr>
<div class="feed el{{ x }}">
<div class="title">{{ feed.title }}</div>
<div class="description">{{ feed.description }}</div>
<div class="rss"><a href="{{ feed.rss }}" target="_blank">{{ feed.rss }}</a></div>
</div>
{% endfor %}
</tbody>
</table>
<br>
<br>
</section>
<section id="api">
<h1>Aggregated Publishing Interface (API)</h1>
<p>This is the Multifeeder API :---), an Aggregated Publishing Interface supporting any kinds of publishing experiments. Currently the API is used to feed <a href="https://televex.vvvvvvaria.org">Varia's TeleVex</a>.</p>
<div class="accesspoint">
<h2>/API/latest/[num]</h2>
For example: <a href="/API/latest/5" target="_blank">https://multi.vvvvvvaria.org/API/latest/5</a>
@ -54,5 +50,8 @@
Format: JSON
</div>
</section>
<footer>
<div>Multifeeding RSS streams into a point of access.</div>
<a href="https://git.vvvvvvaria.org/varia/multifeeder" target="_blank">https://git.vvvvvvaria.org/varia/multifeeder</a></footer>
</body>
</html>
Loading…
Cancel
Save