[#787] Rework profile header

Changed class names according to the new BEM naming convention.
Added page-head__title-wrapper and page-head__subtitle classes.

src/components/page.js

@@ -17,25 +17,39 @@
  */
 import React from 'react';
 import classNames from 'classnames';
+import { isString } from 'lodash';
+
 
 const Page = ({ children, className = '' }) => (
   <div className={classNames('page__container', className)}>
     {children}
   </div>
 );
 
-const PageCaption = ({ children, icon }) => (
-  <header className="page_head">
-    <h1 className="page_head__title">
-      {children}
-    </h1>
-    {icon &&
-      <div className="page_head__icon">
-        {icon}
+const PageCaption = ({ children, iconLeft, iconRight }) => {
+  let title = children;
+  if (isString(children)) {
+    title = <h1 className="page-head__title">{children}</h1>;
+  }
+
+  return (
+    <header className="page-head">
+      {iconLeft &&
+        <div className="page-head__icon">
+          {iconLeft}
+        </div>
+      }
+      <div className="page-head__title-wrapper">
+        {title}
       </div>
-    }
-  </header>
-);
+      {iconRight &&
+        <div className="page-head__icon">
+          {iconRight}
+        </div>
+      }
+    </header>
+  );
+};
 
 const PageHero = ({ children, url }) => (
   <div className="page__hero">

src/components/page/captions.js

@@ -0,0 +1,44 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+
+import { getName } from '../../utils/user';
+import Avatar from '../user/avatar';
+import Icon from '../icon';
+import {
+  PageCaption
+} from '../page';
+
+
+export const UserCaption = ({ user }) => {
+  if (!user) {
+    return (
+      <PageCaption />
+    );
+  }
+
+  return (
+    <PageCaption
+      iconLeft={<Avatar user={user} isRound={false} size={60} />}
+      iconRight={<Icon className="icon-outline--khaki color-white" icon="at" outline size="big" />}
+    >
+      <h2 className="page-head__title">{user.get('username')}</h2>
+      <h1 className="page-head__subtitle">{getName(user)}</h1>
+    </PageCaption>
+  );
+};

src/less/blocks/icon.less

@@ -16,6 +16,10 @@
     &--dark_green {
       background: @color__dark_green;
     }
+
+    &--khaki {
+      background: #D4D366;
+    }
   }
 
   &-midi.icon-outline {

src/less/blocks/page_head.less → src/less/blocks/page-head.less

@@ -17,20 +17,29 @@
 */
 
 // A block representing a header on a page of a certain entity (user, tag, whatever).
-.page_head {
+.page-head {
   @size: 60px;
 
   min-height: @size;
   display: flex;
-  background-color: white;
   align-items: center;
-  justify-content: space-between;
+  margin-bottom: 2px;
+  background-color: white;
 
-  &__title {
+  &__title-wrapper {
     display: block;
     padding-left: @space;
-    color: @color__text;
+    flex-grow: 1;
+  }
+
+  &__title {
     font-size: 20px;
+    color: #0077B5;
+  }
+
+  &__subtitle {
+    font-size: 12px;
+    color: @color__dark_gray;
   }
 
   &__icon {
@@ -39,6 +48,7 @@
     height: @size;
     align-items: center;
     justify-content: space-around;
+    background-color: #FAFAFA;
     //background-color: #f3f3f3; // TODO: Choose background color depending on the type of an item.
   }
 }

src/less/styles.less

@@ -53,7 +53,7 @@
 @import 'blocks/micon';
 
 @import 'blocks/page';
-@import 'blocks/page_head';
+@import 'blocks/page-head';
 @import 'blocks/header';
 @import 'blocks/logo';
 @import 'blocks/footer';

src/pages/base/settings.js

@@ -42,9 +42,8 @@ import Sidebar from '../../components/sidebar';
 import Messages from '../../components/messages';
 import SidebarAlt from '../../components/sidebarAlt';
 import PageContentLink from '../../components/page-content-link';
+import { UserCaption } from '../../components/page/captions';
 
-import Avatar from '../../components/user/avatar';
-import { getName } from '../../utils/user';
 
 class BaseSettingsPage extends React.Component {
   static displayName = 'BaseSettingsPage';
@@ -117,16 +116,10 @@ class BaseSettingsPage extends React.Component {
                       </div>
                     </div>
                   </div>
+                  <UserCaption user={user} />
                   <div className="layout">
+
                     <div className="layout__grid_item layout__grid_item-fill layout__grid_item-wide">
-                      <div className="page_head">
-                        <h1 className="page_head__title">
-                          {getName(user)}
-                        </h1>
-                        <div className="page_head__icon">
-                          <Avatar user={user} size={37} />
-                        </div>
-                      </div>
                       {children}
                     </div>
                   </div>

src/pages/base/tag.js

@@ -23,6 +23,7 @@ import {
   PageMain,
   PageHero,
   PageBody,
+  PageCaption,
   PageContent
 }                       from '../../components/page';
 import Header           from '../../components/header';
@@ -64,14 +65,13 @@ function getPageCaption(type, name) {
   }
 
   return (
-    <div className="page_head">
-      <h1 className="page_head__title">
+    <PageCaption
+      iconRight={<Tag size="BIG" type={type} />}
+    >
+      <h1 className="page-head__title">
         {caption}
       </h1>
-      <div className="page_head__icon">
-        <Tag size="BIG" type={type} />
-      </div>
-    </div>
+    </PageCaption>
   );
 }
 

src/pages/base/user.js

@@ -33,7 +33,6 @@ import {
   PageBody,
   PageContent
 } from '../../components/page';
-import Avatar from '../../components/user/avatar';
 import Breadcrumbs from '../../components/breadcrumbs/breadcrumbs';
 import Header from '../../components/header';
 import HeaderLogo from '../../components/header-logo';
@@ -43,7 +42,7 @@ import ProfileHeader from '../../components/profile';
 import Sidebar from '../../components/sidebar';
 import SidebarAlt from '../../components/sidebarAlt';
 import User from '../../components/user';
-import { getName } from '../../utils/user';
+import { UserCaption } from '../../components/page/captions';
 
 // FIXME: These links won't hide/show properly if following/unfollowing is performed directly on the page.
 // Something is wrong with the redux state.
@@ -96,14 +95,7 @@ const BaseUserPage = (props) => {
           <PageBody>
             <Sidebar />
             <PageContent>
-              <div className="page_head">
-                <h1 className="page_head__title">
-                  {getName(user)}
-                </h1>
-                <div className="page_head__icon">
-                  <Avatar user={user} size={37} />
-                </div>
-              </div>
+              <UserCaption user={user} />
               <ProfileHeader
                 current_user={current_user}
                 editable={false}