wip: responsive profile page

2020-04-15 18:55:29 +03:00 · 2020-04-15 18:55:29 +03:00 · 2c84d20472
--- a/src/components/DrawerRouterContainer.jsx
+++ b/src/components/DrawerRouterContainer.jsx
@ -2,7 +2,7 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';

-import { Drawer, DrawerContent, DrawerNavigation, DrawerItem } from '@progress/kendo-react-layout';
+import { Drawer, DrawerContent, DrawerItem } from '@progress/kendo-react-layout';
 import Header from './Header.jsx';

 const items = [
--- a/src/components/form/DropDownList.jsx
+++ b/src/components/form/DropDownList.jsx
@ -5,14 +5,14 @@ import { FieldWrapper } from '@progress/kendo-react-form';
 import { Label, Error, Hint } from '@progress/kendo-react-labels';

 export const DropDownList = (fieldRenderProps) => {
-    const { validationMessage, visited, label, id, valid, hint, optional, ...others } = fieldRenderProps;
+    const { validationMessage, visited, label, id, defaultValue, valid, hint, optional, ...others } = fieldRenderProps;
    const ddlRef = React.useRef(null);
    const showValidationMessage = visited && validationMessage;
    return (
        <FieldWrapper>
            <Label editorId={id} editorValid={valid} editorRef={ddlRef} optional={optional}>{label}</Label>
            <div className={'k-form-field-wrap'}>
-                <KendoDropDownList ref={ddlRef} valid={valid} id={id} {...others} />
+                <KendoDropDownList ref={ddlRef} defaultValue={defaultValue} valid={valid} id={id} {...others} />
                {
                    !showValidationMessage &&
                        <Hint>{hint}</Hint>
--- a/src/components/form/Upload.jsx
+++ b/src/components/form/Upload.jsx
@ -5,6 +5,8 @@ import { FieldWrapper } from '@progress/kendo-react-form';
 import { Label, Error, Hint } from '@progress/kendo-react-labels';
 import { Avatar } from '@progress/kendo-react-layout';

+import userAvatar from '../../assets/user-avatar.jpg';
+
 export const Upload = (fieldRenderProps) => {
    const {valid, value, id, optional, label, hint, validationMessage, visited, ...others} = fieldRenderProps;
    const imgRef = React.useRef(null);
@ -37,11 +39,11 @@ export const Upload = (fieldRenderProps) => {
        <FieldWrapper>
            <Label editorId={id} editorValid={valid} optional={optional}>
                {label}
-                <Avatar style={{width: 100, height: 100}} shape={'circle'} type={hasImage ? 'image' : 'initials'}>
+                <Avatar style={{width: 100, height: 100}} shape={'circle'} type={'image'}>
                    {
                        hasImage ?
                            <img style={{width: 100, height: 100}} ref={imgRef} src={'#'} alt={'User Avatar'} /> :
-                            'AVATAR'
+                            <img style={{width: 100, height: 100}} src={userAvatar} alt="user-avatar"/>
                    }
                </Avatar>
            </Label>
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@ -70,8 +70,8 @@ const RatingCell = (props) => {
                    const isActive = rating <= idx;
                    return (
                        <span
-                            className={isActive ? 'k-icon k-i-star' : 'k-icon k-i-star-outline'}
-                            style={isActive ? {color: '#ffa600'} : undefined}
+                            className={!isActive ? 'k-icon k-i-star' : 'k-icon k-i-star-outline'}
+                            style={!isActive ? {color: '#ffa600'} : undefined}
                        />
                    );
                })
@ -182,15 +182,15 @@ const Dashboard = () => {
                </div>
                <span></span>
                <div className="card-component">
-                    <Grid data={data} style={{ height: 480 }} onDataChange={data => setData(data)}>
+                    <Grid data={data} style={{ height: 480, maxWidth: 1502 }} onDataChange={data => setData(data)}>
                        <Column title={'Employee'}>
-                            <Column field={'full_name'} title={'Contact Name'} columnMenu={ColumnMenu} width={220} cell={FullNameCell} />
-                            <Column field={'job_title'} title={'Job Title'} columnMenu={ColumnMenu} width={220} />
+                            <Column field={'full_name'} title={'Contact Name'} columnMenu={ColumnMenu} width={230} cell={FullNameCell} />
+                            <Column field={'job_title'} title={'Job Title'} columnMenu={ColumnMenu} width={230} />
                            <Column field={'country'} title={'Country'} columnMenu={ColumnMenu} width={100} cell={FlagCell} />
                            <Column field={'is_online'} title={'Status'} columnMenu={ColumnMenu} width={100} cell={OnlineCell} />
                        </Column>
                        <Column title={'Performance'}>
-                            <Column field={'rating'} title={'Rating'} columnMenu={ColumnMenu} width={110} cell={RatingCell} />
+                            <Column field={'rating'} title={'Rating'} columnMenu={ColumnMenu} width={130} cell={RatingCell} />
                            <Column field={'target'} title={'Engagement'} columnMenu={ColumnMenu} width={230} cell={EngagementCell} />
                            <Column field={'budget'} title={'Budget'} columnMenu={ColumnMenu} width={100} cell={CurrencyCell} />
                        </Column>
--- a/src/pages/Info.jsx
+++ b/src/pages/Info.jsx
@ -3,8 +3,6 @@ import * as React from 'react';
 import kendoka from '../assets/kendoka.png';
 import github from '../assets/github-icon.svg';

-import { Button } from '@progress/kendo-react-buttons';
-
 const Info = () => {
    return (
        <div id="Info" className="info-page main-content">
@ -16,8 +14,8 @@ const Info = () => {
                        <h1>KendoReact</h1>
                        <h2>UI for React Developers</h2>
                        <div className="button-group">
-                            <Button primary={true}>Start Free Trial</Button>
-                            <Button>Buy Now</Button>
+                            <a className="k-button k-primary" href="https://www.telerik.com/download-login-v2-kendo-react-ui">Start Free Trial</a>
+                            <a className="k-button" href="https://www.telerik.com/kendo-react-ui/#pricing">Buy Now</a>
                        </div>

                        <a className="github-link" href="https://github.com/telerik/react-coffee-warehouse">
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@ -23,7 +23,7 @@ const Profile = () => {
                        <Form
                            onSubmit={handleSubmit}
                            render={(formRenderProps) => (
-                                <FormElement horizontal={true} style={{ maxWidth: 650 }}>
+                                <FormElement horizontal={true} style={{ maxWidth: 700 }}>
                                    <Field
                                        id={'avatar'}
                                        name={'avatar'}
@ -74,6 +74,7 @@ const Profile = () => {
                                        name={'country'}
                                        label={'Country'}
                                        data={countries}
+                                        defaultValue={countries[33]}
                                        textField={'name'}
                                        valueField={'code'}
                                        component={DropDownList}
@ -81,10 +82,11 @@ const Profile = () => {
                                    <Field
                                        id={'biography'}
                                        name={'biography'}
-                                        label={'Biography'}
+                                        label={'Short Biography'}
                                        validator={biographyValidator}
                                        component={Editor}
                                    />
+                                    <hr />
                                    <div className={'k-form-buttons'}>
                                        <Button>
                                                Cancel
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@ -1,7 +1,4 @@
-#root {
-    overflow-x: hidden;
-}
-
+// Normalization
 body,
 h1,
 h2,
@ -20,6 +17,7 @@ li {
    list-style: none;
 }

+// App styles
 .k-drawer-container {
    background-color: $background-color;
    min-height: calc(100vh - 80px);
@ -75,10 +73,6 @@ li {

 .card-container {
    background-color: $white;
-    border-radius: 5px;
-    margin: 25px;
-    padding: 25px;
-    box-shadow: 0 0 10px rgba(0,0,0,.2);

    &.grid {
        display: grid;
@ -115,13 +109,14 @@ li {
    }
 }

-.profile-page {
-    .k-form {
-        margin: 15px auto;
-    }
+@media (min-width: 480px) { }

-    .k-form-field:first-of-type .k-form-field-wrap {
-        margin: auto;
+@media (min-width: 768px) { 
+    .card-container {
+        padding: 30px;
+        margin: 25px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
 }

@ -205,7 +200,73 @@ li {
    }
 }

+// Profile page
+.profile-page {
+    .k-form {
+        padding: 40px 0;
+    }

+    .k-form .k-form-field {
+        display: block;
+        padding: 0 15px;
+    }
+
+    .k-form-field:first-of-type .k-form-field-wrap {
+        margin: auto;
+    }
+
+    .k-form-field:first-of-type .k-avatar {
+        margin: 0 auto 1rem;
+    }
+
+    .k-form.k-form-horizontal .k-label {
+        width: 100%;
+    }
+
+    hr {
+        margin-top: 1rem;
+        opacity: 0.2;
+    }
+
+    .k-form .k-form-buttons {
+        justify-content: center;
+
+        & > * {
+            width: 140px;
+        }
+    }
+}
+
+@media (min-width: 480px) {
+    .profile-page {
+        .k-form .k-form-field {
+            display: flex;
+        }
+
+        .k-form-field:first-of-type .k-avatar {
+            margin: 0;
+        }
+
+        .k-form.k-form-horizontal .k-label {
+            width: 25%;
+        }
+    }
+}
+
+ @media (min-width: 768px) { 
+    .profile-page {
+        .k-form {
+            margin: 0 auto;
+            padding: 0;
+        }
+        .k-form .k-form-field {
+            padding: 0;
+        }
+    }
+ }
+
+
+// Info page
 .info-page {
    background-color: $info-background;
    color: $white;
@ -213,12 +274,12 @@ li {
    h1, h2, h3, .component-link {
        font-family: Metric,Helvetica,Arial,sans-serif;
    }
-    a {
+    a:not(.k-button) {
        color: $link-color;
    }
    
    .content {
-        padding: 40px 20px 0;
+        padding-top: 40px;
        margin: 0 auto;
        position: relative;
        max-width: 820px;
@ -234,7 +295,7 @@ li {
    .section-1 {
        text-align: center;
        h1 {
-            font-size: 65px;
+            font-size: 48px;
            font-weight: bold;
            color: $react-color;
        }
@ -248,8 +309,9 @@ li {
            margin-bottom: 30px;

            .k-button {
-                width: 145px;
-                margin-right: 10px;
+                display: block;
+                margin: 10px auto;
+                width: 60%;
            }
        }

@ -265,10 +327,17 @@ li {
        }
    }

+    .section-2 {
+        text-align: center;
+        margin-top: 40px;
+        padding: 0 15px;
+    }
+
    .section-3 {
        -webkit-columns: 2;
        column-count: 2;
        margin-top: 40px;
+        padding: 0 15px;
    }

    .package-item {
@ -316,6 +385,14 @@ li {
            h2 {
                font-size: 38px;
            }
+
+            .button-group {
+                .k-button {
+                    display: inline-block;
+                    width: 145px;
+                    margin-right: 10px;
+                }
+            }
        }
        .section-3 {
            -webkit-columns: 3;
@ -335,12 +412,15 @@ li {
            top: 2em;
            text-align: left;
        }
-        .section-1 {
+        .section-1,
+        .section-2 {
            text-align: left;
+            padding: 0;
        }
        .section-3 {
            -webkit-columns: 4;
            column-count: 4;
+            padding: 0;
        }
        .footer {
            background-size: cover;