mirror of https://github.com/statping/statping
input tag design/js for list inputs
parent
6744ca3003
commit
babe0c791c
|
@ -125,6 +125,43 @@ HTML, BODY {
|
|||
height: 300px;
|
||||
width: 100%; }
|
||||
|
||||
.inputTags-field {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding-top: .13rem; }
|
||||
|
||||
input.inputTags-field:focus {
|
||||
outline-width: 0; }
|
||||
|
||||
.inputTags-list {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: calc(2.25rem + 2px);
|
||||
padding: .2rem .35rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
|
||||
|
||||
.inputTags-item {
|
||||
background-color: #3aba39;
|
||||
margin-right: 5px;
|
||||
padding: 5px 8px;
|
||||
font-size: 10pt;
|
||||
color: white;
|
||||
border-radius: 4px; }
|
||||
|
||||
.inputTags-item .close-item {
|
||||
margin-left: 6px;
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
cursor: pointer; }
|
||||
|
||||
.btn-primary {
|
||||
background-color: #3e9bff;
|
||||
border-color: #006fe6;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -151,6 +151,48 @@ HTML,BODY {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.inputTags-field {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding-top: .13rem;
|
||||
}
|
||||
|
||||
input.inputTags-field:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.inputTags-list {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: calc(2.25rem + 2px);
|
||||
padding: .2rem .35rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
}
|
||||
|
||||
.inputTags-item {
|
||||
background-color: #3aba39;
|
||||
margin-right: 5px;
|
||||
padding: 5px 8px;
|
||||
font-size: 10pt;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.inputTags-item .close-item {
|
||||
margin-left: 6px;
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin dynamic-color-hov($color) {
|
||||
&.dyn-dark {
|
||||
background-color: darken($color, 12%) !important;
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
<div class="form-group row{{if (eq .Type "tcp") or (eq .Type "udp")}} d-none{{end}}">
|
||||
<label for="headers" class="col-sm-4 col-form-label">HTTP Headers</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="headers" class="form-control" id="headers" autocapitalize="none" spellcheck="false" placeholder='Authorization=1010101,Content-Type=application/json' value="{{.Headers.String}}">
|
||||
<input name="headers" class="input-tags form-control" id="headers" autocapitalize="none" spellcheck="false" placeholder='Authorization=1010101,Content-Type=application/json' value="{{.Headers.String}}">
|
||||
<small class="form-text text-muted">Comma delimited list of HTTP Headers (KEY=VALUE,KEY=VALUE)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -205,8 +205,11 @@
|
|||
{{$s := .Service}}
|
||||
<script src="/js/flatpickr.js"></script>
|
||||
<script src="/js/rangePlugin.js"></script>
|
||||
<script src="/js/inputTags.min.js"></script>
|
||||
<script>
|
||||
|
||||
$(".input-tags").inputTags();
|
||||
|
||||
let options = {
|
||||
chart: {
|
||||
height: "100%",
|
||||
|
@ -310,6 +313,7 @@ async function RenderChartLatency() {
|
|||
}
|
||||
|
||||
$(document).ready(async function() {
|
||||
|
||||
let startDate = $("#service_start").flatpickr({
|
||||
enableTime: false,
|
||||
static: true,
|
||||
|
|
|
@ -81,7 +81,10 @@
|
|||
{{ else }}
|
||||
<script src="/js/sortable.min.js"></script>
|
||||
{{end}}
|
||||
<script src="/js/inputTags.min.js"></script>
|
||||
<script>
|
||||
$(".input-tags").inputTags();
|
||||
|
||||
sortable('.sortable', {
|
||||
forcePlaceholderSize: true,
|
||||
hoverClass: 'sortable_drag',
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Code generated by go generate; DO NOT EDIT.
|
||||
// This file was generated by robots at
|
||||
// 2019-04-19 11:45:38.037927 -0700 PDT m=+0.539240775
|
||||
// 2019-04-19 21:42:16.46651 -0700 PDT m=+0.559109073
|
||||
//
|
||||
// This contains the most recently Markdown source for the Statping Wiki.
|
||||
package source
|
||||
|
|
Loading…
Reference in New Issue