From ffd196ca2f4c833cd75f6ba089458b76b80685d0 Mon Sep 17 00:00:00 2001 From: JJ <34042537+jhan217@users.noreply.github.com> Date: Thu, 8 Apr 2021 10:41:33 -0400 Subject: [PATCH] refactor: move social media icons on course dashboard for mobile [REV-2128] (#27107) Move the social media icons around the course dashboard; particularly for the mobile view. --- lms/static/sass/multicourse/_dashboard.scss | 69 +++- .../dashboard/_dashboard_course_listing.html | 371 +++++++++--------- 2 files changed, 246 insertions(+), 194 deletions(-) diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 7eb5384443..7d2161d196 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -64,10 +64,11 @@ .details { @include clearfix(); + @include padding-right($baseline); .wrapper-course-image { @include float(left); - @include margin-right(flex-gutter()); + @include margin-right($baseline); width: flex-grid(3); max-height: 150px; @@ -83,6 +84,7 @@ .course-image { width: 100%; + padding: 2px; } } @@ -128,7 +130,7 @@ .wrapper-course-details { display: flex; - flex-flow: row wrap; + flex-flow: column wrap; padding: 0; margin-bottom: $baseline/2; justify-content: space-between; @@ -156,6 +158,10 @@ } .course-info { + flex-grow: 1; + flex-shrink: 0; + min-width: 15em; + [class*="info-"] { font: -apple-system-short-subheadline !important; color: $gray-d1; @@ -196,20 +202,36 @@ } } - .wrapper-course-actions { - @include margin-right($baseline); + .wrapper-course-info-actions { + display: flex; - margin-top: $baseline; - align-self: flex-end; + .wrapper-course-info-row { + width: 100%; + display: inline-flex; + flex-wrap: wrap; + + .course-info { + flex-shrink: 0; + min-width: 10em; + } + + .wrapper-course-actions { + margin-top: $baseline; + + flex-grow: 1; + flex-shrink: 0; + } + } + + .continue-button { + flex-shrink: 0; + flex-grow: 1; + align-self: flex-end; + } } - // Responsive behavior @include media-breakpoint-down(sm) { - width: 100%; - display: flex; - flex-direction: column; - .course-info, .wrapper-course-actions { flex-grow: 1; @@ -223,6 +245,30 @@ } } } + + @include media-breakpoint-down(xs) { + margin-bottom: $baseline; + @include padding-left($baseline/2); + + .wrapper-course-info-actions { + flex-wrap: wrap; + flex-flow: row wrap; + + .wrapper-course-info-row { + .wrapper-course-actions { + margin-top: 0px; + } + } + } + + .continue-button { + .enter-course { + flex: 2 100%; + width: 100%; + margin-top: $baseline; + } + } + } } .course-actions { @@ -414,6 +460,7 @@ @extend %btn-pl-white-base; @include float(right); + margin-top: $baseline; &.archived { @extend %btn-pl-default-base; diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html index 897f9fbbdb..6e97c65616 100644 --- a/lms/templates/dashboard/_dashboard_course_listing.html +++ b/lms/templates/dashboard/_dashboard_course_listing.html @@ -107,196 +107,201 @@ from lms.djangoapps.experiments.utils import UPSELL_TRACKING_FLAG ${course_overview.display_name_with_default} % endif -
- ${course_overview.display_org_with_default} - - ${course_overview.display_number_with_default} - <% - enrollment_date = course_overview.self_paced and enrollment and enrollment.created - if course_overview.start_date_is_still_default: - container_string = _("Coming Soon") - course_date = None - else: - format = 'shortDate' - dashboard_start_display = course_overview.dashboard_start_display - if course_overview.has_ended(): - container_string = _("Ended - {date}") - course_date = course_overview.end - elif course_overview.has_started(): - container_string = _("Started - {date}") - if enrollment_date and isinstance(dashboard_start_display, datetime.datetime): - course_date = max(enrollment_date, dashboard_start_display) - else: - course_date = enrollment_date or dashboard_start_display - elif course_overview.starts_within(days=5): - container_string = _("Starts - {date}") - course_date = dashboard_start_display - format = 'defaultFormat' - else: ## hasn't started yet - container_string = _("Starts - {date}") - course_date = dashboard_start_display +
+
+
+ ${course_overview.display_org_with_default} - + ${course_overview.display_number_with_default} + <% + enrollment_date = course_overview.self_paced and enrollment and enrollment.created + if course_overview.start_date_is_still_default: + container_string = _("Coming Soon") + course_date = None + else: + format = 'shortDate' + dashboard_start_display = course_overview.dashboard_start_display + if course_overview.has_ended(): + container_string = _("Ended - {date}") + course_date = course_overview.end + elif course_overview.has_started(): + container_string = _("Started - {date}") + if enrollment_date and isinstance(dashboard_start_display, datetime.datetime): + course_date = max(enrollment_date, dashboard_start_display) + else: + course_date = enrollment_date or dashboard_start_display + elif course_overview.starts_within(days=5): + container_string = _("Starts - {date}") + course_date = dashboard_start_display + format = 'defaultFormat' + else: ## hasn't started yet + container_string = _("Starts - {date}") + course_date = dashboard_start_display + endif endif - endif - %> + %> - - % if not is_unfulfilled_entitlement and is_course_expired: - - ${show_courseware_link.user_message} - -  ${_('for {course_display_name}').format(course_display_name=course_overview.display_name_with_default)} - - - % elif is_unfulfilled_entitlement: - - - % if not entitlement_expired_at: - % if entitlement_expiration_date: - ${_('You must select a session by {expiration_date} to access the course.').format(expiration_date=entitlement_expiration_date)} - % else: - ${_('You must select a session to access the course.')} + + % if not is_unfulfilled_entitlement and is_course_expired: + + ${show_courseware_link.user_message} + +  ${_('for {course_display_name}').format(course_display_name=course_overview.display_name_with_default)} + + + % elif is_unfulfilled_entitlement: + + + % if not entitlement_expired_at: + % if entitlement_expiration_date: + ${_('You must select a session by {expiration_date} to access the course.').format(expiration_date=entitlement_expiration_date)} + % else: + ${_('You must select a session to access the course.')} + % endif % endif + + % else: + % if isinstance(course_date, six.string_types): + ${container_string.format(date=course_date)} + % elif course_date is not None: + % endif - + % endif + % if entitlement: + % if not entitlement_expired_at: + + % endif + % endif + + % if entitlement and not is_unfulfilled_entitlement and entitlement_expiration_date: +
+ + % if entitlement_expired_at: + ${_('You can no longer change sessions.')} + % else: + ${_('You can change sessions until {entitlement_expiration_date}.').format(entitlement_expiration_date=entitlement_expiration_date)} + % endif +
+ % endif +
+
+
+ % if show_courseware_link or course_overview.has_social_sharing_url() or course_overview.has_marketing_url(): + % if share_settings: + <% + share_url = get_link_for_about_page(course_overview) + encoded_utm_parameters = get_encoded_course_sharing_utm_params() + share_window_name = 'shareWindow' + share_window_config = 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=640, height=480' + %> + % if share_settings.get('DASHBOARD_FACEBOOK', False): + <% + facebook_share_url = u"{url}?{utm_params}".format(url=share_url, utm_params=encoded_utm_parameters['facebook']) + share_text = _("I'm taking {course_name} online with {facebook_brand}. Check it out!").format(course_name=course_overview.display_name_with_default, facebook_brand=share_settings.get('FACEBOOK_BRAND', 'edX.org')) + query_params = urlencode((('u', facebook_share_url), ('quote', share_text),)) + facebook_url = 'https://www.facebook.com/sharer/sharer.php?{query}'.format(query=query_params) + share_msg = _("Share {course_name} on Facebook").format(course_name=course_overview.display_name_with_default) + %> + + ${share_msg} + + + % endif + % if share_settings.get('DASHBOARD_TWITTER', False): + <% + twitter_share_url = u"{url}?{utm_params}".format(url=share_url, utm_params=encoded_utm_parameters['twitter']) + default_share_text = _("I'm taking {course_name} online with {twitter_brand}. Check it out!").format(course_name=course_overview.display_name_with_default, twitter_brand=share_settings.get('TWITTER_BRAND', '@edxonline')) + share_text = urlquote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', default_share_text)) + twitter_url = u'https://twitter.com/intent/tweet?text=' + share_text + u'%20' + urlquote_plus(twitter_share_url) + share_msg = _("Share {course_name} on Twitter").format(course_name=course_overview.display_name_with_default) + %> + + ${share_msg} + + + % endif + % endif + % endif + + ## We should only show the gear dropdown if the user is able to refund/unenroll from their entitlement + ## and/or if they have selected a course run and email_settings are enabled + ## as these are the only actions currently available + % if entitlement and (can_refund_entitlement or show_email_settings): + <%include file='_dashboard_entitlement_actions.html' args='course_overview=course_overview,entitlement=entitlement,dashboard_index=dashboard_index, can_refund_entitlement=can_refund_entitlement, show_email_settings=show_email_settings'/> + % elif not entitlement: +
+ +
+ +
+
+ % endif +
+
+
+ +
+ % if (show_courseware_link or is_unfulfilled_entitlement) and not is_course_expired: + % if course_overview.has_ended(): + % if not is_unfulfilled_entitlement: + ${_('View Archived Course')} ${course_overview.display_name_with_default} + % endif + % else: - % if isinstance(course_date, six.string_types): - ${container_string.format(date=course_date)} - % elif course_date is not None: - - % endif + <%include file="_dashboard_course_resume.html" args="resume_button_url=resume_button_url, course_overview=course_overview, enrollment=enrollment, is_unfulfilled_entitlement=is_unfulfilled_entitlement, course_target=course_target, related_programs=related_programs"/> % endif - % if entitlement: - % if not entitlement_expired_at: - - % endif - % endif - - % if entitlement and not is_unfulfilled_entitlement and entitlement_expiration_date: -
- - % if entitlement_expired_at: - ${_('You can no longer change sessions.')} - % else: - ${_('You can change sessions until {entitlement_expiration_date}.').format(entitlement_expiration_date=entitlement_expiration_date)} - % endif -
- % endif -
-
-
- % if (show_courseware_link or is_unfulfilled_entitlement) and not is_course_expired: - % if course_overview.has_ended(): - % if not is_unfulfilled_entitlement: - ${_('View Archived Course')} ${course_overview.display_name_with_default} - % endif - - % else: - <%include file="_dashboard_course_resume.html" args="resume_button_url=resume_button_url, course_overview=course_overview, enrollment=enrollment, is_unfulfilled_entitlement=is_unfulfilled_entitlement, course_target=course_target, related_programs=related_programs"/> % endif - % endif - - % if show_courseware_link or course_overview.has_social_sharing_url() or course_overview.has_marketing_url(): - - % if share_settings: - <% - share_url = get_link_for_about_page(course_overview) - encoded_utm_parameters = get_encoded_course_sharing_utm_params() - share_window_name = 'shareWindow' - share_window_config = 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=640, height=480' - %> - % if share_settings.get('DASHBOARD_FACEBOOK', False): - <% - facebook_share_url = u"{url}?{utm_params}".format(url=share_url, utm_params=encoded_utm_parameters['facebook']) - share_text = _("I'm taking {course_name} online with {facebook_brand}. Check it out!").format(course_name=course_overview.display_name_with_default, facebook_brand=share_settings.get('FACEBOOK_BRAND', 'edX.org')) - query_params = urlencode((('u', facebook_share_url), ('quote', share_text),)) - facebook_url = 'https://www.facebook.com/sharer/sharer.php?{query}'.format(query=query_params) - share_msg = _("Share {course_name} on Facebook").format(course_name=course_overview.display_name_with_default) - %> - - ${share_msg} - - - % endif - % if share_settings.get('DASHBOARD_TWITTER', False): - <% - twitter_share_url = u"{url}?{utm_params}".format(url=share_url, utm_params=encoded_utm_parameters['twitter']) - default_share_text = _("I'm taking {course_name} online with {twitter_brand}. Check it out!").format(course_name=course_overview.display_name_with_default, twitter_brand=share_settings.get('TWITTER_BRAND', '@edxonline')) - share_text = urlquote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', default_share_text)) - twitter_url = u'https://twitter.com/intent/tweet?text=' + share_text + u'%20' + urlquote_plus(twitter_share_url) - share_msg = _("Share {course_name} on Twitter").format(course_name=course_overview.display_name_with_default) - %> - - ${share_msg} - - - % endif - % endif - % endif - - ## We should only show the gear dropdown if the user is able to refund/unenroll from their entitlement - ## and/or if they have selected a course run and email_settings are enabled - ## as these are the only actions currently available - % if entitlement and (can_refund_entitlement or show_email_settings): - <%include file='_dashboard_entitlement_actions.html' args='course_overview=course_overview,entitlement=entitlement,dashboard_index=dashboard_index, can_refund_entitlement=can_refund_entitlement, show_email_settings=show_email_settings'/> - % elif not entitlement: -
- -
- -
-
- % endif