diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 43 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/home.html | 17 |
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> |