Register | Login
Attackpoint - performance and training tools for orienteering athletes

Discussion: Sage Website Design Tweaks

in: dbakker; dbakker > 2018-11-18

Nov 19, 2018 5:52 AM # 
xc-racer2:
Nope, no names needed!

Had totally forgotten you'd asked me that, to be honest...

Would need to actually learn Ruby as that's what WJR is written in.
Advertisement  
Nov 19, 2018 6:01 AM # 
dbakker:
I was kind of guessing as much.

How much work would learning Ruby be? Is it a worthwhile investment of your time, or not? If it isn't, don't bother - it doesn't matter that much.
Nov 19, 2018 4:20 PM # 
xc-racer2:
Really, I'm not that concerned about the Ruby part - it's the setting up of the database that I'm slightly concerned about. If I can't set up a mock site on my own, the I can't work on the Ruby/UI part.
Nov 20, 2018 3:50 AM # 
xc-racer2:
Ok, it's definitely possible, I've got a prototype test club...


Now, to figure out how to make the user I created an administrator so I can create events...
Nov 20, 2018 6:36 PM # 
xc-racer2:
@dbakker

Alright, need a bit of a refresher on exactly how you wanted things laid out. How many upcoming/past events do you want; and which of the two should be grouped by series (ie both upcoming and past, just upcoming, or just past).

I have a test website setup that I can modify as needed to get something that looks good. Currently not online as I don't have the DNS setup yet (could add "68.66.205.83 tst.jonbakker.ca" to the Windows equivalent of /etc/hosts by following https://www.howtogeek.com/122404/how-to-block-webs...)
Nov 20, 2018 9:37 PM # 
dbakker:
Alrighty, so here is what I was thinking - others from Sage such as yourself who may read this log should also give suggestions though...

The next two upcoming events and the previous 1 event in each of the four different regions. Note that each of these has been defined by a different "series" in the WhyJustRun system. Ideally a system that allows the selection of which series to show in this menu would be ideal, but if not that's ok - it can simply display all active series definitions and I'll be more careful with the series that are defined.

I think that showing a list something like:
Salmon Arm
Some Intelligently worded upcoming event title like "Upcoming Local Events", but something better & shorter...
- Upcoming Event #1
- Upcoming Event #2
Some Intelligently worded previous event title like "Previous Local Event", but something better & shorter...
- Previous Event #

Kamloops
Some Intelligently worded upcoming event title like "Upcoming Local Events", but something better & shorter...
- Upcoming Event #1
- Upcoming Event #2
Some Intelligently worded previous event title like "Previous Local Event", but something better & shorter...
- Previous Event #1

Etc.

I'm open to other suggestions if other suggestions are more logical.

Using the same colours as defined in the series (also used in the Homepage left hand column at the moment) for the location title would be good too.

I believe the plan was to introduce a new "Page Layout" in addition to the "active club layout" and "Inactive Club Layout" options to integrate this page layout into the WhyJustRun interface.

One other change would be to limit the "Highlights" upcoming events list to show up to a max number of events (maybe 15 or so?), right now I think it displays all upcoming highlights events currently in the WhyJustRun calendar. PS: If you don't know, that list is populated using the event hierarchy, and the location pin of the club. If the event is listed as National - all Canadian Clubs get it, regional its within like 1000km radius of the event or something, etc.
Nov 20, 2018 10:01 PM # 
xc-racer2:
Ok, so two upcoming and one past.

Do you want them specifically organized by region/series or should they be intermingled, ie

Upcoming Events


Salmon Arm Events

  • Event 1
  • Event 2

Kamloops Events

  • Event 1
  • Event 2

... and the same for the Past Events?

Also, how to deal with events that aren't part of any series, ie Sage Stomp? All events don't necessarily have a series. If using the intermingled layout, they could go above all the series.

I think using active series is the best way to deal with this, otherwise you're duplicating functionality (ie when would you not want an active series to show up and vice versa). I'm trying to make this generic so it could be used by other clubs if they so desired.

I think adding a whole new layout would be overkill for these minor changes - a checkbox somewhere like "Group Upcoming/Past Events By Series" would be my preferred option.

I think limiting Highlights is out of scope of this project, but could be done with a one-liner change.

Edit: I've made the DNS changes so http://tst.jonbakker.ca and http://wjr-core.jonbakker.ca should now be live, depending on if your DNS server has picked up the changes or not.
Nov 20, 2018 10:33 PM # 
dbakker:
What do you think is better? I was thinking of putting the 1 previous event after the two upcoming events in the region, but not overly sure.

Events that aren't part of a Series, ie Sage Stomp I dunno what we want to do with that... - I have actually been assigning every event to a series of whatever city they are in. E.g. BCOC was assigned to the series "Revelstoke Events". I don't really use the series function the way it is supposed to be used, I use it as a region...

Implement it however you like with regards to the WJR system - you know it way better than me.

Yes it is showing up as live for me now.
Nov 21, 2018 2:51 AM # 
xc-racer2:
Done your way is what I currently have up on https://tst.jonbakker.ca

Note that I haven't figured out how to make only the non-series events show up in the section at the bottom.

I personally think the other way would look better.
Nov 21, 2018 11:05 PM # 
dbakker:
Yeah, I think you are right. I think we need like a (except event names in their respective colour too, only I didn't want to code all that).


Upcoming


Salmon Arm


Upcoming #1
Upcoming #2

Kamloops


Upcoming #1
Upcoming #2

Revelstoke


Upcoming #1
Upcoming #2

Okanagan


Upcoming #1
Upcoming #2


Past


Salmon Arm


Previous #1

Kamloops


Previous #1

Revelstoke


Previous #1

Okanagan


Previous #1

Highlights


Events as ordered by WhyJustRun database.




Honestly, I would like to not have the events not assigned a series not showing up anywhere but in highlights. All local events will be showing up in one of the other categories, major events will be assigned a local event series tag, and will also show up in the Highlights column.

The other option for the more major events is we could add a "Retional Series" category that would read how the event was classified (if Sage made the event, and it is classed as International, National, Regional, or Local) it would show up in this column. So all the larger weekend B meets and Sage Stomp, OART, LH Adventure Run, etc. would show up here as well in the local column.

So

Events


Upcoming


Regional Series


Upcoming Regional Series #1
Upcoming Regional Series #1




then as above, except with the regional series past event as well.




I dunno, I'm throwing out ideas instead of doing homework. Also, Attackpoint Seems to have really weird padding around the header html tags.
Nov 22, 2018 1:11 AM # 
xc-racer2:
Honestly, I would like to not have the events not assigned a series not showing up anywhere but in highlights. All local events will be showing up in one of the other categories, major events will be assigned a local event series tag, and will also show up in the Highlights column.

The other option for the more major events is we could add a "Retional Series" category that would read how the event was classified (if Sage made the event, and it is classed as International, National, Regional, or Local) it would show up in this column. So all the larger weekend B meets and Sage Stomp, OART, LH Adventure Run, etc. would show up here as well in the local column.


Edit: Ugh, how are you supposed to quote people? "quote" html doesn't work

Unfortunately, while this might work for our specific case, it isn't portable (ie usable for other clubs). Some clubs may have non-series local events which wouldn't show up in the Highlights section. Having events seeming to randomly not appear would be useful :)

Can you have a peak at the test site now and tell me what you think?
Nov 22, 2018 2:33 AM # 
dbakker:
I think we are almost at a good solution! The test site looks really good.

I think the series names (Salmon Arm, Kelowna, etc.) need to be slightly more visually striking - I'm not sure if a couple of font sizes up, underlines, something. Right now they appear smaller than the event titles, which I don't think is how we want it to be. I think the Align Left works well though. Did you try using the series name colour as the font colour for the series name? I dunno if this will work or not, but I wouldn't mind some confirmation to know if it looks really bad or something.

I know what you mean about usability for us, vs. everyone else. I agree - it makes sense.

I have a couple of other design tweaks that I would also like to see implemented in WhyJustRun if you have the time. Some should be pretty easy, others might be a pain in the butt.

Maps Page
https://sage.whyjustrun.ca/maps/
- Currently all the maps show up just as pins - any chance to do a graduated symbol map something like what you were starting to implement for Brian Ellis?
- All the maps also look the same right now (red pin). Having the pins appear different colours based on what their map type is (ISOM2000, ISSOM, ISOM2017, Other) would be beneficial in my opinion.
- I need a couple of more options for the Map Standard: ISSkiOM2014, ISSOM needs to be renamed to ISSOM2007 (new map standards coming soon, will need to differentiate their map standards). Should be a one line fix - Russel did the ISOM2000 and ISOM2017 fix for me.

Analytics
- Any easy(ish) way to get some sort of analytics on the WhyJustRun clubsites? I have no idea what our web traffic is - the only sense I have of any online Sage presence is the Facebook views and likes - which are manipulated by the mysterious Facebook algorithm.
- I think this would be super beneficial to a lot of WhyJustRun clubs as Orienteering starts to try doing some promotional things. Understanding page views etc. is really, really helpful and important.
- Google analytics springs to mind, but if there is something else easy to set up I would be totally down for that.

Resources
https://sage.whyjustrun.ca/pages/resources
A way of ordering the resources list on the resources page. Right now it is very simple - by order of date published. Something more customization so I can order them in some sort of priority list would be really nice.
Nov 22, 2018 7:49 PM # 
xc-racer2:
Did you try using the series name colour as the font colour for the series name? I dunno if this will work or not, but I wouldn't mind some confirmation to know if it looks really bad or something.

No, it doesn't look very good - it's just a block of color. By having the header a different color it stands out more. I've made it bold, let me know if it's better.

- Currently all the maps show up just as pins - any chance to do a graduated symbol map something like what you were starting to implement for Brian Ellis?
- All the maps also look the same right now (red pin). Having the pins appear different colours based on what their map type is (ISOM2000, ISSOM, ISOM2017, Other) would be beneficial in my opinion.

Aren't these ideas in conflict with each other? You can have a look at the OBC implementation at http://orienteeringbc.ca/maps/ Pin color based on map type is definitely possible.

Edit: No, I realized they aren't. One is Pin Color, the other is the pop-up. Will investigate.
Edit 2: Are you talking about the grouping or the map image? ie multiple within a certain area showing up together or showing more info when the map is pushed?

- I need a couple of more options for the Map Standard: ISSkiOM2014, ISSOM needs to be renamed to ISSOM2007 (new map standards coming soon, will need to differentiate their map standards). Should be a one line fix - Russell did the ISOM2000 and ISOM2017 fix for me.

Open an issue at https://github.com/WhyJustRun/Clubsite or email Russell - it's not a change to the code, merely another entry in the database. There's actually a UI if you head to the Admin page, but it requires to be a "Super-Admin" to do it.

Analytics

Again, contact Russell :) Google Analytics is already setup, you'd just need to get him to give you access. I don't recall specifics on how this is done.

Resources

I'll get back to you on this one. Would need a database update plus a UI for changing them...
Nov 23, 2018 2:19 AM # 
dbakker:
No, it doesn't look very good - it's just a block of color. By having the header a different color it stands out more. I've made it bold, let me know if it's better.


Yup I like the bold - that looks good.

Hmm just discovered the blockquote tag - that's new for me. Honestly, Attackpoint is where I've learned most of my html, and about half my css.

Map Page

Sorry, I should have made these two different points.
1. When you are zoomed out a long way, all the map pins clutter each other up, so a exactly solution like on the OrienteeringBC would be a big benefit as far as I am concerned.
2. When you are zoomed in such that the "clouds with numbers" disappear and the map pins are visisble, I think instead of having all the pins be all the same colour, having specified colours based on the map specification would be good.

Map standards - will do (eventually).

Analytics - will do (eventually).

Resources - Sounds good.
Nov 28, 2018 11:30 PM # 
dbakker:
I've found another couple of things that need tweaking if possible please.

1. The "Calendar" page should use the background colour of the defined event series, but only if it is on the club page of the club that is hosting it. e.g. everything that currently has a green background, needs to have the series defined colour.

2. When creating a "New Event" inactive series should be hidden from the dropdown menu of available "Event Series:.

3. Prior events of series or other should be hidden if they are older than 6 months old on the new Active Club Layout - Events by Series (we don't need to see last year's Sage Stomp featured on the main page forever...)
Nov 28, 2018 11:34 PM # 
dbakker:
Hmm, I'll go post about problem 1 on GitHub, just realized Russel already found problem #3.
Nov 29, 2018 3:15 AM # 
bmay:
You two are awesome!
Nov 29, 2018 5:48 PM # 
dbakker:
I think three or four months would probably be a good solution to #3.
Nov 30, 2018 6:23 AM # 
xc-racer2:
Alright, here goes
1. The "Calendar" page should use the background colour of the defined event series, but only if it is on the club page of the club that is hosting it. e.g. everything that currently has a green background, needs to have the series defined colour.

Doable, this is a change in the Core (app/models/event.rb). Unfortunately, I can't really do this as I'm having some issues with the creation of the events list on my test site. Is this really that important?
2. When creating a "New Event" inactive series should be hidden from the dropdown menu of available "Event Series:.

This becomes problematic when you're editing an event from a series that isn't current as it loses it's series. I'll need to look into this more and see if there's a way of doing it. Naive way of doing it at https://github.com/WhyJustRun/Clubsite/commit/7e8b...
3. Prior events of series or other should be hidden if they are older than 6 months old on the new Active Club Layout - Events by Series (we don't need to see last year's Sage Stomp featured on the main page forever...)

Easy, it's a 12-liner as seen at https://github.com/WhyJustRun/Clubsite/commit/5f9e...
Nov 30, 2018 2:12 PM # 
Canadian:
A suggestion for item 2. Rather than hiding inactive series I would just place them at the bottom of the list and put the text in grey instead of in black. This de-emphasises them greatly while still allowing you to select them (say you have an annual winter series you can consider it inactive in the summer) but can add an event in again the next winter and also should solve the issue that xc-racer2 brought up.
Nov 30, 2018 4:58 PM # 
dbakker:
Jeff's suggestion is really good.

I think consistent colour coding across the entire site is really beneficial. This calendar page is the only place where or isn't implemented, so I think it is beneficial.
Nov 30, 2018 5:45 PM # 
xc-racer2:
I'll see what I can do, no promises though. I do like Jeff's suggestion though.

For the Calendar, I need to figure out why it isn't working on my test site first, then I can work on adjusting colors.

Finally, I don't mind my real name being used (I'm Jonathan, David's older brother).
Dec 1, 2018 1:21 AM # 
Canadian:
Thanks guys!

I've done a bunch of playing with this kind of user interface over the last couple of years and that suggestion is something I've found works quite well.

And sounds good Jonathan (and hi by the way!)
Dec 4, 2018 6:40 AM # 
xc-racer2:
Well, changes to Series display, 3-month limit, and Calendar have been merged into WJR now.

Jeff, while your solution looked quite good and would have been ideal, there's not very good browser/OS support for it (unless you go to a custom jQuery re-implementation of the elements). Turns out since the OS does the rendering, not the browser, only Windows supports styling of options in a select, and even then only with certain browser versions (and not necessarily the newest versions!)
Dec 4, 2018 2:33 PM # 
Canadian:
Good point, whenever I have done that I've done it via jquery ui's autocomplete which makes it easy to do various custom styling things. I hadn't thought about the mechanics of it...

Please login to add a message.