Styled grid and list view.

kata-team · Feb 2, 2018 · 7726ad4 · 7726ad4
1 parent 0db6dc5
commit 7726ad4
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
         "react": "^16.2.0",
         "react-dom": "^16.2.0",
         "rest": "^2.0.0",
-        "uikit": "^3.0.0-beta.38"
+        "uikit": "^3.0.0-beta.39"
     },
     "devDependencies": {
         "gh-pages": "^1.1.0",

diff --git a/public/index.html b/public/index.html
@@ -26,11 +26,14 @@
         <footer class="uk-container">
             Copyright © 2017-2018.
             <div class="footer-links">
-                <a class="links" target="_blank" rel="noopener noreferrer" href="https://kata-team.github.io">Kata Team</a>
-                <a class="links" target="_blank" rel="noopener noreferrer" href="https://github.com/kata-team/technology-radar">Github</a>
-                <br>
-                <a class="badge" target="_blank" rel="noopener noreferrer" href="https://travis-ci.org/kata-team/technology-radar"><img src="https://travis-ci.org/kata-team/technology-radar.svg?branch=master" alt="Build Status"></a>
-                <a class="badge" target="_blank" rel="noopener noreferrer" href="https://www.codacy.com/app/kata-team/technology-radar?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=kata-team/technology-radar&amp;utm_campaign=Badge_Grade"><img src="https://api.codacy.com/project/badge/Grade/b569c34b3b5d4b7db2fe54d808a0323b"/></a>
+                <div class="links">
+                    <a target="_blank" rel="noopener noreferrer" href="https://kata-team.github.io">Kata Team</a>
+                    <a target="_blank" rel="noopener noreferrer" href="https://github.com/kata-team/technology-radar">Github</a>
+                </div>
+                <div class="badges">
+                    <a target="_blank" rel="noopener noreferrer" href="https://travis-ci.org/kata-team/technology-radar"><img src="https://travis-ci.org/kata-team/technology-radar.svg?branch=master" alt="Build Status"></a>
+                    <a target="_blank" rel="noopener noreferrer" href="https://www.codacy.com/app/kata-team/technology-radar?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=kata-team/technology-radar&amp;utm_campaign=Badge_Grade"><img src="https://api.codacy.com/project/badge/Grade/b569c34b3b5d4b7db2fe54d808a0323b"/></a>
+                </div>
             </div>
         </footer>
 

diff --git a/src/app/actions/ViewActions.js b/src/app/actions/ViewActions.js
@@ -7,7 +7,7 @@ export default {
             type: ViewConstants.VIEW_GRID,
         });
     },
-    selectLine() {
+    selectList() {
         AppDispatcher.dispatch({
             type: ViewConstants.VIEW_LIST,
         });

diff --git a/src/app/components/ItemComponent.jsx b/src/app/components/ItemComponent.jsx
@@ -31,7 +31,7 @@ export default class ItemComponent extends Component {
                     <div className="uk-card-body">
                         <div className="uk-card-badge uk-label" style={this.labelStyle}>{this.props.item.status}</div>
                         <h3 className="uk-card-title">{this.props.item.name}</h3>
-                        <p>{this.props.item.description}</p>
+                        <p className="uk-card-description">{this.props.item.description}</p>
                     </div>
                     <div className="uk-card-footer">
                         { this.tags() }

diff --git a/src/app/components/NavbarComponent.jsx b/src/app/components/NavbarComponent.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import SearchComponent from './SearchComponent';
-import ViewComponent from './ViewComponent';
+import ViewContainer from './ViewContainer';
 
 export default class NavbarComponent extends Component {
 
@@ -12,13 +12,9 @@ export default class NavbarComponent extends Component {
                         <img alt="Technology Radar logo" src="images/logo.png" />
                         <h1>Technology Radar</h1>
                     </a>
-                    <div className="uk-search uk-width-1-2@s uk-align-right">
-                        <div className="uk-width-1-2">
-                            <ViewComponent />
-                        </div>
-                        <div className="uk-search uk-width-1-2">
-                            <SearchComponent />
-                        </div>
+                    <div className="uk-search uk-width-1-4@s uk-align-right">
+                        <SearchComponent />
+                        <ViewContainer />
                     </div>
                 </div>
             </nav>

diff --git a/src/app/components/ViewComponent.jsx b/src/app/components/ViewComponent.jsx
@@ -1,21 +1,29 @@
 import React, { Component } from 'react';
-import ViewActions from '../actions/ViewActions'
+import PropTypes from 'prop-types';
+import ViewActions from '../actions/ViewActions';
+import ViewConstants from '../constants/ViewConstants';
 
 export default class ViewComponent extends Component {
 
+    static get propTypes() {
+        return {
+            viewStore: PropTypes.object.isRequired,
+        };
+    }
+
     onClickViewGrid() {
         ViewActions.selectGrid();
     }
 
-    onClickViewLine() {
-        ViewActions.selectLine();
+    onClickViewList() {
+        ViewActions.selectList();
     }
 
     render() {
         return (
-            <div className="uk-grid">
-                <a className="uk-width-1-2" onClick={this.onClickViewGrid}><i className="fa fa-th-large fa-2x" /></a>
-                <a className="uk-width-1-2" onClick={this.onClickViewLine}><i className="fa fa-bars fa-2x" /></a>
+            <div className="view-component">
+                <a className={this.props.viewStore.view === ViewConstants.VIEW_GRID ? 'active' : ''} onClick={this.onClickViewGrid}><i className="fa fa-th-large" /></a>
+                <a className={this.props.viewStore.view === ViewConstants.VIEW_LIST ? 'active' : ''} onClick={this.onClickViewList}><i className="fa fa-bars" /></a>
             </div>
         );
     }

diff --git a/src/app/components/ViewContainer.jsx b/src/app/components/ViewContainer.jsx
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Container } from 'flux/utils';
+import ViewComponent from './ViewComponent';
+import ViewStore from '../stores/ViewStore';
+
+class ViewContainer extends Component {
+
+    static getStores() {
+        return [ViewStore];
+    }
+
+    static calculateState() {
+        return {
+            viewStore: ViewStore.getState(),
+        };
+    }
+
+    render() {
+        return <ViewComponent {...this.state} />;
+    }
+
+}
+
+export default Container.create(ViewContainer);
diff --git a/src/stylesheets/app.less b/src/stylesheets/app.less
@@ -10,3 +10,4 @@
 @import 'components/navbar';
 @import 'components/card';
 @import 'components/offcanvas';
+@import 'components/view';
diff --git a/src/stylesheets/components/card.less b/src/stylesheets/components/card.less
@@ -14,3 +14,55 @@
         opacity: .6;
     }
 }
+
+.app--result {
+    > .uk-section,
+    .uk-card .uk-card-body,
+    .uk-card .uk-card-footer,
+    .uk-card .uk-card-badge,
+    .uk-card .uk-label,
+    .uk-card .uk-card-title,
+    .uk-card .uk-card-description,
+    .uk-card .uk-card-footer {
+        transition: .2s all;
+    }
+}
+
+.view--list {
+    @spaces: 15px;
+    > .uk-section {
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
+    .uk-grid-match .uk-grid-margin {
+        margin-top: @spaces;
+        margin-top: 1px;
+        //width: 100%;
+    }
+    .uk-card {
+         .uk-card-body, .uk-card-footer {
+            padding: @spaces;
+        }
+        .uk-card-badge {
+            top: @spaces;
+            right: @spaces;
+        }
+        .uk-label {
+            font-size: .7rem;
+            padding: 3px 10px;
+        }
+        .uk-card-title {
+            font-size: 1rem;
+            margin-bottom: 0;
+        }
+        .uk-card-description {
+            margin-top: 15px;
+            display: none;
+        }
+        .uk-card-footer {
+            padding-top: 0;
+            border: none;
+            display: none;
+        }
+    }
+}
diff --git a/src/stylesheets/components/view.less b/src/stylesheets/components/view.less
@@ -0,0 +1,28 @@
+.view-component {
+    position: absolute;
+    top: ~"calc(40px + 30px)";
+    right: 0px;
+    background-color: rgba(51, 51, 51, 0.25);
+    border-radius: 3px;
+
+    > a {
+        float: left;
+        border-radius: 2px;
+        background-color: transparent;
+        transition: .2s background-color;
+        color: #48453d;
+        width: 35px;
+        text-align: center;
+        height: 35px;
+        line-height: 35px;
+        margin: 2px 2px 2px 1px;
+
+        &:first-child {
+            margin: 2px 1px 2px 2px;
+        }
+
+        &:hover, &.active {
+            background-color: rgba(255, 255, 255, 0.25);
+        }
+    }
+}
diff --git a/src/stylesheets/pages/global.less b/src/stylesheets/pages/global.less
@@ -13,24 +13,38 @@ footer {
     line-height: 30px;
 
     .footer-links {
-        a.links {
-            transition: all .2s;
-            border: 0px solid transparent;
-            padding-bottom: 4px;
+        .links a {
             margin-left: 10px;
-            &:first-child {
-                margin-left: 0;
+        }
+
+        .badges {
+            display: inline-block;
+            margin-top: 8px;
+
+            a {
+                margin-left: 5px;
+                &, img {
+                    float: left;
+                }
             }
+        }
 
-            &:hover {
-                text-decoration: none;
-                border-bottom: 1px solid @global-link-hover-color;
-                padding-bottom: 2px;
+        .links, .badges {
+            a:first-child {
+                margin-left: 0px;
             }
         }
-        a.badge {
-            &:first-child {
-                margin-left: 10px;
+
+        .links {
+            a {
+                transition: all .2s;
+                border: 0px solid transparent;
+
+                &:hover {
+                    text-decoration: none;
+                    border-bottom: 1px solid @global-link-hover-color;
+                    padding-bottom: 2px;
+                }
             }
         }
     }
@@ -48,7 +62,7 @@ footer {
     &--result {
         min-height: ~"calc(100vh - 140px - 122px)";
         @media (min-width: 640px) {
-            min-height: ~"calc(100vh - 70px - 92px)";
+            min-height: ~"calc(100vh - 70px - 97px)";
         }
 
         // spinner