Cleanup Sidebar "Phases" HTML

[kvdmolen]

• Remove classnames .sidebarRow .sidebarRowNarrow
• Remove <div class="sidebarHead"><h2><a href="../../issue/show/1.html">Test #1</a></h2></div>
• Replace <img> with corresponding class-names inside parent <a> element. E.g. phase_current.png would translate to <a class="current"><h3>Admission</h3></a> & phase_finished.png to .finished
• Replace <h3> with <span class="text">
• Remove (1) texts and spaces, so (1) Admission becomes Admission
• Replace .right in <span class="right">29 days 09:42:52 left</span> with .time
• Add JS countdown-script also here
• Place Explanation-text inside double <span> elements, so: <div class="tooltip"><span><span>Text here</span></span></div> in order to achieve this: http://www.leiteq.nl/post/pure-css-tooltip-center-with-arrow-and-html-tag-support/
• Remove onclick events

Old HTML

<div class="sidebarSection tab-whatcanido">
  <div class="sidebarHead">
    <h2><a href="../../issue/show/1.html">Test #1</a></h2>
  </div>
  <a href="../../initiative/" class="sidebarRow sidebarRowNarrow" onclick="$('#phase-help-admission').toggle();return false;">
    <span class="right">29 days 09:42:52 left</span>
    <h3><img class="icon16" src="../../static/icons/32/phase_current.png"> (1) Admission</h3>
    <div style="display: none;" id="phase-help-admission">As soon as one initiative of this issue reaches the 1st quorum of 10% support, the issue will proceed to discussion phase.</div>
  </a>
  <a href="../../initiative/" class="sidebarRow sidebarRowNarrow" onclick="$('#phase-help-discussion').toggle();return false;">
    <span class="right">30 days</span>
    <h3><img class="icon16" src="../../static/icons/32/empty.png"> (2) Discussion</h3>
    <div style="display: none;" id="phase-help-discussion">During the discussion phase, the issue is debated on while the initiators improve the proposals and reasons in their initiatives. Supporters of initiatives can write and rate suggestions for improvement.</div>
  </a>
  <a href="../../initiative/" class="sidebarRow sidebarRowNarrow" onclick="$('#phase-help-verification').toggle();return false;">
    <span class="right">15 days</span>
    <h3><img class="icon16" src="../../static/icons/32/empty.png"> (3) Verification</h3>
    <div style="display: none;" id="phase-help-verification">During the verification phase, existing initiatives cannot be changed anymore. Initiatives need to pass the 2nd quorum of 10% at end of verification phase to become admitted for voting.</div>
  </a>
  <a href="../../initiative/" class="sidebarRow sidebarRowNarrow" onclick="$('#phase-help-voting').toggle();return false;">
    <span class="right">15 days</span>
    <h3><img class="icon16" src="../../static/icons/32/empty.png"> (4) Voting</h3>
    <div style="display: none;" id="phase-help-voting">During the voting phase, votes for all admitted initiatives in this issue can be cast. The final result will be calculated as soon as this phase ends.</div>
  </a>
</div>

New HTML

<div class="phases">
  <a href=".." class="[current] [finished]">
    <div class="time">29 days 09:42:52</div>
    <div class="text">Admission</div>
    <div class="tooltip"><span><span>As soon as one initiative of this issue reaches the 1st quorum of 10% support, the issue will proceed to discussion phase.</span></span></div>
  </a>
  ...
</div>

[nktc]

I think we're good here, let me know. http://178.62.254.91/lf/issue/show/1.html

[kvdmolen]

Super cool man!

Last issue: remove (x) from all phases, so e.g. (1) Admission becomes Admission

[nktc]

Done.