Julian/phpbb_board3-portal_tlw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

42
styles/prosilver/template/portal/modules/clock_side.html
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} {$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 class="portal-clock-wrapper">
<div id="portal-clock" style="margin-top: 10px; margin-bottom: 10px;"> <div class="portal-clock">
<div id="portal-clock-back"> <div class="portal-clock-back">
<div id="portal-clock-back-upper"> <div class="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> <img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" /><div class="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 class="portal-clock-back-minutes-up-left" ></div><div class="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-back-seconds-up-left"></div><div class="portal-clock-back-seconds-up-right"></div>
</div> </div>
<div id="portal-clock-back-lower"> <div class="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> <img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" /><div class="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 class="portal-clock-back-minutes-down-left"></div><div class="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-seconds-down-left"></div><div class="portal-clock-back-seconds-down-right"></div>
</div> </div>
</div> </div>
<div id="portal-clock-front"> <div class="portal-clock-front">
<div id="portal-clock-front-upper"> <div class="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> <img src="{T_EXT_THEME_PATH}/images/portal/spacer_up.png" alt="" /><div class="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 class="portal-clock-front-minutes-up-left"></div><div class="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-seconds-up-left"></div><div class="portal-clock-front-seconds-up-right"></div>
</div> </div>
<div id="portal-clock-front-lower"> <div class="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> <img src="{T_EXT_THEME_PATH}/images/portal/spacer_down.png" alt="" /><div class="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 class="portal-clock-front-minutes-down-left"></div><div class="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-seconds-down-left"></div><div class="portal-clock-front-seconds-down-right"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- INCLUDEJS portal/modules/jquery.easing.1.3.js --> <!-- INCLUDEJS portal/modules/jquery.easing.1.3.js -->
<!-- INCLUDEJS portal/modules/portal_clock.js --> <!-- INCLUDEJS portal/modules/portal_clock.js -->
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R} {$LR_BLOCK_F_L}{$LR_BLOCK_F_R}

10
styles/prosilver/template/portal/modules/portal_clock.js
View File

@@ -127,27 +127,27 @@ phpbb.b3pClock = function() {
var secR = now.getSeconds() % 10; var secR = now.getSeconds() % 10;
if (hour !== hour_cur) { 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; hour_cur = hour;
} }
if (minR !== minR_cur) { 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; minR_cur = minR;
} }
if (minL !== minL_cur) { 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; minL_cur = minL;
} }
if (secR !== secR_cur) { 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; secR_cur = secR;
} }
if (secL !== secL_cur) { 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; secL_cur = secL;
} }
}; };

80
styles/prosilver/theme/portal.css
View File

@@ -112,48 +112,60 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
/* Portal clock /* Portal clock
-------------------------------------- */ -------------------------------------- */
#portal-clock { .portal-clock-wrapper {
position: relative; text-align: center;
width: 100%; min-height: 5em;
margin: 0 10%;
} }
#portal-clock-front, #portal-clock-back { .portal-clock {
position: relative;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.portal-clock * img {
float: left;
}
.portal-clock-front, .portal-clock-back {
position: absolute; position: absolute;
top: 0px; top: 0px;
} }
#portal-clock-front-upper div { .portal-clock-front-upper div {
height: 21px; height: 21px;
position: absolute; position: absolute;
vertical-align: bottom; vertical-align: bottom;
visibility: hidden; visibility: hidden;
} }
#portal-clock-front-lower div { .portal-clock-front-lower div {
height: 20px; height: 20px;
position: absolute; position: absolute;
vertical-align: top; vertical-align: top;
visibility: hidden; visibility: hidden;
} }
#portal-clock-back-upper div { .portal-clock-back-upper div {
position: absolute; position: absolute;
vertical-align: bottom; vertical-align: bottom;
} }
#portal-clock-back-lower div { .portal-clock-back-lower div {
position: absolute; position: absolute;
vertical-align: top; vertical-align: top;
} }
#portal-clock-back-seconds-up-left, #portal-clock-back-seconds-up-right, .portal-clock-back-seconds-up-left, .portal-clock-back-seconds-up-right,
#portal-clock-front-minutes-up-left, #portal-clock-front-minutes-up-right, .portal-clock-front-minutes-up-left, .portal-clock-front-minutes-up-right,
#portal-clock-back-minutes-up-left, #portal-clock-back-minutes-up-right, .portal-clock-back-minutes-up-left, .portal-clock-back-minutes-up-right,
#portal-clock-front-seconds-up-left, #portal-clock-front-seconds-up-right, .portal-clock-front-seconds-up-left, .portal-clock-front-seconds-up-right,
#portal-clock-back-minutes-down-left, #portal-clock-back-minutes-down-right, .portal-clock-back-minutes-down-left, .portal-clock-back-minutes-down-right,
#portal-clock-back-seconds-down-left, #portal-clock-back-seconds-down-right, .portal-clock-back-seconds-down-left, .portal-clock-back-seconds-down-right,
#portal-clock-front-minutes-down-left, #portal-clock-front-minutes-down-right, .portal-clock-front-minutes-down-left, .portal-clock-front-minutes-down-right,
#portal-clock-front-seconds-down-left, #portal-clock-front-seconds-down-right { .portal-clock-front-seconds-down-left, .portal-clock-front-seconds-down-right {
width: 21px; width: 21px;
height: 21px; height: 21px;
background-position: 0 0; background-position: 0 0;
@@ -162,91 +174,91 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
/* Minutes start /* Minutes start
-------------------------------------- */ -------------------------------------- */
#portal-clock-back-minutes-up-left{ .portal-clock-back-minutes-up-left{
background-position: 0 0; background-position: 0 0;
margin: 0 0 0 43px; margin: 0 0 0 43px;
} }
#portal-clock-back-minutes-up-right { .portal-clock-back-minutes-up-right {
background-position: 0 -43px; background-position: 0 -43px;
margin: 0 0 0 64px; margin: 0 0 0 64px;
} }
#portal-clock-front-minutes-up-left { .portal-clock-front-minutes-up-left {
background-position: 0 0; background-position: 0 0;
margin: 0 0 0 43px; margin: 0 0 0 43px;
} }
#portal-clock-front-minutes-up-right { .portal-clock-front-minutes-up-right {
background-position: 0 -43px; background-position: 0 -43px;
margin: 0 0 0 63px; margin: 0 0 0 63px;
} }
#portal-clock-back-minutes-down-left{ .portal-clock-back-minutes-down-left{
background-position: 0 -22px; background-position: 0 -22px;
margin: 21px 0 0 43px; margin: 21px 0 0 43px;
} }
#portal-clock-back-minutes-down-right { .portal-clock-back-minutes-down-right {
background-position: 0 -65px; background-position: 0 -65px;
margin: 21px 0 0 64px; margin: 21px 0 0 64px;
} }
#portal-clock-front-minutes-down-left { .portal-clock-front-minutes-down-left {
background-position: 0 -22px; background-position: 0 -22px;
margin: 21px 0 0 42px; margin: 21px 0 0 42px;
} }
#portal-clock-front-minutes-down-right { .portal-clock-front-minutes-down-right {
background-position: 0 -65px; background-position: 0 -65px;
margin: 21px 0 0 63px; margin: 21px 0 0 63px;
} }
/* Seconds start /* Seconds start
---------------------------------------- */ ---------------------------------------- */
#portal-clock-back-seconds-up-left{ .portal-clock-back-seconds-up-left{
background-position: 0 0; background-position: 0 0;
margin: 0 0 0 85px; margin: 0 0 0 85px;
} }
#portal-clock-back-seconds-up-right { .portal-clock-back-seconds-up-right {
background-position: 0 -43px; background-position: 0 -43px;
margin: 0 0 0 106px; margin: 0 0 0 106px;
} }
#portal-clock-front-seconds-up-left { .portal-clock-front-seconds-up-left {
background-position: 0 0; background-position: 0 0;
margin: 0 0 0 84px; margin: 0 0 0 84px;
} }
#portal-clock-front-seconds-up-right { .portal-clock-front-seconds-up-right {
background-position: 0 -43px; background-position: 0 -43px;
margin: 0 0 0 105px; margin: 0 0 0 105px;
} }
#portal-clock-back-seconds-down-left{ .portal-clock-back-seconds-down-left{
background-position: 0 -22px; background-position: 0 -22px;
margin: 21px 0 0 85px; margin: 21px 0 0 85px;
} }
#portal-clock-back-seconds-down-right { .portal-clock-back-seconds-down-right {
background-position: 0 -65px; background-position: 0 -65px;
margin: 21px 0 0 106px; margin: 21px 0 0 106px;
} }
#portal-clock-front-seconds-down-left { .portal-clock-front-seconds-down-left {
background-position: 0 -22px; background-position: 0 -22px;
margin: 21px 0 0 84px; margin: 21px 0 0 84px;
} }
#portal-clock-front-seconds-down-right { .portal-clock-front-seconds-down-right {
background-position: 0 -65px; background-position: 0 -65px;
margin: 21px 0 0 105px; margin: 21px 0 0 105px;
} }
/* Hours start /* Hours start
---------------------------------------- */ ---------------------------------------- */
#portal-clock-back-hours-up, #portal-clock-front-hours-up { .portal-clock-back-hours-up, .portal-clock-front-hours-up {
width: 42px; width: 42px;
height: 21px; height: 21px;
background: url(./images/portal/portal_clock_double.png) no-repeat; background: url(./images/portal/portal_clock_double.png) no-repeat;
@@ -256,7 +268,7 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
margin: 0 0 0 0; margin: 0 0 0 0;
} }
#portal-clock-back-hours-down, #portal-clock-front-hours-down { .portal-clock-back-hours-down, .portal-clock-front-hours-down {
width: 42px; width: 42px;
height: 20px; height: 20px;
background: url(./images/portal/portal_clock_double.png) no-repeat; background: url(./images/portal/portal_clock_double.png) no-repeat;