add single support form for contact us, html and css only
LEARNER-2580
This commit is contained in:
tasawernawaz
@@ -5,12 +5,15 @@ from django.conf.urls import patterns, url
|
||||
|
||||
from support import views
|
||||
|
||||
from lms.djangoapps.support.views.contact_us import ContactUsView
|
||||
|
||||
urlpatterns = patterns(
|
||||
'',
|
||||
url(r'^$', views.index, name="index"),
|
||||
url(r'^certificates/?$', views.CertificatesSupportView.as_view(), name="certificates"),
|
||||
url(r'^refund/?$', views.RefundSupportView.as_view(), name="refund"),
|
||||
url(r'^enrollment/?$', views.EnrollmentSupportView.as_view(), name="enrollment"),
|
||||
url(r'^contact_us/?$', ContactUsView.as_view(), name="contact_us"),
|
||||
url(
|
||||
r'^enrollment/(?P<username_or_email>[\w.@+-]+)?$',
|
||||
views.EnrollmentSupportListView.as_view(),
|
||||
|
||||
16
lms/djangoapps/support/views/contact_us.py
Normal file
16
lms/djangoapps/support/views/contact_us.py
Normal file
@@ -0,0 +1,16 @@
|
||||
"""
|
||||
Signle support contact view
|
||||
"""
|
||||
from django.views.generic import View
|
||||
|
||||
from edxmako.shortcuts import render_to_response
|
||||
|
||||
|
||||
#TODO https://openedx.atlassian.net/browse/LEARNER-2296
|
||||
class ContactUsView(View):
|
||||
"""
|
||||
View for viewing and submitting contact us form.
|
||||
"""
|
||||
|
||||
def get(self, request):
|
||||
return render_to_response("support/contact_us.html")
|
||||
@@ -375,8 +375,7 @@ $font-semibold: 600 !default;
|
||||
$font-bold: 700 !default;
|
||||
|
||||
$m-base-font-size: em(15) !default;
|
||||
|
||||
|
||||
$support-form-base-font-size: 16px;
|
||||
// ----------------------------
|
||||
// #DEPTH
|
||||
// ----------------------------
|
||||
|
||||
@@ -132,3 +132,108 @@
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-us-wrapper {
|
||||
min-width: auto;
|
||||
|
||||
.form-group {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $support-form-base-font-size + 8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size:$support-form-base-font-size + 4;
|
||||
font-weight:$font-regular;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: inherit;
|
||||
font-size: $support-form-base-font-size + 2;
|
||||
font-style: normal;
|
||||
font-weight: $font-regular;
|
||||
}
|
||||
|
||||
.help-button {
|
||||
margin-bottom: $baseline;
|
||||
width: $baseline * 8;
|
||||
height: $baseline * 2;
|
||||
font-weight: $font-regular;
|
||||
font-size: $support-form-base-font-size + 2;
|
||||
border:1px solid $blue;
|
||||
border-radius:3px;
|
||||
color:$blue;
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
{
|
||||
color: $blue;
|
||||
background-color: $mediumGrey !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label-course {
|
||||
margin-bottom: $baseline - 5;
|
||||
}
|
||||
|
||||
.message-desc {
|
||||
color:$dark-gray1;
|
||||
font-size: $support-form-base-font-size - 2;
|
||||
margin-bottom:$baseline - 16;
|
||||
}
|
||||
|
||||
.select-course {
|
||||
font-size: $support-form-base-font-size;
|
||||
height: $baseline * 2;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.progress {
|
||||
padding: 0;
|
||||
margin-top: $baseline - 10;
|
||||
|
||||
.progress-bar {
|
||||
background-color: $blue;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: $blue;
|
||||
width: 100%;
|
||||
height: $baseline * 2;
|
||||
font-size: $support-form-base-font-size + 2;
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
{
|
||||
background-image: none;
|
||||
background-color: $m-blue-d6;
|
||||
border-color: $m-blue-d6;
|
||||
}
|
||||
}
|
||||
|
||||
.file-loading, .file-name {
|
||||
font-size: $support-form-base-font-size + 2;
|
||||
}
|
||||
|
||||
.file-action {
|
||||
@include float(right);
|
||||
font-size: $support-form-base-font-size + 2;
|
||||
margin-bottom: $baseline - 10;
|
||||
}
|
||||
|
||||
.btn-signin {
|
||||
width: $baseline * 8;
|
||||
margin-bottom: ($baseline * 2) + 10;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.row {
|
||||
max-width: $baseline * 25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
157
lms/templates/support/contact_us.html
Normal file
157
lms/templates/support/contact_us.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<%page expression_filter="h"/>
|
||||
|
||||
<%!
|
||||
from django.utils.translation import ugettext as _
|
||||
from django.utils.html import escape
|
||||
%>
|
||||
|
||||
<%inherit file="../main.html"/>
|
||||
|
||||
<%block name="title">
|
||||
<title>
|
||||
Contact US
|
||||
</title>
|
||||
</%block>
|
||||
|
||||
<%block name="head_extra">
|
||||
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
</%block>
|
||||
|
||||
<%block name="body">
|
||||
|
||||
<div class="container contact-us-wrapper">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>${_("Contact Us")}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p>${_("Your question may have already been answered.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<a class="btn btn-secondary help-button">${_("Visit edX Help")}</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--logged out users-->
|
||||
|
||||
% if not user.is_authenticated():
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p>${_("Sign in for a faster response")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sign-in button brings user to sign-in page. After signing in, user is brough to logged in state of contact form.-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<button class="btn btn-primary btn-signin">${_("Sign in")}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No autofilled email in logged out state.-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="email">${_("Email")}</label>
|
||||
<input type="text" class="form-control" id="email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course is an optional text field in logged out state because we don't know what courses
|
||||
the user is enrolled in and the question may not be course-specific-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="course">${_("Course Name")}<span> ${_("(Optional)")}</span></label>
|
||||
<input type="text" class="form-control" id="course">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
% else:
|
||||
|
||||
<!--logged in users-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p>${_("What can we help you with, iananderson21?")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label class="label-course" for="course">${_("Course Name")}</label>
|
||||
<select class="form-control select-course" id="course">
|
||||
<option>The Science of Happiness</option>
|
||||
<option>Video Game Design: Teamwork and Collaboration</option>
|
||||
<option>Not course-specific</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
% endif
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="message">${_("Message")}</label>
|
||||
<p class="message-desc">${_("The more you tell us, themore quickly and helpfully we can respond!")}</p>
|
||||
<textarea aria-describedby="message-desc" class="form-control" rows="7" id="message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="attachment">${_("Add Attachment")}
|
||||
<span>${_("(Optional)")}</span>
|
||||
</label>
|
||||
<input id="attachment" multiple type="file" class="file file-loading" data-allowed-file-extensions='["png", "jpg", "gif", "tif", "jpeg"]'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p>${_("1 file uploaded:")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<span class="file-name">my_image1.png</span>
|
||||
<span class="file-action"><a href="#">${_("Remove file")}</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<span class="file-name">my_image2.png</span>
|
||||
<span class="file-action"><a href="#">${_("Cancel upload")}</a></span>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<button class="btn btn-primary">${_("Submit")}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</%block>
|
||||
Reference in New Issue
Block a user