feat(ssr): enhance support for Universal and SSR with stylesheets #567

CaerusKaru · 2018-01-15T18:07:28Z

Add StyleService class to manage application and retrieval of styles from elements in a platform-agnostic manner
Add virtual stylesheet to store server styles, which applies default styles when breakpoint overrides are not present
While not in the browser (ssr), intercept all style calls and reroute them to the virtual stylesheet
For server-side rendering, add a new type of MediaQueryList similar to the MockMediaQueryList to support manual activation/deactivation of breakpoints
Add jasmine testing mode for SSR
Add FlexLayoutServerModule to invoke SSR styling
Remove unnecessary Renderer references and replace them with DOM APIs
Add whitespace debugging mode for server styles

Fixes #373.

See Design Doc

CaerusKaru · 2018-01-17T08:21:44Z

Example output for the following HTML markup:

HTML Markup

<div class="night-theme">
  <div fxLayout="row" fxLayout.xs="column" style="height:500px" ngxSplit="row">
    <div fxFlex="30%" ngxSplitArea class="c1r1">
      <div class="c1r1_header">Column #1 - Row #1</div>
      <ul>
        <li>2 Columns: 30% + 70%</li>
        <li>2nd Column: 2 rows</li>
        <li>2nd Column: 50% + 50%</li>
      </ul>
    </div>
    <div class="handle handle-row" ngxSplitHandle>
      <i class="material-icons">&#xE25D;</i>
    </div>
    <div fxFlex.xs="70%" fxFlex.gt-md="50%" fxFlex.lg="60%" ngxSplitArea>
      <div fxLayout="column" fxFlexFill ngxSplit="column">
        <div fxFlex="50%" ngxSplitArea class="c2r1_body">
          <div class="c2r1_header">Column #2 - Row #1</div>
          <h1>Layout Dashboard</h1>
          <p>
            Demonstrate use of ngxSplit with the Flex-Layout API
            and flexbox css layouts.
            <br/><br/>
            Haxx0r ipsum cd ctl-c Starcraft concurrently salt unix baz class bar linux
            January 1, 1970 syn for mutex daemon todo mountain dew recursively. Mainframe
            wannabee machine code hack the mainframe do void python bin big-endian break
            tcp ddos emacs public frack.Over clock headers data private *.* pwned
            fork script kiddies.
          </p>
        </div>
        <div class="handle handle-column" ngxSplitHandle>
          <i class="material-icons">&#xE25D;</i>
        </div>
        <div fxFlex="50%" ngxSplitArea class="c2r2">
          <div class="c2r2_header">Column #2 - Row #2</div>
          <ul>
            <li>List Item #1</li>
            <li>List Item #2</li>
            <li>List Item #3</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Generated CSS

@media all {
     .flex-layout-0 {
         height: 100%;
         min-height: 100%;
         min-width: 100%;
         width: 100%;
         -webkit-flex-direction: column;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
    }
     .flex-layout-1 {
         -webkit-flex-direction: row;
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
    }
     .flex-layout-2 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
         max-width: 30%;
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
    }
     .flex-layout-3 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
    }
     .flex-layout-4 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
         max-height: 50%;
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
    }
     .flex-layout-5 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
         max-height: 50%;
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
    }
}
 @media (min-width: 1280px) and (max-width: 1919px) {
     .flex-layout-1 {
         -webkit-flex-direction: row;
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
    }
     .flex-layout-3 {
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         box-sizing: border-box;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
         max-width: 60%;
    }
}
 @media (max-width: 1279px) {
     .flex-layout-1 {
         -webkit-flex-direction: row;
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
    }
     .flex-layout-3 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
    }
}
 @media (min-width: 1280px) {
     .flex-layout-1 {
         -webkit-flex-direction: row;
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
    }
     .flex-layout-3 {
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         box-sizing: border-box;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
         max-width: 50%;
    }
}
 @media (min-width: 960px) and (max-width: 1279px) {
     .flex-layout-1 {
         -webkit-flex-direction: row;
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
    }
     .flex-layout-3 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
    }
}
 @media (min-width: 0px) and (max-width: 599px) {
     .flex-layout-1 {
         -webkit-flex-direction: column;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
    }
     .flex-layout-2 {
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         box-sizing: border-box;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
         max-height: 30%;
    }
     .flex-layout-3 {
         -webkit-flex: 1 1 0.000000001px;
         box-sizing: border-box;
         flex: 1 1 0.000000001px;
         max-height: 70%;
         -webkit-flex-basis: 100%;
         -webkit-flex-grow: 1;
         -webkit-flex-shrink: 1;
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
    }
}

Minified CSS

@media all{.flex-layout-0{height:100%;min-height:100%;min-width:100%;width:100%;-webkit-flex-direction:column;box-sizing:border-box;display:flex;flex-direction:column;}.flex-layout-1{-webkit-flex-direction:row;box-sizing:border-box;display:flex;flex-direction:row;}.flex-layout-2{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-width:30%;}.flex-layout-3{-webkit-flex:1 1 0.000000001px;box-sizing:border-box;flex:1 1 0.000000001px;}.flex-layout-4{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-height:50%;}.flex-layout-5{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-height:50%;}}@media (min-width: 1280px) and (max-width: 1919px){.flex-layout-1{-webkit-flex-direction:row;box-sizing:border-box;display:flex;flex-direction:row;}.flex-layout-3{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-width:60%;}}@media (min-width: 1280px){.flex-layout-1{-webkit-flex-direction:row;box-sizing:border-box;display:flex;flex-direction:row;}.flex-layout-3{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-width:50%;}}@media (min-width: 0px) and (max-width: 599px){.flex-layout-1{-webkit-flex-direction:column;box-sizing:border-box;display:flex;flex-direction:column;}.flex-layout-2{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-height:30%;}.flex-layout-3{-webkit-flex:1 1 100%;box-sizing:border-box;flex:1 1 100%;max-height:70%;}}

Runtime DOM values

<body>
  <responsive-app _nghost-c0="" ng-version="5.2.0">
    <div _ngcontent-c0="" class="night-theme">
      <div _ngcontent-c0="" class="ngx-split flex-layout-1" fxlayout="row" fxlayout.xs="column" ngxsplit="row" style="height:500px">
        <div _ngcontent-c0="" class="c1r1 flex-layout-2" fxflex="30%" ngxsplitarea="" style="overflow: auto;">
          <div _ngcontent-c0="" class="c1r1_header">Column #1 - Row #1</div>
          <ul _ngcontent-c0="">
            <li _ngcontent-c0="">2 Columns: 30% + 70%</li>
            <li _ngcontent-c0="">2nd Column: 2 rows</li>
            <li _ngcontent-c0="">2nd Column: 50% + 50%</li>
          </ul>
        </div>
        <div _ngcontent-c0="" class="handle handle-row ngx-split-handle" ngxsplithandle="" title="Drag to resize">
          <i _ngcontent-c0="" class="material-icons"></i>
        </div>
        <div _ngcontent-c0="" fxflex.gt-md="50%" fxflex.lg="60%" fxflex.xs="70%" ngxsplitarea="" style="overflow: auto;" class="flex-layout-3">
          <div _ngcontent-c0="" class="ngx-split flex-layout-0" fxflexfill="" fxlayout="column" ngxsplit="column">
            <div _ngcontent-c0="" class="c2r1_body flex-layout-4" fxflex="50%" ngxsplitarea="" style="overflow: auto;">
              <div _ngcontent-c0="" class="c2r1_header">Column #2 - Row #1</div>
              <h1 _ngcontent-c0="">Layout Dashboard</h1>
              <p _ngcontent-c0="">
                Demonstrate use of ngxSplit with the Flex-Layout API
                and flexbox css layouts.
                <br _ngcontent-c0=""><br _ngcontent-c0="">
                Haxx0r ipsum cd ctl-c Starcraft concurrently salt unix baz class bar linux
                January 1, 1970 syn for mutex daemon todo mountain dew recursively. Mainframe
                wannabee machine code hack the mainframe do void python bin big-endian break
                tcp ddos emacs public frack.Over clock headers data private *.* pwned
                fork script kiddies.
              </p>
            </div>
            <div _ngcontent-c0="" class="handle handle-column ngx-split-handle" ngxsplithandle="" title="Drag to resize">
              <i _ngcontent-c0="" class="material-icons"></i>
            </div>
            <div _ngcontent-c0="" class="c2r2 flex-layout-5" fxflex="50%" ngxsplitarea="" style="overflow: auto;">
              <div _ngcontent-c0="" class="c2r2_header">Column #2 - Row #2</div>
              <ul _ngcontent-c0="">
                <li _ngcontent-c0="">List Item #1</li>
                <li _ngcontent-c0="">List Item #2</li>
                <li _ngcontent-c0="">List Item #3</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </responsive-app>


</body>

CaerusKaru · 2018-01-19T00:12:09Z

Note: this needs a testing mode where we can change the PLATFORM_ID flag from browser mode to server mode and confirm all tests still pass. @devversion any thoughts on this?

CaerusKaru · 2018-02-14T21:16:24Z

@jelbourn @vikerman

vikerman · 2018-02-14T21:57:52Z

The platform-server part and associated tests looks good to me(I didn't go through the actual styles logic).

Just need a small clarification.

(In the future it would help if the PRs are collection of smaller PRs/commits)

vikerman · 2018-02-14T21:54:19Z

src/lib/api/ext/img-src.ts

+              @Optional() @Inject(SERVER_TOKEN) protected _serverModuleLoaded: boolean) {
+    super(_monitor, _elRef, _styler);
+    this._cacheInput('src', _elRef.nativeElement.getAttribute('src') || '');
+    if (isPlatformServer(this._platformId) && this._serverModuleLoaded) {


Can you explain a bit on how the serverModuleLoaded flag is used?

The flag is to determine if the FlexLayoutServerModule is included (since it's the only module that provides that token).

Loading the server module is optional -- if a user doesn't load it, it means they want the inline styles as a fallback (it also prevents this from being a breaking change, since it's totally opt-in).

Will this get into the docs?

Absolutely. Docs will be in a follow-up PR once this has all been finalized

jelbourn · 2018-02-14T22:49:38Z

src/lib/utils/testing/custom-matchers.ts

@@ -204,7 +205,7 @@ export const customMatchers: jasmine.CustomMatcherFactories = {
 * specified DOM element.
 */
 function buildCompareStyleFunction(inlineOnly = true) {
-  return function (actual: any, styles: { [k: string]: string } | string) {
+  return function (actual: any, styles: { [k: string]: string } | string, styler: StyleService) {


Is it really necessary to change this signature? It adds a significant amount of test boilerplate.

Discussed offline, unfortunately very necessary 👎

jelbourn · 2018-02-15T00:05:21Z

src/lib/media-query/match-media.ts

+  }
+
+  removeListener(_: MediaQueryListListener) {
+  }


Add comment in function body here like

// Don't need to remove listeners in the server environment.

jelbourn · 2018-02-15T00:05:48Z

src/lib/media-query/match-media.ts

-  // Function with Window's MediaQueryList argument
-  (mql: MediaQueryList): void;
-}
+export class ServerMediaQueryList implements MediaQueryList {


This should be in a separate file
(generally all server-specific stuff should be in separate files so that you can better ensure you're only getting what you need on the client)

Added to a separate file with a separate implementation of MatchMedia for the server as suggested below

jelbourn · 2018-02-15T00:06:50Z

src/lib/media-query/match-media.ts

@@ -51,19 +92,36 @@ export interface MediaQueryList {
 */
 @Injectable()
 export class MatchMedia {
-  protected _registry: Map<string, MediaQueryList>;
+  protected _registry: Map<string, MediaQueryList|ServerMediaQueryList>;


Instead of using a union type, it would be better to use an interface and an InjectionToken. When using a union type, you may end up getting the server-side code on the client

Added, great suggestion!

jelbourn · 2018-02-15T00:09:12Z

src/lib/server/server-provider.ts

+ * * Adds a unique class to each element and stores it
+ *   in a shared classMap for later reuse
+ */
+function formatStyle(stylesheet: Map<HTMLElement, Map<string, string|number>>,


Something like generateCss?

jelbourn · 2018-02-15T00:24:03Z

src/lib/utils/styling/server-token.ts

+ */
+import {InjectionToken} from '@angular/core';
+
+export const SERVER_TOKEN = new InjectionToken<boolean>('FlexLayoutServerLoaded');


Description?

jelbourn · 2018-02-15T00:26:27Z

src/lib/utils/styling/styler.ts

+import {SERVER_TOKEN} from './server-token';
+
+@Injectable()
+export class StyleService {


Class description?

On naming: my rule is to avoid the term "Service" in class names because it doesn't tell you anything about what the class actually does. You'll notice in material we have things like ScrollDispatcher, FocusMonitor, InteractivityChecker, etc. instead of ScrollService, FocusService, InteracitivityService. Adding a more specific noun makes the name much more meaningful.

I vaguely recall @ThomasBurleson saying the same. The original name was StyleUtils, I'll change it back.

jelbourn · 2018-02-15T00:28:07Z

src/lib/utils/styling/styler.ts

+
+  /**
+   * Determine the inline or inherited CSS style
+   * @TODO(CaerusKaru): platform-server has no implementation for getComputedStyle


What's the action on this TODO? The whole idea of getComputedStyle inherently can't work on the server (without being driven by an entire browser rendering engine)

Changed to NOTE

jelbourn · 2018-02-15T00:29:48Z

src/lib/utils/styling/styler.ts

+            value = getComputedStyle(element).getPropertyValue(styleName);
+          }
+        } else {
+          if (this._serverModuleLoaded) {


There are a lot of places throughout the PR where you're explicitly performing a check for browser vs. server and performing a different action for each. In general it would be better to delegate to some injectable with a common interface that uses a different implementation on each platform.

Now that the MatchMedia has been changed (see above), the only three places this still happens are the following: ImgSrc, ShowHide, and Styler. In each case, the check only changes about two lines of code in very critical ways. I think it would duplicate a lot of code to change and as it stands now doesn't benefit much to factor out.

jelbourn · 2018-02-15T00:30:59Z

src/lib/utils/styling/styler.ts

+ * Definition of a css style. Either a property name (e.g. "flex-basis") or an object
+ * map of property name and value (e.g. {display: 'none', flex-order: 5})
+ */
+export type StyleDefinition = string | { [property: string]: string | number | null };


Why do either an object literal or string instead of just always doing an object literal?

This is legacy code, removed. (The idea was that when calling a function, you could call it with string and value individually instead of providing an object)

CaerusKaru · 2018-02-15T18:47:31Z

@jelbourn Comments addressed, PTAL

jelbourn · 2018-02-15T19:44:50Z

src/lib/media-query/match-media-provider.ts

+import {
+  NgZone,
+  PLATFORM_ID,
+  InjectionToken,    // tslint:disable-line:no-unused-variable


You can avoid suppressing the lint error by explicitly using InjectionToken in the place where it is inferred

Fixed (this is a real pain by the way, is it a bug in tslint)?

jelbourn · 2018-02-15T19:45:37Z

src/lib/media-query/match-media-provider.ts

+ * Create a version of MatchMedia compatible with the current
+ * platform
+ */
+export function MEDIA_QUERY_LIST_FACTORY(platformId: Object,


Instead of having one provider that returns either service, there should just be two different providers. The appropriate provider is then included in each of the browser / server module.

jelbourn · 2018-02-15T19:51:42Z

src/lib/media-query/server-match-media.ts

+ */
+export class ServerMediaQueryList implements MediaQueryList {
+  private _isActive = false;
+  private _listeners: Array<MediaQueryListListener> = [];


MediaQueryListListener[]

Fixed (and fixed the source for this)

jelbourn · 2018-02-15T19:52:39Z

src/lib/media-query/server-match-media.ts

+
+  /**
+   * Notify all listeners that 'matches === TRUE'
+   */


You can collapse short comment to a single line:

/** Notify all listeners that 'matches === TRUE' */

jelbourn · 2018-02-15T19:55:23Z

src/lib/server/server-provider.ts

+  ServerMatchMedia
+} from '@angular/flex-layout';
+
+let UNIQUE_CLASS = 0;


UNIQUE_CLASS shouldn't be caps case because it's not constant. I typically call this nextId in material (example)

jelbourn · 2018-02-15T19:57:51Z

src/lib/utils/styling/browser-provider.ts

+  APP_BOOTSTRAP_LISTENER,
+  PLATFORM_ID,
+  InjectionToken,    // tslint:disable-line:no-unused-variable
+  ComponentRef,      // tslint:disable-line:no-unused-variable


You can avoid the suppression by explicitly using them in the code where they are now inferred.

CaerusKaru · 2018-02-15T20:27:38Z

@jelbourn Comments addressed again, PTAL

jelbourn

No further comments from me, I'll leave it to Thomas from here

* Add `StyleService` class to manage application and retrieval of styles from elements in a platform-agnostic manner * Add virtual stylesheet to store server styles, which applies default styles when breakpoint overrides are not present * While not in the browser (ssr), intercept all style calls and reroute them to the virtual stylesheet. * For server-side rendering, add a new type of MediaQueryList similar to the MockMediaQueryList to support manual activation/deactivation of breakpoints * Add jasmine testing mode for SSR * Add FlexLayoutServerModule to invoke SSR styling * Remove unnecessary Renderer references and replace them with DOM APIs * Add whitespace debugging mode for server styles Fixes #373. > See [Design Doc](https://docs.google.com/document/d/1fg04ihw42dJJHGd6fugdiBe39iJot8aErhiE7CjwfmQ/edit#)

ThomasBurleson · 2018-02-17T21:58:35Z

Merged with SHA cf5266a

angular-automatic-lock-bot · 2019-09-05T23:03:24Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

CaerusKaru added pr: needs review ssr labels Jan 15, 2018

CaerusKaru added this to the v5.0.0-rc.1 milestone Jan 15, 2018

CaerusKaru assigned ThomasBurleson Jan 15, 2018

googlebot added the cla: yes label Jan 15, 2018

CaerusKaru changed the title ~~fix: add correct ssr styles~~ feat: add correct ssr styles Jan 15, 2018

CaerusKaru mentioned this pull request Jan 15, 2018

[WIP] ssr style fix #556

Closed

ThomasBurleson changed the title ~~feat: add correct ssr styles~~ feat(ssr): enhance support for Universal and SSR with stylesheets. Jan 15, 2018

CaerusKaru changed the title ~~feat(ssr): enhance support for Universal and SSR with stylesheets.~~ feat(ssr): enhance support for Universal and SSR with stylesheets Jan 16, 2018

CaerusKaru force-pushed the adam/fix-issue-373 branch 3 times, most recently from 887e063 to 1e36be6 Compare January 16, 2018 04:39

CaerusKaru modified the milestones: v5.0.0-rc.1, v2.0.0-beta.13 Jan 16, 2018

CaerusKaru force-pushed the adam/fix-issue-373 branch 6 times, most recently from 6a371f0 to ee9d608 Compare January 16, 2018 17:08

ThomasBurleson force-pushed the adam/fix-issue-373 branch 3 times, most recently from 305ab8f to 193fdab Compare January 18, 2018 21:57

ThomasBurleson force-pushed the adam/fix-issue-373 branch from 193fdab to fd38110 Compare January 19, 2018 01:52

CaerusKaru requested review from vikerman and jelbourn January 19, 2018 21:08

CaerusKaru force-pushed the adam/fix-issue-373 branch 3 times, most recently from 28affd8 to 6ebd21f Compare February 12, 2018 21:02

CaerusKaru mentioned this pull request Feb 13, 2018

Unit and e2e testing examples angular/universal-starter#539

Closed

CaerusKaru force-pushed the adam/fix-issue-373 branch 4 times, most recently from a7a8a51 to 4d9e74f Compare February 13, 2018 16:15

CaerusKaru added the feature label Feb 14, 2018

vikerman reviewed Feb 14, 2018

View reviewed changes

vikerman approved these changes Feb 14, 2018

View reviewed changes

jelbourn reviewed Feb 15, 2018

View reviewed changes

CaerusKaru force-pushed the adam/fix-issue-373 branch from 5d67fc1 to 176958e Compare February 15, 2018 02:39

jelbourn reviewed Feb 15, 2018

View reviewed changes

CaerusKaru force-pushed the adam/fix-issue-373 branch from 57ba228 to fa7839c Compare February 15, 2018 20:26

jelbourn approved these changes Feb 15, 2018

View reviewed changes

CaerusKaru force-pushed the adam/fix-issue-373 branch 2 times, most recently from a936361 to e9c77b0 Compare February 16, 2018 22:50

CaerusKaru force-pushed the adam/fix-issue-373 branch from 3263489 to acf7e2f Compare February 17, 2018 20:54

ThomasBurleson closed this in cf5266a Feb 17, 2018

CaerusKaru deleted the adam/fix-issue-373 branch February 17, 2018 22:38

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019

feat(ssr): enhance support for Universal and SSR with stylesheets #567

feat(ssr): enhance support for Universal and SSR with stylesheets #567

Conversation

CaerusKaru commented Jan 15, 2018 • edited Loading

CaerusKaru commented Jan 17, 2018 • edited Loading

HTML Markup

Generated CSS

Runtime DOM values

CaerusKaru commented Jan 19, 2018 • edited Loading

CaerusKaru commented Feb 14, 2018

vikerman commented Feb 14, 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

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

CaerusKaru commented Feb 15, 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

Choose a reason for hiding this comment

CaerusKaru commented Feb 15, 2018 • edited Loading

jelbourn left a comment

Choose a reason for hiding this comment

ThomasBurleson commented Feb 17, 2018

angular-automatic-lock-bot bot commented Sep 5, 2019

CaerusKaru commented Jan 15, 2018 •

edited

Loading

CaerusKaru commented Jan 17, 2018 •

edited

Loading

CaerusKaru commented Jan 19, 2018 •

edited

Loading

CaerusKaru commented Feb 15, 2018 •

edited

Loading