webhooks form and single view
parent
a0d93abff4
commit
8c25f0bad1
|
@ -19,10 +19,8 @@ block content
|
||||||
section.webhooks-table.basic-table
|
section.webhooks-table.basic-table
|
||||||
div.table-header
|
div.table-header
|
||||||
div.row
|
div.row
|
||||||
div.webhook-service
|
div.webhook-service Name
|
||||||
span Name
|
div.webhook-url URL
|
||||||
div.webhook-url
|
|
||||||
span URL
|
|
||||||
div.webhook-options
|
div.webhook-options
|
||||||
div.table-body
|
div.table-body
|
||||||
form.row
|
form.row
|
||||||
|
@ -40,11 +38,12 @@ block content
|
||||||
span Slack
|
span Slack
|
||||||
div.webhook-url
|
div.webhook-url
|
||||||
span http://slack.kjrw3543m/nwdlkw4m535/ffm
|
span http://slack.kjrw3543m/nwdlkw4m535/ffm
|
||||||
a(href="", title="Test history") Test history
|
a(href="", title="Test history") (See test history)
|
||||||
div.webhook-options
|
div.webhook-options
|
||||||
|
div.webhook-options-wrapper
|
||||||
a.icon.icon-floppy(href="", title="Save Webhook")
|
a.icon.icon-floppy(href="", title="Save Webhook")
|
||||||
a.icon.icon-edit(href="", title="Edit Webhook")
|
a.icon.icon-edit(href="", title="Edit Webhook")
|
||||||
a.icon.icon-cancel(href="", title="Cancel Webhook")
|
a.icon.icon-delete(href="", title="Delete Webhook")
|
||||||
|
|
||||||
//
|
//
|
||||||
form
|
form
|
||||||
|
|
|
@ -1,4 +1,26 @@
|
||||||
.admin-webhooks {
|
.admin-webhooks {
|
||||||
|
.webhooks-table {
|
||||||
|
.row {
|
||||||
|
padding: .5rem 0;
|
||||||
|
}
|
||||||
|
.row:hover {
|
||||||
|
.webhook-options-wrapper {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .2s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
@extend %bold;
|
||||||
|
border-bottom: 1px solid $gray-light;
|
||||||
|
}
|
||||||
|
.table-body {
|
||||||
|
.webhook-service {
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.webhooks-options {
|
.webhooks-options {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -16,12 +38,40 @@
|
||||||
.webhook-url {
|
.webhook-url {
|
||||||
flex-basis: 400px;
|
flex-basis: 400px;
|
||||||
flex-grow: 8;
|
flex-grow: 8;
|
||||||
|
span {
|
||||||
|
@include ellipsis($width: 65%);
|
||||||
|
color: $gray-light;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: $green-taiga;
|
||||||
|
margin-left: .5rem;
|
||||||
|
&:hover {
|
||||||
|
color: $fresh-taiga;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.webhook-options {
|
.webhook-options {
|
||||||
flex-basis: 100px;
|
flex-basis: 100px;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
a {
|
||||||
|
color: $gray-light;
|
||||||
|
margin-right: .5rem;
|
||||||
|
transition: color .2s linear;
|
||||||
|
vertical-align: middle;
|
||||||
|
&:hover {
|
||||||
|
color: $green-taiga;
|
||||||
|
transition: color .2s linear;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.webhook-options-wrapper {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .3s linear;
|
||||||
}
|
}
|
||||||
.webhook-url-inputs {
|
.webhook-url-inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue