Suggestion: consider remembering the "display" choices?

[Sara]

The community “my events” list could use some design loving, but one of the nicer features is that you allow them to customize which columns they want to display.

View post on imgur.com

The only thing is that it kinda makes the configuration pointless, because each time you revisit or refresh the list page, it forgets that you told it you really don’t need to see the “coordinator” of the event because… well…. YOU ARE the coordinator 😛

Consider storing the setting so that future visits don’t incite agitation 🙂

[Brian]

Hi,

Thanks for using our plugins. I can help out here.

I have made a bug ticket for us to look into this as at the very least it should remember the setting when going through the pages.

Thanks for bringing this up.

Let me know if you have any follow up questions.

Thanks

[Sara]

OK thanks Brian! While they are in there, maybe they can make a few minor adjustments to the table appearance? I’ve hacked it in via jquery, and at least in my opinion, it looks a lot better:

View post on imgur.com

All I did was make the header columns left aligned and removed the padding so that the column title lined up with the values below. Then I moved the action links over to the first column, as they felt awkward with the title. I also removed the word “Reports:” as it was superfluous. I also made the font-size 0.9em which looks better in page, but also on mobile. Also added white-space nowrap to the first column of data.

Now naturally all these minor adjustments could be done better, but it at least got the table to something that didn’t hurt the brain 🙂

Thanks for logging the bug report!

• This reply was modified 10 years, 2 months ago by Sara.

[Brian]

HI,

Thanks for sharing what you did. It is a cleaner look.

Can you provide the jQuery you used to do this?

It could be something we provide as a snippet for now or maybe use in the future as a way to improve the design.

Thanks

[Sara]

// Event Calendar - My Events List 
        // this puts the actions into the first column under status
        // removes the word "reports:"
        // and makes first column nowrap for better styling
        $('table.my-events #the-list tr').each(function(x,tr)
        {
            $tds = $(tr).find('td');
            $actions = $('table.my-events #the-list td .row-actions');
            $actions.find('strong').remove();
            $tds.eq(0).append($actions).css('white-space', 'nowrap');
        });

and css

/* adjust my events table list view */
#tribe-community-events th {
    padding: 0 !important;
    text-align: left;
}

table.my-events #the-list td {
    padding-right: 15px;
    font-size: 0.9em;
}
table.my-events #the-list td:last-child {
    padding-right: 0;
}

I’ve made a lot of other css overrides to fix other views like the event list view and such, not sure if you want those as well.

The event list view had too much spacing between the featured event image and the event info, making events without featured images look very awkard in the list. Overall due to irregular spacing and awkward lines around the share buttons, it just made the whole view confusing for the eyes. With a few minor adjustments to the css you end up with a view that your eyes don’t have to stress to figure out what goes to what.

.tribe-events-event-image a img {
    max-width: 225px;
}
/* fix calendar list view spacing between img and event info */
.tribe-events-list .tribe-events-event-image {
    width: 21% !important;
}
.tribe-events-list .tribe-events-event-image+div.tribe-events-content {
    width: 75%  !important;
    float: right;
}

/* fix list view spacing between events */
.tribe-events-list .type-tribe_events {
    border-bottom: 1px solid #ddd !important;
    padding: 7em 0 3em !important;
}
.tribe-events-list .type-tribe_events:first-of-type {
    border-bottom: 1px solid #ddd !important;
    padding: 0em 0 3em !important;
}
.tribe-events-list .type-tribe_events:last-of-type {
    border-bottom: 0 !important;
    padding: 7em 0 3em !important;
}

/* fix share this so that the headline and buttons are on same line */
div.sharedaddy h3.sd-title:before {
    content: "";
    display: block;
    width: 100%;
    min-width: 30px;
    border-top: none !important;
    margin-bottom: 0 !important;
    /* border-top: 1px solid #ddd; */
    /* margin-bottom: 1em; */
}
.sd-title {
    float: left !important;
    line-height: 30px !important;
    padding-right: 20px !important;
}
.sd-content {
    float: left;
    line-height: 23px !important;
    padding-bottom: 20px !important;
}
.sd-content:after {
    content: "";
    clear:both;
}

[Brian]

Hi,

Thanks for providing all this. I have saved it into our adjustment requests to see about adding it in the future.

I am going to close this ticket to new replies, but the remember choices issue is still open and we will update this ticket once we release a fix.

If you have any new questions or issues please create a new ticket and reference this one.

Thanks

[Leah]

Hello,

Thank you for reporting this issue. We weren’t able to get a fix for it into our upcoming release (4.1). However, please know that the problem is still on our radar and is ticketed within our system to be addressed in a future maintenance release. We’ll do our best to keep you posted when we are able to get a solution in place. Thank you for your patience while we improve and expand our plugins.

Best,
Leah

[Author]

Posts