From 963c5d60b883ec6f04ae8ff193e6b09405d36383 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sun, 1 Dec 2013 22:38:43 +0100 Subject: [PATCH] [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. --- .../template/portal/modules/clock_side.html | 42 +++++----- .../template/portal/modules/portal_clock.js | 10 +-- styles/prosilver/theme/portal.css | 80 +++++++++++-------- 3 files changed, 72 insertions(+), 60 deletions(-) diff --git a/styles/prosilver/template/portal/modules/clock_side.html b/styles/prosilver/template/portal/modules/clock_side.html index 602d8caf..e7adb227 100644 --- a/styles/prosilver/template/portal/modules/clock_side.html +++ b/styles/prosilver/template/portal/modules/clock_side.html @@ -1,32 +1,32 @@ {$LR_BLOCK_H_L} {$TITLE}{$LR_BLOCK_H_R} -
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
-
+
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R} diff --git a/styles/prosilver/template/portal/modules/portal_clock.js b/styles/prosilver/template/portal/modules/portal_clock.js index a5279c65..7ca0b85d 100644 --- a/styles/prosilver/template/portal/modules/portal_clock.js +++ b/styles/prosilver/template/portal/modules/portal_clock.js @@ -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; } }; diff --git a/styles/prosilver/theme/portal.css b/styles/prosilver/theme/portal.css index 4f298879..c5215593 100644 --- a/styles/prosilver/theme/portal.css +++ b/styles/prosilver/theme/portal.css @@ -112,48 +112,60 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{ /* Portal clock -------------------------------------- */ -#portal-clock { - position: relative; - width: 100%; +.portal-clock-wrapper { + text-align: center; + 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; top: 0px; } -#portal-clock-front-upper div { +.portal-clock-front-upper div { height: 21px; position: absolute; vertical-align: bottom; visibility: hidden; } -#portal-clock-front-lower div { +.portal-clock-front-lower div { height: 20px; position: absolute; vertical-align: top; visibility: hidden; } -#portal-clock-back-upper div { +.portal-clock-back-upper div { position: absolute; vertical-align: bottom; } -#portal-clock-back-lower div { +.portal-clock-back-lower div { position: absolute; vertical-align: top; } -#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-back-minutes-up-left, #portal-clock-back-minutes-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-seconds-down-left, #portal-clock-back-seconds-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-back-seconds-up-left, .portal-clock-back-seconds-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-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-seconds-down-left, .portal-clock-back-seconds-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 { width: 21px; height: 21px; background-position: 0 0; @@ -162,91 +174,91 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{ /* Minutes start -------------------------------------- */ -#portal-clock-back-minutes-up-left{ +.portal-clock-back-minutes-up-left{ background-position: 0 0; margin: 0 0 0 43px; } -#portal-clock-back-minutes-up-right { +.portal-clock-back-minutes-up-right { background-position: 0 -43px; margin: 0 0 0 64px; } -#portal-clock-front-minutes-up-left { +.portal-clock-front-minutes-up-left { background-position: 0 0; margin: 0 0 0 43px; } -#portal-clock-front-minutes-up-right { +.portal-clock-front-minutes-up-right { background-position: 0 -43px; margin: 0 0 0 63px; } -#portal-clock-back-minutes-down-left{ +.portal-clock-back-minutes-down-left{ background-position: 0 -22px; margin: 21px 0 0 43px; } -#portal-clock-back-minutes-down-right { +.portal-clock-back-minutes-down-right { background-position: 0 -65px; margin: 21px 0 0 64px; } -#portal-clock-front-minutes-down-left { +.portal-clock-front-minutes-down-left { background-position: 0 -22px; margin: 21px 0 0 42px; } -#portal-clock-front-minutes-down-right { +.portal-clock-front-minutes-down-right { background-position: 0 -65px; margin: 21px 0 0 63px; } /* Seconds start ---------------------------------------- */ -#portal-clock-back-seconds-up-left{ +.portal-clock-back-seconds-up-left{ background-position: 0 0; margin: 0 0 0 85px; } -#portal-clock-back-seconds-up-right { +.portal-clock-back-seconds-up-right { background-position: 0 -43px; margin: 0 0 0 106px; } -#portal-clock-front-seconds-up-left { +.portal-clock-front-seconds-up-left { background-position: 0 0; margin: 0 0 0 84px; } -#portal-clock-front-seconds-up-right { +.portal-clock-front-seconds-up-right { background-position: 0 -43px; margin: 0 0 0 105px; } -#portal-clock-back-seconds-down-left{ +.portal-clock-back-seconds-down-left{ background-position: 0 -22px; margin: 21px 0 0 85px; } -#portal-clock-back-seconds-down-right { +.portal-clock-back-seconds-down-right { background-position: 0 -65px; margin: 21px 0 0 106px; } -#portal-clock-front-seconds-down-left { +.portal-clock-front-seconds-down-left { background-position: 0 -22px; margin: 21px 0 0 84px; } -#portal-clock-front-seconds-down-right { +.portal-clock-front-seconds-down-right { background-position: 0 -65px; margin: 21px 0 0 105px; } /* Hours start ---------------------------------------- */ -#portal-clock-back-hours-up, #portal-clock-front-hours-up { +.portal-clock-back-hours-up, .portal-clock-front-hours-up { width: 42px; height: 21px; 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; } -#portal-clock-back-hours-down, #portal-clock-front-hours-down { +.portal-clock-back-hours-down, .portal-clock-front-hours-down { width: 42px; height: 20px; background: url(./images/portal/portal_clock_double.png) no-repeat;