chore: small visual improvements

telerik · Sep 24, 2024 · d1bf953 · d1bf953
1 parent ef57282
commit d1bf953
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 34 deletions.
diff --git a/examples-standalone/coffee-warehouse/src/app/components/info-badge/info-badge.component.html b/examples-standalone/coffee-warehouse/src/app/components/info-badge/info-badge.component.html
@@ -1,7 +1,7 @@
 <kendo-badge
     size="small"
     [align]="badgeAlign"
-    themeColor="info"
+    themeColor="primary"
     rounded="full"
 >
     <kendo-svgicon

diff --git a/examples-standalone/coffee-warehouse/src/app/components/info/info.component.html b/examples-standalone/coffee-warehouse/src/app/components/info/info.component.html
@@ -4,22 +4,21 @@
             <h1>Kendo UI for Angular</h1>
             <h2>Build Professional-Grade Angular UI</h2>
             <p>Progress is the leading provider of application development and digital experience technologies. Telerik and Kendo UI are part of Progress product portfolio.</p>
-                <p>Kendo UI for Angular delivers Kendo UI components natively developed from the ground up and intended for the Angular framework.</p>
-
+            <p>Kendo UI for Angular delivers Kendo UI components natively developed from the ground up and intended for the Angular framework.</p>
+            <h2> Angular Accessibility Overview </h2>
+            <p>Websites and applications are accessible when they provide full control over their features by enabling users with disabilities to access their content through assistive technologies or keyboard navigation.
+            Accessibility consists of the following aspects: </p>
+            <ul> 
+                <li><a target="_blank" href="https://www.telerik.com/kendo-angular-ui/components/accessibility/wcag-section508-wai-aria">WCAG, Section 508, and WAI-ARIA Standards</a></li>
+                <li><a target="_blank" href="https://www.telerik.com/kendo-angular-ui/components/accessibility/accessibility-compliance">Keyboard Navigation</a></li>
+                <li><a target="_blank" href="https://www.telerik.com/kendo-angular-ui/components/globalization/globalization-support">Globalization</a></li>
+            </ul>
         <div class="section-2">
-            <video id="video" width="1040" controls [autoplay]="!pauseAnimation">
+            <video id="video" width="1040" controls autoplay>
                 <source src="./../assets/Progress_Who_We_Are.mp4" type="video/mp4">
             </video>
 
 
-               <h2> Angular Accessibility Overview </h2>
-<p>Websites and applications are accessible when they provide full control over their features by enabling users with disabilities to access their content through assistive technologies or keyboard navigation.
-Accessibility consists of the following aspects: </p>
-<ul> 
-    <li><a target="_blank" href="https://www.telerik.com/kendo-angular-ui/components/accessibility/wcag-section508-wai-aria">WCAG, Section 508, and WAI-ARIA Standards</a></li>
-    <li><a target="_blank" href="https://www.telerik.com/kendo-angular-ui/components/accessibility/accessibility-compliance">Keyboard Navigation</a></li>
-    <li><a target="_blank" href="https://www.telerik.com/kendo-angular-ui/components/globalization/globalization-support">Globalization</a></li>
-</ul>
 
 <h2>Accessibility Compliance</h2>
 <p>The accessibility support available for the Kendo UI for Angular components is based on a set of approaches for adhering to and implementing the established standards and technical specifications ensuring the seamless experience of users with disabilities.</p>

diff --git a/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
@@ -10,7 +10,7 @@
         [size]="'large'"
         placeholder="Write or select type of disability">
         <ng-template kendoSuffixTemplate>
-            <button kendoButton fillMode="flat" (click)="activateSpeech()" [svgIcon]="microphoneIcon"></button>
+            <button kendoButton fillMode="flat" size="large" (click)="activateSpeech()" [svgIcon]="microphoneIcon"></button>
         </ng-template>
     </kendo-combobox>
     <kendo-info-badge *ngIf="comboboxValue"></kendo-info-badge>
@@ -22,26 +22,26 @@
             <kendo-label text="Text size:"></kendo-label>
             <kendo-numeric-textbox-buttons 
                 [showBadge]="getSetting('fontSize') !== 16" 
-                [step]="4"
-                (valueChange)="settingChange({'fontSize': $event})" [value]="getSetting('fontSize')" format="# PX"></kendo-numeric-textbox-buttons>
+                [step]="2"
+                (valueChange)="settingChange({'fontSize': $event})" [value]="getSetting('fontSize')" format="# px"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
         <kendo-formfield>
             <kendo-label text="Color theme:"></kendo-label>
-            <kendo-badge-container>
+            <kendo-badge-container class="k-w-full">
                 <kendo-buttongroup selection="single" width="100%">
-                    <button kendoButton size="large" [svgIcon]="contrastIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'contrast' ? 'defaultTheme' : 'contrast'})" [selected]="getSetting('colorTheme') === 'contrast'">Contrast</button>
-                    <button kendoButton size="large" [svgIcon]="darkModeIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'dark' ? 'defaultTheme' : 'dark'})" [selected]="getSetting('colorTheme') === 'dark'">Dark</button>
+                    <button class="k-w-half" kendoButton size="large" [svgIcon]="contrastIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'contrast' ? 'defaultTheme' : 'contrast'})" [selected]="getSetting('colorTheme') === 'contrast'">Contrast</button>
+                    <button class="k-w-half" kendoButton size="large" [svgIcon]="darkModeIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'dark' ? 'defaultTheme' : 'dark'})" [selected]="getSetting('colorTheme') === 'dark'">Dark</button>
                 </kendo-buttongroup>
                 <kendo-info-badge *ngIf="getSetting('colorTheme') === 'dark' || getSetting('colorTheme') === 'contrast'"></kendo-info-badge>
             </kendo-badge-container>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Font:"></kendo-label>
-            <kendo-badge-container>
+            <kendo-badge-container class="k-w-full">
                 <kendo-buttongroup selection="single" width="100%">
-                    <button kendoButton [svgIcon]="fontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'legible' ? 'defaultFont' : 'legible'})" [selected]="getSetting('fontFamily') === 'legible'">Legible Font</button>
-                    <button kendoButton [svgIcon]="dyslexiaFontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'dyslexia' ? 'defaultFont' : 'dyslexia'})" [selected]="getSetting('fontFamily') === 'dyslexia'">Dyslexia Font</button>
+                    <button class="k-w-half" kendoButton [svgIcon]="fontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'legible' ? 'defaultFont' : 'legible'})" [selected]="getSetting('fontFamily') === 'legible'">Legible</button>
+                    <button class="k-w-half" kendoButton [svgIcon]="dyslexiaFontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'dyslexia' ? 'defaultFont' : 'dyslexia'})" [selected]="getSetting('fontFamily') === 'dyslexia'">Dyslexia</button>
                 </kendo-buttongroup>
                 <kendo-info-badge *ngIf="getSetting('fontFamily') === 'legible' || getSetting('fontFamily') === 'dyslexia'"></kendo-info-badge>
             </kendo-badge-container>
@@ -51,30 +51,30 @@
             <kendo-label text="Common:"></kendo-label>
             <div class="buttons-wrapper">
                 <kendo-badge-container>
-                    <button kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange({'underlineLinks': $event})" [selected]="getSetting('underlineLinks')">Underiline Links</button>
+                    <button class="k-w-full" kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange({'underlineLinks': $event})" [selected]="getSetting('underlineLinks')">Underiline Links</button>
                     <kendo-info-badge *ngIf="getSetting('underlineLinks')"></kendo-info-badge>
                 </kendo-badge-container>
                 <kendo-badge-container>
-                    <button kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange({'pauseAnimations': $event})" [selected]="getSetting('pauseAnimations')">Pause Animation</button>
+                    <button class="k-w-full" kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange({'pauseAnimations': $event})" [selected]="getSetting('pauseAnimations')">Pause Animation</button>
                     <kendo-info-badge *ngIf="getSetting('pauseAnimations')"></kendo-info-badge>
                 </kendo-badge-container>
-                <button kendoButton size="large" [svgIcon]="resizeIcon" [toggleable]="true" (selectedChange)="settingChange({'lgSizeWidgets': $event})" [selected]="getSetting('lgSizeWidgets')">Large Size Widgets</button>
+                <button  class="k-w-full" kendoButton size="large" [svgIcon]="resizeIcon" [toggleable]="true" (selectedChange)="settingChange({'lgSizeWidgets': $event})" [selected]="getSetting('lgSizeWidgets')">Large Widgets</button>
             </div>
         </div>
 
         <kendo-formfield>
             <kendo-label text="Line Height:"></kendo-label>
             <kendo-numeric-textbox-buttons 
                 [step]="0.1" [decimals]="1" 
-                [showBadge]="getSetting('lineHeight') !== 1" 
+                [showBadge]="getSetting('lineHeight') !== 1.2" 
                 [min]="0" (valueChange)="settingChange({'lineHeight': $event})" 
-                format="#.# EM"
+                format="#.# em"
                 [value]="getSetting('lineHeight')"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Letter Spacing:"></kendo-label>
-            <kendo-numeric-textbox-buttons format="# PX" [min]="0" [showBadge]="getSetting('letterSpacing') !== 0" (valueChange)="settingChange({'letterSpacing': $event})" [value]="getSetting('letterSpacing')"></kendo-numeric-textbox-buttons>
+            <kendo-numeric-textbox-buttons format="# px" [min]="0" [showBadge]="getSetting('letterSpacing') !== 0" (valueChange)="settingChange({'letterSpacing': $event})" [value]="getSetting('letterSpacing')"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
 
         <kendo-formfield>

diff --git a/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts b/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts
@@ -13,7 +13,7 @@ import { IWindow } from '../../models/window.model';
     templateUrl: './settings-list.component.html'
 })
 export class SettingsListComponent {
-    public settingsExpanded = true;
+    public settingsExpanded = false;
     public settings: any;
     public comboboxValue = null;
 

diff --git a/examples-standalone/coffee-warehouse/src/app/header/header.component.html b/examples-standalone/coffee-warehouse/src/app/header/header.component.html
@@ -17,7 +17,7 @@
 <kendo-appbar [themeColor]="'inherit'">
     <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-gap-2">
         <a href="#" class="k-d-inline-flex k-color-on-app-surface">
-            <h1>Coffee warehouse</h1>
+            <h1>Coffee Warehouse</h1>
         </a>
     </kendo-appbar-section>
     <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-center">

diff --git a/examples-standalone/coffee-warehouse/src/app/settings.service.ts b/examples-standalone/coffee-warehouse/src/app/settings.service.ts
@@ -15,7 +15,7 @@ export class SettingsService {
         underlineLinks: false,
         pauseAnimations: false,
         lgSizeWidgets: false,
-        lineHeight: 1,
+        lineHeight: 1.2,
         letterSpacing: 0
     };
 
@@ -41,7 +41,7 @@ export class SettingsService {
             underlineLinks: false,
             pauseAnimations: false,
             lgSizeWidgets: false,
-            lineHeight: 1,
+            lineHeight: 1.2,
             letterSpacing: 0
         }
 

diff --git a/examples-standalone/coffee-warehouse/src/styles/_common.scss b/examples-standalone/coffee-warehouse/src/styles/_common.scss
@@ -21,6 +21,11 @@ a {
     text-decoration: none;
 }
 
+//Remove watermark
+div[kendowatermarkoverlay] {
+    display: none !important;
+}
+
 // App styles
 .k-drawer-container {
     background-color: $background-color;
@@ -465,7 +470,7 @@ a {
     h3
     {
         font-family: var(--kendo-font-family, inherit);
-        margin-top: 3rem;
+        margin-top: 2rem;
     }
     .component-link {
         font-size: var(--kendo-font-size, inherit);
@@ -501,15 +506,15 @@ a {
     }
 
     .section-1 {
-        text-align: center;
+
         h1 {
             font-size: 48px;
             font-weight: bold;
         }
 
         h2 {
             font-size: 30px;
-            margin-bottom: 53px;
+            margin-bottom: 1rem;
         }
 
         .button-group {

diff --git a/examples-standalone/coffee-warehouse/src/styles/main.scss b/examples-standalone/coffee-warehouse/src/styles/main.scss
@@ -163,6 +163,7 @@ kendo-recurrence-frequency-editor .k-edit-field {
     border-style: solid;
     --kendo-border-radius-md: var(--kendo-border-radius-lg);
     --kendo-color-border: var(--kendo-color-inverse);
+    max-height: calc(100% - 100px);
 }
 
 .settings-panel .k-expander {