Skip to content

Commit

Permalink
feat!: new browser support (#6818)
Browse files Browse the repository at this point in the history
  • Loading branch information
nsbarsukov authored Feb 19, 2024
1 parent 96e2fed commit fbd229d
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 70 deletions.
33 changes: 26 additions & 7 deletions projects/demo/src/modules/info/browsers/browsers.component.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,32 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {NgFor, NgIf} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiDocPageModule} from '@taiga-ui/addon-doc';

@Component({
standalone: true,
selector: 'browsers',
imports: [TuiDocPageModule],
selector: 'browser-support',
imports: [TuiDocPageModule, NgFor, NgIf],
templateUrl: './browsers.template.html',
styleUrls: ['./browsers.style.less'],
changeDetection,
styles: ['td {width: 18.75rem}'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class BrowsersComponent {}
export default class BrowserSupportComponent {
readonly desktopBrowsers = [
{name: 'Google Chrome', version: '88+'},
{name: 'Mozilla Firefox', version: '120+'},
{name: 'Safari', version: '13.1+'},
{name: 'Opera', version: '74+'},
{name: 'Edge', version: '88+'},
{name: 'Yandex Browser', version: '21.2+'},
{name: 'Microsoft Internet Explorer', version: null},
] as const;

readonly mobileBrowsers = [
{name: 'Google Chrome', version: '88+'},
{name: 'Mozilla Firefox', version: '120+'},
{name: 'Safari', version: '13.4+'},
{name: 'Opera', version: '63+'},
{name: 'Samsung Mobile', version: '15+'},
{name: 'Yandex Browser', version: '21.2+'},
];
}
7 changes: 0 additions & 7 deletions projects/demo/src/modules/info/browsers/browsers.style.less

This file was deleted.

74 changes: 18 additions & 56 deletions projects/demo/src/modules/info/browsers/browsers.template.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,15 @@ <h2 class="tui-text_h4 tui-space_top-0 tui-space_bottom-3">Desktop</h2>
<th class="tui-table__th">Browser</th>
<th class="tui-table__th">Version</th>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td cell">Google Chrome</td>
<td class="tui-table__td">74+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Yandex.Browser</td>
<td class="tui-table__td">19+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Safari</td>
<td class="tui-table__td">12.1+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Mozilla Firefox</td>
<td class="tui-table__td">55+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Opera</td>
<td class="tui-table__td">62+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Edge (Chromium)</td>
<td class="tui-table__td">80+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Microsoft Internet Explorer</td>
<td class="tui-table__td">
<strong>Not supported</strong>
</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Edge (EdgeHTML)</td>
<tr
*ngFor="let browser of desktopBrowsers"
class="tui-table__tr"
>
<td class="tui-table__td">{{ browser.name }}</td>
<td class="tui-table__td">
<strong>Not supported</strong>
<ng-container *ngIf="browser.version; else notSupported">
{{ browser.version }}
</ng-container>
</td>
</tr>
</tbody>
Expand All @@ -51,30 +26,17 @@ <h2 class="tui-text_h4 tui-space_top-6 tui-space_bottom-3">Mobile</h2>
<th class="tui-table__th">Browser</th>
<th class="tui-table__th">Version</th>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td cell">Google Chrome</td>
<td class="tui-table__td">90+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Safari</td>
<td class="tui-table__td">12.2+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Yandex.Browser</td>
<td class="tui-table__td">19+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Mozilla Firefox</td>
<td class="tui-table__td">99+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">Opera Mobile</td>
<td class="tui-table__td">64+</td>
</tr>
<tr class="tui-table__tr">
<td class="tui-table__td">UC Browser</td>
<td class="tui-table__td">13.4+</td>
<tr
*ngFor="let browser of mobileBrowsers"
class="tui-table__tr"
>
<td class="tui-table__td">{{ browser.name }}</td>
<td class="tui-table__td">{{ browser.version }}</td>
</tr>
</tbody>
</table>
</tui-doc-page>

<ng-template #notSupported>
<strong>Not supported</strong>
</ng-template>

0 comments on commit fbd229d

Please sign in to comment.