GitHub - ilaskaev/brockcsc.github.io: :mortar_board: Website of Brock University's Computer Science Club

CSC

This is the repository for the Brock University Computer Science Club web page.

Prerequisites

Node >= v7.9.0
Yarn >= 0.25.0

Installation

First run yarn install from the terminal. This will install all the required packages into the node_modules folder in the root directory.

Development

To run a development server, run npm run start.
This will spawn a server which can be accessed from http://localhost:8080.
If wanting to lazy load images from the assets folder, run npm run gen:img. This will generate a file which can be located at src/tmp/assets.json. The file contains the configs for the images which then can be used within the app.

Building for production

In order to build the site, run npm run build. This generates a dist folder in the root directory which will contain the minimized version of the site.
This will also run a postbuild script that will generate a serviceworker which will provide the PWA capabilities for the site.

Deployment

After the application has been built, we can finally run npm run deploy which will deploy the application to the master branch of this repository.

Components

Drag and Drop File Upload

Make sure that your module is importing the SharedModule.

<csc-upload></csc-upload>

Parameter	Value(s)	Description
message	`string`	The message that will be displayed on top of the upload container.
type	single, multi	How many files should the component upload.
data	`CscFile[]`	When editing, you may want to pass existing file data to the dropper.

Modal

Make sure that your module is importing the SharedModule.

<csc-modal>
    <csc-modal-header>
        <!-- Modal Header -->
    </csc-modal-header>
    <csc-modal-body>
         <!-- Modal Body -->
    </csc-modal-body>
    <csc-modal-footer>
         <!-- Modal Footer -->
    </csc-modal-footer>
</csc-modal>

There are two ways to programatically open and close the modal.

Access the modal component using local variables from the parent component

<button (click)="modalAccessor.open()">Open Modal</button>
<csc-modal #modalAccessor>
...

Trigger using the ViewChild reference from the parent component.

<button (click)="openModal()">Open Modal</button>
<csc-modal #modalAccessor>
...

import { ViewChild } from '@angular/core';
@ViewChild('modalAccessor') modal: ModalComponent;
public openModal(): void {
    this.modal.open();
}

Input Container

Make sure that your module is importing the SharedModule.

Parameter	Value(s)	Description
label	`string`	This parameter will add a label to the input.
labelLocation	left, top	Sets the position of where the label will be placed relative to the input field.

<csc-input-container label="label" labelLocation="left">
    <input type="text">
</csc-input-container>

Checkbox

Make sure that your module is importing the SharedModule.

<csc-checkbox>
    <input type="checkbox">
</csc-checkbox>

Parameter	Value(s)	Description
label	`string`	This parameter will add a label to the input.

Tooltip

Make sure that your module is importing the SharedModule.

Parameter	Value(s)	Description
forId (required)	`string`	ID used to identify the host element for the tooltip.
direction	'top', 'right', 'left', 'bottom' (default: bottom)	Sets the position of where the tooltip will be placed relative to the host element.

<!-- Host -->
<div id="someId">
</div>

<!-- Tooltip, forId and host id must match -->
<csc-tooltip forId="someId" direction="right">
    <p>Some HTML content</p>
</csc-tooltip>

Button

To use the csc button, a csc-button attribute needs to be added to either an a or button tag.

<button csc-button>Text</button>

<a csc-button>Text</a>

Progress Bar

Simple progress bar with a binding for current progress value.

Parameter	Value(s)	Description
color	'navy', 'maroon' (default: navy)	The colour of the progress bar.
progress	0-100	Progress of the bar.

<csc-progress-bar progress="25" color="navy"></csc-progress-bar>

Spinner (Loader)

Simple loader component that has no functionality. Use with *ngIf to manage whether it is displayed or not.

<csc-spinner></csc-spinner>