@uoh/theme

A collection of University of Haifa SCSS themes to be integrated in an Angular project using Material Design.

Installation

To install this library, run:

$ npm install @uoh/theme --save

Include the theme:

You can add all the theme features at once or one by one:

Adding all the theme features:

You can include all the theme features by writing the following lines in your styles.scss file:\

@import '~@uoh/theme/theme';

@include uoh-theme();

Adding the features one by one:

Adding the basic (core) theme:

Once installed, you can include the core theming in your styles.scss by writing:

@import '~@uoh/theme/theme';

@include uoh-core();

Please, note that in order to set the dark-theme you have to use the same name for the class.

Adding the layout support:

After the core theming was installed, you can import the layout including some presets as the fill-remaining-space class to fill the remaining space in a flexbox and the medium-card and small-card classes to set mat-cards with different sizes. There is also a row class to set rows. To add the layout support write the following lines in your styles.scss:

@import '~@uoh/theme/theme';

@include uoh-core();
@include uoh-layout();

Adding responsive mat-table support:

Once the core theming was added, you can include the table responsive theming in your styles.scss by writing:

@import '~@uoh/theme/theme';

@include uoh-core();
@include uoh-table();

In order to utilize the responsive support in your tables you need to add a title property to each column as follows:

      <table mat-table [dataSource]="dataSource" matSort dir="rtl">
        <ng-container matColumnDef="courseName">
          <th mat-cell-header *matHeaderCellDef mat-sort-header>קורס</th>
          <td mat-cell *matCellDef="let course" class="row-title">
            {{course.courseNumber}} - {{course.courseName}}
          </td>
        </ng-container>
        <ng-container matColumnDef="lecturer">
          <th mat-cell-header *matHeaderCellDef mat-sort-header>מרצה</th>
          <td mat-cell title="מרצה" *matCellDef="let course">{{course.lecturer}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsDisplayed"></tr>
        <tr mat-row *matRowDef="let course; columns: columnsDisplayed" (click)="selection.toggle(course)"></tr>
      </table>

In mobile this will be transformed to something similar as the following:

(course number) - (course name)
קורס: (lecturer)

Please, note that the row-title class transforms the cell into a kind of a header in the mobile version.

Include your custom component theme:

Once the core theming was installed, you can use the $default-theme and $dark-theme variables in order to your components themes:

@import '~@uoh/theme/theme';
@import './app/_app.component.theme.scss';

@include uoh-core();
@include app-theme($default-theme);

// You have to use the same class name to be compatible with the core.
.dark-theme {
  @include app-theme($dark-theme);
}