Skip to content

E
edx-platform
Commit 39cf0b44 by Tasawer Nawaz Committed by GitHub
Options

Merge pull request #16056 from edx/tasawer/learner-2580/add-single-support-form 

Add single support form HTML and CSS
parents e7850745 07db2613
Showing with 282 additions and 2 deletions
lms/djangoapps/support/urls.py
......@@ -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(),
......
lms/djangoapps/support/views/contact_us.py 0 → 100644
"""
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")
lms/static/sass/partials/base/_variables.scss
......@@ -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
// ----------------------------
......
lms/static/sass/views/_support.scss
......@@ -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;
}
}
}
lms/templates/support/contact_us.html 0 → 100644
<%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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment