Dev Notes

This is just a page to record all the design and development notes. We can add notes about pages and functionality and whatnot, and then as they get completed, we can just I dunno, strikethrough the text…add a ‘completed’ note…something like that to show it is done.

LAGTS
Image is not available
Image is not available

Check out the latest SARCAN blockbusters and see how recycling at SARCAN saves the day!

ProTips2
Image is not available
Want to make the best SARCAN Trips?
Then you should check out our SARCAN Pro Tips! Quick little videos that will help you become a Pro Recycler!
previous arrow
next arrow

Also, these aren’t all like “Can you do this for us?”, some will just be notes of things that I think of that need to get did. Once I finish getting words on pages I will take a crack at anything I think that I could complete!

I’ll organize by date added (most recent first), then page [link], then notes.

April 17th!

Hey Sherry! Woof! Finally back in the Dev notes!

I’m gonna leave all that down there ? labeled as OLD for posterity sake, but we can start fresh with our notes and final things that need to get did before launch!

Freshly Squeezed Notes:

May 5 –

May 3 –

  • I can’t seem to figure out the sizing for the laptop battery pic hahaha it looks very small compared to the other ones. I tried cropping the image so there wasn’t any dead space around it, but then it just clips the top on the actual page. Could you help out with that? – Sherry: Should be fixed now.
  • The Hours & Locations heading is full width. I noticed there is a ‘wide’ class on it, but am assuming that is for the map? Could we get the heading to match up with the rest – Sherry: Fixed
  • Would it be possible to put a search bar in the top yellow banner? Even just a search icon? – Sherry: A search functionality would be extensive to add unless you have a plugin in mind that you want to implement. WordPress default search block does not seem to search through pages and only posts so it doesn’t really work for this website.
  • Ugh, I think this one is super easy, but I can’t seem to figure out how to exactly and when I tried, holy smokes I trashed the whole menu hahaha (didn’t save it so we should still be good) – Sherry: Done
    • On the mobile menu, can we change Account to ‘My Drop & Go Account’ and have it open to https://www.mydropandgo.ca?
    • Then we can move that to above SARC on the menu
  • There is a bit of clipping on the Hours & Locations page when you use the ‘closest depot finder’ (either top bar, or widget on home page) link to go to the page:
  • Works fine on desktop, but on mobile, maybe we could make the depot list section bigger, or maybe just have it align at the top so they can see the depot name? – Sherry: I made it bigger, should be fixed now

April 17th:

  • Bah! I forgot that we had to add a placeholder ‘Content Toggle Block’ to the parent pages to get them to work on the sub-pages, and I deleted the one on the ‘Our Story’ page so the Truth and Reconciliation toggle block was broken.
    • I got the placeholder back in there on ‘Our Story’, and the T&R block works now, but I am not sure how to ‘hide’ the placeholder one. Would you be able to take a look at that for me?

OLD

Jan 4

  • Current Opportunity pages
    • Not sure if this is possible, but would we be able to add the ‘small’ class to the job postings pages? Not a huge deal if not, but the text is pretty wide and these pages just use the classic editor, so there are not a whole lot of options for layout and what not.
  • Are we able to use the ‘small’ class on parent pages (What to recycle, where to recycle, etc.)?
  • Meh…it’s not the 4th anymore, but I don’t feel like making a new heading…carrying on!
  • Is there a way to set separate sizes for images on mobile/desktop? I’ve added in some images and whatnot to the Drop & Go Returns and Over-the-Counter Returns pages, and on desktop I really like it (there are some padding and space issues, but the overall vibe of it I’m into), but on mobile screen size, the images are huge hahaha. Is there a custom CSS class I could add to handle this?
  • Also, I just realized that on my actual mobile device, the menu doesn’t really work. The main headings are there, but the links don’t work and/or take you to the wrong pages?

Dec 16

  • Make a suggestion/Contact Us
    • We will need a form on the “Make a suggestion page”. Very simple Name, Email, Suggestion form here with a submit button. Similar to Depot High-fives, but instead of approving for display, we could just mark read to show one of us has seen it
      • Sherry: Completed – The form will make a Suggestion post (Draft) and then when someone has read it just switch the Visibility to Private and click Publish. So unread suggestions are “drafts” and read suggestions are “private”.
      • Love it! This works great!
    • Under the button on the form, we should put a little “By clicking submit you agree to SARCAN’s privacy policy” with a link to it.
    • While we are on the topic of Forms, there is a contact us form (right now there is a placeholder form but will be essentially the same thing, I just don’t have access to that form and its embed code)
      • This is a Microsoft Form, and has been in use for us for a while now and has all sorts of automation attached to it that we would like to keep. I know it isn’t really great from a design perspective to have differently designed forms on the site, but I don’t think there is really a great way to connect a WP Form to an MS Form without quite a bit of work with lots of moving parts.
      • I am fine with using these MS Forms for the time being until we can figure out the elegant solution to it, but if you have any ideas we would love to hear them!
        • Sherry: I can’t think of any easy way to port the form over. It will likely include recreating the automations and such and depending on what type of automation you have it could be a bit of work.
        • No worries at all. I recreated our MS Form using the ACF plugin and have it set to email us with all the field data. From there, we can set up some automation with the data on our end.
        • I’m not sure I did everything correctly as this was my first dive into using the custom fields hahaha but everything works with it and it looks great on the site, so I guess its set up right?
  • Feedback
    • I tried to use the shortcode for displaying the high-fives – ttl_get_high_fives (I didn’t include the brackets here since it threw the same error when I tried updating here too!)- but I couldn’t update as it said the ‘Response was not valid JSON’. I was just looking to toss a high-five or two on there to match the google reviews
      • Sherry: Completed – I have made a different short code for the High Five in the Feedback section. I have it just displaying the most recent High Five right now because it might be weird for the Google Reviews to be scrolling while the High Fives are pages. Let me know if you rather show more High Fives with pages.
      • Great call! That would be a bit weird and I think your set up looks great!
  • Pages & Menus
    • I moved some pages around cause I am not exactly sure what we were going for originally, but I think this new setup makes more sense
      • I hope that I moved things around and changed things up properly and didn’t accidentally break any page links or orders or anything!

Dec 6th-8th

Sorry, I haven’t been in more contact with you! I have been shutting down my email so I can focus on getting all the content on here, so I haven’t been emailing these notes over!

  • I am pretty sure Scott showed me how to do this, but I can’t really remember: Is there a way for us to change the order of some of the child pages? Specifically, I was going to move the ‘Video Tour’ C-Page to above ‘How SARCAN Recycling Works’ on SARCAN 101 (formerly ‘Why to Recycle’)
    • Sherry: Completed – It should be working now to change it based on the Order number for the page
    • Wonderful!
  • Another question I had was: Is there an easy way to specify the order of stacked items on mobile? I like the style of having a sort of column and row set up with the text and images alternating sides on different rows, similar to the layout of the Recycle Like a Pro page on our current site. On mobile and smaller devices, the layout switches to show the img/vid above their description
    • Typically I would just do this with flexbox and media inquiries. Is this something we can do easily ourselves or would this need to be set up by you guys?
    • Or I suppose another way to ask it is, are we able to set different layouts for pages based on screen size?
    • Nevermind! The Media & Text block does this wonderfully!
  • I can’t seem to get the video on the Video Tour page to center. It is a YouTube embed, so not sure if I need to add another additional class?
    • Sherry: Completed – I’ve had this issue with WordPress before, and I’ve added some CSS to fix this, so it should center now based on the fact that you chose “align center” in the editor
    • Oh, silly WordPress! That is perfect thanks!
  • I tried out the background image function, and it works really well, except it is still showing on mobile, which I think we would want to drop the bg-img at anything less than a standard tablet size? Like 1024 maybe?
    • also, could we make it so that it is set to cover/auto so it is always centered? I tested it with a 1920 wide image, and it fits nicely, but when scaling the screen down, it seems like it might be aligned left.
      • Sherry: I’ve added these changes you mentioned but I don’t have a reference on where these backgrounds are so I can’t really check if the changes fixed your issue, please let me know if there are still issues.
      • Sweet! I will try it out and let you know! After I showed a few people the layout of the site, most people really like how clean it is so not sure if we will end up using any bg img, but it is awesome to have the option!
  • On the Careers page, we will need a way to post job postings. I have added a plugin – WP Job Manager – but if you know of a better way, great! We don’t need anything fancy, just a way to post them and display them on the page with a simple mailto button that triggers an email to the manager email that we input.
    • Ideally for these, we would just need
      • Job title
      • Job location
      • Job type (permanent, full-time, part-time, casual)
      • Job description
      • Manager email (where applications will go)
    • Then for display
      • we can do a quick view (like the one already on the page) with the Job title, location, and type.
      • We could prolly do just the like high-five display where clicking on it will open a pop-up modal with the full job description and the apply button.
      • Probably for these, we will want to display all of them on the page (I think we would rarely have more than say 10 at a time (and even that is a stretch) so I think it would be fine for them to all be displayed.
    • Sherry: It seems like your WP Job Manager plugin should work fine for the general list of jobs on the Careers page and then you just need to add the full job description, email button, etc. on the page it goes to (instead of opening in a modal).
    • That sounds great, my only problem was that the page that it goes to for the full details has a ‘Back to Blog’ link at the top that a) doesn’t work at all hahaha it just links to the full details page you are already on. b) I can’t seem to find a setting to remove that link and it doesn’t appear when in edit mode on the page. Any suggestions you can think of to get rid of that?
      • Sherry: The link is coded in so I’ve fixed the link to say “Back to Current Opportunities” and it goes back to the job listings. Let me know if you would rather get rid of the link though (it’s very easy to do!).
  • I spent quite a bit of time putting together the FAQ page with the Drop & Go FAQ and like a dingus, I didn’t like, you know, check if it was working until I finished inputting all of them. ‘Twas then that I realized I was using the content toggle block that works to edit, but looks like straight hot garbage on the actual page!
    • There is prolly a better way to do these, but since I put all the words in there already, are you guys able to make that work and look better? Or should I just start over with a different method/plugin?
      • Sherry: So the issue here is because the pages are made from subpages, for some reason the plugin doesn’t know that the subpages are using these content toggle block. The way to fix this is to put a dummy content block from the plugin in the parent page. Which if you look at the Support page you will see a content expand block there. Unfortunately, I will have to do the styling that you want manually so you won’t be able to change it via the editor/plugin. I have styled it according to what you have in the editor, let me know if you want any colour changes.
      • Oh my goodness, thank you so much! I think the colours look great and it works really well, the only thing I wouldn’t mind doing is just increasing the font a couple points. I think I am using the medium font size (I think 20 px) pretty much everywhere else, so we could go with that and see how it looks.
        • Sherry: Updated font size to 20px
  • Another function we will need will be the Impact Calculator. This is a very simple calculator that the user can input the total number of containers they recycled at SARCAN and it shows them how much Greenhouse Gases they’ve saved from being emitted, kilowatt Hours they’ve saved, BTUs of energy they’ve saved, and how much landfill space they’ve saved. Conversion rates are:
    • Greenhouse Gases = [number of containers]*0.000801
    • kWh = [number of containers]*0.33309470330947
    • BTUs = [number of containers]*0.00185
    • Landfill space = [number of containers]*0.0888
      • Sherry: Unfortunately we are reaching the end of the budget for development so there isn’t the time to implement the Impact Calculator. However, I did quickly look around and it seems like you might be able to create a custom calculator using the “Calculated Fields Form” plugin.
      • Oh no! The dreaded end of budget! I knew this day would come! hahaha, it’s all good. I can see what I can put together and we can maybe leave the last of the budget for final touches and the more important pieces. Not that the calc isn’t important, but its not really going to devalue the site not having it on there. Thank you for the suggestion, tho!
      • I’ll play around with it and see if I can make something work for this!
  • Okie dokie, I just emailed you to let you know about these notes above. I’ll start adding any new ones below!

Dec. 9th

November 24th

  • We’d like all of these sections to have the same format:
    • description
    • How it works
    • How to prepare
      • For How it works and how to prepare, I think this would work well to have it set up as a side-scrolling carousel style block with each ‘step’ as a card with image and text, swipe/click next
    • Sherry: I’ve added a Smart Slider plugin that seems to have a lot of functionality and options. I’ve tried it out, as seen in the “Over the Counter” section. Feel free to let me know if you have any questions about it.
      • I love how this works and I think this will be a staple on the site. It works REALLY good on mobile while keeping the page length down, and I think the info is just more palatable in this format. Great work!

November 15th

General Activity:

I know there is the Simple History plugin in the Dashboard, but this might have some more context. And honestly, it is for my own horrible memory problems so when I think of something and then am like “I swear I did this already…” I can just refer back to these.

  • Deleted the page “Preparing Your Recycling” as this is going to be covered in each ‘How to’ section.
  • Depot Closures
    • We’d like to be able to differentiate full depot closures (no services available at all) and Drop & Go Closures (over-the-counter and bulk still accepted, but DNG is closed)
      • Would you like them to be displayed as two sections: Depot Closures section and a Drop & Go Closure section?
        • Good question: I think just one section. Maybe we could rename the section to just ‘Closures’ and list them together. If it is a Depot Closure, it would show ‘Redvers – Depot’ and if it was a Drop & Go closure, it would show ‘Redvers – Drop & Go’, and then the context would be in our message text.
        • Sherry: Completed – there is a new drop down to select the closure type and that will reflect on the page
          • Looks and works great!
          • Sherry: Added the option to mark a closure with undetermined reopen date
  • Depot location cards
    • Let’s move the hours to the top so it goes hours –> address –> phone number –> the rest
    • Can we add 2 depot attributes – operated by and Treaty # – and show them on an additional line on the bottom of the card as well? Operated by [value:SARCAN/agencyName] on Treaty [value:treatyNumber] land.
      • Sherry: Completed – hours moved and added two attributes to the depots, both attributes are required for the text to show up in the card
      • Nolan: Wonderful! Works great!
  • Just a standard form for people to write us nice things.
  • We should have to accept or reject these before they are made public.
  • Form fields:
    • Name (req.)
    • email (req.)
    • phone (opt.)
    • Depot location (drop-down, req.)
    • Story (long text, maybe max 3K characters)
    • Can we share this story on our social media and in our depots? (checkbox, req.)
    • Have read and agree to SARCAN’s Privacy Policy (checkbox, link to policy, req.)
    • Captcha of some sort
    • High Five us! (submit, button, req.)
      • Sherry: Completed – There is a new High Five post type. You will see that in the sidebar in the WordPress Dashboard. Within there you can see all the submitted High Fives (drafts and published). To approve a High Five, publish the post, otherwise you can delete or leave it in draft. There is no Captcha as the form should have built in spam filter and I do not have a link to the Privacy Policy.
        • This form looks great! Thanks!
        • Sounds great about Captcha (I hate debating with myself over what constitutes ‘traffic lights’ hahaha!)
        • I filled out the Privacy Policy page so we can just link to that –> Privacy Policy
          • Sherry: Completed – Added Privacy Policy
  • Display:
    • [Name] gave our [depot location] team a High-Five! They said:
    • Short view (first 200 characters of Story)
    • Read more button/link (show full Story)
      • Sherry: Where do you want these High Fives to be displayed?
        • Can we have two columns: Left being recent high fives (or maybe paginated list of all?), right being the form?
          • on mobile, we could stack the recent high-fives on top of the form.
        • I guess the question would be where does the read more button take them?
          • Maybe these have their own page?
          • Pop-up window with the full story? I feel like this would be good since it doesn’t take them away from the main page they are on, but we would have to show all high fives (pagination seems like a fit here)
      • Sherry: Completed – I put the High Fives under the form as per the design and also I think it fits better than squishing both the form and High Fives beside each other. But if you really want the look of the High Fives and the form side to side, let me know and I can change it. If a High Five is too long, it will have a Read More link that will open up a pop-up modal with the full High Five.
        • Nope, you are 100% right in it being under the form! Looks great and the pop up for read more is wonderful! I can already envision using the pop-up modal for more information in a few spots. For example, how our current site’s Drop & Go info page is set up. There is a lot of information to give people about how things work, so I like the style of the teaser to give them a bit of info, and then the rest being at their fingertips, but not taking up a tonne of space on the page.
          • Is this a specific block or something we can add ourselves?
        • The only catch with this layout is that when you click on next or one of the page numbers, it reloads the whole page and takes you back to the top.
          • Sherry: I anchored the link so now when you click onto the next page it goes down to the bottom.
  • I put a little ‘Pro Tip’ text in this section, but I am curious: Is there a way to display the ‘Popular Times’ data from our googListings on the locations page?
    • the only thing I could find that seemed to be what I am thinking of was from like 5 years ago and is a 3rd party API: https://github.com/m-wrzr/populartimes
      • Sherry: There doesn’t seem to be any support to grab this data from Google so we may not have the budget left to find a solution for this. We can circle back on this after everything else is completed.
        • That is kind of what I was thinking. Its all good! Thanks for looking into that for us!

DRAFT - Sandbox page

Testing out MS Form integration

Woof. So Embedding this form destroys the rest of the page. instead…How bout just a button that opens the MS Form in a new window?