diff --git a/services/web/app/views/contact-us-modal.jade b/services/web/app/views/contact-us-modal.jade index 46090eec1b..da899cbaac 100644 --- a/services/web/app/views/contact-us-modal.jade +++ b/services/web/app/views/contact-us-modal.jade @@ -12,6 +12,18 @@ script(type='text/ng-template', id='supportModalTemplate') | #{translate("subject")} .form-group input.field.text.medium.span8.form-control(ng-model="form.subject", maxlength='255', tabindex='1', onkeyup='') + .contact-suggestions + p.contact-suggestion-label Have you checked our knowledge base? + ul.contact-suggestion-list + li: a.contact-suggestion-list-item + span Item 1 - subsection lorem + i.fa.fa-angle-right + li: a.contact-suggestion-list-item + span Item 2 - subsection dolor + i.fa.fa-angle-right + li: a.contact-suggestion-list-item + span Item 3 - subsection sit + i.fa.fa-angle-right label.desc(ng-show="'#{getUserEmail()}'.length < 1") | #{translate("email")} .form-group(ng-show="'#{getUserEmail()}'.length < 1") diff --git a/services/web/public/stylesheets/app/contact-us.less b/services/web/public/stylesheets/app/contact-us.less index 06747b5412..157f23ddbe 100644 --- a/services/web/public/stylesheets/app/contact-us.less +++ b/services/web/public/stylesheets/app/contact-us.less @@ -3,4 +3,51 @@ textarea { height: 120px; } -} \ No newline at end of file +} + +.contact-suggestions { + margin: -5px -20px 10px; + padding: 10px 0; + color: @gray-dark; + background-color: @gray-lightest; + border-top: solid 1px @gray-lighter; + border-bottom: solid 1px @gray-lighter; + font-size: 0.9rem; +} + + .contact-suggestion-label { + margin-bottom: 10px; + padding: 0 20px; + } + + .contact-suggestion-list { + .list-unstyled(); + background-color: #FFF; + border-top: solid 1px @gray-lighter; + border-bottom: solid 1px @gray-lighter; + + li:last-child .contact-suggestion-list-item { + border-bottom: none; + } + } + + .contact-suggestion-list-item { + display: table; + width: 100%; + color: @dropdown-link-color; + padding: 10px 20px; + border-bottom: solid 1px lighten(@gray-lighter, 10%); + cursor: pointer; + + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + background-color: @dropdown-link-hover-bg; + } + + i { + display: table-cell; + text-align: right; + } + } \ No newline at end of file