[responsive/portal] Use CSS classes for portal-clock

This will get rid of some inline CSS and enable multiple clocks on the portal.
Multiple clocks don't necessarily make sense though.
This commit is contained in:
Marc Alexander
2013-12-01 22:38:43 +01:00
parent 19a9630b2b
commit 963c5d60b8
3 changed files with 72 additions and 60 deletions

View File

@@ -1,32 +1,32 @@
{$LR_BLOCK_H_L}<!-- IF $S_BLOCK_ICON --><img src="{$IMAGE_SRC}" width="{$IMAGE_WIDTH}" height="{$IMAGE_HEIGHT}" alt="" />&nbsp;<!-- ENDIF -->{$TITLE}{$LR_BLOCK_H_R}
<div style="text-align: center; min-height: 5em; margin: 0 10%;">
<div id="portal-clock" style="margin-top: 10px; margin-bottom: 10px;">
<div id="portal-clock-back">
<div id="portal-clock-back-upper">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" style="float: left;" /><div id="portal-clock-back-hours-up"></div>
<div id="portal-clock-back-minutes-up-left" ></div><div id="portal-clock-back-minutes-up-right"></div>
<div id="portal-clock-back-seconds-up-left"></div><div id="portal-clock-back-seconds-up-right"></div>
<div class="portal-clock-wrapper">
<div class="portal-clock">
<div class="portal-clock-back">
<div class="portal-clock-back-upper">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" /><div class="portal-clock-back-hours-up"></div>
<div class="portal-clock-back-minutes-up-left" ></div><div class="portal-clock-back-minutes-up-right"></div>
<div class="portal-clock-back-seconds-up-left"></div><div class="portal-clock-back-seconds-up-right"></div>
</div>
<div id="portal-clock-back-lower">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" style="float: left;" /><div id="portal-clock-back-hours-down"></div>
<div id="portal-clock-back-minutes-down-left"></div><div id="portal-clock-back-minutes-down-right"></div>
<div id="portal-clock-back-seconds-down-left"></div><div id="portal-clock-back-seconds-down-right"></div>
<div class="portal-clock-back-lower">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" /><div class="portal-clock-back-hours-down"></div>
<div class="portal-clock-back-minutes-down-left"></div><div class="portal-clock-back-minutes-down-right"></div>
<div class="portal-clock-back-seconds-down-left"></div><div class="portal-clock-back-seconds-down-right"></div>
</div>
</div>
<div id="portal-clock-front">
<div id="portal-clock-front-upper">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" style="float: left;" /><div id="portal-clock-front-hours-up"></div>
<div id="portal-clock-front-minutes-up-left"></div><div id="portal-clock-front-minutes-up-right"></div>
<div id="portal-clock-front-seconds-up-left"></div><div id="portal-clock-front-seconds-up-right"></div>
<div class="portal-clock-front">
<div class="portal-clock-front-upper">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" /><div class="portal-clock-front-hours-up"></div>
<div class="portal-clock-front-minutes-up-left"></div><div class="portal-clock-front-minutes-up-right"></div>
<div class="portal-clock-front-seconds-up-left"></div><div class="portal-clock-front-seconds-up-right"></div>
</div>
<div id="portal-clock-front-lower">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" style="float: left;" /><div id="portal-clock-front-hours-down"></div>
<div id="portal-clock-front-minutes-down-left"></div><div id="portal-clock-front-minutes-down-right"></div>
<div id="portal-clock-front-seconds-down-left"></div><div id="portal-clock-front-seconds-down-right"></div>
<div class="portal-clock-front-lower">
<img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" /><div class="portal-clock-front-hours-down"></div>
<div class="portal-clock-front-minutes-down-left"></div><div class="portal-clock-front-minutes-down-right"></div>
<div class="portal-clock-front-seconds-down-left"></div><div class="portal-clock-front-seconds-down-right"></div>
</div>
</div>
</div>
</div>
</div>
<!-- INCLUDEJS portal/modules/jquery.easing.1.3.js -->
<!-- INCLUDEJS portal/modules/portal_clock.js -->
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}

View File

@@ -127,27 +127,27 @@ phpbb.b3pClock = function() {
var secR = now.getSeconds() % 10;
if (hour !== hour_cur) {
phpbb.b3pFlipClock('#portal-clock-front-hours-up', '#portal-clock-front-hours-down', hour, 'double');
phpbb.b3pFlipClock('.portal-clock-front-hours-up', '.portal-clock-front-hours-down', hour, 'double');
hour_cur = hour;
}
if (minR !== minR_cur) {
phpbb.b3pFlipClock('#portal-clock-front-minutes-up-right', '#portal-clock-front-minutes-down-right', minR, 'single');
phpbb.b3pFlipClock('.portal-clock-front-minutes-up-right', '.portal-clock-front-minutes-down-right', minR, 'single');
minR_cur = minR;
}
if (minL !== minL_cur) {
phpbb.b3pFlipClock('#portal-clock-front-minutes-up-left', '#portal-clock-front-minutes-down-left', minL, 'single');
phpbb.b3pFlipClock('.portal-clock-front-minutes-up-left', '.portal-clock-front-minutes-down-left', minL, 'single');
minL_cur = minL;
}
if (secR !== secR_cur) {
phpbb.b3pFlipClock('#portal-clock-front-seconds-up-right', '#portal-clock-front-seconds-down-right', secR, 'single');
phpbb.b3pFlipClock('.portal-clock-front-seconds-up-right', '.portal-clock-front-seconds-down-right', secR, 'single');
secR_cur = secR;
}
if (secL !== secL_cur) {
phpbb.b3pFlipClock('#portal-clock-front-seconds-up-left', '#portal-clock-front-seconds-down-left', secL, 'single');
phpbb.b3pFlipClock('.portal-clock-front-seconds-up-left', '.portal-clock-front-seconds-down-left', secL, 'single');
secL_cur = secL;
}
};