Răsfoiți Sursa

Prototype mark-up and styles.

Paulo Reis 10 ani în urmă
părinte
comite
f62a45444d

+ 12 - 0
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")

+ 48 - 1
services/web/public/stylesheets/app/contact-us.less

@@ -3,4 +3,51 @@
 	textarea {
 		height: 120px;
 	}
-}
+}
+
+.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;
+			}
+		}