A Pen by Tomáš Tintěra.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"/>
<div class="container">
  <div class="header">
    <h1><span style="font-size: 66%; font-weight: normal;">#P833 - </span> Konfigurace WiFi pro hosty</h1>
    <hr/>
    <p>Nainstalovat WiFi pro přístup na Internet, tato síť musí být oddělena od lokální sítě.</p>
  <hr/>
  </div>
  <div class="table-responsive ">
    <table class="table table-notstriped" id="notificationsList">
      <tr>
        <th class="fineprint timeColumn"></th>
        <th class="fineprint nameColumn"></th>
        <th class="fineprint"></th>
      </tr>
      <tr class="noinfo unread">
        <td class="time">11:20</td>
        <td>J. Černý</td>
        <td><p class="humanComment">Vytvoření nové VLAN 20, její konfigurace na síťových prvcích a firewallu Gate. Dodávka a konfigurace Cisco WAP321.</p>
          <hr class="internalHr"/><p class="techfineprint"><small><i class="icon-time"></i> Konfigurace sítě - 0:30</small></p></td>
      </tr>
      <tr>
        <td class="time">pondělí 9:15</td>
        <td>J. Černý</td>
        <td>Převzal jsem WiFi router, uložen u mě na stole.
          <hr/><p class="techfineprint"><small></small></p>
        </td>
      </tr>
      <tr>
        <td class="time">čtvrtek 12:30</td>
        <td>J. Černý</td>
        <td><p class="humanComment">Objednán Wifi router. Obvyklý typ. Byl na skladě, tak by měl být ve středu v provozu.</p>
          <hr/><p class="techfineprint"><small><i class="icon-play"></i> Převzat. Čas dokončení zkrácen: z pátku 27. 3. na středu 25. 3. <i class="icon-time"></i> Kancelář - 0:15 </small></p>
      </td></tr>
      <tr>
        <td class="time">čtvrtek 8:30</td>
        <td>R. Strnad</td>
        <td><p class="humanComment">Jirko, stihneš to již do středy ať máme chvíli zkušebního provozu před pondělní zákaznickou prezentací? Nejpozdější termín je pátek, ten také nastavuji do požadavku.</p>
          <hr class="internalHr" class="internalHr"/><p class="techfineprint"><small>Zadáno. Termín dokončení: pátek 27. 3.</small></p>
        </td>
      </tr>
    </table>
  </div>
  <br/><br/>
  <hr/>
  <table class="footer" border="0">
    <tr>
      <td colspan="2"><small>Jste zavaleni emaily? Změňte si preference vašeho Remember The Milk připomínače v nastavení <a href="http://helpdesk.cooper.cz/task">http://helpdesk.cooper.cz</a></small>
      </td>
      <td rowspan="2" align="right" valign="center"><a id="taskpool_logo" href="http://www.taskpool.cz"><img alt="TaskPool" src="http://demo.taskpool.net/_images/helpdesk/taskpool.gif"/></a></td>
    </tr>
    <tr>
      <td><small class="fineprint">Adresát: Jiří Černý. <br/>Odesilatel: TaskPool Cooper.cz, pravidlo: Upozornění na změny v úkolech s hvězdičkou.</small></td>
    </tr>
  
</table></div>
<br/><br/>
<br/><br/>
<br/><br/>
<div style="display:2none; background-color:silver; padding:0.25em 1em; margin-bottom:2em;">
  <ul>
    <li><b>Obecné poznámky</b></li>
    <li>Zvýrazněny podbarvením jsou právě jen nepřečtené komentáře. Upoutají tak oči k nejpodstatnější informaci. Ostatní informace je prakticky pouze kontext.</li>
  </ul>
  <ul>
    <li><b>Poznámky k implementaci:</b>
    <li>Při zúžení se objeví scrollbar, aby se design úplně nerozpadal. Bude to fungovat i nejrůznějších e-mail klientech (v Lotusech nemusí)</li>
    <li>Komentář nepřečtený v době odeslání e-mailu je podbarven.</li>
    <li>E-mail obsahuje průhledný pixel,který zde vypsané komentáře označí jako přečtené.
  
  <ul>
    <li><b>Designer TODO:</b></li>
    <li>Jak odpovídat na takovýto e-mail? Oepovídat nad _touto_ čarou?</li>
    <li>Přidat ukázku s označením, že vypršel a byl posunut termín.</li>
    <li>Tento text umožnit zobrazovat a skrývat.</li>
  </ul>
</li></div>

Notifikace---změna-v-jednotlivem-požadavku.markdown

Notifikace - změna v jednotlivem požadavku

Příklad e-mail notifikace.

A Pen by Tomáš Tintěra on CodePen.

script.js

$(".chosen-select").chosen();

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'hledaný text nenalezen!'},
      '.chosen-select-width'     : {width:"95%"}
    };
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

style.css

.header { padding-left: 2px; }
.header h1 { padding-left: 4px; }
.header p { padding-left: 4px; }
th.timeColumn { color: red; width: 6em; apadding-aleft: 0; }
.techfineprint { color: gray; font-weight: normal; min-height: 35px; }
tr.unread, tr.unread .techfineprint { font-weight: bold; }
tr.unread { border-left: 1ex solid #46b8da;; }
tbody > tr > td.time { padding-left: 1.75em; }

hr.internalHr { margin-top: 10px; margin-bottom: 15px; }
.nameColumn { width: 10em; } 
#notificationsList th { border-top-width: 0px; }
.tablelink { text-decoration: none; color: inherit; }
.footer { width: 100%; } 
.fineprint { color: gray; font-weight: normal; }
.weekday { margin-right: 1.25em; }
label { font-weight: normal; }
.top ul.chosen-choices { 
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important; 
}
.middle input { border-radius: 0; }
.bottom input {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important; 
}
input.jakoSelectbox { height: 43px; }
.loupe, .timeButton { position:absolute; right: 1.1em; top: 0; border-bottom-left-radius: 0; border-top-left-radius: 0}
.border { border: 0px solid lightgray; }
.enterprise { display: none; }
textarea.licenceFile { height: 10em; }
hr.noBottom { margin-bottom: 0px; }
.nazvyPoli { text-align: right;  margin-top: 10px; }
.nazvypoli, .dodatek { margin-top: 10px; }
body { color: #222; }

/*---------------------------------------*/
select.form-control + .chosen-container.chosen-container-single .chosen-single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-image:none;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single div {
    top:4px;
    color:#000;
}

select.form-control + .chosen-container .chosen-drop {
    background-color: #FFF;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin: 2px 0 0;

}

select.form-control + .chosen-container .chosen-search input[type=text] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container .chosen-results {
    margin: 2px 0 0;
    padding: 5px 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li , 
select.form-control + .chosen-container .chosen-results li.active-result {
    display: block;
    padding: 3px 40px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
    background-image:none;
}
select.form-control + .chosen-container .chosen-results li.group-result {
  padding: 3px 20px;
  font-weight: bold;
} 


select.form-control + .chosen-container .chosen-results li:hover, 
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
    color: #FFF;
    text-decoration: none;
    background-color: #428BCA;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height:auto;
    padding:5px 0;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice {

    background-image: none;
    padding: 3px 24px 3px 5px;
    margin: 0 6px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #FFF;
    border-color: #CCC;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top:8px;
    right:6px;
}

select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}

select.form-control + .chosen-container-multi .chosen-results li.result-selected{
    display: list-item;
    color: #ccc;
    cursor: default;
    background-color: white;
}