Skip to content
Snippets Groups Projects
Commit 74b5bbe5 authored by Paulina Nogal's avatar Paulina Nogal Committed by Joe Van Boxtel
Browse files

Create Web Components header, and Material navigation

parent a9fb5895
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1991 additions and 1889 deletions
angular.json
+ 8
− 1
View file @ 74b5bbe5
......@@ -26,7 +26,14 @@
"src/assets/material-theme.scss",
"src/styles.css"
],
"scripts": []
"scripts": [
"./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
"./node_modules/@myuw-web-components/myuw-app-styles/dist/myuw-app-styles.min.js",
"./node_modules/@myuw-web-components/myuw-app-bar/dist/myuw-app-bar.min.js",
"./node_modules/@myuw-web-components/myuw-drawer/dist/myuw-drawer.min.js",
"./node_modules/@myuw-web-components/myuw-profile/dist/myuw-profile.min.js",
"./node_modules/@myuw-web-components/myuw-help/dist/myuw-help.min.js"
]
},
"configurations": {
"production": {
......
package-lock.json
+ 1859
− 1816
View file @ 74b5bbe5
This diff is collapsed.
src/app/app.component.html
+ 49
− 19
View file @ 74b5bbe5
<a class="uw-show-on-focus" href="#main" id="uw-skip-link">Skip to main content</a>
<div class="uw-global-bar">
<a class="uw-global-name-link" href="http://www.wisc.edu">U<span>niversity <span class="uw-of">of</span> </span>W<span>isconsin</span>–Madison</a>
</div>
<header id="branding" class="uw-header uw-has-search">
<div class="uw-header-container">
<div class="uw-header-crest-title">
<div class="uw-header-crest">
<!-- <a href="http://www.wisc.edu"><img class="uw-crest-svg" src="assets/uwstyle/images/uw-crest.svg" alt="Link to University of Wisconsin-Madison home page"></a> -->
</div>
<div class="uw-title-tagline">
<h1 id="site-title" class="uw-site-title">
<a rel="home">Angular Starter</a>
</h1>
<div id="site-description" class="uw-site-tagline">UW-Madison App</div>
</div>
</div>
</div>
</header>
<myuw-app-bar
theme-name=""
app-name="Course Search & Enroll"
app-url="https://my.wisc.edu">
<myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm>
<myuw-drawer-link
slot="myuw-drawer-links"
name="Course Search"
icon=""
href="/search">
</myuw-drawer-link>
<myuw-drawer-link
slot="myuw-drawer-links"
name="Scheduler"
icon=""
href="/scheduler">
</myuw-drawer-link>
<myuw-drawer-link
slot="myuw-drawer-links"
name="Enrollment"
icon=""
href="/enrollment">
</myuw-drawer-link>
<myuw-drawer-link
slot="myuw-drawer-links"
name="Degree Planner"
icon=""
href="/degree-planner">
</myuw-drawer-link>
</myuw-drawer>
<myuw-help
slot="myuw-help"
myuw-help-title="Need more help?"
show-button
show-default-content>
</myuw-help>
<myuw-profile
slot="myuw-profile"
session-endpoint=""
login-url=""
logout-url="http://login.wisc.edu/logout"
background-color="#9B0000">
</myuw-profile>
</myuw-app-bar>
<app-navigation></app-navigation>
<main class="uw-row">
<div class="uw-col">
......
src/app/app.component.ts
+ 11
− 0
View file @ 74b5bbe5
......@@ -8,3 +8,14 @@ import { Component } from '@angular/core';
export class AppComponent {
title = 'app';
}
document.addEventListener('WebComponentsReady', function() {
let customEvent = new CustomEvent('myuw-login', {
detail: {
person: {
'firstName': 'Bucky'
}
}
});
document.dispatchEvent(customEvent);
});
src/app/app.module.ts
+ 5
− 2
View file @ 74b5bbe5
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
......@@ -10,6 +11,7 @@ import { SharedModule } from './shared/shared.module';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
CoreModule,
SharedModule
......@@ -19,6 +21,7 @@ import { SharedModule } from './shared/shared.module';
HomeComponent
],
providers: [],
bootstrap: [ AppComponent ]
bootstrap: [ AppComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
src/app/app.routing.module.ts
+ 1
− 1
View file @ 74b5bbe5
......@@ -5,7 +5,7 @@ import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent }
{ path: 'degree-planner', component: HomeComponent }
];
@NgModule({
......
src/app/core/navigation/navigation.component.html
+ 8
− 26
View file @ 74b5bbe5
<div id="uw-top-menus" class="uw-is-visible uw-horizontal" aria-hidden="false">
<div class="uw-main-nav">
<nav class="uw-nav-menu uw-nav-menu-reverse" aria-label="Main Menu">
<ul id="uw-main-nav" class="">
<li id="menu-item-1" class="home" routerLinkActive="current-menu-item" routerLinkActiveOptions="{exact: true}">
<a routerLink="" aria-current="page">Home</a>
</li>
<li id="menu-item-2" class="reports uw-dropdown" routerLinkActive="current-menu-item" [class.uw-is-active]="current" (click)="current = !current">
<a aria-current="page">Another
<svg class="uw-caret" viewBox="0 0 1792 1792" version="1.1" role="img" aria-labelledby="dynid59778804aac5c7.10843053">
<title id="dynid59778804aac5c7.10843053">Expand</title>
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg>
<svg class="uw-caret" viewBox="0 0 1792 1792" version="1.1" role="img" aria-labelledby="dynid59778804aaf5e4.27123023">
<title id="dynid59778804aaf5e4.27123023">Collapse</title>
<path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"></path>
</svg>
</a>
<ul class="sub-menu menu uw-vertical">
<li><a href="/">Sub-Menu</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<nav mat-tab-nav-bar fxHide fxShow.gt-sm>
<a mat-tab-link href="https://enroll.wisc.edu/search" routerLinkActive="active">Search</a>
<a mat-tab-link href="https://enroll.wisc.edu/scheduler" routerLinkActive="active">Scheduler</a>
<a mat-tab-link href="https://enroll.wisc.edu/my-courses" routerLinkActive="active">Enrollment</a>
<a mat-tab-link routerLink="/degree-planner" routerLinkActive="active" >Degree Planner</a>
</nav>
<router-outlet></router-outlet>
src/app/core/navigation/navigation.component.scss
+ 15
− 1
View file @ 74b5bbe5
@import '~@angular/material/theming';
@import '~src/assets/material-theme.scss';
.uw-nav-menu .uw-nav-menu-reverse a, .uw-nav-menu .uw-dropdown a {
cursor: pointer;
}
\ No newline at end of file
}
.mat-tab-nav-bar {
background-color: #DADFE1;
.mat-tab-link {
opacity: 1;
min-width: auto;
}
.mat-tab-link.active {
border-bottom: 2px solid map-get($uw-primary, 500);
}
}
src/app/home/home.component.html
+ 0
− 1
View file @ 74b5bbe5
<p>
home works!
<button mat-raised-button color="primary">Primary</button>
</p>
src/app/shared/shared.module.ts
+ 5
− 2
View file @ 74b5bbe5
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule, MatMenuModule, MatIconModule } from '@angular/material';
import { MatButtonModule, MatMenuModule, MatIconModule, MatTabsModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
const modules = [
CommonModule,
......@@ -9,7 +10,9 @@ const modules = [
ReactiveFormsModule,
MatButtonModule,
MatMenuModule,
MatIconModule
MatIconModule,
MatTabsModule,
FlexLayoutModule
];
@NgModule({
......
src/index.html
+ 18
− 18
View file @ 74b5bbe5
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Starter</title>
<base href="/">
<head>
<meta charset="utf-8">
<title>Angular Starter</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
</head>
<body>
<app-root></app-root>
</body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
src/styles.css
+ 3
− 0
View file @ 74b5bbe5
/* You can add global styles to this file, and also import other style files */
body {
margin: 0px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment