diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f02483c1cca1dc1e37b7347b14d8210511b93d53
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+ <g>
+ <path d="M310,190c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.52,0,10-4.48,10-10S315.52,190,310,190z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M500.281,443.719l-133.48-133.48C388.546,277.485,400,239.555,400,200C400,89.72,310.28,0,200,0S0,89.72,0,200
+ s89.72,200,200,200c39.556,0,77.486-11.455,110.239-33.198l36.895,36.895c0.005,0.005,0.01,0.01,0.016,0.016l96.568,96.568
+ C451.276,507.838,461.319,512,472,512c10.681,0,20.724-4.162,28.278-11.716C507.837,492.731,512,482.687,512,472
+ S507.837,451.269,500.281,443.719z M305.536,345.727c0,0.001-0.001,0.001-0.002,0.002C274.667,368.149,238.175,380,200,380
+ c-99.252,0-180-80.748-180-180S100.748,20,200,20s180,80.748,180,180c0,38.175-11.851,74.667-34.272,105.535
+ C334.511,320.988,320.989,334.511,305.536,345.727z M326.516,354.793c10.35-8.467,19.811-17.928,28.277-28.277l28.371,28.371
+ c-8.628,10.183-18.094,19.65-28.277,28.277L326.516,354.793z M486.139,486.139c-3.78,3.78-8.801,5.861-14.139,5.861
+ s-10.359-2.081-14.139-5.861l-88.795-88.795c10.127-8.691,19.587-18.15,28.277-28.277l88.798,88.798
+ C489.919,461.639,492,466.658,492,472C492,477.342,489.919,482.361,486.139,486.139z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M200,40c-88.225,0-160,71.775-160,160s71.775,160,160,160s160-71.775,160-160S288.225,40,200,40z M200,340
+ c-77.196,0-140-62.804-140-140S122.804,60,200,60s140,62.804,140,140S277.196,340,200,340z"/>
+ </g>
+</g>
+<g>
+ <g>
+ <path d="M312.065,157.073c-8.611-22.412-23.604-41.574-43.36-55.413C248.479,87.49,224.721,80,200,80c-5.522,0-10,4.478-10,10
+ c0,5.522,4.478,10,10,10c41.099,0,78.631,25.818,93.396,64.247c1.528,3.976,5.317,6.416,9.337,6.416
+ c1.192,0,2.405-0.215,3.584-0.668C311.472,168.014,314.046,162.229,312.065,157.073z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/components/DynamicTable.vue b/src/components/DynamicTable.vue
index 35e15b95b04f713aa4ac9d8abf6fc55b94adeba6..b9cec0c2a1a1dbe5a8a7fa9bd6f4d34bc8c91b9e 100644
--- a/src/components/DynamicTable.vue
+++ b/src/components/DynamicTable.vue
@@ -1,8 +1,10 @@
<template>
<div class="content col-md-12">
- <div class="searchblock col-md-3">
- <input v-model="filter" id="searchfield" placeholder="Suchen" type="text">
- {{keyword}}
+ <div class="search_box">
+ <div class="search_box-inner">
+ <i><img src="../assets/search.svg"></i>
+ <input id="inpt_search" v-model="filter" type="text" class="search__input" placeholder="Suchen..." />
+ </div>
</div>
<table id="Table">
<tr>
@@ -66,8 +68,6 @@ export default {
}
},
methods: {
-
-
"sortTable": function sortTable(col) {
this.currentSort = col;
if (this.currentSortDir === 'asc') {
@@ -432,6 +432,44 @@ export default {
</script>
<style scoped>
+.search_box{
+ margin-top: 50px;
+ text-align:left;
+}
+
+.search_box-inner {
+ display:inline;
+ font-size:1em;
+ border-radius: 8em;
+ border:0.1em solid rgba(218,208,190,1);
+ box-shadow:0 0 0.3em rgba(60,60,60,0.4);
+ padding:0.3em;
+ background:white;
+}
+
+.search_box-inner i img {
+ width: 2%;
+ text-align: center;
+ margin: 5px;
+}
+
+#inpt_search{
+ transition:all 0.2s ease-out;
+ width:5px;
+ border-radius:0;
+ box-shadow:none;
+ outline: none;
+ padding:0;
+ margin:0;
+ border:0;
+ background-color: transparent;
+ opacity:0;
+}
+#inpt_search:focus {
+ width: 10em;
+ opacity: 1;
+}
+
.content table {
margin-top: 50px;
margin-right: 1275px;