Results 1 to 3 of 3

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

  1. #1
    warmbowski is offline Active Member
    Join Date
    Apr 2008
    Location
    Seattle
    Posts
    37
    Rep Power
    7

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

    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:
    Code:
    .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:
    Code:
    .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.

  2. #2
    warmbowski is offline Active Member
    Join Date
    Apr 2008
    Location
    Seattle
    Posts
    37
    Rep Power
    7

    Default

    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

    Code:
        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

    Code:
    /*
     * 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; }

  3. #3
    mmorse's Avatar
    mmorse is offline Moderator
    Join Date
    May 2006
    Location
    USA
    Posts
    6,242
    Rep Power
    21

    Default

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 5
    Last Post: 11-22-2008, 07:28 PM
  2. Replies: 1
    Last Post: 03-04-2008, 05:35 AM
  3. Zimbra Web Client-Shared Calendar
    By r8escjohn in forum Users
    Replies: 0
    Last Post: 03-03-2008, 09:04 AM
  4. Zimbra Mobile Web Client questions
    By sdemeyer in forum Administrators
    Replies: 1
    Last Post: 02-03-2008, 02:25 PM
  5. ZCS 4.5.4 Mobile - No Multiple Calendar Sync?
    By dlbewley in forum Zimbra Mobile
    Replies: 9
    Last Post: 07-08-2007, 09:13 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •