Merge pull request #52 from Unleash/simplify-header-title

removed Unleash from header title + visual tweaks

frontend/src/component/app.jsx

@@ -12,11 +12,6 @@ import UserContainer from './user/user-container';
 import ShowUserContainer from './user/show-user-container';
 import { ScrollContainer } from 'react-router-scroll';
 
-const base = {
-    name: 'Unleash',
-    link: '/',
-};
-
 function replace (input, params) {
     if (!params) {
         return input;
@@ -55,27 +50,27 @@ export default class App extends Component {
     }
 
     getSections () {
-        if (window.innerWidth < 768) {
-            return [base];
-        }
         const { routes, params } = this.props;
         const unique = {};
-        let result = [base].concat(routes.splice(1).map((routeEntry) => ({
-            name: replace(routeEntry.pageTitle, params),
-            link: replace(routeEntry.link || routeEntry.path, params),
-        }))).filter(entry => {
-            if (!unique[entry.link]) {
-                unique[entry.link] = true;
-                return true;
-            }
-            return false;
-        });
+        const result = routes.splice(1)
+            .map((routeEntry) => ({
+                name: replace(routeEntry.pageTitle, params),
+                link: replace(routeEntry.link || routeEntry.path, params),
+            }))
+            .filter(entry => {
+                if (!unique[entry.link]) {
+                    unique[entry.link] = true;
+                    return true;
+                }
+                return false;
+            });
 
         // mutate document.title:
         document.title = result
             .map(e => e.name)
             .reverse()
-            .join(' - ');
+            .concat('Unleash')
+            .join(' – ');
 
         return result;
     }
@@ -85,9 +80,12 @@ export default class App extends Component {
         return (
             <span>
                 {result.map((entry, index) => (
-                    <span key={entry.link + index}><Link style={{ color: '#f1f1f1', textDecoration: 'none' }} to={entry.link}>
-                        {entry.name}
-                    </Link> {(index + 1) < result.length ? ' / ' : null}</span>
+                    <span key={entry.link + index} className={index > 0 ? 'mdl-layout--large-screen-only' : ''}>
+                        {index > 0 ? ' › ' : null}
+                        <Link className={[styles.headerTitleLink, 'mdl-color-text--primary-contrast'].join(' ')} to={entry.link}>
+                            {entry.name}
+                        </Link>
+                    </span>
                 ))}
             </span>
         );
@@ -125,7 +123,7 @@ export default class App extends Component {
                         </Navigation>
                     </Header>
                     <Drawer className="mdl-color--white">
-                        <span className={[styles.title, 'mdl-layout-title'].join(' ')}>Unleash</span>
+                        <span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>Unleash</span>
                         <hr className={commonStyles.divider}/>
                         <Navigation className={styles.navigation}>
                             {createListItem('/features', 'Feature toggles', 'list', true)}

frontend/src/component/styles.scss

@@ -1,8 +1,12 @@
-.title {
+.headerTitleLink {
+    text-decoration: none;
+}
+
+.drawerTitle {
     padding-left: 24px !important;
 }
 @media screen and (max-width: 1024px) {
-    .title {
+    .drawerTitle {
         padding-left: 16px !important;
     }
 }

frontend/src/index.jsx

@@ -48,8 +48,8 @@ ReactDOM.render(
             <Route path="/" component={App}>
                 <IndexRedirect to="/features" />
 
-                <Route pageTitle="Features" link="/features">
-                    <Route pageTitle="Features" path="/features" component={Features} />
+                <Route pageTitle="Feature toggles" link="/features">
+                    <Route pageTitle="Feature toggles" path="/features" component={Features} />
                     <Route pageTitle="New" path="/features/create" component={CreateFeatureToggle} />
                     <Route pageTitle=":name" path="/features/:activeTab/:name" component={ViewFeatureToggle} />
                 </Route>
@@ -60,12 +60,12 @@ ReactDOM.render(
                     <Route pageTitle=":strategyName" path="/strategies/:activeTab/:strategyName" component={StrategyView} />
                 </Route>
 
-                <Route pageTitle="History" link="/history">
-                    <Route pageTitle="History"  path="/history" component={HistoryPage} />
+                <Route pageTitle="Event history" link="/history">
+                    <Route pageTitle="Event history"  path="/history" component={HistoryPage} />
                     <Route pageTitle=":toggleName" path="/history/:toggleName" component={HistoryTogglePage} />
                 </Route>
 
-                <Route pageTitle="Archive" path="/archive" component={Archive} />
+                <Route pageTitle="Archived toggles" path="/archive" component={Archive} />
                 <Route pageTitle="Applications" link="/applications">
                     <Route pageTitle="Applications" path="/applications" component={Applications} />
                     <Route pageTitle=":name" path="/applications/:name" component={ApplicationView} />