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

[feature/jquery_clock] Add jQuery-based clock to prosilver clock_side

Browse Source 
The clock we currently use needs flash support. As newer browsers and
mobile devices are moving on from flash to HTML5 we should do the same and
replace our flash clock with a jQuery based clock.
It is using image sprites which means we only have to load 2 images. One
for the single digits and one for the double digit hours.
This is currently only added to prosilver and the obsolete settings in the
clock module still need to be removed.

B3P-218
This commit is contained in:
Marc Alexander
2013-03-02 14:06:22 +01:00
parent ce300a78a6
commit 53186f7060
8 changed files with 550 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
root/styles/prosilver/theme/portal.css
View File

@@ -92,4 +92,160 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
background-image: url("./images/portal/arrowbullet_rtl.gif");
background-position: center right; /*custom bullet list image*/
padding-right: 19px; /*link text is indented 19px*/
}
}
/* Portal clock
-------------------------------------- */
#portal-clock {
position: relative;
width: 100%;
}
#portal-clock-front, #portal-clock-back {
position: absolute;
top: 0px;
}
#portal-clock-front-upper div {
height: 21px;
position: absolute;
vertical-align: bottom;
visibility: hidden;
}
#portal-clock-front-lower div {
height: 20px;
position: absolute;
vertical-align: top;
visibility: hidden;
}
#portal-clock-back-upper div {
position: absolute;
vertical-align: bottom;
}
#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 {
width: 21px;
height: 21px;
background-position: 0 0;
background: url(./images/portal/portal_clock_single.png) no-repeat;
}
/* Minutes start
-------------------------------------- */
#portal-clock-back-minutes-up-left{
background-position: 0 0;
margin: 0 0 0 43px;
}
#portal-clock-back-minutes-up-right {
background-position: 0 -43px;
margin: 0 0 0 64px;
}
#portal-clock-front-minutes-up-left {
background-position: 0 0;
margin: 0 0 0 43px;
}
#portal-clock-front-minutes-up-right {
background-position: 0 -43px;
margin: 0 0 0 63px;
}
#portal-clock-back-minutes-down-left{
background-position: 0 -22px;
margin: 21px 0 0 43px;
}
#portal-clock-back-minutes-down-right {
background-position: 0 -65px;
margin: 21px 0 0 64px;
}
#portal-clock-front-minutes-down-left {
background-position: 0 -22px;
margin: 21px 0 0 42px;
}
#portal-clock-front-minutes-down-right {
background-position: 0 -65px;
margin: 21px 0 0 63px;
}
/* Seconds start
---------------------------------------- */
#portal-clock-back-seconds-up-left{
background-position: 0 0;
margin: 0 0 0 85px;
}
#portal-clock-back-seconds-up-right {
background-position: 0 -43px;
margin: 0 0 0 106px;
}
#portal-clock-front-seconds-up-left {
background-position: 0 0;
margin: 0 0 0 84px;
}
#portal-clock-front-seconds-up-right {
background-position: 0 -43px;
margin: 0 0 0 105px;
}
#portal-clock-back-seconds-down-left{
background-position: 0 -22px;
margin: 21px 0 0 85px;
}
#portal-clock-back-seconds-down-right {
background-position: 0 -65px;
margin: 21px 0 0 106px;
}
#portal-clock-front-seconds-down-left {
background-position: 0 -22px;
margin: 21px 0 0 84px;
}
#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 {
width: 42px;
height: 21px;
background: url(./images/portal/portal_clock_double.png) no-repeat;
background-position: 0 0;
vertical-align: bottom;
display: inline-block;
margin: 0 0 0 0;
}
#portal-clock-back-hours-down, #portal-clock-front-hours-down {
width: 42px;
height: 20px;
background: url(./images/portal/portal_clock_double.png) no-repeat;
background-position: 0 -44px;
vertical-align: top;
display: inline-block;
margin: 21px 0 0 0;
}