Merge pull request #8 from prezesp/feature/new-layout

Feature/new layout
prezesp · Apr 23, 2018 · eecadc7 · eecadc7
2 parents b88157f + 29011ce
commit eecadc7
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 45 deletions.
diff --git a/scoop-viewer.py b/scoop-viewer.py
@@ -34,6 +34,8 @@ def __init__(self, *args, **kw):
         self.Bind(wx.EVT_CLOSE, self.on_exit)
         self.Center()
 
+        self.SetMinSize((600,300))
+
         # start webapp
         self.webapp = FlaskThread(create_app('testing' if TEST else 'release'))
         self.webapp.start()

diff --git a/tests/test.py b/tests/test.py
@@ -66,7 +66,7 @@ def test_install(self):
         wait = ui.WebDriverWait(driver,10)
 
         wait.until(lambda driver: "Loading" not in driver.page_source)
-        elem = driver.find_element_by_css_selector("#app > div > div > div > div.col-sm-9 > div > div > div:nth-child(1) > div.col-sm-2.text-right > button")
+        elem = driver.find_element_by_css_selector("#app > div > div > div > main.col-sm-9 > div > div > div:nth-child(1) > div.col-sm-2.text-right > button")
         elem.click()
         wait.until(lambda driver: "Installed" in driver.page_source)
         assert "Installed" in driver.page_source

diff --git a/webapp/frontend/app.jsx b/webapp/frontend/app.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import BucketsList from './components/buckets-list';
 import BucketContainer from './components/bucket-container';
-import Menu from './components/menu';
+import Header from './components/header';
 
 class App extends React.Component {
     constructor(props) {
@@ -29,15 +29,15 @@ class App extends React.Component {
     render() {
         return (
             <div>
-                <Menu onSearch={this.handleSearch}/>
                 <div className="container-fluid">
                     <div className="row">
-                        <div className="col-sm-3" style={{'paddingTop': '20px', 'background': '#292929', 'minHeight': '100%'}}>
+                        <nav className="col-sm-3 hidden-xs-down bg-faded sidebar">
                             <BucketsList handleBucketChange={this.handleBucketChange} apiRoot={this.apiRoot}/>
-                        </div>
-                        <div className="col-sm-9">
+                        </nav>
+                        <main className="col-sm-9 offset-sm-3 pt-3">
+                            <Header onSearch={this.handleSearch}/>
                             <BucketContainer name={this.state.currentBucket} query={this.state.query} apiRoot={this.apiRoot}/>
-                        </div>
+                        </main>
                     </div>
                 </div>
             </div>

diff --git a/webapp/frontend/components/buckets-list.js b/webapp/frontend/components/buckets-list.js
@@ -30,7 +30,7 @@ class BucketsList extends Component {
         const content = isFetched ? (
                 this.state.buckets.map((item, index) => (
                     <li key={index} className="nav-item">
-                        <a className="nav-link active" href="#" onClick={(e) => this.handleClick(e, item.name)}>{item.name}</a>
+                        <a className="nav-link active" href="#" onClick={(e) => this.handleClick(e, item.name)}><i className="fa fa-caret-right" style={{color: "#cacaca", paddingRight: "10px"}}></i> {item.name}</a>
                     </li>
 
                 ))

diff --git a/webapp/frontend/components/menu.js → webapp/frontend/components/header.js b/webapp/frontend/components/menu.js → webapp/frontend/components/header.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import SearchBox from './search-box';
 
-const Menu = (props) => {
+const Header = (props) => {
     return (
-        <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-			<a className="navbar-brand" href="#">scoop-viewer</a>
+        <nav className="navbar navbar-expand-lg navbar-light bg-light header">
+			<a className="navbar-brand header-tab" href="#">
+				scoop-viewer
+				<div class="header-tab-arrow"/>
+			</a>
 			<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			  <span className="navbar-toggler-icon"></span>
 			</button>
 
 			<div className="collapse navbar-collapse" id="navbarSupportedContent">
 				<ul className="navbar-nav mr-auto">
-				    <li className="nav-item active">
-				        <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
-				    </li>
 				    <li className="nav-item">
 				        <a className="nav-link" href="https://github.com/prezesp" target="_blank"><i className="fa fa-github" aria-hidden="true"></i> Website</a>
 				    </li>
@@ -24,4 +24,4 @@ const Menu = (props) => {
     );
 }
 
-export default Menu;
+export default Header;
diff --git a/webapp/frontend/components/search-box.js b/webapp/frontend/components/search-box.js
@@ -25,15 +25,15 @@ class SearchBox extends Component {
         return (
             <div className="form-inline my-2 my-lg-0">
                 <input 
-                    className="form-control mr-sm-2" 
+                    className="form-control mr-sm-2 search-box" 
                     type="search" 
                     placeholder="Search" 
                     aria-label="Search" 
-                    name="q" 
+                    name="q"
+                    id="searchBox" 
                     value={this.state.query} 
                     onChange={event => this.setState({query: event.target.value})}
                     onKeyPress={this.handleKeyPress}/>
-                <button className="btn btn-outline-success my-2 my-sm-0" type="submit" onClick={this.handleSearch}>Search</button>
             </div>
         )
     }

diff --git a/webapp/static/custom.css b/webapp/static/custom.css
@@ -0,0 +1,122 @@
+body {
+    background: rgb(39, 40, 34);
+    color: #fff;
+    padding-top: 50px;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+    background: rgb(230, 230, 230);
+    position: fixed;
+    top: 0px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid #eee;
+    padding-right: 0;
+}
+
+.sidebar .nav {
+    margin-bottom: 20px;
+}
+
+.sidebar .nav-item {
+    width: 100%;
+}
+
+.sidebar .nav-item + .nav-item {
+    margin-left: 0;
+}
+
+.sidebar .nav-link {
+    border-radius: 0;
+}
+
+.sidebar a {    
+    color: #616060;
+    font-weight: 500;
+}
+
+/* Components */
+.header {
+    background-color: #171814 !important;
+    margin-left: -15px;
+    margin-right: -15px;
+    position: fixed;
+    top: 0px;
+    z-index: 2;
+}
+@media (min-width: 576px) {
+    .header {
+        width: 75%;
+    }
+}
+
+.header-tab
+{
+    background: rgb(39, 40, 34);
+    border-radius: 0px 30px 0px 0px;
+    color: #fff !important;
+    font-weight: 500;
+    margin: -15px;
+    margin-right:40px;
+    padding: 20px;
+    position: relative;
+}
+
+.header-tab-arrow
+{
+  border-color: transparent transparent rgb(39, 40, 34) rgb(39, 40, 34);
+  border-style: solid;
+  border-width: 30px 15px;
+  height:0;
+  width:0;
+  position:absolute;
+  bottom:0px;
+  right:-23px;
+}
+
+main h4, main p {
+    font-family: 'Consolas' !important;
+}
+
+
+.search-box {
+    border-radius: 0;
+    padding: 0.2rem .75rem;
+    font-family: Consolas;
+}
+
+
+/* Bootstrap override */
+
+.btn-primary {
+    background-color: rgb(88, 194, 229);
+    border-color: rgb(88, 194, 229);
+    color: #000;
+}
+
+.btn-success {
+    background-color: rgb(116, 170, 4);
+    border-color: rgb(116, 170, 4);
+    color: #000;
+}
+
+nav .nav-link {
+    padding: .5rem .5rem;
+}
+
+nav.navbar-light .navbar-nav .nav-link {
+    color: rgb(202, 202, 202);
+    padding: .5rem 1rem;
+}
+
+nav.navbar-light .navbar-nav .nav-link:hover {
+    color: #fff;
+}
diff --git a/webapp/templates/index.html b/webapp/templates/index.html
@@ -4,39 +4,44 @@
 		<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css')}}">
         <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='vendor/ladda/ladda-themeless.min.css')}}">
 		<link rel="stylesheet" href="{{url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css')}}">
+		<link rel="stylesheet" href="{{url_for('static', filename='custom.css')}}">
 	</head>
 	<body>
-		<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-			<a class="navbar-brand" href="#">{{ config.app_name }}</a>
-			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-			  <span class="navbar-toggler-icon"></span>
-			</button>
-
-			<div class="collapse navbar-collapse" id="navbarSupportedContent">
-				<ul class="navbar-nav mr-auto">
-				    <li class="nav-item active">
-				        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
-				    </li>
-				    <li class="nav-item">
-				        <a class="nav-link" href="https://github.com/prezesp" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> Website</a>
-				    </li>
-			    </ul>
-			    <form class="form-inline my-2 my-lg-0" action="/search">
-				    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q" value="{{ q }}">
-				    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-			    </form>
-			</div>
-		</nav>
-
-		<div style="height: 55px">
-		</div>
         <div id="app" data-api-root={{ request.script_root|tojson|safe }}></div>
-		
+
         <script src="{{url_for('static', filename='js/bundle.js')}}"></script>
         <script type=text/javascript src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
         <script type=text/javascript src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
         <script type=text/javascript src="{{ url_for('static', filename='vendor/ladda/spin.min.js') }}"></script>
-        <script type=text/javascript src="{{ url_for('static', filename='vendor/ladda/ladda.min.js') }}"></script>
-
+		<script type=text/javascript src="{{ url_for('static', filename='vendor/ladda/ladda.min.js') }}"></script>
+
+        <script>
+			var isCtrl = false;
+			var isShift = false;
+			$(document).ready(function() {
+				// action on key up
+				$(document).keyup(function(e) {
+					if(e.which == 17) {
+						isCtrl = false;
+					}
+					if(e.which == 16) {
+						isShift = false;
+					}
+				});
+				// action on key down
+				$(document).keydown(function(e) {
+					if(e.which == 17) {
+						isCtrl = true; 
+					}
+					if(e.which == 16) {
+						isShift = true; 
+					}
+					if(e.which == 80 && isShift) { 
+						document.getElementById("searchBox").focus();
+						return false;
+					} 
+				});
+			});
+        </script>
 	</body>
 </html>