Create an alternative compact layout

[hammady]

This layout will show all the data in a single table.

[hammady]

Related to this: group by prayers instead of masjids. For example: Fajr: Masjid 1: 8:00 Masjid 2: 8:15 ...

Zuhr: ...

[fayez-nazzal]

@hammady Please take a look here, what do you think? how are we going to display jumaas?

[hammady]

This looks good with some minor comments. The address will be too big to fit in that column. Also I'm thinking of the upcoming field "changed_since" and where it will fit. I think this view does not have to include all the details. We can simply have a table of 3 or 4 columns:

1. Masjid display name
2. Iqama time (rename Time to Iqama Time or just Iqama, probably applies to the other layout too)
3. Last updated
4. (Optional) Changed since, unless we go with colour coding, even though I think we can simply start with this fourth column and do the coding later. This is easier to implement where we simply apply the same relative time function.

The link in the masjid display name can lead to the other view where grouping is done by masjid and there is a lot of space to list all details. Typically users who want to see this layout only need to know the upcoming times. If they don't know where the masjid is, they will click on its name and know it once and for all, they won't probably click again.

To answer your Jumua question, it can come in a new layout! Grouping is by masjid and tables are just listing of Jumas. In this view we have more space to show more details. If you think this is a duplication of the full layout or "Group by masjid", let's keep this Juma layout as brief as possible like the "Group by prayer", where links open the full layout.

What do you think?

[hammady]

Note that I omitted the "Subscribe" button intentionally from the table. We can either have it in the full layout only, or show it once at the top with some help text: Click to subscribe to email notifications on changes for the below iqama times. I also want the intro text to be visible at all times in all layouts.

[hammady]

With the new date fields "changed_on", colour coding can simply be:

• "today" gets font colour e.g. red or bold or both
• "yesterday" get lighter colour, or same colour as above but no bold
• Everything else has no special styles

[fayez-nazzal]

@hammady I'm there now, for changed_on I may use dayjs's weekday plugin

[fayez-nazzal]

@hammady what do you think?

[hammady]

Last updated repeated in all rows. Please omit. Remove "on" from changed on header. I suggest omitting the changed_on value if older than a week because it becomes useless. We can then just make today in red.

[fayez-nazzal]

@hammady Isn't last updated by masjid?

[fayez-nazzal]

@hammady I think I got what you mean

[hammady]

That's right. I only meant the phrase "last updated" appears in each row in addition to the column header.