From 82e8aeb16ac4fc49a5848d511bf6849d982a49b6 Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Sun, 28 Apr 2019 14:34:53 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8,=20=D0=BF=D1=80=D0=B8?=
 =?UTF-8?q?=D0=B2=D0=B5=D0=BB=20=D0=B2=20=D0=BF=D0=BE=D1=80=D1=8F=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80=20?=
 =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=D0=B2=D0=B1=D0=B0=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   |  8 +++
 src/components/Content.vue    |  4 +-
 src/components/CtfService.vue | 37 +++++++------
 src/components/Navbar.vue     | 51 ++++++++++++------
 src/components/Sidebar.vue    | 98 ++++++++++++++++++++++++-----------
 src/components/Stream.vue     | 39 ++++++++++----
 6 files changed, 163 insertions(+), 74 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2b2a247..40b566a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,5 +5,13 @@
 </template>
 
 <style>
+	body {
+		font-size: .875rem;
+	}
 
+	.feather {
+		width: 16px;
+		height: 16px;
+		vertical-align: text-bottom;
+	}
 </style>
diff --git a/src/components/Content.vue b/src/components/Content.vue
index 7618a18..7709057 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -17,5 +17,7 @@
 </script>
 
 <style scoped>
-
+	main {
+		padding-top: 48px; /* Space for fixed navbar */
+	}
 </style>
diff --git a/src/components/CtfService.vue b/src/components/CtfService.vue
index ae08fa6..6a85e12 100644
--- a/src/components/CtfService.vue
+++ b/src/components/CtfService.vue
@@ -1,26 +1,31 @@
 <template>
 	<li class="nav-item" :class="{ 'active': subIsActive('/' + port) }">
-		<router-link class="nav-link" :to="'/' + port">{{ name }} ({{ port }})</router-link>
+		<router-link class="nav-link" :to="{name: 'home', params: {servicePort: port}}">{{ name }} ({{ port }})
+		</router-link>
 	</li>
 </template>
 
 <script lang="ts">
-    import {Component, Prop, Vue} from "vue-property-decorator";
+	import {Component, Prop, Vue} from "vue-property-decorator";
 
-    @Component({
-        methods: {
-            subIsActive(input) {
-                const paths = Array.isArray(input) ? input : [input];
-                return paths.some(path => {
-                    return this.$route.path.indexOf(path) === 0; // current path starts with this path string
-                });
-            }
-        }
-    })
-    export default class CrfService extends Vue {
-        @Prop() private port!: number;
-        @Prop() private name!: string;
-    }
+	@Component({
+		methods: {
+			/**
+			 * Returns true if current component active
+			 * @param input parent prefix
+			 */
+			subIsActive(input) {
+				const paths = Array.isArray(input) ? input : [input];
+				return paths.some(path => {
+					return this.$route.path.indexOf(path) === 0;
+				});
+			}
+		}
+	})
+	export default class CrfService extends Vue {
+		@Prop() private port!: number;
+		@Prop() private name!: string;
+	}
 </script>
 
 <style scoped>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 6e5146e..85cf137 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,22 +1,14 @@
 <template>
+	<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow navbar-expand-lg navbar-expand">
+		<router-link to="/" class="navbar-brand col-sm-3 col-md-2 mr-0">Packmate</router-link>
 
-	<!--    <div id="nav">-->
-	<!--      <router-link to="/">Home</router-link> |-->
-	<!--      <router-link to="/about">About</router-link>-->
-	<!--    </div>-->
-	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-		<router-link to="/" class="navbar-brand">Packmate</router-link>
-		<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>
+<!--		<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="#">1337 (L33T)</a>-->
-				<!--					</li>-->
-				<!--					-->
 				<CtfService
 						v-for="service in ctfServices"
 						:key="service.port"
@@ -33,7 +25,7 @@
 					</button>
 				</li>
 			</ul>
-			<div class="my-2 my-lg-0">
+			<div class="my-2 my-lg-0" style="margin-right: 10px;">
 				<button type="button" class="btn btn-link">
 					<svg id="i-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16"
 						 fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
@@ -69,5 +61,34 @@
 </script>
 
 <style scoped>
+	.navbar-brand {
+		padding-top: .75rem;
+		padding-bottom: .75rem;
+		font-size: 1rem;
+		background-color: rgba(0, 0, 0, .25);
+		box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+	}
 
+	.navbar .form-control {
+		padding: .75rem 1rem;
+		border-width: 0;
+		border-radius: 0;
+	}
+
+	.form-control-dark {
+		color: #fff;
+		background-color: rgba(255, 255, 255, .1);
+		border-color: rgba(255, 255, 255, .1);
+	}
+
+	.form-control-dark:focus {
+		border-color: transparent;
+		box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+	}
+	svg {
+		position: absolute;
+		top: 50%;
+		bottom: 50%;
+		transform: translate(-50%, -50%);
+	}
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 442dec8..715e922 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -2,18 +2,6 @@
 	<nav class="col-md-2 d-none d-md-block bg-light sidebar">
 		<div class="sidebar-sticky">
 			<ul class="nav flex-column">
-				<!--				<li class="nav-item">-->
-				<!--					<a class="nav-link active" href="#">-->
-				<!--						#1<br/>-->
-				<!--						13:37:01-->
-				<!--					</a>-->
-				<!--				</li>-->
-				<!--				<li class="nav-item">-->
-				<!--					<a class="nav-link" href="#">-->
-				<!--						#2<br/>-->
-				<!--						12:28:02-->
-				<!--					</a>-->
-				<!--				</li>-->
 				<Stream
 						v-for="stream in streams"
 						:key="stream.id"
@@ -25,28 +13,76 @@
 </template>
 
 <script lang="ts">
-    import {Component, Prop, Vue} from "vue-property-decorator";
-    import Stream from "@/components/Stream.vue";
+	import {Component, Prop, Vue} from "vue-property-decorator";
+	import Stream from "@/components/Stream.vue";
 
-    @Component({
-        components: {Stream},
-        data() {
-            return {
-                streams: [
-                    {
-                        id: 111,
-                        time: 1556411080,
-                    },
-                ]
-            };
-        }
-    })
-    export default class Sidebar extends Vue {
-        @Prop() private servicePort?: string;
-        @Prop() private streamId?: string;
-    }
+	@Component({
+		components: {Stream},
+		data() {
+			return {
+				streams: [
+					{
+						id: 111,
+						time: 1556411080,
+					},
+				]
+			};
+		}
+	})
+	export default class Sidebar extends Vue {
+		@Prop() private servicePort?: string;
+		@Prop() private streamId?: string;
+	}
 </script>
 
 <style scoped>
+	.sidebar {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 100; /* Behind the navbar */
+		padding: 48px 0 0; /* Height of navbar */
+		box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+	}
 
+	.sidebar-sticky {
+		position: relative;
+		top: 0;
+		height: calc(100vh - 48px);
+		padding-top: .5rem;
+		overflow-x: hidden;
+		overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+	}
+
+	@supports ((position: -webkit-sticky) or (position: sticky)) {
+		.sidebar-sticky {
+			position: -webkit-sticky;
+			position: sticky;
+		}
+	}
+
+	.sidebar .nav-link {
+		font-weight: 500;
+		color: #333;
+	}
+
+	.sidebar .nav-link .feather {
+		margin-right: 4px;
+		color: #999;
+	}
+
+	.sidebar .nav-link.active {
+		color: #007bff;
+	}
+
+	.sidebar .nav-link:hover .feather,
+	.sidebar .nav-link.active .feather {
+		color: inherit;
+	}
+
+	.sidebar-heading {
+		font-size: .75rem;
+		text-transform: uppercase;
+	}
 </style>
diff --git a/src/components/Stream.vue b/src/components/Stream.vue
index d3afdf0..461fdd6 100644
--- a/src/components/Stream.vue
+++ b/src/components/Stream.vue
@@ -1,10 +1,8 @@
 <template>
 	<li class="nav-item">
-		<!--		<a class="nav-link active" href="#">-->
-		<!--			#1<br/>-->
-		<!--			13:37:01-->
-		<!--		</a>-->
-		<router-link class="nav-link" active-class="active" :to="'/' + $route.params.servicePort + '/' + id">
+		<router-link class="nav-link" active-class="active"
+					 :to="{ name: 'home', params: { servicePort: $route.params.servicePort, streamId: id} }">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
 			#{{id}}<br/>
 			{{time}}
 		</router-link>
@@ -12,15 +10,34 @@
 </template>
 
 <script lang="ts">
-    import {Component, Prop, Vue} from "vue-property-decorator";
+	import {Component, Prop, Vue} from "vue-property-decorator";
 
-    @Component
-    export default class Stream extends Vue {
-        @Prop() private id!: number;
-        @Prop() private time!: number;
-    }
+	@Component
+	export default class Stream extends Vue {
+		@Prop() private id!: number;
+		@Prop() private time!: number;
+	}
 </script>
 
 <style scoped>
 
+
+	.sidebar .nav-link {
+		font-weight: 500;
+		color: #333;
+	}
+
+	.sidebar .nav-link .feather {
+		margin-right: 4px;
+		color: #999;
+	}
+
+	.sidebar .nav-link.active {
+		color: #007bff;
+	}
+
+	.sidebar .nav-link:hover .feather,
+	.sidebar .nav-link.active .feather {
+		color: inherit;
+	}
 </style>