aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--bh20simplewebuploader/static/main.css43
-rw-r--r--bh20simplewebuploader/templates/home.html17
2 files changed, 55 insertions, 5 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index b7ba1af..b6c900c 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -510,7 +510,7 @@ div.status {
justify-content: space-evenly;
}
-#twitter-feed {
+#feed {
background-color: #f5f8fa;
max-height: 440px;
max-width: 500px;
@@ -521,11 +521,11 @@ div.status {
}
-#twitter-feed ul {
+#feed ul {
list-style-type: none;
}
-#twitter-feed ul li {
+#feed ul li {
border-bottom: 2px solid white;
padding-bottom: 20px;
}
@@ -552,3 +552,40 @@ padding-right:10px;
{
max-width: 80%;
}
+
+/** Tabbed feed **/
+input[name="feed-tabs"] {
+ display: none;
+}
+
+input[name="feed-tabs"] + label {
+ display: inline-block;
+}
+
+input[name="feed-tabs"] ~ .tab {
+ display: none;
+}
+
+#tab-pubmed-articles:checked ~ .tab.content-pubmed-articles,
+#tab-tweets:checked ~ .tab.content-tweets,
+#tab-commits:checked ~ .tab.content-commits {
+ display: block;
+}
+
+input[name="feed-tabs"] + label {
+ border: 1px solid #999;
+ background: #EEE;
+ padding: 4px 12px;
+ border-radius: 4px 4px 0 0;
+ position: relative;
+ top: 1px;
+}
+
+input[name="feed-tabs"]:checked + label {
+ background: #FFF;
+ border-bottom: 1px solid transparent;
+}
+input[name="feed-tabs"] ~ .tab { /* grey line between tab and contents */
+ border-top: 1px solid #999;
+ padding: 12px;
+}
diff --git a/bh20simplewebuploader/templates/home.html b/bh20simplewebuploader/templates/home.html
index be948f6..8a9c27b 100644
--- a/bh20simplewebuploader/templates/home.html
+++ b/bh20simplewebuploader/templates/home.html
@@ -27,8 +27,18 @@
<div id="map_view" class="map">
<div id="mapid"></div>
</div>
- <div id="twitter-feed">
- <ul>
+
+ <div id="feed">
+ <input name="feed-tabs" type="radio" id="tab-pubmed-articles" checked/>
+ <label for="tab-pubmed-articles">Pubmed Articles</label>
+ <input name="feed-tabs" type="radio" id="tab-tweets"/>
+ <label for="tab-tweets">Tweets</label>
+ <input name="feed-tabs" type="radio" id="tab-commits"/>
+ <label for="tab-commits">Commits</label>
+ <ul class="tab content-pubmed-articles">
+ Pubmed content
+ </ul>
+ <ul class="tab content-tweets">
{% for tweet in tweets|sort(reverse=true, attribute="timeposted")%}
<li>
<p class="tweet">
@@ -41,6 +51,9 @@
</li>
{% endfor %}
</ul>
+ <ul class="tab content-commits">
+ Commits
+ </ul>
</div>
</section>