webhooks form and single view

stable
Xavier Julián 2015-01-21 14:16:39 +01:00 committed by David Barragán Merino
parent a0d93abff4
commit 8c25f0bad1
2 changed files with 57 additions and 8 deletions

View File

@ -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
a.icon.icon-floppy(href="", title="Save Webhook") div.webhook-options-wrapper
a.icon.icon-edit(href="", title="Edit Webhook") a.icon.icon-floppy(href="", title="Save Webhook")
a.icon.icon-cancel(href="", title="Cancel Webhook") a.icon.icon-edit(href="", title="Edit Webhook")
a.icon.icon-delete(href="", title="Delete Webhook")
// //
form form

View File

@ -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;