Support site navigation bar #259

Chng-Zhi-Xuan · 2018-06-07T02:21:27Z

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Documentation update
• [X] New feature

Resolves #220

What is the rationale for this request?
User would like a responsive site navigation bar to navigate site pages.

What changes did you make? (Give an overview)

Section	Changes
Site.js	Generate `site-nav.md` file during `init`
Page.js	Insert site navigation bar when detecting `siteNav` attribute in a page's front matter. Formatting the markdown list to support dropdown menus after being rendered by `mb.render(...)`
site-nav.css	Add css to support `nested dropdown menus`, `site navigation styling`, `morphing menu and close button` and `responsive site navigation media queries`
site-nav.js	Add event listener to all `dropdown-btn` to toggle next element (`dropdown-container`), function for `site-nav-btn` to toggle `.open` class for itself and all site-nav components
Documents	Update user guide to include site navigation, under the section of front matter. Shifted bottom section footer to site navigation bar.

Demo-V2

References	Source
Menu Button	How To Create a Menu Icon
Dropdown Menu	How to Create a Side Navigation Dropdown
Responsiveness	How to Create a Responsive Navbar with Dropdown
Transitions	Using CSS Transitions on Auto Dimensions
Holy grail layout	Holy Grail Layout - Solved by Flexbox

Is there anything you'd like reviewers to focus on?

Page.js: insertSiteNav and formatSiteNav coding style
Site.js: default values for site-nav.md
site-nav.js function location and code style
site-nav.css, layout and comments
User guide wording

Testing instructions:

Create a new folder and run markbind init and markbind serve. The default page contents and a site navigation bar should be loaded.
Modify contents in _markbind/navigation/site-nav.md and reload server to see if changes are applied.
Resize window to see if responsive properties of site navigation holds.
Create another page (without specifying siteNav) in a folder (multiple nesting) and link it within the navigation file. The navigation bar should go to that page without any navigation bar rendered.

yamgent

Good start in getting the site navigation to work. Some comments.

yamgent · 2018-06-07T03:04:18Z

lib/Site.js

  + '</frontmatter>\n\n'
  + '# Hello world\n'
  + 'Welcome to your page generated with MarkBind.\n';

+const SITE_NAV_DEFAULT = '<markdown>\n'
+  + '- [Home {{glyphicon_home}}](/index.html)\n'
+  + '- Dropdown title :pencil2:\n'


Maybe the list should only just show Home and nothing else? Won't make sense to list other "pages" when there is only index.html.

yamgent · 2018-06-07T03:05:41Z

lib/Page.js

@@ -9,15 +9,27 @@ const Promise = require('bluebird');

 const FsUtil = require('./util/fsUtil');
 const logger = require('./util/logger');
+const md = require('./markbind/lib/markdown-it');


Should be below MarkBind to follow alphabetical order.

yamgent · 2018-06-07T03:20:59Z

lib/Page.js

+  if (listItems.length === 0) {
+    return renderedSiteNav;
+  }
+  // Inline style


// Tidy up the style of the list item

Reason: Comments should specify what the change is about, rather than how the change is done (in-lining the style)

yamgent · 2018-06-07T03:26:52Z

lib/Page.js

+    if ($(this).children().first().is('ul')) { // Found nested list
+      const nestedList = $(this).children().first();
+      const dropdownTitle = $(this).contents().first().text();
+      $(this).contents().first().remove(); // Remove nested list title


// Replace the title with the dropdown wrapper

And avoid same-line comments.

yamgent · 2018-06-07T03:49:19Z

lib/Page.js

+  siteNavDataSelector('markdown').replaceWith(formattedSiteNav);
+
+  const wrappedSiteNav = `<div id="${SITE_NAV_ID}">\n${siteNavDataSelector.html()}\n</div>`;
+  const wrappedPageData = `<div id="${PAGE_CONTENT_ID}">\n${pageData}\n</div>`;


As discussed, maybe this portion can be simplified by declaring the divs inside page.ejs instead of having to figure out how to insert them manually. That way the code will be slightly simpler too.

Possible example of how this could be done:

<% if (siteNav) %><div id="nav"><%- siteNavContent %></div><% } %> <%- content %>

yamgent · 2018-06-07T03:52:29Z

asset/css/markbind.css

+    border-right: 1px solid lightgrey;
+    display: inline-block;
+    max-height: 80vh;
+    font-size: 14pt;


Watch out for alphabetical order (some of the other ones below also have this issue).

This is a huge section of styles. Is this from a source? Consider a separate stylesheet.

yamgent · 2018-06-07T03:56:19Z

docs/userGuide/contentAuthoring.md

+      </li>
+    </ul>
+
+The site navigation bar has [responsive properties](https://www.w3schools.com/html/html_responsive.asp), and will collapse to a menu button when the screen width is smaller than 767 pixels.


Should be smaller than 768 pixels (the hiding triggers when it is 767 pixels).

yamgent · 2018-06-07T04:04:18Z

asset/js/setup.js

+                               const dropdownContent = this.nextElementSibling;
+                               if (dropdownContent.style.maxHeight === '0px'
+                                 || !dropdownContent.style.maxHeight) {
+                                 dropdownContent.style.transition = 'max-height 0.25s ease-in';


As discussed, these can actually be put inside the .css file instead of using inline styles. Then you just need to modify the sibling's class instead of the sibling's inline style.

yamgent · 2018-06-07T04:06:56Z

docs/userGuide/userQuickStart.md

@@ -132,3 +133,5 @@ By default, it will try to push everything in the generated site (default dir: `
 More details of deployment setting could be found in [here](ghpagesDeployment.html).

 </div>
+
+<include src="../_markbind/footers/userGuideSections.md" />


Shouldn't have this line since the footer is already specified in the frontmatter. Anyway we are getting rid of userGuideSections.md right?

Leftovers from rebasing master

damithc · 2018-06-07T04:52:44Z

docs/_markbind/navigation/userGuideSections.md

+- Deploying a Site
+  - <a href="{{baseUrl}}/userGuide/ghpagesDeployment.html">Github Pages Deployment</a>
+  - <a href="{{baseUrl}}/userGuide/netlifyPreview.html">Preview site on Netlify</a>
+</markdown>


Quick question: why are we not using markdown syntax for links here? Also, let's use * item syntax for lists, to be consistent with other places.

Not sure, I tested it using markdown syntax works fine. Will change it.

Also, let's use * item syntax for lists, to be consistent with other places.

👍

damithc · 2018-06-07T04:54:57Z

docs/userGuide/contentAuthoring.md

+  - Nested Dropdown title :triangular_ruler:
+    - Nested Dropdown item one
+    - Nested Dropdown item two
+  - Dropdown item two


Why do we have items without links here?

It serves as a working example of how the page navigation is rendered. Much like how the default content for footers have This is a dynamic height footer ..... for the Author to edit out after seeing how it is rendered.

Might rename the list items to be [DEMO] Dropdown title / item

hmm... it is a bit misleading to give examples like this one as this one will not work as expected (due to missing links).

yamgent · 2018-06-07T07:13:19Z

docs/_markbind/navigation/userGuideSections.md

+- <a href="{{baseUrl}}/userGuide/developingASite.html">Developing a Site</a>
+  - <a href="{{baseUrl}}/userGuide/siteConfiguration.html">Site Configuration</a>
+- <a href="{{baseUrl}}/userGuide/contentAuthoring.html">Content Authoring</a>
+  - <a href="{{baseUrl}}/userGuide/includingContents.html">Including Contents</a>


A new page "Known Problems" have been added in a recent PR, do add that in as well.

damithc · 2018-06-07T08:34:25Z

A side nav bar that has a grey theme https://www.berriart.com/sidr
but the one used in CS2030 seems clean and is likely to be more suitable as a default https://nus-cs2030.github.io/1718-s2/index.html

acjh · 2018-06-07T15:26:35Z

docs/userGuide/contentAuthoring.md

+    - More than one navigation file can be created for different pages.
+
+- Author your navigation layout using Markdown's unordered list syntax as shown below.
+    - When you are using links (`[linkName](url)`), ensure that the url starts from the root directory `/` when you are referencing a page in your site. e.g. `/folder1/myPage.html`


Are you sure this works on GitHub pages? Should it not be {{baseUrl}}/folder1/myPage.html?

acjh · 2018-06-07T15:29:24Z

docs/userGuide/contentAuthoring.md

+          <ul style="list-style-type: none; margin-left:-1em">
+            <li>Dropdown item one</li>
+            <li><button class="dropdown-btn">Nested Dropdown title 📐
+</button>


What went on here? (Even if this is really the case, we can put this on the previous line.)

It is the raw HTML generated and copy pasted. Will format it nicely inside docs.

acjh · 2018-06-07T15:30:27Z

docs/userGuide/contentAuthoring.md

+It has a fixed width of 300 pixels for its contents. 
+If you would like a site navigation bar for your site, you may create one easily using Markdown.
+
+- Start by creating a markdown file (`.md`) in `_markbind/navigation`.


Gotta be consistent with Markdown (preferred) vs markdown.

acjh · 2018-06-07T15:31:46Z

docs/userGuide/contentAuthoring.md

+
+Note:
+- Only one navigation file can be specified in a page, and you must include its file extension.
+- There is no limit to the number of nested Dropdown menus but each menu's height is restricted to 1000 pixels.


Comma before "but".

acjh · 2018-06-07T15:39:11Z

lib/Page.js

+  + '<div class="menu-top-bar"></div>\n'
+  + '<div class="menu-middle-bar"></div>\n'
+  + '<div class="menu-bottom-bar"></div>\n'
+  + '</div>\n</div>';


acjh · 2018-06-07T15:54:25Z

test/test_site/expected/markbind/js/setup.js

-        window.location = `${baseUrl}/${match.src.replace('.md', '.html')}`;
+        const page = `${baseUrl}/${match.src.replace('.md', '.html')}`;
+        const anchor = match.heading ? `#${match.heading.id}` : '';
+        window.location = `${page}${anchor}`;


These changes should disappear with a rebase.

Did you miss this?

acjh · 2018-06-07T16:03:01Z

asset/js/setup.js

+  siteNavBtn.classList.toggle('morph');
+  document.getElementById('site-nav').classList.toggle('open');
+  document.getElementById('site-nav-btn-wrap').classList.toggle('open');
+}


Shall we reserve setup.js for Vue?

Excessive space in * site-nav-btn.

Attach click handlers in JavaScript instead of having to do // eslint-disable.

acjh · 2018-06-07T16:11:51Z

asset/js/setup.js

+/**
+ * Creates event listener for all dropdown-btns in page.
+ */
+Array.prototype.forEach.call(document.getElementsByClassName('dropdown-btn'),


Single-line comment since this isn't a function definition.

// Creates event listener for all dropdown-btns in page.

Why are we not doing the following?

document.getElementsByClassName('dropdown-btn').forEach((element) => {

Why are we not doing the following?

This post explains it. I have found this updated solution to be a better alternative, using:

const dropdownBtnList = document.getElementByClassName('dropdown-btn'); for (let dropdownBtn of dropdownBtnList ) { ... }

Edit1: looks like ESlint doesn't like for loops. Will revert back to Array.prototype.forEach.call as it seems most compatible with a wide range of browsers.

acjh · 2018-06-07T16:16:04Z

asset/css/markbind.css

+    border-right: 1px solid lightgrey;
+    display: inline-block;
+    max-height: 80vh;
+    font-size: 14pt;


This is a huge section of styles. Is this from a source? Consider a separate stylesheet.

acjh · 2018-06-07T16:17:45Z

asset/js/setup.js

+                                 dropdownContent.style.maxHeight = '0px';
+                               }
+                             }));
+


When dealing with huge blocks of code with lots of whitespace, prefer:

Array.prototype.forEach.call( document.getElementsByClassName('dropdown-btn'), element => element.addEventListener('click', () => { this.classList.toggle('dropdown-open'); const dropdownContent = this.nextElementSibling; if (dropdownContent.style.maxHeight === '0px' || !dropdownContent.style.maxHeight) { dropdownContent.style.transition = 'max-height 0.25s ease-in'; dropdownContent.style.maxHeight = '1000px'; } else { dropdownContent.style.transition = 'max-height 0.15s ease-out'; dropdownContent.style.maxHeight = '0px'; } }));

Extra empty line at end of file.

Chng-Zhi-Xuan · 2018-06-08T08:02:10Z

Update

Change styling of the navigation bar to be less flamboyant.
Added a dropdown icon indicator.
Added additional code to format non-dropdown menu nested lists.
Rephrased user guide and comments.

TODO & under discussion

Use Page.ejs template to insert site-nav and other specific divs.
Use a separate style sheet and javascript file for navigation bar.

yamgent · 2018-06-11T00:51:11Z

lib/Page.js

 const TITLE_PREFIX_SEPARATOR = ' - ';

+const DROPDOWN_BUTTON_ICON_HTML = '<i class="dropdown-btn-icon">\n'
+  + '<span class=\'glyphicon glyphicon-menu-down\' aria-hidden="true"></span>\n'


class can use " instead of '.

yamgent · 2018-06-11T00:58:54Z

lib/Site.js

  + '</frontmatter>\n\n'
  + '# Hello world\n'
  + 'Welcome to your page generated with MarkBind.\n';

+const SITE_NAV_DEFAULT = '<markdown>\n'


Is wrapping the content with the <markdown> tag absolutely necessary?

If it is so, might be a good thing to mention in the docs, because I didn't expect the tag to be necessary.

The tag was shown in the user guide example. will add additional emphasis.

Chng-Zhi-Xuan · 2018-06-11T03:03:48Z

lib/Page.js

@@ -205,6 +288,7 @@ Page.prototype.generate = function (builtFiles) {
        this.collectFrontMatter(result);
        return this.removeFrontMatter(result);
      })
+      .then(result => this.insertSiteNav((result))) // Ensure this is before insertFooter


This comment was requested from @acjh for easy reference.

Perhaps explain it concisely (on its own line if need be) as the rationale is non-obvious?

yamgent · 2018-06-11T01:05:46Z

docs/userGuide/contentAuthoring.md

+  * [Dropdown link two](https://www.google.com/)
+* [==Third Link== :clipboard:](https://www.google.com/)
+* [Youtube](https://www.youtube.com/) <!-- Using a link as a Dropdown title will not render a Dropdown menu -->
+  * [The answer to everything in the universe](https://www.youtube.com/watch?v=dQw4w9WgXcQ)


The other section has a YouTube URL as well. Let's standardize it by using the same URL:

http://www.youtube.com/watch?v=lJIrF4YjHfQ

Chng-Zhi-Xuan · 2018-06-11T03:20:56Z

Update

Rebase to latest master
Create separate .css and .js file for site-nav
Changed youtube URL in user guide and emphasis added on <markdown> tag

Discussion

Modifying page.ejs to insert site-nav specific divs:
This suggestion will incur numerous if statements within the template. A modification to insertFooter is required as well to insert via template instead of concatenating it to the back of page contents. As the suggestion scope is beyond this PR, will open a separate issue if necessary.

yamgent

Minor nits

yamgent · 2018-06-11T03:47:38Z

asset/css/site-nav.css

+
+/* Hamburger button morphing to close button */
+
+.morph .menu-top-bar {


Morph is a name of a component in vue-strap as well, and is also used inside as a div class name. I think we should rename it.

How about .shift?

Sounds good.

Chng-Zhi-Xuan · 2018-06-11T04:30:52Z

lib/Site.js

@@ -250,8 +264,12 @@ Site.prototype.createPage = function (config) {
                               path.join(this.siteAssetsDestPath, 'css', 'github.min.css')),
      markbind: path.relative(path.dirname(resultPath),
                              path.join(this.siteAssetsDestPath, 'css', 'markbind.css')),
+      siteNavCss: path.relative(path.dirname(resultPath),


Order was decided from file type (.css) first, then name.

yamgent · 2018-06-11T04:07:15Z

asset/css/site-nav.css

+    display: block;
+    margin-top: 20px;
+    transition: 0.4s;
+    top: 0;


top should come before transition.

yamgent · 2018-06-11T04:20:46Z

docs/_markbind/navigation/userGuideSections.md

+  * [Site Configuration]({{baseUrl}}/userGuide/siteConfiguration.html)
+* [Content Authoring]({{baseUrl}}/userGuide/contentAuthoring.html)
+  * [Including Contents]({{baseUrl}}/userGuide/includingContents.html)
+  * [Known Problems]({{baseUrl}}/userGuide/knownProblems.html);


Remove the extra semi-colon at the back.

yamgent · 2018-06-11T04:21:11Z

docs/_markbind/navigation/userGuideSections.md

@@ -0,0 +1,12 @@
+<markdown class="website-content">
+* ## Sections


Might be more appropriate to say "User Guide" instead of "Sections" since this is now used everywhere.

yamgent · 2018-06-11T04:23:59Z

docs/userGuide/contentAuthoring.md

+### Site Navigation
+
+A site navigation bar is a fixed menu on the left side of your page contents, that allows the viewer to navigate your site pages. 
+It has a fixed width of 300 pixels for its contents. 


The menu has a fixed width of 300 pixels.

yamgent · 2018-06-11T04:24:46Z

docs/userGuide/contentAuthoring.md

+
+A site navigation bar is a fixed menu on the left side of your page contents, that allows the viewer to navigate your site pages. 
+It has a fixed width of 300 pixels for its contents. 
+If you would like a site navigation bar for your site, you may create one easily using Markdown.


...would like to have a site navigation...

yamgent · 2018-06-11T04:27:05Z

docs/userGuide/contentAuthoring.md

+  <li style="margin-top: 5px"><a href="https://www.google.com/"><mark>Third Link</mark> 📋</a></li>
+  <a href="https://www.youtube.com/">Youtube</a>
+  <ul style="list-style-type: none; margin-left:-1em">
+    <li style="margin-top: 5px"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">The answer to everything in the universe</a></li>


The actual rendered content need to match the original Markdown source.

yamgent · 2018-06-11T04:27:33Z

docs/userGuide/contentAuthoring.md

+
+The site navigation bar has [responsive properties](https://www.w3schools.com/html/html_responsive.asp), and will collapse to a menu button when the screen width is smaller than 768 pixels.
+
+You are able to use [Markdown syntax](#supported-markdown-syntax), as well as [glyphicons](#glyphicons) to author your page navigation layout.


...~~page~~ site navigation layout.

yamgent

Mostly ok now, just something that suddenly popped up in my mind:

yamgent · 2018-06-12T06:51:13Z

asset/js/site-nav.js

+/* eslint-disable no-undef */
+
+// Add event listener for site-nav-btn to toggle itself and site navigation elements.
+document.getElementById('site-nav-btn')


This will cause an error if the website does not specify a site-nav intentionally. Would be more ideal if the console doesn't print any error, since site-navs should be optional by default.

acjh

Looks good.

As mentioned, is site-nav.css (and site-nav.js) from a source or empirically determined?

acjh · 2018-06-17T13:50:09Z

lib/Page.js

@@ -171,6 +226,34 @@ Page.prototype.removeFrontMatter = function (includedPage) {
  return $.html();
 };

+Page.prototype.insertSiteNav = function (pageData) {


Move after insertFooter.

acjh · 2018-06-17T13:56:16Z

test/test_site/expected/markbind/js/site-nav.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-undef */


Let's specify environment instead:

/* eslint-env browser */

Chng-Zhi-Xuan · 2018-06-17T14:12:13Z

@acjh

site-nav.css/js were referenced from free guides in W3Schools or CSS-Tricks (credit/reference not needed). Some of the values within the .css file were hard coded by me to match the style I wanted (some of the px or % values).

acjh · 2018-06-17T14:31:16Z

Apart from official credit, it's good to know where a non-obvious block of code or styles came from.
Indeed, W3Schools or CSS-Tricks are a different sort of resource from Stack Overflow or a tutorial.
Still, it would be good to include references (the links in point form will suffice) in the PR description.

Can you also update the PR description? In particular, the Changes table and the Demo gif. Thanks!

Chng-Zhi-Xuan · 2018-06-18T02:35:33Z

Update

Apply minor changes requested
Squashed Commits
Updated PR description with new Demo-V2.gif and added references.

acjh · 2018-06-18T02:55:11Z

Could you add that demo in a new page in test_site? Looks like a good stress test on site nav.

Chng-Zhi-Xuan · 2018-06-18T04:12:29Z

@acjh

How about I change the existing site-nav.md file within test_site to cover a more extensive range of scenarios?

My demo page contents are just dummy values, don't think we need another page for it when we can test it fully on the main landing page 🔨 .

acjh · 2018-06-18T05:15:41Z

The main site nav should be functional (appropriate links) though.

Chng-Zhi-Xuan · 2018-06-18T05:32:57Z

You have a point. I am thinking of having this layout:

* ## Navigation 
* Home 
* Open Bugs
* [Insert additional pages here in future]
* ## Testing Site-Nav
* XYZ
* [Insert additional scenarios here]

I feel it is appropriate as the main page is also testing several other elements at the same time.

Chng-Zhi-Xuan · 2018-06-20T06:07:38Z

Update

Add stress test for site-nav.md in test_site
Rebase to latest master

Discussion
Will abstract out site-nav test to separate page if necessary, in another issue.

yamgent · 2018-06-20T06:59:24Z

docs/_markbind/footers/userGuideFooter.md

@@ -0,0 +1,5 @@
+<footer>
+  <div class="text-center">
+    {{timestamp}}


Should be <small>[Generated by {{MarkBind}} on {{timestamp}}]</small>

Chng-Zhi-Xuan · 2018-06-21T03:04:42Z

Update

Fix userGuideFooter.md

Chng-Zhi-Xuan requested review from yamgent and acjh June 7, 2018 02:21

yamgent requested changes Jun 7, 2018

View reviewed changes

damithc reviewed Jun 7, 2018

View reviewed changes

yamgent reviewed Jun 7, 2018

View reviewed changes

acjh reviewed Jun 7, 2018

View reviewed changes

yamgent reviewed Jun 11, 2018

View reviewed changes

Chng-Zhi-Xuan force-pushed the 220-site-navigation branch from a49dd74 to 3639797 Compare June 11, 2018 03:01

yamgent reviewed Jun 11, 2018

View reviewed changes

yamgent reviewed Jun 12, 2018

View reviewed changes

yamgent approved these changes Jun 14, 2018

View reviewed changes

acjh reviewed Jun 17, 2018

View reviewed changes

Chng-Zhi-Xuan force-pushed the 220-site-navigation branch from 5050be2 to a7f040f Compare June 18, 2018 01:54

Chng-Zhi-Xuan added 6 commits June 20, 2018 13:27

Site: generate site-nav.md

6677bf8

Page: insert site navigation

293b851

Asset: css & js for site navigation elements

56467ef

template: update page.ejs to include new files

b61be08

Test: update unit tests for generating site-nav

e3aaddc

Test: update test_site to use site-nav

b82cb1c

Chng-Zhi-Xuan force-pushed the 220-site-navigation branch 2 times, most recently from 3633354 to 1a6dec1 Compare June 20, 2018 06:06

yamgent reviewed Jun 20, 2018

View reviewed changes

Chng-Zhi-Xuan added 2 commits June 21, 2018 11:02

Test: add stress test for site-nav in test_site

7b7c3a1

Docs: update user guide to use site-nav

5a260e3

Chng-Zhi-Xuan force-pushed the 220-site-navigation branch from 1a6dec1 to 5a260e3 Compare June 21, 2018 03:04

yamgent approved these changes Jun 21, 2018

View reviewed changes

acjh approved these changes Jun 21, 2018

View reviewed changes

yamgent merged commit 3bc1076 into MarkBind:master Jun 21, 2018

yamgent added this to the v1.8.2 milestone Jun 21, 2018

Chng-Zhi-Xuan deleted the 220-site-navigation branch May 21, 2019 06:39


		/* Hamburger button morphing to close button */

		.morph .menu-top-bar {

		@@ -0,0 +1,12 @@
		<markdown class="website-content">
		* ## Sections


		The site navigation bar has [responsive properties](https://www.w3schools.com/html/html_responsive.asp), and will collapse to a menu button when the screen width is smaller than 768 pixels.

		You are able to use [Markdown syntax](#supported-markdown-syntax), as well as [glyphicons](#glyphicons) to author your page navigation layout.

Support site navigation bar #259

Support site navigation bar #259

Conversation

Chng-Zhi-Xuan commented Jun 7, 2018 • edited Loading

yamgent left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chng-Zhi-Xuan Jun 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

damithc commented Jun 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chng-Zhi-Xuan Jun 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chng-Zhi-Xuan commented Jun 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chng-Zhi-Xuan commented Jun 11, 2018

yamgent left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yamgent left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acjh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Chng-Zhi-Xuan commented Jun 17, 2018

acjh commented Jun 17, 2018

Chng-Zhi-Xuan commented Jun 18, 2018 • edited Loading

acjh commented Jun 18, 2018

Chng-Zhi-Xuan commented Jun 18, 2018 • edited Loading

acjh commented Jun 18, 2018

Chng-Zhi-Xuan commented Jun 18, 2018

Chng-Zhi-Xuan commented Jun 20, 2018 • edited Loading

Choose a reason for hiding this comment

Chng-Zhi-Xuan commented Jun 21, 2018

Chng-Zhi-Xuan commented Jun 7, 2018 •

edited

Loading

Chng-Zhi-Xuan Jun 7, 2018 •

edited

Loading

Chng-Zhi-Xuan Jun 8, 2018 •

edited

Loading

Chng-Zhi-Xuan commented Jun 8, 2018 •

edited

Loading

Chng-Zhi-Xuan commented Jun 18, 2018 •

edited

Loading

Chng-Zhi-Xuan commented Jun 18, 2018 •

edited

Loading

Chng-Zhi-Xuan commented Jun 20, 2018 •

edited

Loading