mirror of
https://github.com/Av0idD4rk/packmate.git
synced 2026-10-23 16:31:01 +00:00
Исправил стили, привел в порядок сайдбар и навбар
This commit is contained in:
saber-nyan
parent
5f92454eb3
commit
82e8aeb16a
@ -5,5 +5,13 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,5 +17,7 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
main {
|
||||
padding-top: 48px; /* Space for fixed navbar */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user