sorry-app/theme-whitelabel

An easily brandable status page theme for use with Sorry™

theme-whitelabel's Issues

Add Lithuanian language support

A customer has kindly translated the page into Lithuanian for us. We need to drop these language files into the theme.

lt.json.txt

'Degraded' components using wrong colour.

Bug spotted yesterday whereby 'degraded' components on the old notice states are displaying as default text colour rather than inheriting the orange from the notice.

'Upcoming maintenance' ordering soon -> distant

#At the moment the 'upcoming maintenance' notices are displayed in the order in which they were created, a customer came up with the great suggestion that these would make more sense ordered by the time that they are due to occur, with the soonest at the top. i.e.

Starting in:

• 1 Hour
• 2 Days
• 3 Weeks

This should be a relatively simple change to put in place.

Add Portuguese (Brazilian) Translations

A customer was kind enough to send us Portuguese (Brazilian) Translations - which we'll want to add to the theme.

pt.json.txt

Add Portuguese language support

A customer has been kind enough to give us a pure Portuguese translation, which differs from the existing Brazilian Portuguese we have in place.

Add support for Microsoft Teams subscription

We're soon to launch Microsoft Teams subscriptions, which work in a similar manner to Slack. We need to add support for this to the theme, which primarily means adding some new content fo the button.

Components don't expand on Mobile Safari

Had a report from a customer this morning that they were unable to expand the nested components when browsing the status page on Mobile Safari, on iPhone.

I'm going to carry out some browser testing of my own, see if I can confirm the issue in that scenario or any other browser combination.

Typos in html comments

Have found a few typos below.

    <!-- Page title differs based on template. -->

        <!-- Statue page. -->
        <!-- Dynamicly set the title using the helper methoe. -->

Support larger logos

We often find ourselves uploading logos' which looks far too small and squashed at the current 32px height. I'ld like to propose that we raise this limit to allow for logos, perhaps around the 42px to 50px mark.

Improve ordering of past notices

At the moment notices from the past are ordered in descending order by the date that they were created on the system. However, this isn't particularly useful.

For instance, a planned notice which created a month ago, but happened today, is displayed lower in the list than all other incidents created in that timeframe.

We should look to sort the notice in the past timeline based on the time they ended, not the time they were created.

Have "duration" update using moment.js rather than relying on a cache refresh.

At the moment we output the "duration" of a notice next to the began_at timestamp.

For ongoing notices this duration is constantly moving forward, so needs to be rendered/updated via JS.

Add CloudFlare support to the error page

We've some customers trying to use the error page in CloudFlare, however, they're unable to do so as CF expect some special placeholders to be put in place.

https://support.cloudflare.com/hc/en-us/articles/200172706-How-do-I-customize-Cloudflare-error-pages

Given that our error pages are intended for 500x messages we'll need to find a way of including the ::CLOUDFLARE_ERROR_500S_BOX:: placeholder.

I'm guessing add it to the template footer, inside a hidden div so it's never actually rendered.

Fonts don't encode into Base64 very well (Cloudflare)

A customer has been in touch to say they're struggling to install the custom error page into Cloudflare because the 1.5Mb size limit is being breached.

Increase the font-size

At the moment it feels like the font-size for both the timeline and footer are all a little small, sat at 14px.

I think we need to review typography and look at bumping the base size to 16px. We could do this as a Bootstrap variable, or we could do it ourselves in the style.less

I'd also quite like to toy with 'responsive' type which scales in size along with the browser.

Display began_at/ended_at timestamps on notices

At the moment we use the update.created_at timestamp next to comments, to show when they were posted. However, we don't include the actual began_at/ended_at timestamps.

This is particularly noticeable when historic incidents are added to the page, as their true start/end time isn't displayed, only the time the notice was added to the page.

Last incident was 'x' days ago

We had a request from Ben at seats.io to look at adding a 'x days since last incident' type message somewhere on the page, perhaps near the 'all systems are go' notice.

This is something I've considered myself in the past, it harks back to the days where they would hand signs in factory doorways to show the number of days since the last accident.

It's also something the nice folks at Wildbit do on their status pages for Beanstalk and Postmark.

Add support for the new "Investigating" state.

We have a new investigating state being released into the app at some point in the coming days, and we need to update the theme to support this. We also have a new brand 'alert' colour available for the page, which we'll likely use for this state.

Fundamentally this should behave in the same way as 'ongoing', but with different wording/colour/ icon on the timeline.

Fix German language content

A custom has kindly given us some refreshed German translations for the theme. I've attached a copy of the JSON file, we need to put it in place and cut a new version.

de.json.txt

Add support for new 'subscribe' options.

We're soon to add subscription based notifications into the back-end of Sorry, and we need a method on the status page to tap into that and allow users to easily subscribe to notifications from the status page.

Add support for LTR text direction

We've had a request in recently to provide i11n support for Hebrew which reads from right to left. We need to consider making alignment of text and the timeline elements switch to the right hand side of the page.

Allow custom text in the navbar where it reads 'system status'

We've had this as a request from several customers over time. I think we should perhaps take a leaf out of Shopify's book and allow 'logo', 'logo and text' and 'text only' options for the navbar, and that this text content should also be configurable.

This would require some changes on the application side to present a new variable for this text, then the changes in the theme would be trivial.

Drop the "overview" heading on planned notices

All planned notices contain a little "overview" heading, doesn't appear on unplanned notices. There is quite a bit of logic to achieve this.

https://github.com/sorry-app/theme-whitelabel/blob/master/src/includes/notices/update-content.liquid

We could simplify things quite a bit by removing it.

Better support for long component descriptions.

After the recent early release of the components feature, we've had feedback from a customer or two about the way in which the theme currently truncates long descriptions.

We need to look at a way of exposing longer component names/descriptions without breaking the visual simplicity of the theme itself.

'Invalid Date' on mobile Safari & Firefox

A customer has shown us a bug which results in 'x minutes ago' messages appearing as 'invalid date' on some mobile browsers.

Support 'copyright' variable in Liquid

The application now providers a 'copyright' variable in the Liquid which includes the powered by text and link. We should switch the existing copyright notice in the theme over to this variable instead of hardcoding it.

New 'ongoing' term in Hebrew locale

Had a request in from Noga who has been helping place together the Hebrew translation.

Can you please change to word "״מתמשך to "בתהליך"?

This simply needs updating in the Locale file.

Build errors - missing LESS files.

When doing a fresh build of the theme this morning I found myself getting LESS errors about missing files. This was from the RTL library which expected Bootstrap Mixins to be in their own folder, which they aren't on the current build of Bootstrap we use.

For some reason this error wasn't being thrown for me, however upon a new npm install the later LESS libs get upset by it.

We need to bump the build of Bootstrap we use to 3.5, and then also make some minor amendments to the RTL library to reference the Bootstrap mix-ins in the right place.

Subscribe button drops down a line on mobile

Recent changes to the logo/pagename have resulted in there not being enough room in the navbar on mobile which then forces the subscribe button onto the lower line.

We need to fix the styling on this, probably hiding the page title on mobile devices so it's just the logo and the button.

Move rendering of planned notice schedule out of the "update" partial.

At the moment the "schedule overview" for planned notices is rendered along with the first update, rather than as part of the parent notice.

This adds some logic which is unnecessarily complex, so would perhaps be better rendered at a notice level.

Add support for the new "drill" state

We'll soon be releasing a "drill" state for unplanned notices, which is similar to "false_alarm" but intended for use on test/example notices.

Stop using partials/includes for things which are not reusable.

When looking at #105 we found it hard to find the places where we'll need to modify the code as it's often using includes/partials, creating a bit of a rabbit hole.

Often these includes are not even reusable, only referenced once, and have been used purely to simplify individual templates.

However, this seems to add confusion rather than remove it.

Support multiple subscription options

We're soon to be launching additional subscription options. At the moment the theme only support a single 'slack' subscription option.

We want a new logic setup which can support any number of subscription options, perhaps through a dropdown style button, and then defaults back to the 'subscribe via x' single option for pages which don't have multiple subscription options configured.

Hebrew pages sometimes loading as blank page.

On occasion in Chrome we find that Hebrew pages loads as a blank-white screen until scrolled.

I have tried disabling Chrome's auto-translate feature, and also paused AdBlocker just in case either of those were causing the issue however the problem appears to still be there.

Googling around has shown various bugs in previous builds of Chrome with similar effects so it may not be something specific to the theme which is causing the problem.

I'd like to try adding an explicite lang to the page, to see if that helps.

OpenSans Hebrew doesn't load in some IEs

We've got an issue where the OpenSans font doesn't properly load in Windows 7 for some reason. There are lots of people reporting the same issue on the Google Font discussion boards.

https://groups.google.com/forum/?fromgroups=#!searchin/early-access-fonts/hebrew/early-access-fonts/j4gtDwc4HlU/dzLPeryu5tEJ

I've +1ed this myself to try and get things revised, but the issue has been outstanding for a long while so I'm not going to hold my breath.

We may need to look at an alternative font to use instead of OpenSans.

Use of target="_blank" is considered insecure

During a security audit carried out yesterday, it was highlighted that using taget="_blank" on links is a security issue, as the opened tav has access to the originating page.

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

We should remove as many taget="_blank" links as possible, or add the rel="noopener noreferrer" attribute to keep them secure.

Support multi-paragraph updates

At the moment when multi-paragaph updates are posted to the page they are condensed into one single large paragraph.

We need to somehow format this properly, replacing invisible line breaks with BR tags or wrapping them in P tags.

Restructure the "timeliness" section to include began, ended and duration, like publishing UI from app.

The "timeliness" subheading for notices isn't very clear at the moment and lacks the try began/ended timestamps for the notice.

We're going to move to something closer to that of the recently redesign publishing redesign.

This lists the true start, end and duration of each notice, regardless of its type.

Add terms/privacy links to the page footer

We recently launched a new feature on the app which allows the addition of terms and privacy links to the subscriber wizard.

We want to pull these links onto the status page as well, likely in the footer down near the powered-by statement, subtle but accessible.

Planned notices displaying "Invalid Date"

We've had reports from a customer that planned notices when viewing on mobile display "Invalid Date" instead of the timeliness statement.

i.e. "Expected to begin in Invalid date"

This duration is usually generated by moment.js so the problem almost certainly lay there. Need to investigate and reproduce in a given browser and/or locale+timezone as these are all likely areas of issue.

Add the Norwegian language

One of our lovely customers has provided a Norwegian translation of the status page. We want to wrap this up into the theme and cut a new version to release.

no.txt

Include "timeliness" on present notices.

At the moment we only include the "timeliness" partial on notices in future and past, it is excluded from present notices.

Striving for consistency we should include it in both.

Make open notice 'pop' a little more

We've been discussion the page design a little today and how the open notices don't really present themselves in a way which shouts 'look at me' or really starts the alarm bells ringing for the audience.

We should play with the design of open notices a little, and see if we can present something which works better.

Switch from tabs to spaces

Most templates are using spaces, but I notice a few are still sat on tabs, so let's convert them before we do any more heavy lifting.

Add support for new notice states

Following on from #57 we're now planning a bunch of additional states on unplanned notices, which will replace the existing open/closed. These old states will be sunset at some point in the future in favour of the new states.

The planned new states are:

• Investigating
• Identified (Replaces Open)
• Recovering
• Resolved (Replacing Closed)
• False Alarm

We need to add support for the new states to the theme, including content, colours and icons.

Remove auto-refresh meta tag

The page currently had a meta-refresh tag, which refreshes the page every X seconds. This, however, is causing problems when looking to add chat widgets, such as Intercom/Zendesk/Zopim.

We should remove the meta tag, and add a help doc with some suggestions of browser extensions which can be used instead if people want that function.

Russian Translation

We've been asked by a customer to add support for Russian to the status page, and they've been kind enough to supply the translations for us. Here is the JSON file which needs adding to theme, and we'll need to bundle a new version.

ru.json.txt

Planned notices display start time in 24 hour format

Elsewhere within the experience through UI, Emails, Tweets and Slack messages the datetime for the planned notices is displayed in 12 hour AM/PM format, but on the status page uses the 24 hour format.

We should change this to 12 hour format to keep it consistent with the rest of the experience.

Support url missing target blank property

Pulling this issue from @tvb across from the status-bar project as it probably belongs here.

This has nothing to do with the status-bar really but I wanted to post this anyway:

I have the following code on my maintenance page, however the support link does not have a target="_blank" property so my browser is blocking it for not allowing it to load insecure content. (I know it should be behind https but the service does not provide this option yet)

Could you guys add a target blank to these links? Thanks!

Began/Ended timstamps are missing the timezone

The began/ended timestamps we added recently to the timeline us a short datetime format, which doesn't include the timezone. This is a little confusing for readers.

Switch timeline shader pixel for shadow

At the moment we use a 1px shader background image to darken the colour of the timeline against the background.

While this works nicely for lighter backgrounds it does become an issue on dark background where in fact we want to lighten the timeline slightly, not darken it.

I'd like to switch the shader pixel for a CSS shadow/gradient effect which applies a solid colour tint to the timeline, based on the text colour.

This way if the background is dark, and the text is white, a slight white shade will be applied, thus lightening the timeline.