Redesign header, footer, favicon (#196) (#202)

* redesign +header logo +footer logo +favicon (cherry picked from commit db68951)
DevExpress · Nov 7, 2023 · e3ee47f · e3ee47f
1 parent d83f3d5
commit e3ee47f
Show file tree

Hide file tree

Showing 13 changed files with 157 additions and 87 deletions.
diff --git a/src/app/icons/icon-logo/icon-logo.component.css b/src/app/icons/icon-logo/icon-logo.component.css
@@ -0,0 +1,23 @@
+:host {
+    height: min-content;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+:host.blue-colored svg path#top-square {
+    fill: rgb(33, 144, 247);
+}
+
+:host.blue-colored svg path#bottom-square {
+    fill: #667788;
+}
+
+:host.blue-colored svg path#first-letter,
+:host.blue-colored svg path#second-letter {
+    fill: white;
+}
+
+:host.white-colored svg#devextreme-logo path {
+    fill: white;
+}
diff --git a/src/app/icons/icon-logo/icon-logo.component.html b/src/app/icons/icon-logo/icon-logo.component.html
diff --git a/src/app/icons/icon-logo/icon-logo.component.ts b/src/app/icons/icon-logo/icon-logo.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-icon-logo',
-    templateUrl: './icon-logo.component.html'
+    templateUrl: './icon-logo.component.html',
+    styleUrls: ['./icon-logo.component.css']
 })
 export class IconLogoComponent { }
diff --git a/src/app/index/index.component.css b/src/app/index/index.component.css
@@ -4,9 +4,25 @@
     justify-content: center;
 }
 
+@media only screen and (max-width: 700px) {
+    .blocks {
+        flex-direction: column;
+    }
+
+    .blocks .block {
+        width: 100%;
+        flex: 1;
+    }
+}
+
+@media only screen and (min-width: 700px) {
+    .blocks .block {
+        width: 320px;
+    }
+}
+
 .blocks .block {
     align-items: center;
-    width: 320px;
     display: flex;
     flex-direction: column;
     padding: 32px 0;

diff --git a/src/app/layouts/app-layout/app-layout.component.css b/src/app/layouts/app-layout/app-layout.component.css
@@ -51,13 +51,3 @@
     line-height: 125%;
     max-width: 780px;
 }
-
-:host ::ng-deep .footer  {
-    /* display: none; */
-}
-
-@media only screen and (max-width: 768px) {
-    main {
-        border: orange 1px solid;
-    }
-}
diff --git a/src/app/layouts/app-layout/app-layout.component.html b/src/app/layouts/app-layout/app-layout.component.html
@@ -1,5 +1,5 @@
 <app-header [switchEnabled]="themesSwitchEnabled"></app-header>
-<main [@routeAnimation]="getRouteAnimation()" (@routeAnimation.done)="routeAnimationDone()">
+<main class="content-width" [@routeAnimation]="getRouteAnimation()" (@routeAnimation.done)="routeAnimationDone()">
     <router-outlet></router-outlet>
 </main>
 <app-footer></app-footer>

diff --git a/src/app/layouts/footer/footer.component.css b/src/app/layouts/footer/footer.component.css
@@ -18,10 +18,6 @@
     /* z-index: 3; */
 }
 
-:host ::ng-deep .footer svg path {
-    fill: white;
-}
-
 .footer.content-width {
     padding-top: 0;
     padding-bottom: 0;
@@ -38,13 +34,18 @@
     gap: 40px;
 }
 
-.footer-logo {
-    display: flex;
-    gap: 12px;
+.footer-text {
+    margin: 0 0 16px 0;
+    font-size: 12px;
+    line-height: 14px;
 }
 
-.footer-text {
-    margin: 0;
+.footer-text a {
+    color: white;
+}
+
+.footer-text a:hover {
+    opacity: .8;
 }
 
 .footer-links {
@@ -85,24 +86,43 @@
     opacity: 0.6;
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1400px) {
     .footer {
+        padding: 32px 0;
         height: auto;
-        border: solid 1px yellow;
+        font-size: 12px;
     }
-    .footer-container, .footer-about {
+
+    .footer-about {
         flex-direction: column;
-        gap: 12px;
+        align-items: center;
     }
+
+    .footer-container {
+        flex-direction: column;
+    }
+
     .footer-about {
+        flex-direction: column;
         align-items: center;
     }
-    .footer-text, .footer-links  {
+
+    .footer-text, .footer-links {
         text-align: center;
     }
+
+    .footer-text {
+        margin-bottom: 16px;
+    }
+
+    .footer-socials {
+        justify-content: center;
+    }
+
     .footer-socials-title {
         display: none;
     }
+
     .footer-socials-links {
         justify-content: center;
     }

diff --git a/src/app/layouts/footer/footer.component.html b/src/app/layouts/footer/footer.component.html
@@ -2,32 +2,24 @@
     <div class="footer-container content-width">
         <div class="footer-about">
             <div class="footer-logo">
-                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clip-path="url(#clip0_1171_4159)">
-                        <path
-                            d="M2.21538 25.5999C1.35385 26.5845 0.738462 27.5691 0.369231 28.3076C0.246154 28.5538 0 29.1691 0 29.5384V30.1538C0 31.1384 0.861538 31.9999 1.84615 31.9999H30.1538C31.1385 31.9999 32 31.1384 32 30.1538V8.36914C16.4923 11.0768 7.13846 19.4461 2.21538 25.5999Z"
-                            fill="white" />
-                        <path
-                            d="M30.1538 0H1.84615C0.861538 0 0 0.861538 0 1.84615V18.8308C5.66154 12.9231 15.6308 6.52308 30.7692 4.8C31.1385 4.8 32 4.55385 32 3.44615V1.84615C32 0.861538 31.1385 0 30.1538 0Z"
-                            fill="white" />
-                    </g>
-                    <defs>
-                        <clipPath id="clip0_1171_4159">
-                            <rect width="32" height="32" fill="white" />
-                        </clipPath>
-                    </defs>
-                </svg>
-                <app-icon-logo></app-icon-logo>
+                <app-icon-logo class="white-colored"></app-icon-logo>
             </div>
             <div class="footer-copy">
                 <p class="footer-text">
                     Copyright &#169; 2011-2023 Developer Express Inc.<br />
                     All trademarks or registered trademarks are property of their respective owners.
                 </p>
-                <div class="footer-links">
-                    <a href="https://js.devexpress.com/Privacy/"> Your Privacy - Legal Statements</a>
-                    <a class="licensing" href="https://js.devexpress.com/Licensing/">Licensing</a>
-                </div>
+                <p class="footer-text">
+                    Use of this site constitutes acceptance of the Developer Express Inc <a href="https://www.devexpress.com/AboutUs/legal.xml" target="_blank">Website Terms of Use</a>, <a href="https://www.devexpress.com/AboutUs/privacy-policy.xml" target="_blank">Privacy Policy (Updated)</a>.
+                    <br />
+                    Use of DevExtreme UI components/libraries constitutes acceptance of the Developer Express Inc End User License Agreement.
+                </p>
+                <p class="footer-text">
+                    FAQs: <a href="https://js.devexpress.com/Licensing/">Licensing</a>
+                    | <a href="https://supportcenter.devexpress.com" target="_blank">DevExpress Support Services</a>
+                    | <a href="https://www.devexpress.com/support/versions.xml" target="_blank">Supported Versions & Requirements</a>
+                    | <a href="https://www.devexpress.com/support/eulas/hotfix-policy.xml" target="_blank">Maintenance Releases</a>
+                </p>
             </div>
         </div>
         <div class="footer-socials">

diff --git a/src/app/layouts/header/header.component.css b/src/app/layouts/header/header.component.css
@@ -27,22 +27,9 @@
     cursor: pointer;
 }
 
-.logo .header-logo-js,
-.logo .header-logo-devextreme {
-    height: 40px;
-}
-.logo .header-logo-js {
-    margin-top: -1px;
-    margin-right: 6px;
-}
-
-:host ::ng-deep .logo .header-logo-devextreme svg path {
-    fill: #596C7D;
-}
-
 .product-name {
     font-size: 24px;
-    line-height: 22px;
+    line-height: 28px;
     font-weight: 700;
     font-stretch: 75%;
     font-family: 'Open Sans',sans-serif;

diff --git a/src/app/layouts/header/header.component.html b/src/app/layouts/header/header.component.html
@@ -1,12 +1,7 @@
 <div class="header" [ngClass]="{ 'filled': switchEnabled }">
     <div class="logo" [routerLink]="['/']">
-        <div class="header-logo-js">
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M37 0H3C2.20525 0.00292728 1.44389 0.319938 0.881914 0.881914C0.319938 1.44389 0.00292728 2.20525 0 3L0 37C0.00292728 37.7948 0.319938 38.5561 0.881914 39.1181C1.44389 39.6801 2.20525 39.9971 3 40H37C37.7948 39.9971 38.5561 39.6801 39.1181 39.1181C39.6801 38.5561 39.9971 37.7948 40 37V3C39.9971 2.20525 39.6801 1.44389 39.1181 0.881914C38.5561 0.319938 37.7948 0.00292728 37 0V0ZM18.1389 24.4944C18.2161 25.4701 18.024 26.4483 17.5833 27.3222C17.2719 27.7586 16.8516 28.1057 16.3642 28.3289C15.8768 28.5521 15.3394 28.6437 14.8056 28.5944C14.1403 28.6142 13.4809 28.4652 12.8889 28.1611V25.9056C13.3338 26.2107 13.8471 26.4015 14.3833 26.4611C15.3759 26.4611 15.8722 25.763 15.8722 24.3667V11.6333H18.1389V24.4944ZM26.0167 27.3667C25.6674 27.7657 25.2344 28.0827 24.7484 28.295C24.2625 28.5072 23.7356 28.6095 23.2056 28.5944C22.3159 28.6118 21.4472 28.3235 20.7444 27.7778V25.5556C21.3643 26.0699 22.1298 26.3769 22.9333 26.4333C23.2047 26.4475 23.4756 26.3998 23.7259 26.2939C23.9761 26.1881 24.199 26.0268 24.3778 25.8222C24.7479 25.3482 24.9335 24.756 24.9 24.1556C24.9142 23.5746 24.7763 23.0001 24.5 22.4889C24.3336 22.2114 24.148 21.946 23.9444 21.6944C23.7 21.3944 23.3889 21.0556 23.0222 20.6889C22.4667 20.1333 21.9778 19.6278 21.6 19.1889C21.2843 18.8485 21.005 18.4762 20.7667 18.0778C20.3926 17.3328 20.2129 16.5053 20.2444 15.6722C20.182 14.5419 20.5469 13.4294 21.2667 12.5556C21.6146 12.1681 22.0444 11.863 22.5248 11.6622C23.0052 11.4613 23.5243 11.3699 24.0444 11.3944C24.845 11.3892 25.6346 11.5799 26.3444 11.95V14.1722C25.8024 13.7375 25.1381 13.4831 24.4444 13.4444C24.1701 13.4362 23.8974 13.4887 23.6458 13.5981C23.3941 13.7076 23.1698 13.8714 22.9889 14.0778C22.6011 14.5155 22.4015 15.0883 22.4333 15.6722C22.4175 16.203 22.5586 16.7267 22.8389 17.1778C23.0383 17.4865 23.2651 17.7765 23.5167 18.0444C23.8278 18.4 24.2389 18.8278 24.7389 19.3278C25.4836 20.0343 26.1151 20.8513 26.6111 21.75C26.966 22.5049 27.1373 23.333 27.1111 24.1667C27.1549 25.332 26.765 26.4722 26.0167 27.3667Z" fill="#2190F7"/>
-            </svg>
-        </div>
-        <div class="header-logo-devextreme">
-            <app-icon-logo></app-icon-logo>
+        <div>
+            <app-icon-logo class="blue-colored"></app-icon-logo>
         </div>
         <div class="product-name">
             Theme Builder

diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,12 @@
 
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DevExtreme ThemeBuilder</title>
     <base href="/">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <link rel="icon" href="assets/favicon.svg">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75,700;100,700&amp;display=swap" rel="stylesheet" type="text/css">
@@ -24,6 +25,25 @@
         } else {
             document.write('<link rel="stylesheet" type="text/css" href="content/css/dx.material.blue.light.compact.css" />');
         }
+
+        const changeMetaContent = function () {
+            const meta = document.head.querySelector('meta[name=viewport]');
+
+            const changeMeta = function (e) {
+                if (window.innerWidth <= 768) {
+                    meta.content = 'width=500, user-scalable=no';
+                } else {
+                    meta.content = 'width=device-width';
+                }
+
+                e.stopPropagation();
+            }
+
+            window.addEventListener('DOMContentLoaded', changeMeta);
+            window.addEventListener('resize', changeMeta);
+        }
+
+        changeMetaContent();
     </script>
 
     <!-- Matomo Tag Manager -->

diff --git a/src/styles.css b/src/styles.css
@@ -43,20 +43,15 @@ body {
     margin-right: 16px;
 }
 
-@media (min-height: 1000px) {
-    body {
-        overflow-y: hidden;
-    }
-}
-
-@media (min-width: 1000px) {
-    body {
-        overflow-x: hidden;
+@media only screen and (max-width: 768px) {
+    .content-width {
+        padding-left: 24px;
+        padding-right: 24px;
     }
 }
 
-@media only screen and (max-width: 768px) {
+@media (min-height: 1000px) {
     body {
-        border: red 1px solid;
+        overflow-y: hidden;
     }
 }