General Timetable Theme Adjustments

[kewisch]

I'd like to propose some theme adjustments in Indico. I think a lot of these we can do in the general customization, they don't need to be specific to the summit.

For context, there are a few different views. Detailed vs Simple, and a toggle between room layout (last links) and normal layout

• Adjust the grey button bar to be more in line with our theme buttons (bgcolor, color, active color, remove shadow, etc)
• Adjust width to make better use of space on desktop
• Adjust day tabs to add a little more padding and maybe font size (making them a bit easier to click)
• More reasonable border-radius on the day tabs.
• Best possible adjustments so the schedule works well on a mobile view. People will be viewing this on mobile all day at the conference.

  ---

• In fullscreen view, the room names wrap. In above shot, Breakout 3 should be centered on the right most column of events.

  ---

• The time symbol and the actual time wrap in the tooltip view, this doesn't happen on the indico sandbox. Same on the tooltip in the session view.

  ---

• In the session detail view (click on the icon next to "Session" in the tooltip), the active colors of the buttons seem to be flipped. When in timetable view, "Contribution list" is bold, and vice versa.

  ---

• In session view, click edit. The color picker has a black background, which makes it a bit harder to judge how the colors will look.
• The colors here are hardcoded. I believe we would need to hook in to https://github.com/indico/indico/blob/master/indico/web/forms/colors.py to change them, but if we can provide a color palette that fits a bit better to our default theme this would be great!

  ---

  Most of this will likely be good for the more general customization, I'm not sure anything needs to be specific to the Ubuntu Summit theme.

[kewisch]

By the way, I have found a way to customize the colors from the colorpicker. It is very ugly, but I don't see a different way to do this. It needs to be done in a plugin, I did not see a way to load python code from the customization files

from indico.core.db.sqlalchemy.colors import ColorTuple
def hack_get_colors():
    return [
        ColorTuple('#000000', '#000000'),
    ]

import indico.web.forms.colors
indico.web.forms.colors.get_colors = hack_get_colors

import indico.modules.events.sessions.forms
indico.modules.events.sessions.forms.get_colors = hack_get_colors

import indico.modules.events.sessions.controllers.management.sessions
indico.modules.events.sessions.controllers.management.sessions.get_colors = hack_get_colors

import indico.modules.events.timetable.controllers.manage
indico.modules.events.timetable.controllers.manage.get_colors = hack_get_colors

import indico.modules.events.timetable.util
indico.modules.events.timetable.util.get_colors = hack_get_colors

import indico.modules.events.timetable.forms
indico.modules.events.timetable.forms.get_colors = hack_get_colors

import indico.modules.events.util
indico.modules.events.util.get_colors = hack_get_colors

[kewisch]

I'm going to close this in favor of https://github.com/canonical/canonical-indico-ngtimetable