fix(docs-infra): styling fix on error pages (#42627)

Add Center Aligment for heading texts and additional styles on 404 (not found) related pages

PR Close #42627
This commit is contained in:
codebriefcase 2021-06-23 09:21:58 +05:30 committed by Jessica Janiuk
parent 4bea630baa
commit 1142b51462
4 changed files with 8 additions and 5 deletions

View File

@ -1,7 +1,7 @@
<div class="center-layout-wide"> <div class="center-layout-wide">
<div class="nf-container l-flex-wrap flex-center"> <div class="nf-container l-flex-wrap flex-center">
<img src="assets/images/support/angular-404.svg" width="300" height="300"/> <img src="assets/images/support/angular-404.svg" width="300" height="300"/>
<div class="nf-response l-flex-wrap"> <div class="nf-response l-flex-wrap center">
<h1 class="no-anchor no-toc">Page Not Found</h1> <h1 class="no-anchor no-toc">Page Not Found</h1>
<p>We're sorry. The page you are looking for cannot be found.</p> <p>We're sorry. The page you are looking for cannot be found.</p>
</div> </div>

View File

@ -28,7 +28,7 @@
<div class="content"> <div class="content">
<div class="nf-container l-flex-wrap flex-center"> <div class="nf-container l-flex-wrap flex-center">
<img src="assets/images/support/angular-404.svg" width="300" height="300" /> <img src="assets/images/support/angular-404.svg" width="300" height="300" />
<div class="nf-response l-flex-wrap"> <div class="nf-response l-flex-wrap center">
<h1 class="no-toc" id="page-not-found">Resource Not Found</h1> <h1 class="no-toc" id="page-not-found">Resource Not Found</h1>
<p>We're sorry. The resource you are looking for cannot be found.</p> <p>We're sorry. The resource you are looking for cannot be found.</p>
</div> </div>

View File

@ -8,7 +8,9 @@ import { SearchService } from 'app/search/search.service';
@Component({ @Component({
selector: 'aio-file-not-found-search', selector: 'aio-file-not-found-search',
template: template:
`<p>Let's see if any of these search results help...</p> `<div class="alert is-helpful">
<p>Let's see if any of these search results help...</p>
</div>
<aio-search-results class="embedded" [searchResults]="searchResults | async"></aio-search-results>` <aio-search-results class="embedded" [searchResults]="searchResults | async"></aio-search-results>`
}) })
export class FileNotFoundSearchComponent implements OnInit { export class FileNotFoundSearchComponent implements OnInit {

View File

@ -18,10 +18,11 @@ export const DOC_CONTENT_URL_PREFIX = CONTENT_URL_PREFIX + 'docs/';
const FETCHING_ERROR_CONTENTS = (path: string) => ` const FETCHING_ERROR_CONTENTS = (path: string) => `
<div class="nf-container l-flex-wrap flex-center"> <div class="nf-container l-flex-wrap flex-center">
<div class="nf-icon material-icons">error_outline</div> <div class="nf-icon material-icons">error_outline</div>
<div class="nf-response l-flex-wrap"> <div class="nf-response l-flex-wrap center">
<h1 class="no-toc">Request for document failed.</h1> <h1 class="no-toc">Request for document failed</h1>
<p> <p>
We are unable to retrieve the "${path}" page at this time. We are unable to retrieve the "${path}" page at this time.
<br/>
Please check your connection and try again later. Please check your connection and try again later.
</p> </p>
</div> </div>