Separate filter conditions

diff --git a/front-end/src/component/nav-top/index.css b/front-end/src/component/nav-top/index.css
index fff072c9ede8d1c62eba31686d65514ac830bb34..bf20bd20fcf13eb8e5e89b64b732e1bfc9a10128 100644 (file)
--- a/front-end/src/component/nav-top/index.css
+++ b/front-end/src/component/nav-top/index.css
@@ -64,7 +64,7 @@
     display: block;
 }
 .top-navbar .dropdown-menu {
-    min-width: 230px;
+    min-width: 140px;
     top: 98%;
     border-radius: 0 0 4px 4px;
 }
@@ -119,23 +119,15 @@
     width: 100%;
 }
 
-.title-selected-btn{
-    float: right;
-
-}
-
-
-.loggedin .navbar-right {
+.navbar-right .loggedin{
     margin-right: 0px!important;
+    padding-right: 10px!important;
 }
 
 .loggedin > a {
     padding: 0px!important;
 }
 
-.loggedin > ul > li > a{
-    width: 30px;
-}
 .user-head-pic {
     height: 40px;
     border: 2px solid #2497ba;

diff --git a/front-end/src/component/nav-top/index.jsx b/front-end/src/component/nav-top/index.jsx
index c02329f1ddb4da51f568ec765cf0675b19dcd9d2..d718d022c0bff11b693ea86a184c00f1e73d618f 100644 (file)
--- a/front-end/src/component/nav-top/index.jsx
+++ b/front-end/src/component/nav-top/index.jsx
@@ -25,7 +25,7 @@ class NavTop extends React.Component {
                 <a className="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                     <img className="img-circle img-thumbnail user-head-pic" src={require('image/slonik.png')} alt="headPic"/>
                 </a>
-                <ul className="dropdown-menu dropdown-alerts">
+                <ul className="dropdown-menu dropdown-alerts loggedin-ul">
                     <li>
                         <a href="#">
                             <div>

diff --git a/front-end/src/component/result-filter/index.css b/front-end/src/component/result-filter/index.css
index e7c5e9aa63db7d85d947df0bf72187b8268e8851..958337e418282a854583376476aa3701a0a853f3 100644 (file)
--- a/front-end/src/component/result-filter/index.css
+++ b/front-end/src/component/result-filter/index.css
@@ -80,7 +80,18 @@
 .select-no {
     color: #999
 }
+
 /*.select .select-result a{padding-right:20px;background:#f60 url("close.gif") right 9px no-repeat}*/
 .select .select-result a:hover {
     background-position: right -15px
+}
+
+.title-selected-btn {
+    float: right;
+}
+
+.title-selected-btn:focus, .title-selected-btn:active:focus, .title-selected-btn.active:focus, .title-selected-btn.focus, .title-selected-btn:active.focus, .title-selected-btn.active.focus {
+    outline: none;
+    /*border-color: transparent;*/
+    /*box-shadow: none;*/
 }
\ No newline at end of file

diff --git a/front-end/src/component/result-filter/index.jsx b/front-end/src/component/result-filter/index.jsx
index 400631e54258254d97a2a29a71c37f76f95bd1bc..4c9619d4b2ee5f0439676dde2159fdf379bdead9 100644 (file)
--- a/front-end/src/component/result-filter/index.jsx
+++ b/front-end/src/component/result-filter/index.jsx
@@ -7,9 +7,28 @@ class ResultFilter extends React.Component {
         super(props);
 
         this.state = {
-            selected: {
-                'date': 'all',
-            },
+            selected: [{
+                'name': 'Category 1',
+                'data': [
+                    'All',
+                    'Improving',
+                    'Regressive'
+                ],
+            }, {
+                'name': 'Category 2',
+                'data': [
+                    'All',
+                    '7 days',
+                    '30 days'
+                ],
+            }, {
+                'name': 'Category 3',
+                'data': [
+                    'item3-1',
+                    'item3-2',
+                    'item3-3'
+                ],
+            }],
             isClear: false
         };
     }
@@ -30,6 +49,23 @@ class ResultFilter extends React.Component {
     }
 
     render() {
+        let _this = this;
+
+        let filter = this.state.selected.map((item, i) => {
+            return (
+                <li className="select-list" key={i}>
+                    <dl id={'select'}>
+                        <dt>{i}:</dt>
+
+                        <dd className="select-all selected"><a href="#">All</a></dd>
+                        <dd><a href="#">today</a></dd>
+                        <dd><a href="#">7 days</a></dd>
+                        <dd><a href="#">30 days</a></dd>
+                    </dl>
+                </li>
+            )
+        });
+
         return (
             <div id="wrapper">
                 <div className="panel-group" id="accordion">
@@ -42,7 +78,8 @@ class ResultFilter extends React.Component {
                                 </a>
                                 <div className="title-selected-result">
                                     <span>--</span>
-                                    <button data-toggle="button" className="btn btn-primary-warn title-selected-btn" disabled={ this.state.isClear ? 'class1' : 'class2' }>
+                                    <button data-toggle="button" className="btn btn-primary-warn title-selected-btn"
+                                            disabled={ this.state.isClear ? "disabled" : "" }>
                                         clear
                                     </button>
                                     <button data-toggle="button" className="btn btn-primary title-selected-btn">apply
@@ -53,31 +90,34 @@ class ResultFilter extends React.Component {
                         <div id="panel1" className="panel-collapse collapse in">
                             <div className="panel-body">
                                 <ul className="select">
-                                    <li className="select-list">
-                                        <dl id="select1">
-                                            <dt>Category 1:</dt>
-                                            <dd className="select-all selected"><a href="#">All</a></dd>
-                                            <dd><a href="#">Improving</a></dd>
-                                            <dd><a href="#">Regressive</a></dd>
-                                        </dl>
-                                    </li>
-                                    <li className="select-list">
-                                        <dl id="select2">
-                                            <dt>Category 2:</dt>
-                                            <dd className="select-all selected"><a href="#">All</a></dd>
-                                            <dd><a href="#">today</a></dd>
-                                            <dd><a href="#">7 days</a></dd>
-                                            <dd><a href="#">30 days</a></dd>
-                                        </dl>
-                                    </li>
-                                    <li className="select-list">
-                                        <dl id="select3">
-                                            <dt>Category 3:</dt>
-                                            <dd className="select-all selected"><a href="#">All</a></dd>
-                                            <dd><a href="#">item1</a></dd>
-                                            <dd><a href="#">item2</a></dd>
-                                        </dl>
-                                    </li>
+                                    {
+                                        {filter}
+                                    }
+                                    {/*<li className="select-list">*/}
+                                    {/*<dl id="select1">*/}
+                                    {/*<dt>Category 1:</dt>*/}
+                                    {/*<dd className="select-all selected"><a href="#">All</a></dd>*/}
+                                    {/*<dd><a href="#">Improving</a></dd>*/}
+                                    {/*<dd><a href="#">Regressive</a></dd>*/}
+                                    {/*</dl>*/}
+                                    {/*</li>*/}
+                                    {/*<li className="select-list">*/}
+                                    {/*<dl id="select2">*/}
+                                    {/*<dt>Category 2:</dt>*/}
+                                    {/*<dd className="select-all selected"><a href="#">All</a></dd>*/}
+                                    {/*<dd><a href="#">today</a></dd>*/}
+                                    {/*<dd><a href="#">7 days</a></dd>*/}
+                                    {/*<dd><a href="#">30 days</a></dd>*/}
+                                    {/*</dl>*/}
+                                    {/*</li>*/}
+                                    {/*<li className="select-list">*/}
+                                    {/*<dl id="select3">*/}
+                                    {/*<dt>Category 3:</dt>*/}
+                                    {/*<dd className="select-all selected"><a href="#">All</a></dd>*/}
+                                    {/*<dd><a href="#">item1</a></dd>*/}
+                                    {/*<dd><a href="#">item2</a></dd>*/}
+                                    {/*</dl>*/}
+                                    {/*</li>*/}
                                 </ul>
                             </div>
                         </div>
@@ -117,19 +157,23 @@ class ResultFilter extends React.Component {
                                             aria-label="Rendering engine: activate to sort column ascending"
                                             style={{width: '225px'}}>Rendering engine
                                         </th>
-                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example" rowSpan="1"
+                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example"
+                                            rowSpan="1"
                                             colSpan="1" aria-label="Browser: activate to sort column ascending"
                                             style={{width: '299px'}}>Browser
                                         </th>
-                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example" rowSpan="1"
+                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example"
+                                            rowSpan="1"
                                             colSpan="1" aria-label="Platform(s): activate to sort column ascending"
                                             style={{width: '275px'}}>Platform(s)
                                         </th>
-                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example" rowSpan="1"
+                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example"
+                                            rowSpan="1"
                                             colSpan="1" aria-label="Engine version: activate to sort column ascending"
                                             style={{width: '189px'}}>Engine version
                                         </th>
-                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example" rowSpan="1"
+                                        <th className="sorting" colSpan="0" aria-controls="dataTables-example"
+                                            rowSpan="1"
                                             colSpan="1" aria-label="CSS grade: activate to sort column ascending"
                                             style={{width: '132px'}}>CSS grade
                                         </th>
@@ -221,7 +265,8 @@ class ResultFilter extends React.Component {
                                                 <li className="paginate_button previous disabled"
                                                     aria-controls="dataTables-example" colSpan="0"
                                                     id="dataTables-example_previous"><a href="#123">Previous</a></li>
-                                                <li className="paginate_button active" aria-controls="dataTables-example"
+                                                <li className="paginate_button active"
+                                                    aria-controls="dataTables-example"
                                                     colSpan="0"><a href="#">1</a></li>
                                                 <li className="paginate_button " aria-controls="dataTables-example"
                                                     colSpan="0"><a href="#">2</a></li>