[SOLVED] Mobile web on iPhone - Calendar color/border problems

[warmbowski]

When using the mobile web interface on an iPhone for viewing calendar, there are some differences between the "Old Interface" and the "New Interface". The calendar day views do not render appointments' background colors or boarders around the appointments. These same appointments render just fine in the Old Interface's calendar.

The problem persists as I have tested it in many different browsers. Finally, I used Firefox with the Firebug extension to inspect the code. Here are the results.

Styles applied to a day appointment in the Old Interface:

.PinkBg {zmobile,...303142952 (line 131)
background-color:#FBDBE9;
}

.zo_day_appt {zmobile,...303142952 (line 94)
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border:1px solid #333333;
height:100%;
width:100%;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {zmobile,...303142952 (line 1)
margin:0;
padding:0;
}

Inherited from table
table {zmobile,...303142952 (line 2)
border-collapse:collapse;
border-spacing:0;
}

Inherited from body
body {zmobile,...303142952 (line 10)
color:#000000;
font-family:Helvetica;
}

Styles applied to a day appointment in the New Interface:

.zo_day_appt {zmobile1...303142952 (line 85)
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
height:100%;
width:100%;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {zmobile1...303142952 (line 3)
margin:0;
padding:0;
}

Inherited from table
table {zmobile1...303142952 (line 4)
border-collapse:collapse;
border-spacing:0;
}

Inherited from body
html, body {zmobile1...303142952 (line 12)
color:#000000;
font-family:Myriad,"Lucida Grande",Helvetica,Arial,Verdana,Sans-serif;
}

As you can see, the background color class and the border property are both missing in the New Interfaces style sheet (zmobile1.css). Which correlate with the problems that I am seeing.

I have been running 5.0.8 for some time and figured the problem would go away with an upgrade, but it still seems to be a problem in 5.0.14 now that I have upgraded.

I am going to see what I need to add to the css to make it work correctly and post a reply.

[warmbowski]

That was easy. I got the day appointments rendering properly again by inserting this at line 384 (in the .zo_day_appt class) of /opt/zimbra/jetty/webapps/zimbra/css/zmobile1.css

    border:1px solid #333333;

as well as adding all of the color classes to the end of /opt/zimbra/jetty/webapps/zimbra/css/zmobile1.css

/*
 * Colors, for use in calendar and elsewhere.
 *
 * Use the base color (eg: "Red") to show a list of colors.
 * Use the "Bg" version ("RedBg" as background in a list, etc)
 * Dark and Light are primarily for use in borders
 *
 */

.Selection			{ background-color:#ADD6D6;}
.SelectionDark		{ background-color:#91C8C8; }
.SelectionLight		{ background-color:#C8E4E4; }
.SelectionBg		{ background-color:#E3F1F1; }

.Red				{ background-color:#E34040;}
.RedDark			{ background-color:#D90000; }
.RedLight			{ background-color:#EC8080; }
.RedBg				{ background-color:#F5BFBF; }
.RedC				{ color:#E34040;}
.RedDarkC			{ color:#D90000; }
.RedLightC			{ color:#EC8080; }
.RedBgC				{ color:#F5BFBF; }

.Pink				{ background-color:#F492BF;}
.PinkDark			{ background-color:#F06EA9; }
.PinkLight			{ background-color:#F8B7D4; }
.PinkBg				{ background-color:#FBDBE9; }
.PinkC				{ color:#F492BF;}
.PinkDarkC			{ color:#F06EA9; }
.PinkLightC			{ color:#F8B7D4; }
.PinkBgC			{ color:#FBDBE9; }

.Orange				{ background-color:#FF9940;}
.OrangeDark			{ background-color:#FF7700; }
.OrangeLight		{ background-color:#FFBB80; }
.OrangeBg			{ background-color:#FFDDBF; }
.OrangeC			{ color:#FF9940;}
.OrangeDarkC		{ color:#FF7700; }
.OrangeLightC		{ color:#FFBB80; }
.OrangeBgC			{ color:#FFDDBF; }

.Yellow				{ background-color:#FFE640;}
.YellowDark			{ background-color:#FFDD00; }
.YellowLight		{ background-color:#FFEE80; }
.YellowBg			{ background-color:#FFF6BF; }
.YellowC			{ color:#FFE640;}
.YellowDarkC		{ color:#FFDD00; }
.YellowLightC		{ color:#FFEE80; }
.YellowBgC			{ color:#FFF6BF; }

.Green				{ background-color:#40A05F;}
.GreenDark			{ background-color:#00802A; }
.GreenLight			{ background-color:#80C095; }
.GreenBg			{ background-color:#BFDFCA; }
.GreenC				{ color:#40A05F;}
.GreenDarkC			{ color:#00802A; }
.GreenLightC		{ color:#80C095; }
.GreenBgC			{ color:#BFDFCA; }

.Cyan				{ background-color:#40D9D9;}
.CyanDark			{ background-color:#00CCCC; }
.CyanLight			{ background-color:#80E6E6; }
.CyanBg				{ background-color:#BFF2F2; }
.CyanC				{ color:#40D9D9;}
.CyanDarkC			{ color:#00CCCC; }
.CyanLightC			{ color:#80E6E6; }
.CyanBgC			{ color:#BFF2F2; }

.Blue				{ background-color:#4073D9;}
.BlueDark			{ background-color:#0044CC; }
.BlueLight			{ background-color:#80A2E6; }
.BlueBg				{ background-color:#BFD0F2; }
.BlueC				{ color:#4073D9;}
.BlueDarkC			{ color:#0044CC; }
.BlueLightC			{ color:#80A2E6; }
.BlueBgC			{ color:#BFD0F2; }

.Purple				{ background-color:#7940A0;}
.PurpleDark			{ background-color:#4C0080; }
.PurpleLight		{ background-color:#A680C0; }
.PurpleBg			{ background-color:#D2BFDF; }
.PurpleC			{ color:#7940A0; }
.PurpleDarkC		{ color:#4C0080; }
.PurpleLightC		{ color:#A680C0; }
.PurpleBgC			{ color:#D2BFDF; }

.Gray				{ background-color:#BFBFBF;}
.GrayDark			{ background-color:#A9A9A9; }
.GrayLight			{ background-color:#D4D4D4; }
.GrayBg				{ background-color:#E9E9E9; }
.GrayC				{ color:#BFBFBF;}
.GrayDarkC			{ color:#A9A9A9; }
.GrayLightC			{ color:#D4D4D4; }
.GrayBgC			{ color:#E9E9E9; }

.StatusInfo, .StatusWarning, .StatusCritical {
    padding: 5px;
    font-weight: bold;
    border:1px solid black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.StatusInfo     { background-color: lightgreen;}
.StatusWarning  { background-color: yellow;}
.StatusCritical { background-color: pink; }

[mmorse]

Re event backgrounds on the mobile-web interfaces in GnR:

/m/zmain?zms=iphone-ext: fine
/m/zmain?zms=iphone: fine
/m/zmain?zms=iphone-lowbw: fine
/m/mainx: fine - phaseout (practically same as /m/zmain?zms=iphone, though differences in action/nav buttons)
/m/main: Switched behavior; works in Franklin, doesn't in GnR. Not linked to / being phased out anyways so probably not worth filing a bug.
/m/zmain?zms=wm6: fine
/m/zmain?zms=wm6-lowbw: doesn't/probably not planned
/m/zmain?zms=xlite: doesn't/probably not planned
/m/zmain?zms=xlite-lowbw: doesn't/probably not planned