diff --git a/templates/_bootstrap-layout.jade b/templates/_bootstrap-layout.jade index 81ea23b6..d610510b 100644 --- a/templates/_bootstrap-layout.jade +++ b/templates/_bootstrap-layout.jade @@ -61,8 +61,9 @@ html .panel-heading code + margin-left 3px color #c7254e - background-color transparent + background-color rgba(255,255,255,0.7) white-space pre-wrap white-space -moz-pre-wrap white-space -pre-wrap @@ -72,13 +73,45 @@ html margin-top 10px margin-bottom 10px + .list-group + margin-bottom 2px + + a.list-group-item:hover + background-color #F8F8F8 + border-left 2px solid #555 + padding-left 15px + + .indent + display block + text-indent: 16px; + + .list-group-item + padding-left 16px + .toggle + .open + display block + .closed + display none + + .list-group-item.collapsed + .toggle + .open + display none + .closed + display block + a.list-group-item + font-size 13px white-space nowrap text-overflow ellipsis overflow hidden &.heading + font-size 15px background-color #f5f5f5 + + &:hover + background-color #F8F8F8 .list-group-item.collapse display none @@ -86,9 +119,24 @@ html .list-group-item.collapse.in display block + .list-group-item + a + span.closed + display none + span.open + display block + + .list-group-item + a.collapsed + span.closed + display block + span.open + display none + #nav + width: inherit margin-top 38px - max-width 255px + min-width 255px top 0 bottom 0 padding-right 12px @@ -103,12 +151,12 @@ html a.text-muted.back-to-top(href='#top') i.fa.fa-toggle-up |  Back to top - .container + .container-fluid .row block nav +Nav(false) - .col-md-9 + .col-md-8 block content +Content('primary', false) diff --git a/templates/_bootstrap-mixins.jade b/templates/_bootstrap-mixins.jade index cbf2c7fd..e48f009e 100644 --- a/templates/_bootstrap-mixins.jade +++ b/templates/_bootstrap-mixins.jade @@ -1,32 +1,34 @@ //- Common mixins that templates can share mixin Nav(multipage) - div.col-md-3 + div.col-md-4 nav#nav.hidden-sm.hidden-xs.affix.nav if multipage .list-group a.list-group-item.heading(href="#") Home each resourceGroup in api.resourceGroups .list-group - a.list-group-item.heading(href="##{(multipage ? 'page:' : '') + slug(resourceGroup.name)}") + a.list-group-item.heading.collapsed(data-toggle="collapse", data-target="##{(multipage ? 'page:' : '') + slug(resourceGroup.name)}-menu", href="##{(multipage ? 'page:' : '') + slug(resourceGroup.name)}") + if resourceGroup.resources.length + span.toggle.pull-right + span.open.fa.fa-angle-down + span.closed.fa.fa-angle-right = resourceGroup.name || 'Resource Group' - each resource in resourceGroup.resources - if !condenseNav || (resource.actions.length != 1) - a.list-group-item(href="##{multipage ? 'page:' + slug(resourceGroup.name) + ',header:' : ''}#{slug(resourceGroup.name)}-#{slug(resource.name)}") - i.fa.fa-bars - |   - = resource.name || 'Resource' - each action in resource.actions - a.list-group-item(href="##{multipage ? 'page:' + slug(resourceGroup.name) + ',header:' : ''}#{slug(resourceGroup.name)}-#{slug(resource.name)}-#{slug(action.method)}", style="padding-left: 32px") + div.collapse(id="#{(multipage ? 'page:' : '') + slug(resourceGroup.name)}-menu") + each resource in resourceGroup.resources + if !condenseNav || (resource.actions.length != 1) + a.list-group-item(href="##{multipage ? 'page:' + slug(resourceGroup.name) + ',header:' : ''}#{slug(resourceGroup.name)}-#{slug(resource.name)}") + = resource.name || 'Resource' + each action in resource.actions + a.list-group-item(href="##{multipage ? 'page:' + slug(resourceGroup.name) + ',header:' : ''}#{slug(resourceGroup.name)}-#{slug(resource.name)}-#{slug(action.method)}") + +Icon(action.method) + span.indent + = action.name || action.method + ' ' + resource.uriTemplate + else + a.list-group-item(href="##{multipage ? 'page:' + slug(resourceGroup.name) + ',header:' : ''}#{slug(resourceGroup.name)}-#{slug(resource.name)}") + - var action = resource.actions[0] +Icon(action.method) - |   - = action.name || action.method + ' ' + resource.uriTemplate - else - a.list-group-item(href="##{multipage ? 'page:' + slug(resourceGroup.name) + ',header:' : ''}#{slug(resourceGroup.name)}-#{slug(resource.name)}") - - var action = resource.actions[0] - +Icon(action.method) - |   - = resource.name || action.name || action.method + ' ' + resource.uriTemplate + = resource.name || action.name || action.method + ' ' + resource.uriTemplate each meta in api.metadata if meta.name == 'HOST' p(style="text-align: center") @@ -74,7 +76,9 @@ mixin RequestResponse(title, request, resourceGroup, resource, action) |    code= request.name if content - a.pull-right(data-toggle="collapse", data-target="##{id}") Toggle + a.pull-right.collapsed(data-toggle="collapse", data-target="##{id}") + span.closed Show + span.open Hide if content li.list-group-item.panel-collapse.collapse(id=id) if Object.keys(request.headers).length @@ -175,17 +179,23 @@ mixin Paginate(resourceGroups, index) mixin Icon(method) case method when 'GET' - i.fa.fa-arrow-circle-down + span.badge.alert-info + i.fa.fa-arrow-down when 'POST' - i.fa.fa-plus-square + span.badge.alert-success + i.fa.fa-plus when 'PUT' - i.fa.fa-pencil + span.badge.alert-warning + i.fa.fa-pencil when 'PATCH' - i.fa.fa-pencil + span.badge.alert-warning + i.fa.fa-pencil when 'DELETE' - i.fa.fa-warning + span.badge.alert-danger + i.fa.fa-times default - i.fa.fa-dot-circle-o + span.badge + i.fa.fa-dot-circle-o mixin Content(getButtonClass, multipage) div(data-bind=multipage ? "visible: page() == 'home'" : undefined) diff --git a/templates/cyborg.jade b/templates/cyborg.jade index 8c04c622..05e49f05 100644 --- a/templates/cyborg.jade +++ b/templates/cyborg.jade @@ -57,8 +57,9 @@ block styles .panel-heading code + margin-left 3px color white - background-color transparent + background-color rgba(0,0,0,0.7) white-space pre-wrap white-space -moz-pre-wrap white-space -pre-wrap @@ -68,13 +69,49 @@ block styles margin-top 10px margin-bottom 10px + .list-group + margin-bottom 2px + + a.list-group-item:hover + background-color #F8F8F8 + border-left 2px solid #555 + padding-left 15px + + .indent + display block + text-indent: 16px; + + .list-group-item + padding-left 16px + .toggle + .open + display block + .closed + display none + + .list-group-item.collapsed + .toggle + .open + display none + .closed + display block + + a.list-group-item:hover + background-color #464646 + border-left-color #888888 + a.list-group-item + font-size 13px white-space nowrap text-overflow ellipsis overflow hidden &.heading + font-size 15px background-color #3c3c3c + + &:hover + background-color #464646 .list-group-item.collapse display none @@ -82,7 +119,22 @@ block styles .list-group-item.collapse.in display block + .list-group-item + a + span.closed + display none + span.open + display block + + .list-group-item + a.collapsed + span.closed + display block + span.open + display none + #nav + width: inherit margin-top 38px min-width 255px top 0 diff --git a/templates/flatly.jade b/templates/flatly.jade index 6a58b79b..611698bf 100644 --- a/templates/flatly.jade +++ b/templates/flatly.jade @@ -56,8 +56,8 @@ block styles .panel-heading code - color white - background-color transparent + margin-left 3px + background-color rgba(255,255,255,0.7) white-space pre-wrap white-space -moz-pre-wrap white-space -pre-wrap @@ -67,13 +67,49 @@ block styles margin-top 10px margin-bottom 10px + .list-group + margin-bottom 2px + + a.list-group-item:hover + background-color #F8F8F8 + border-left 2px solid #555 + padding-left 15px + + .indent + display block + text-indent: 16px; + + .list-group-item + padding-left 16px + .toggle + .open + display block + .closed + display none + + .list-group-item.collapsed + .toggle + .open + display none + .closed + display block + + a.list-group-item:hover + background-color #f5f5f5 + border-left-color #555555 + a.list-group-item + font-size 13px white-space nowrap text-overflow ellipsis overflow hidden &.heading + font-size 15px background-color #ecf0f1 + + &:hover + background-color #f5f5f5 .list-group-item.collapse display none @@ -81,7 +117,22 @@ block styles .list-group-item.collapse.in display block + .list-group-item + a + span.closed + display none + span.open + display block + + .list-group-item + a.collapsed + span.closed + display block + span.open + display none + #nav + width: inherit margin-top 38px min-width 255px top 0 diff --git a/templates/slate.jade b/templates/slate.jade index a2bfd549..92c8f006 100644 --- a/templates/slate.jade +++ b/templates/slate.jade @@ -58,8 +58,9 @@ block styles .panel-heading code + margin-left 3px color black - background-color transparent + background-color rgba(255,255,255,0.7) white-space pre-wrap white-space -moz-pre-wrap white-space -pre-wrap @@ -69,13 +70,49 @@ block styles margin-top 10px margin-bottom 10px + .list-group + margin-bottom 2px + + a.list-group-item:hover + background-color #F8F8F8 + border-left 2px solid #555 + padding-left 15px + + .indent + display block + text-indent: 16px; + + .list-group-item + padding-left 16px + .toggle + .open + display block + .closed + display none + + .list-group-item.collapsed + .toggle + .open + display none + .closed + display block + + a.list-group-item:hover + background-color #4B5159 + border-left-color #c8c8c8 + a.list-group-item + font-size 13px white-space nowrap text-overflow ellipsis overflow hidden &.heading + font-size 15px background-color #3e444c + + &:hover + background-color #4B5159 .list-group-item.collapse display none @@ -83,7 +120,22 @@ block styles .list-group-item.collapse.in display block + .list-group-item + a + span.closed + display none + span.open + display block + + .list-group-item + a.collapsed + span.closed + display block + span.open + display none + #nav + width: inherit margin-top 38px min-width 255px top 0