Skip to content

Commit

Permalink
Responsive nav bar
Browse files Browse the repository at this point in the history
  • Loading branch information
alopezo committed Feb 20, 2024
1 parent 58e9570 commit 2fbc590
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 47 deletions.
4 changes: 2 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
gtag('config', 'G-7SK998GPMX', { 'page_path': '/home' });
}
</script>
<style>*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles.b50e63b31057d3aa.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.b50e63b31057d3aa.css"></noscript></head>
<style>*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles.9cc7c15e6c247577.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9cc7c15e6c247577.css"></noscript></head>
<body class="mat-typography">
<app-root></app-root>
<script src="runtime.c2d2548033d65b02.js" type="module"></script><script src="polyfills.75186c7b7fc1d123.js" type="module"></script><script src="scripts.a1e2309b4257c7b3.js" defer></script><script src="main.56d2a520a51ebae6.js" type="module"></script>
<script src="runtime.c2d2548033d65b02.js" type="module"></script><script src="polyfills.75186c7b7fc1d123.js" type="module"></script><script src="scripts.a1e2309b4257c7b3.js" defer></script><script src="main.142e841a86f4b18a.js" type="module"></script>

</body></html>
1 change: 1 addition & 0 deletions docs/main.142e841a86f4b18a.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/main.56d2a520a51ebae6.js

This file was deleted.

Large diffs are not rendered by default.

28 changes: 22 additions & 6 deletions src/app/app.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ button {
font-size: medium;
}

.bar-button {
margin-left: 15px;
}

#title {
margin-left: 15px;
font-size: 1.4rem;
Expand All @@ -19,10 +23,6 @@ button {
flex: 1 1 auto;
}

button {
margin-left: 15px;
}

a {
margin-left: 15px;
}
Expand All @@ -41,9 +41,25 @@ a {
padding: 10px;
}

#menu-button {
display: none;
}

@media (max-width: 768px) {

.mat-toolbar {
overflow: hidden;
#title {
font-size: 0.9rem;
}
}

@media (max-width: 1200px) {

.bar-button {
display: none;
}

#menu-button {
display: block;
}

}
116 changes: 80 additions & 36 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,84 @@
<mat-toolbar>
<img src="assets/img/small_logo.png" class="h-16">
<span id="title">SNOMED CT Implementation Demos</span>
<span class="example-spacer"></span>
<mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer mode="side" class="example-sidenav">
<div class="flex flex-col justify-center">
<button mat-button [matMenuTriggerFor]="demosMenuN">Select Demonstrator</button>
<mat-menu #demosMenuN="matMenu" class="wide-menu">
<button mat-menu-item (click)="navigate('/allergies')">Allergies CRG</button>
<button mat-menu-item (click)="navigate('/sandbox')">Terminology Bindings Sandbox</button>
<!-- <button mat-menu-item (click)="navigate('/prescription')">Prescription Demo</button> -->
<button mat-menu-item (click)="navigate('/questionnaires')">SNOMED & FHIR Questionnaires</button>
<button mat-menu-item (click)="navigate('/context')">Context Representation</button>
<button mat-menu-item (click)="navigate('/snoguess')">Playground</button>
</mat-menu>

<button mat-flat-button color="accent" [matMenuTriggerFor]="demosMenu">Select Demonstrator</button>
<mat-menu #demosMenu="matMenu" class="wide-menu">
<button mat-menu-item (click)="navigate('/allergies')">Allergies CRG</button>
<button mat-menu-item (click)="navigate('/sandbox')">Terminology Bindings Sandbox</button>
<!-- <button mat-menu-item (click)="navigate('/prescription')">Prescription Demo</button> -->
<button mat-menu-item (click)="navigate('/questionnaires')">SNOMED & FHIR Questionnaires</button>
<button mat-menu-item (click)="navigate('/context')">Context Representation</button>
<button mat-menu-item (click)="navigate('/snoguess')">Playground</button>
</mat-menu>

<button mat-flat-button color="primary" [matMenuTriggerFor]="serverMenu">FHIR Server: {{selectedServer.name}}</button>
<mat-menu #serverMenu="matMenu">
<button mat-menu-item *ngFor="let server of fhirServers" (click)="setFhirServer(server)">{{server.name}}</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="serverMenuN">FHIR Server: {{selectedServer.name}}</button>
<mat-menu #serverMenuN="matMenu">
<button mat-menu-item *ngFor="let server of fhirServers" (click)="setFhirServer(server)">{{server.name}}</button>
</mat-menu>

<button mat-flat-button color="primary" [matMenuTriggerFor]="editionsMenu">{{selectedEdition}}</button>
<mat-menu #editionsMenu="matMenu" class="wide-menu">
<ng-container *ngFor="let mainItem of editionsDetails">
<button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem.editionName }}</button>
<mat-menu #sub_menu="matMenu">
<button *ngFor="let subItem of mainItem.editions" mat-menu-item (click)="setEdition(subItem)">{{ subItem.resource.version }}</button>
<button mat-button [matMenuTriggerFor]="editionsMenuN">Edition: {{selectedEdition}}</button>
<mat-menu #editionsMenuN="matMenu" class="wide-menu">
<span class="ml-4">Editions</span>
<ng-container *ngFor="let mainItem of editionsDetails">
<button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem.editionName }}</button>
<mat-menu #sub_menu="matMenu">
<span class="ml-4">Versions / Releases</span>
<button *ngFor="let subItem of mainItem.editions" mat-menu-item (click)="setEdition(subItem)">{{ subItem.resource.version }}</button>
</mat-menu>
</ng-container>
</mat-menu>
</ng-container>
</mat-menu>

<button mat-flat-button color="primary" [matMenuTriggerFor]="menu">{{selectedLanguage}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{language}}</button>
</mat-menu>

<button mat-button [matMenuTriggerFor]="menuN">Language: {{selectedLanguage}}</button>
<mat-menu #menuN="matMenu">
<button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{language}}</button>
</mat-menu>

</div>
</mat-drawer>

<mat-toolbar>
<button mat-icon-button (click)="drawer.toggle()" id="menu-button">
<mat-icon>menu</mat-icon>
</button>
<img src="assets/img/small_logo.png" class="h-16">
<span id="title">SNOMED CT Implementation Demos</span>
<span class="example-spacer"></span>

<button mat-flat-button color="accent" [matMenuTriggerFor]="demosMenu" class="bar-button">Select Demonstrator</button>
<mat-menu #demosMenu="matMenu" class="wide-menu">
<button mat-menu-item (click)="navigate('/allergies')">Allergies CRG</button>
<button mat-menu-item (click)="navigate('/sandbox')">Terminology Bindings Sandbox</button>
<!-- <button mat-menu-item (click)="navigate('/prescription')">Prescription Demo</button> -->
<button mat-menu-item (click)="navigate('/questionnaires')">SNOMED & FHIR Questionnaires</button>
<button mat-menu-item (click)="navigate('/context')">Context Representation</button>
<button mat-menu-item (click)="navigate('/snoguess')">Playground</button>
</mat-menu>

<button mat-flat-button color="primary" [matMenuTriggerFor]="serverMenu" class="bar-button">FHIR Server: {{selectedServer.name}}</button>
<mat-menu #serverMenu="matMenu">
<button mat-menu-item *ngFor="let server of fhirServers" (click)="setFhirServer(server)">{{server.name}}</button>
</mat-menu>

<button mat-flat-button color="primary" [matMenuTriggerFor]="editionsMenu" class="bar-button">{{selectedEdition}}</button>
<mat-menu #editionsMenu="matMenu" class="wide-menu">
<span class="ml-4">Editions</span>
<ng-container *ngFor="let mainItem of editionsDetails">
<button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem.editionName }}</button>
<mat-menu #sub_menu="matMenu">
<span class="ml-4">Versions / Releases</span>
<button *ngFor="let subItem of mainItem.editions" mat-menu-item (click)="setEdition(subItem)">{{ subItem.resource.version }}</button>
</mat-menu>
</ng-container>
</mat-menu>

<button mat-flat-button color="primary" [matMenuTriggerFor]="menu" class="bar-button">{{selectedLanguage}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{language}}</button>
</mat-menu>

<a mat-flat-button href="https://github.com/IHTSDO/sct-implementation-demonstrator" target="_blank" color="primary">
<mat-icon>info</mat-icon>
</a>
</mat-toolbar>
<router-outlet></router-outlet>
<a mat-flat-button href="https://github.com/IHTSDO/sct-implementation-demonstrator" target="_blank" color="primary">
<mat-icon>info</mat-icon>
</a>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-drawer-container>
4 changes: 3 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {MatDialogModule} from '@angular/material/dialog';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatListModule} from '@angular/material/list';
import {MatSortModule} from '@angular/material/sort';
import {MatSidenavModule} from '@angular/material/sidenav';

import { HttpClientModule } from '@angular/common/http';
import { LoadingDialogComponent } from './alerts/loading-dialog.component';
Expand Down Expand Up @@ -123,7 +124,8 @@ import { ContextMainComponent } from './context/context-main/context-main.compon
MatCheckboxModule,
MatListModule,
MatSortModule,
FormsModule
FormsModule,
MatSidenavModule
],
providers: [],
bootstrap: [AppComponent],
Expand Down

0 comments on commit 2fbc590

Please sign in to comment.