diff --git a/static/css/application.css b/static/css/application.css index 7a2c743ee3..c1cb6041b5 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -117,7 +117,7 @@ input, select { font-weight: 800; font-style: italic; } -.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { +.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { content: "."; display: block; height: 0; @@ -134,7 +134,7 @@ input, select { display: table; width: 100%; } -h1.top-header, div.course-wrapper section.course-content h1, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info > h1, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header { +h1.top-header, div.course-wrapper section.course-content h1, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header { background: #f3f3f3; border-bottom: 1px solid #e3e3e3; margin: -22.652px -22.652px 22.652px; @@ -954,20 +954,22 @@ div#pwd_reset p { div#pwd_reset input[type="email"] { margin-bottom: 22.652px; } -div#apply_name_change, div#change_email, div#unenroll_course { +div#apply_name_change, div#change_email, div#unenroll, div#deactivate-account { max-width: 700px; } -div#apply_name_change ul, div#change_email ul, div#unenroll_course ul { +div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-account ul { list-style: none; } -div#apply_name_change ul li, div#change_email ul li, div#unenroll_course ul li { +div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li { margin-bottom: 11.326px; } -div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll_course ul li textarea, div#unenroll_course ul li input[type="email"], div#unenroll_course ul li input[type="number"], div#unenroll_course ul li input[type="password"], div#unenroll_course ul li input[type="search"], div#unenroll_course ul li input[type="tel"], div#unenroll_course ul li input[type="text"], div#unenroll_course ul li input[type="url"], div#unenroll_course ul li input[type="color"], div#unenroll_course ul li input[type="date"], div#unenroll_course ul li input[type="datetime"], div#unenroll_course ul li input[type="datetime-local"], div#unenroll_course ul li input[type="month"], div#unenroll_course ul li input[type="time"], div#unenroll_course ul li input[type="week"] { +div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll_course ul li textarea { +div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea { height: 60px; } +div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] { + white-space: normal; } div#feedback_div form ol li { float: none; @@ -3437,15 +3439,46 @@ div.profile-wrapper section.user-info ul li div#location_sub:empty, div.profile- padding: 0; } div.profile-wrapper section.user-info ul li div#description { font-size: 12px; } -div.profile-wrapper section.user-info ul li a#change_language, div.profile-wrapper section.user-info ul li a#change_location, div.profile-wrapper section.user-info ul li a.edit-email { +div.profile-wrapper section.user-info ul li a#change_language, div.profile-wrapper section.user-info ul li a#change_location, div.profile-wrapper section.user-info ul li a.edit-email, div.profile-wrapper section.user-info ul li a.name-edit, div.profile-wrapper section.user-info ul li a.email-edit { position: absolute; top: 9px; right: 11.326px; text-transform: uppercase; font-size: 12px; color: #999; } -div.profile-wrapper section.user-info ul li a#change_language:hover, div.profile-wrapper section.user-info ul li a#change_location:hover, div.profile-wrapper section.user-info ul li a.edit-email:hover { +div.profile-wrapper section.user-info ul li a#change_language:hover, div.profile-wrapper section.user-info ul li a#change_location:hover, div.profile-wrapper section.user-info ul li a.edit-email:hover, div.profile-wrapper section.user-info ul li a.name-edit:hover, div.profile-wrapper section.user-info ul li a.email-edit:hover { color: #555; } +div.profile-wrapper section.user-info ul li p { + font-size: 12px; + margin-bottom: 0; + margin-top: 4px; + color: #999; } +div.profile-wrapper section.user-info ul li a.deactivate { + color: #aaa; + font-style: italic; } +div.profile-wrapper section.user-info ul li input { + background: none; + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + color: #999; + font-size: 12px; + font-weight: normal; + margin: 0; + padding: 0; + position: absolute; + right: 11.326px; + text-transform: uppercase; + top: 9px; } +div.profile-wrapper section.user-info ul li input:hover { + color: #555; } +div.profile-wrapper section.user-info ul li.deactivate { + border-bottom: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + margin-top: 10px; } div.profile-wrapper section.user-info div#change_password_pop { border-bottom: 1px solid #d3d3d3; -webkit-box-shadow: 0 1px 0 #eeeeee; @@ -3458,38 +3491,14 @@ div.profile-wrapper section.user-info div#change_password_pop h2 { font-weight: bold; text-transform: uppercase; font-size: 14px; } -div.profile-wrapper section.user-info div#unenroll { - border-bottom: 1px solid #d3d3d3; - -webkit-box-shadow: 0 1px 0 #eeeeee; - -moz-box-shadow: 0 1px 0 #eeeeee; - box-shadow: 0 1px 0 #eeeeee; } -div.profile-wrapper section.user-info div#unenroll a { - color: #4d4d4d; - display: block; - display: block; - padding: 7px 22.652px; - -webkit-transition-property: all; - -moz-transition-property: all; - -ms-transition-property: all; - -o-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.15s; - -moz-transition-duration: 0.15s; - -ms-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; - -webkit-transition-timing-function: ease-out; - -moz-transition-timing-function: ease-out; - -ms-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; - -webkit-transition-delay: 0; - -moz-transition-delay: 0; - -ms-transition-delay: 0; - -o-transition-delay: 0; - transition-delay: 0; } -div.profile-wrapper section.user-info div#unenroll a:hover { - background: #efefef; } +div.profile-wrapper section.course-info header h1 { + margin: 0; + float: left; } +div.profile-wrapper section.course-info header a.unenroll { + float: right; + color: #aaa; + font-style: italic; + margin-top: 8px; } div.profile-wrapper section.course-info div#grade-detail-graph { width: 100%; min-height: 300px; } diff --git a/static/css/marketing.css b/static/css/marketing.css index b330c4a002..a73f1125c8 100644 --- a/static/css/marketing.css +++ b/static/css/marketing.css @@ -915,20 +915,22 @@ div#pwd_reset p { div#pwd_reset input[type="email"] { margin-bottom: 25.888px; } -div#apply_name_change, div#change_email, div#unenroll_course { +div#apply_name_change, div#change_email, div#unenroll, div#deactivate-account { max-width: 700px; } -div#apply_name_change ul, div#change_email ul, div#unenroll_course ul { +div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-account ul { list-style: none; } -div#apply_name_change ul li, div#change_email ul li, div#unenroll_course ul li { +div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li { margin-bottom: 12.944px; } -div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll_course ul li textarea, div#unenroll_course ul li input[type="email"], div#unenroll_course ul li input[type="number"], div#unenroll_course ul li input[type="password"], div#unenroll_course ul li input[type="search"], div#unenroll_course ul li input[type="tel"], div#unenroll_course ul li input[type="text"], div#unenroll_course ul li input[type="url"], div#unenroll_course ul li input[type="color"], div#unenroll_course ul li input[type="date"], div#unenroll_course ul li input[type="datetime"], div#unenroll_course ul li input[type="datetime-local"], div#unenroll_course ul li input[type="month"], div#unenroll_course ul li input[type="time"], div#unenroll_course ul li input[type="week"] { +div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll_course ul li textarea { +div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea { height: 60px; } +div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] { + white-space: normal; } div#feedback_div form ol li { float: none; diff --git a/templates/profile.html b/templates/profile.html index 97144be30d..394178a305 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -129,7 +129,10 @@ $(function() {
-

Course Progress

+
+

Course Progress

+ Unenroll from 6.002x +
@@ -172,20 +175,25 @@ $(function() { %endif %endfor +
-

${name}

- %if True: - Edit - %else: - (Name change pending) - %endif +

Student Profile

-
-

Password change

-

We'll e-mail a password reset link to ${email}.

- - - -
- -
@@ -272,21 +282,33 @@ $(function() { -
-

Unenroll

-

At the end of the semester, all students who do not complete the course will be automatically dropped. If you would still prefer to deactivate your account, you can:

+
+

Deactivate MITx Account

+

Once you deactivate you’re MITx account you will no longer recieve updates and new class announcements from MITx.

+

If you’d like to still get updates and new class announcements you can just unenroll and keep your account active.

+
  • - -
  • -
  • - -
  • -
  • - + +
  • +
+
+
+
+ +
+

Unenroll from 6.002x

+

Please note: you will still receive updates and new class announcements from MITx. If you don’t wish to receive any more updates or announcements deactivate your account.

+ +
+
+
+
    +
  • +
diff --git a/templates/sass/_profile.scss b/templates/sass/_profile.scss index 8ffc54228f..b03da36836 100644 --- a/templates/sass/_profile.scss +++ b/templates/sass/_profile.scss @@ -75,7 +75,11 @@ div.profile-wrapper { font-size: 12px; } - a#change_language, a#change_location, a.edit-email { + a#change_language, + a#change_location, + a.edit-email, + a.name-edit, + a.email-edit { position: absolute; top: 9px; right: lh(.5); @@ -88,6 +92,47 @@ div.profile-wrapper { } } + p { + font-size: 12px; + margin-bottom: 0; + margin-top: 4px; + color: #999; + } + + a.deactivate { + color: #aaa; + font-style: italic; + } + + input { + background: none; + border: none; + @include box-shadow(none); + color: #999; + font-size: 12px; + font-weight: normal; + margin: 0; + padding: 0; + position: absolute; + right: lh(.5); + text-transform: uppercase; + top: 9px; + + &:hover { + color: #555; + } + } + + &.deactivate { + // border-top: 1px solid #d3d3d3; + // position: absolute; + // bottom: 0; + // @include box-shadow(inset 0 1px 0 #eee); + // width: 100%; + border-bottom: none; + @include box-shadow(none); + margin-top: 10px; + } } } @@ -104,30 +149,26 @@ div.profile-wrapper { font-size: $body-font-size; } } - - div#unenroll { - border-bottom: 1px solid #d3d3d3; - @include box-shadow(0 1px 0 #eee); - - a { - color: lighten($text-color, 10%); - display: block; - display: block; - padding: 7px lh(); - @include transition(); - - &:hover { - background: #efefef; - } - } - } } section.course-info { @extend .content; - > h1 { - @extend .top-header; + header { + @extend h1.top-header; + @extend .clearfix; + + h1 { + margin: 0; + float: left; + } + + a.unenroll { + float: right; + color: #aaa; + font-style: italic; + margin-top: 8px; + } } div#grade-detail-graph { @@ -167,29 +208,29 @@ div.profile-wrapper { padding-left: flex-gutter(9); width: flex-grid(7, 9); - > li { - padding:0 0 lh() 0; + > li { + padding:0 0 lh() 0; - &:first-child { - padding-top: 0; - } - - &:last-child { - border-bottom: 0; - } - - h3 { - color: #666; - } - - ol { - list-style: none; - - li { - display: inline-block; - padding-right: 1em; + &:first-child { + padding-top: 0; + } + + &:last-child { + border-bottom: 0; + } + + h3 { + color: #666; + } + + ol { + list-style: none; + + li { + display: inline-block; + padding-right: 1em; + } } - } } } } diff --git a/templates/sass/layout/_leanmodal.scss b/templates/sass/layout/_leanmodal.scss index cf6d1ceeea..8b1f05f37f 100644 --- a/templates/sass/layout/_leanmodal.scss +++ b/templates/sass/layout/_leanmodal.scss @@ -207,7 +207,8 @@ div#pwd_reset { div#apply_name_change, div#change_email, -div#unenroll_course { +div#unenroll, +div#deactivate-account { max-width: 700px; ul { @@ -225,6 +226,10 @@ div#unenroll_course { textarea { height: 60px; } + + input[type="submit"] { + white-space: normal; + } } } }