Home Screen

The Home Screen is a unique screen in Peek that displays a link to available plugins that have front-ends.

Classes

The .peek-home-screen class will contain the classes specific to the Home Screen.

.peek-home-screen{
/*
    Contains the Home Screen classes
*/
    ...

    .home-screen-icon{
    /*
        Contains the Button attributes unique to the Home Screen
        Buttons responsively wrap
    */
        ...

    }
    .home-screen-image{
    /*
        Contains the Image attributes unique to the Home Screen
        Strictly uses images
    */
        ...

    }
    .home-screen-title{
    /* Contains the Button Title attributes unique to the Home Screen */
        ...

    }
}

 .peek-home-screen-background{
/*
    Contains the Background attributes
    Home Screen background is unique and different to other screens
    Cannot use the body tag
*/
    ...

}

Background Image

SCSS Files

The Home Screen style classes are found in the _home_screen.scss.

The Home Screen HTML layout classes are found in the _home_screen.web.scss.

The Home Screen NativeScript layout classes are found in the _home_screen.ns.scss.

HTML

<div class="peek-home-screen">
  <div class="container-fluid">
    <div class="row">
      <div class="title h3"
           *ngIf="!appDetails.length">
        No Plugins Installed

      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"
           *ngFor="let app of appDetails">
        <a class="home-screen-icon"
           [routerLink]="[app.resourcePath]">
          <img class="home-screen-image"
               [src]="[app.pluginIconPath]">
          <div class="home-screen-title">
            {{app.title}}

          </div>
        </a>
      </div>
    </div>
  </div>
</div>

NativeScript

<ScrollView class="peek-home-screen">
  <WrapLayout>
    <Label class="message"
           *ngIf="!appDetails.length"
           text="No Plugins Installed">

    </Label>
    <GridLayout class="icon"
                *ngFor="let app of appDetails"
                rows="*,auto" columns="*"
                [nsRouterLink]="[app.resourcePath]">
      <Image class="image"
             row="0" col="0"
             src="~{{app.pluginIconPath}}">

      </Image>
      <Label class="title"
             row="1" col="0"
             [text]="app.title">

      </Label>
    </GridLayout>
  </WrapLayout>
</ScrollView>