diff options
| -rw-r--r-- | static/css/thread.css | 230 | ||||
| -rw-r--r-- | static/img/button_newer.png | bin | 0 -> 4400 bytes | |||
| -rw-r--r-- | static/img/button_older.png | bin | 0 -> 4261 bytes | |||
| -rw-r--r-- | templates/thread.html | 198 |
4 files changed, 428 insertions, 0 deletions
diff --git a/static/css/thread.css b/static/css/thread.css new file mode 100644 index 0000000..d39ceb1 --- /dev/null +++ b/static/css/thread.css @@ -0,0 +1,230 @@ +#thread_nav{ + margin:auto; + width:100%; + text-align:center; +} + +#thread_nav * { + vertical-align: middle; +} + +#thread_nav .thread_title{ + margin:auto; + width: 600px; +} + +#thread_nav br { + margin-top: 10px; +} + +#thread_nav .thread_info { + margin-top:10px; + margin-bottom:10px; + font-size: 70%; + font-weight: normal; + text-align: center; +} + +#thread_nav .thread_info li { + margin-left:3em; +} + +#olderhread, #newewthread { + font-size: 70%; + color: rgb(167, 169, 172); +} + +#newewthread { + float: left; + margin-top: 2em; + margin-left: 20px; +} + +#olderhread { + float: right; + margin-top: 2em; + margin-right: 20px; +} + +/* Content section */ +.content { + width: 90%; + margin: auto; +} + +/* Define the two columns */ +#thread_content { + width: 70%; + margin-right: 22px; +} + +#thread_overview_info { + float: right; + width: 20%; +} + +/* Thread general information column */ +#days_old { + margin-left:1em; +} + +.days_text { + font-size: 70%; +} + +.days_num { + font-size: 200%; +} + +#add_to_fav a{ + color: rgb(167, 169, 172); +} + +#grey { + color: rgb(167, 169, 172); + background-color: rgb(167, 169, 172); + margin: 0px; + border: 0 none; + height: 1px; +} + +#tags { + color: rgb(167, 169, 172); + margin-top: 20px; +} + +#tag_title { + color: rgb(77, 77, 77); + text-transform: uppercase; +} + +#tags ul { + padding: 10px 0px 10px 0px; + margin: 0; +} + +#add_tag_field { + width:70%; +} + +#participants { + margin-top: 20px; + color: rgb(167, 169, 172); +} + +#participants_title { + color: rgb(77, 77, 77); + text-transform: uppercase; +} + +#participants ul { + padding: 10px 0px 10px 0px; + margin: 0; +} + +#participants li { + list-style-type: none; +} + +#participants img { + width: 20px; +} + +/* Main section with the whole thread */ + +/* First email of the thread. */ + +.first_email { +} + +.email_header { + position:relative; + margin-top: 20px; + margin-bottom: 20px; +} + +.email_header img { + width: 40px; +} + +.email_author .name{ + color: rgb(55, 113, 200); + font-weight: bold; +} + +.email_author .rank{ + color: rgb(167, 169, 172); + font-size: 80%; + font-weight: bold; +} + +.email_date { + position: absolute; + right: 20px; + bottom: 0px; +} + +.email_date .date { + font-weight: bold; +} + +.email_date .time { + color: rgb(167, 169, 172); +} + +.email_info { + padding: 0px; +} + +.add_comment { + float: right; +} + +/* The email thread */ +.even { + background-color: rgb(246, 246, 246); + border-top: 1px solid rgb(179, 179, 179); +} + +.odd { + background-color: rgb(238, 238, 238); + border-top: 1px solid rgb(179, 179, 179); +} + +.email { +} + +.email .email_header { + margin-top: 10px; + margin-bottom: 10px; +} + +.email .email_author { + font-size: 90%; +} + +.email .email_date, .email .email_date .date { + font-size: 90%; +} + +.email_body{ + -webkit-border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; + border-style: solid; + border-width: 1px; + border-color: rgb(179, 179, 179); + padding: 5px; + min-height: 40px; + background-color: rgb(255, 255, 255); +} + +.email_body a { + float: right; + padding: 3px 10px 0px 0px; +} + +.email_info { + padding: 0px; + margin-top: 5px; +} diff --git a/static/img/button_newer.png b/static/img/button_newer.png Binary files differnew file mode 100644 index 0000000..14cfaa6 --- /dev/null +++ b/static/img/button_newer.png diff --git a/static/img/button_older.png b/static/img/button_older.png Binary files differnew file mode 100644 index 0000000..6c3c950 --- /dev/null +++ b/static/img/button_older.png diff --git a/templates/thread.html b/templates/thread.html new file mode 100644 index 0000000..bf2efda --- /dev/null +++ b/templates/thread.html @@ -0,0 +1,198 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta name="ROBOTS" content="INDEX, FOLLOW" /> + + <title>Fedora mail app</title> + <meta name="author" content="" /> + + <meta name="dc.language" content="en" /> + + <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/style.css" /> + <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/thread.css" /> + + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> + <script src="{{ STATIC_URL }}jquery.expander.js"></script> + <script> + $(document).ready(function() { + $('div.email_body').expander({ + userCollapseText: 'View Less', + expandText: 'View More' + }); + }); + </script> +</head> + +<body> + <!-- Header --> + <div class="header"> + <div id="headline"> + <ul class="inline-block"> + <li id="list_name"> Fedora Development</li> + </ul> + <div id="top_right"> + <form action="#search" method="get"> + <input type="text" name="search_text" + placeholder="Search this list."/> + </form> + </div> + </div> + <p id="list_email"> + <a href="mailto:devel@list.fedoraproject.org"> + devel@list.fedoraproject.org + </a> + </p> + + <div id="thread_nav"> + <div id="newewthread" class="inline-block"> + <a href="{{ next_thread_id }}"> + <img src="{{ STATIC_URL }}img/button_newer.png" alt="New thread" /> + </a> + <br /> + {{next_thread}} + </div> + + <div class="inline-block thread_title"> + <span class="type type_question"> + <a href="/tag/question"> question </a> + </span> + <br /> + {{first_mail.email.Subject}} + <ul class="inline thread_info"> + <li class="participant"> {{participants|length}} participants</li> + <li class="discussion"> {{answers}} comments</li> + </ul> + </div> + + <div id="olderhread" class="inline-block right"> + <a href="{{ prev_thread_id }}"> + <img src="{{ STATIC_URL }}img/button_older.png" alt="New thread" /> + </a> + <br /> + {{prev_thread}} + </div> + </div> + + + <hr id="white"/> + <hr /> + </div> + + <div class="content"> + + <!-- right column --> + <section id="thread_overview_info"> + <!-- Start dates --> + <div id="thread_date_info"> + <div class="days_num inline-block">21</div> + <div class="days_text inline-block"> + days<br /> inactive + </div> + <div id="days_old" class="days_num inline-block">24</div> + <div class="days_text inline-block"> + days <br /> old + </div> + </div> + <p id="add_to_fav"> + <a href="#AddFav" class="notsaved">Add to favorite discussions</a> + </p> + <!-- End dates --> + <hr id="grey"/> + <div id="tags"> + <span id="tag_title">tags </span>({{tags|length}}) + <ul class="inline"> + {% for tag in tags %} + <li> {{ tag }} |</li> + {% endfor %} + </ul> + </div> + <div id="add_tag"> + <form action="#add_tag" method="get" > + <input id="add_tag_field" type="text" name="add_tag" class="inline-block"/> + <input id="add_tag_button" type="submit" value="ADD" class="inline-block"/> + </form> + </div> + <div id="participants"> + <span id="participants_title"> participants </span>({{participants|length}}) + <ul> + {% for ppl in participants %} + <li> + <img src="http://planet.fedoraproject.org/images/heads/default.png" alt="avatar" /> + {{ppl}} + </li> + {% endfor %} + </ul> + </div> + </section> + + <!-- main section, the email thread --> + <section id="thread_content"> + + <!-- Start first email --> + <div class="first_email"> + <div class="email_header"> + <img src="http://planet.fedoraproject.org/images/heads/default.png" alt="avatar" /> + <div class="email_author inline-block"> + <span class="name">{{first_mail.email.From}}</span> + <br /> + <span class="rank">Rank 10</span> + </div> + <div class="email_date inline-block right"> + <span class="date">{{first_mail.email.Date}}</span> + <br /> + <span class="time"></span> + </div> + </div> + <div id="first_email_body"> + {{first_mail.email.body}} + </div> + <ul class="email_info inline"> + <li class="neutral"> 0</li> + <li class="youlike"> <a href="#like"> Like</a></li> + <li class="youdislike"> <a href="#dislike"> Dislike</a></li> + <li class="discussion add_comment"> <a href="#comment"> Add your own comment</a></li> + </ul> + </div> + <!-- End first email --> + + {% for email in threads %} + <!-- Start email --> + <div class="even"> + <!-- Start email --> + <div class="email" style="padding-left: {{email.level}}em"> + <div class="email_header"> + <img src="http://planet.fedoraproject.org/images/heads/default.png" alt="avatar" /> + <div class="email_author inline-block"> + <span class="name">{{email.email.From}}</span> + <br /> +<!-- + <span class="rank">Rank 8</span> +--> + </div> + <div class="email_date inline-block right"> + <span class="date">{{email.email.Date}}</span> + <br /> +<!-- + <span class="time">00:25:50 UTC</span> +--> + </div> + </div> + <div class="email_body"> + {{email.email.body}} + </div> + <ul class="email_info inline"> + <li class="neutral"> 0</li> + <li class="youlike"> <a href="#like"> Like</a></li> + <li class="youdislike"> <a href="#dislike"> Dislike</a></li> + <li class="discussion add_comment"> <a href="#comment">Reply</a></li> + </ul> + </div> + <!-- End of email --> + {% endfor %} + + </section> + + </div> <!-- end of content --> +</body> +</html> |
