replace the clear button with a SVG
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
d84612a425
commit
4a3b19497f
|
@ -220,10 +220,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
gap: .5rem;
|
|
||||||
justify-content: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -246,17 +242,25 @@
|
||||||
background: var(--btn-hover);
|
background: var(--btn-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.retry {
|
.button-svg {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.retry svg {
|
.button-svg svg {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-svg[disabled] svg {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-svg svg {
|
||||||
stroke: #9a9996;
|
stroke: #9a9996;
|
||||||
}
|
}
|
||||||
|
|
||||||
.retry:hover svg * {
|
.button-svg:not([disabled]):hover svg * {
|
||||||
stroke: #fff;
|
stroke: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -333,7 +337,9 @@
|
||||||
<div class="dashboard" id="app" v-cloak>
|
<div class="dashboard" id="app" v-cloak>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button :disabled="items.length == 0" @click="clearDashboard">clear</button>
|
<button class="button-svg" :disabled="items.length == 0" @click="clearDashboard">
|
||||||
|
<svg viewBox="0 0 24 24" stroke-width="3" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 9l-1.995 11.346A2 2 0 0116.035 22h-8.07a2 2 0 01-1.97-1.654L4 9M21 6h-5.625M3 6h5.625m0 0V4a2 2 0 012-2h2.75a2 2 0 012 2v2m-6.75 0h6.75" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-inner">
|
<div class="list-inner">
|
||||||
<div class="list-item" v-for="item in items" :key="item.id" @click="show(item)"
|
<div class="list-item" v-for="item in items" :key="item.id" @click="show(item)"
|
||||||
|
@ -344,7 +350,7 @@
|
||||||
<span class="status" :class="statusColor(item)">
|
<span class="status" :class="statusColor(item)">
|
||||||
{{ item.status == 999 ? 'failed' : item.status }}
|
{{ item.status == 999 ? 'failed' : item.status }}
|
||||||
</span>
|
</span>
|
||||||
<button class="retry" @click="retry(item.id)">
|
<button class="button-svg" @click="retry(item.id)">
|
||||||
<svg stroke-width="3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.888 13.5C21.164 18.311 17.013 22 12 22 6.477 22 2 17.523 2 12S6.477 2 12 2c4.1 0 7.625 2.468 9.168 6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 8h4.4a.6.6 0 00.6-.6V3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
<svg stroke-width="3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.888 13.5C21.164 18.311 17.013 22 12 22 6.477 22 2 17.523 2 12S6.477 2 12 2c4.1 0 7.625 2.468 9.168 6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 8h4.4a.6.6 0 00.6-.6V3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -378,11 +384,9 @@
|
||||||
<span>Proxying {{ targetURL }}</span>
|
<span>Proxying {{ targetURL }}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<script>
|
||||||
<script type="text/javascript">
|
new Vue({
|
||||||
var app = new Vue({
|
|
||||||
el: '#app',
|
el: '#app',
|
||||||
data: {
|
data: {
|
||||||
items: [],
|
items: [],
|
||||||
|
|
Loading…
Reference in a new issue