83 lines
1.3 KiB
Vue
83 lines
1.3 KiB
Vue
<template>
|
|
<div class="header" :class="{'with-filter': filterVisible}">
|
|
<div class="row">
|
|
<div class="col-s-12 col-m-9 col-l-7 left side">
|
|
<form @submit.prevent="$emit('torrent-add', torrentURL)">
|
|
<label class="search-box">
|
|
<input type="search" placeholder="Add torrent URL" v-model="torrentURL">
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Header",
|
|
emits: ['torrent-add'],
|
|
|
|
data() {
|
|
return {
|
|
torrentURL: '',
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "vars";
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: $torrent-header-height;
|
|
position: relative;
|
|
background: $menu-panel-bg;
|
|
padding: .5em;
|
|
box-shadow: $border-shadow-bottom;
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.side {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
&.right {
|
|
justify-content: right;
|
|
}
|
|
}
|
|
|
|
::v-deep(button) {
|
|
background: none;
|
|
padding: 0 .25em;
|
|
border: 0;
|
|
margin-right: .25em;
|
|
|
|
&:hover {
|
|
color: $default-hover-fg-2;
|
|
}
|
|
}
|
|
|
|
form {
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: initial;
|
|
}
|
|
|
|
.search-box {
|
|
width: 100%;
|
|
margin-left: .5em;
|
|
|
|
input[type=search] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|