Attempt to improve gui design

README.md

@@ -110,6 +110,9 @@ License
 This is free software under a 2-clause BSD license. The full text of the license can
 be found in the [LICENSE](LICENSE) file included in this respository.
 
+Images `src/assets/images/person_looking_at_computer.svg` and `src/assets/images/world_connected.svg`
+are taken from <https://undraw.co>, [full license](https://undraw.co/license).
+
 
 [Backend Configuration]:            https://github.com/zonemaster/zonemaster/blob/master/docs/public/configuration/backend.md
 [GUI Configuration]:                https://github.com/zonemaster/zonemaster/blob/master/docs/public/configuration/gui.md

src/app/app.component.css

@@ -3,3 +3,7 @@ app-root {
     display: flex;
     flex-direction: column;
 }
+
+main {
+    flex-grow: 1;
+}

src/app/app.component.html

@@ -1,13 +1,7 @@
 <app-navigation></app-navigation>
+<app-message-banner></app-message-banner>
 <app-alert></app-alert>
-<main>
+<main class="container">
   <router-outlet></router-outlet>
 </main>
 <app-footer></app-footer>
-
-
-
-
-
-
-

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import {ViewEncapsulation} from '@angular/core';
+import { ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -10,6 +10,4 @@ import {ViewEncapsulation} from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
-  title = 'app';
 }
-

src/app/app.module.ts

@@ -17,6 +17,8 @@ import { FormComponent } from './components/form/form.component';
 import { ResultComponent } from './components/result/result.component';
 import { HistoryComponent } from './components/history/history.component';
 import { AlertComponent } from './components/alert/alert.component';
+import { FaqQuestionComponent } from './components/faq-question/faq-question.component';
+import { MessageBannerComponent } from './components/message-banner/message-banner.component';
 
 import { RomanizePipe } from './pipes/romanize.pipe';
 import { SafeHtmlPipe } from './pipes/safe-html.pipe';
@@ -60,7 +62,9 @@ const appRoutes: Routes = [
     ResultComponent,
     HistoryComponent,
     AlertComponent,
-    HeaderComponent
+    HeaderComponent,
+    FaqQuestionComponent,
+    MessageBannerComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/alert/alert.component.css

@@ -1,10 +1,9 @@
 .alert-area {
   z-index: 999;
   position: absolute;
-  margin-top: 80px;
   max-width: inherit;
   width: 100%;
-  padding-top: 20px;
+  padding-top: 1rem;
 }
 
 app-alert {

src/app/components/alert/alert.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="row alert-area" [ngStyle]="{'margin-top': navHeight + 'px'}">
+  <div class="container row alert-area">
     <div *ngFor="let alert of alerts" class="{{ cssClass(alert) }} alert-dismissible" role="alert">
       {{alert.message}}
       <button type="button" class="btn-close" (click)="removeAlert(alert)" i18n-title title="Close" i18n-aria-label aria-label="Close"></button>

src/app/components/alert/alert.component.ts

@@ -1,26 +1,22 @@
-import { Component, OnInit, OnDestroy} from '@angular/core';
-import {ViewEncapsulation} from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { ViewEncapsulation } from '@angular/core';
 
 import { Alert, AlertType } from '../../models/index';
 import { AlertService } from '../../services/alert.service';
-import { NavigationService } from '../../services/navigation.service';
 
 @Component({
   selector: 'app-alert',
   templateUrl: './alert.component.html',
   styleUrls: ['./alert.component.css'],
   encapsulation: ViewEncapsulation.None
 })
-export class AlertComponent implements OnInit, OnDestroy {
+export class AlertComponent implements OnInit {
 
   alerts: Alert[] = [];
   public navHeight: number;
-  private navHeightSubscription: Subscription;
 
   constructor(
     private alertService: AlertService,
-    private navigationService: NavigationService
   ) {
 
   }
@@ -36,14 +32,6 @@ export class AlertComponent implements OnInit, OnDestroy {
 
       setTimeout(() => this.removeAlert(alert), 5000);
     });
-
-    this.navHeightSubscription = this.navigationService.height.subscribe((newHeight: number) => {
-      this.navHeight = newHeight;
-    });
-  }
-
-  ngOnDestroy() {
-    this.navHeightSubscription.unsubscribe();
   }
 
   removeAlert(alert: Alert) {

src/app/components/domain/domain.component.css

@@ -1,7 +1,50 @@
-aside.about article {
+.about article {
     display: flex;
 }
 
-aside.about {
+.about {
     padding: 0;
 }
+
+.about .illustration {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.about #home_illustration1 {
+    background-image: url('assets/images/person_looking_at_computer.svg');
+}
+
+.about #home_illustration2 {
+    background-image: url('assets/images/world_connected.svg');
+}
+
+.about article {
+    display: flex;
+    gap: 2rem;
+}
+
+.about article:not(:last-of-type) {
+    margin-bottom: 4rem;
+}
+
+.about article > * {
+    flex: 1;
+}
+
+@media(max-width:991px) {
+    .about .illustration {
+        flex-basis: 30%;
+    }
+
+    .about .about-content {
+        flex-basis: 70%;
+    }
+}
+
+@media(max-width: 767px) {
+    .about .illustration {
+        display: none;
+    }
+}

src/app/components/domain/domain.component.html

@@ -1,42 +1,49 @@
 <app-header>
-  <app-run-test></app-run-test>
+  <h1 i18n>Check how your domain is doing</h1>
+  <app-run-test>
+    <h2 i18n>Test your domain</h2>
+  </app-run-test>
 </app-header>
-<aside class="container-fluid about">
+<div class="container about">
   <article>
-    <div class="container">
-      <h4 i18n>About Zonemaster</h4>
+    <div class="illustration" id="home_illustration1"></div>
+    <div class="about-content">
+      <h2 i18n>What is Zonemaster?</h2>
+      <h3 i18n>
+        Give your domain name a complete checkup! <strong>Zonemaster helps you assess how your domain
+        name is doing.</strong>
+        </h3>
       <p i18n>
-        Give your domain name a complete checkup! Zonemaster helps you assess how your domain 
-        name is doing. Besides, you can also get a better understanding of how the DNS 
-        (Domain Name System) works. When a domain name is sent to Zonemaster for testing, 
-        the program investigates the state of the domain name (sometimes called 'zone') 
-        from top to bottom of the DNS tree. Specifically, this is usually done by 
-        examining DNS data from the root ('.') to the TLD (Top-Level Domain; e.g., '.net') 
-        for that domain name, and then finally through the DNS servers that contain authoritative 
-        information about the specified domain name (e.g., 'zonemaster.net'). 
-        Zonemaster performs many tests, such as checking DNSSEC signatures, or that different 
-        hosts can be accessed and that IP addresses are valid. This is all to make sure that 
+        When a domain name is sent to Zonemaster for testing,
+        Zonemaster investigates the state of the domain name
+        from the top to the bottom of the DNS tree. This is usually done by
+        examining DNS data from the root, '.', to the Top-Level Domain (TLD)
+        for that domain name, like '.net', and then finally through the DNS servers that contain authoritative
+        information about the specified domain name.
+      </p>
+      <p i18n>
+        <strong>Zonemaster performs many tests</strong>, such as checking DNSSEC signatures, or that different
+        hosts can be accessed and that IP addresses are valid. This is all to make sure that
         your domain name runs as smoothly as possible.
       </p>
     </div>
   </article>
 
-  <article class="pt-2">
-    <div class="container">
-      <h4 i18n>About the DNS</h4>
+  <article>
+    <div class="about-content">
+      <h2 i18n>A word about the DNS</h2>
       <p i18n>
-        Most people who use the Internet have never reflected on what actually happens 
-        when one types an address in their web browser and then clicks the 'Enter' button. 
-        In short, the DNS (Domain Name System) is a database that associates domain names 
-        to IP (Internet Protocol) addresses, the same way a phone book associates names 
-        to phone numbers. An IP address is a unique series of numbers that identifies every 
-        computer that is connected to the Internet. It is similar to the way every telephone 
-        has its own number in the telephone network. Such long series of numbers work fine 
-        for computers, but for people it is way more difficult to memorize. Thus, the DNS has 
-        been developed as an extra layer to map between names that we can remember better and 
-        IP addresses used by computers whenever we want to reach a specific website or use 
-        other services on the Internet (e.g., mail).
+        The Domain Name System (DNS) is a database that associates domain names
+        to Internet Protocol (IP) addresses, the same way a phone book associates names
+        to phone numbers. An IP address is a unique series of numbers that identifies every
+        computer that is connected to the Internet. It is similar to the way every telephone
+        has its own number in the telephone network. Such long series of numbers work fine
+        for computers, but for people it is way more difficult to memorize. Thus, the DNS has
+        been developed as an extra layer to map between names that we can remember better and
+        IP addresses used by computers whenever we want to reach a specific website or use
+        other services on the Internet, like e-mail.
       </p>
     </div>
+    <div class="illustration" id="home_illustration2"></div>
   </article>
-</aside>
+</div>

src/app/components/faq-question/faq-question.component.css

@@ -0,0 +1,17 @@
+.faq-question {
+  margin-bottom: 1rem;
+}
+
+.faq-question h3 {
+  display: inline;
+  font-size: 1.2rem;
+}
+
+.faq-question header {
+  padding: 0;
+}
+
+.faq-question header a {
+  padding: .75em;
+  width: 100%;
+}

src/app/components/faq-question/faq-question.component.html

@@ -0,0 +1,11 @@
+<article class="faq-question" id="{{questionId}}" [class.open]="isOpen" #entry>
+  <header>
+    <a class="nav-link" routerLink="/faq" fragment="{{questionId}}" [attr.aria-controls]="'faq-entry-' + questionId" [attr.aria-expanded]="isOpen" (click)="toggleOpenEntry()">
+      <i class="fa fa-chevron-right control" aria-hidden="true"></i>
+      <h3 #title><ng-content select="[title]"></ng-content></h3>
+    </a>
+  </header>
+  <div class="faq-content" id="faq-entry-{{ questionId }}">
+    <ng-content></ng-content>
+  </div>
+</article>

src/app/components/faq-question/faq-question.component.ts

@@ -0,0 +1,61 @@
+import { Component, Input, AfterViewInit, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import {ViewEncapsulation} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-faq-question',
+  templateUrl: './faq-question.component.html',
+  styleUrls: ['./faq-question.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class FaqQuestionComponent implements AfterViewInit, OnInit, OnDestroy {
+  @Input('questionId') questionId;
+  @ViewChild('entry') entryElement;
+  public isOpen: boolean = false;
+  private fragment: string = null;
+  private fragmentSub: Subscription;
+  private clicked: boolean = false;
+
+  constructor(private router: Router, private route: ActivatedRoute) {
+    this.fragment = this.router.getCurrentNavigation().extractedUrl.fragment;
+    this.fragmentSub = route.fragment.subscribe(this.checkQuestionState.bind(this));
+  }
+
+  ngOnInit() {
+    this.checkQuestionState(this.fragment);
+  }
+
+  ngOnDestroy() {
+    this.fragmentSub.unsubscribe();
+  }
+
+  ngAfterViewInit(){
+    if (this.isOpen) {
+      this.entryElement.nativeElement.scrollIntoView();
+    }
+  }
+
+  private checkQuestionState(newFragment) {
+    if (this.clicked) {
+      this.clicked = false;
+    } else if (newFragment === this.questionId) {
+      this.isOpen = true;
+      if (this.entryElement) {
+        this.entryElement.nativeElement.scrollIntoView();
+      }
+    }
+  }
+
+  public toggleOpenEntry() {
+    if (!this.isOpen) {
+      this.router.navigate(['faq'], { fragment: this.questionId,  state: { scroll: false } });
+    } else {
+      this.router.navigate(['faq']);
+    }
+
+    this.isOpen = !this.isOpen;
+    this.clicked = true;
+  }
+
+}

src/app/components/faq/faq.component.css

@@ -1,8 +1,21 @@
-.faq span[id^=q] {
-  position: relative;
-  top: -90px;
+.faq-header .main h1 {
+  margin-bottom: 2rem;
 }
 
-.faq {
-  overflow-anchor: none;
+.faq-description {
+  max-width: 30rem;
+  text-align: center;
+  margin: auto;
+  font-size: 1.4em;
+}
+
+.faq-contact {
+  max-width: 45rem;
+  text-align: center;
+  margin: auto;
+  margin-top: 1rem;
+}
+
+.faq-category:not(:last-of-type) {
+  margin-bottom: 4rem;
 }