diff --git a/.github/workflows/auto-add-to-project.yml b/.github/workflows/auto-add-to-project.yml index af1f35190..0e12752e6 100644 --- a/.github/workflows/auto-add-to-project.yml +++ b/.github/workflows/auto-add-to-project.yml @@ -1,9 +1,12 @@ -name: Auto Add Issues to Project +name: Auto Add Issues and Pull Requests to Project on: issues: types: - opened + pull_request_target: + types: + - opened jobs: # https://github.com/actions/add-to-project diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 5a023449b..fde891c36 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -15,8 +15,6 @@ jobs: uses: actions/setup-python@v2 with: python-version: 3.9 - - name: Upgrade pip - run: python -m pip install --upgrade pip setuptools - name: Install dependencies run: | pip install .[dev] diff --git a/.gitignore b/.gitignore index f6a874f21..e6c3f6d8b 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,9 @@ __pycache__ *.egg-info/ /build/ /dist/ +.DS_Store + +### Editors ### +*~ +/temp +/.vscode diff --git a/CHANGELOG.md b/CHANGELOG.md index 38d6a7f1b..61b55d0ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,68 +19,136 @@ instructions, because git commits are used to generate release notes: + +## v20.0.1 (2025-09-23) + +- [Improvement] Make latex response editor background colours WCAG compliant in dark theme. (by @Danyal-Faheem) + +- [Improvement] Sync footer in both MFE pages and templates (by @zubairshakoorarbisoft) + + + +## v20.0.0 (2025-06-16) + +- πŸ’₯[Feature] Upgrade to teak. (by @HammadYousaf01) + +- [Bugfix] Remove reference to old account toggles. (by @ahmed-arb) + +- [BugFix] Bump Indigo Header and Footer versions to fix image build failure due to React 18 upgrades in upstream MFEs (by @HammadYousaf01) + + + +## v19.0.3 (2025-06-05) + +- [Improvement] Fix multiple accessibility issues across the platform including screen reader compatibility, keyboard navigation, focus visibility, and WCAG compliance improvements. (by @arbirali and @zubairshakoorarbisoft) + - Add visible titles to image-based links for better screen reader support (#150) + - Make "Learn More" links accessible to screen readers (#151) + - Improve "Open Responses" table headers for keyboard accessibility (#152) + - Add accessible names to social media icons (#155) + - Enhance theme toggle with descriptive labels (#156) + - Increase focus visible thickness for better visibility (#158) + - Fix "Skip to main content" link display (#159) + - Resolve accessibility and reflow issues in Wiki, Teams, and Instructor Dashboard (#163) + - General accessibility fixes reported during review (#147) + + + +## v19.0.2 (2025-05-27) + +- [Improvement] Migrate from `setup.py` (setuptools) to `pyproject.toml` (hatch). (by @ahmed-arb) + +- [Improvement] Add hatch_build.py in sdist target to fix the installation issues (by @dawoudsheraz) + +- [BugFix] Fix runtime footer import error in env.config.jsx for unsupported MFEs. (by @ahmed-arb) + +- [BugFix] Maintain selected emoji color in survey xblock. (by @mlabeeb03) + +- [Improvement] Change color of headings and list items in dark mode to improve readability. (by @mlabeeb03) + + + +## v19.0.1 (2025-01-26) + +- [BugFix] Fix env.config.jsx for dark theme and Indigo footer by including the patches folder in MANIFEST.in for python pypi package. (by @hinakhadim) + + + +## v19.0.0 (2024-12-11) + +- πŸ’₯[Feature] Upgrade to Sumac (by @hinakhadim) + + ## v18.3.0 (2024-12-11) - πŸ’₯ [Deprecation] Drop support for python 3.8 and set Python 3.9 as the minimum supported python version. (by @hinakhadim) - πŸ’₯[Improvement] Rename Tutor's two branches (by @DawoudSheraz): - * Rename **master** to **release**, as this branch runs the latest official Open edX release tag. - * Rename **nightly** to **main**, as this branch runs the Open edX master branches, which are the basis for the next Open edX release. + - Rename **master** to **release**, as this branch runs the latest official Open edX release tag. + - Rename **nightly** to **main**, as this branch runs the Open edX master branches, which are the basis for the next Open edX release. - [Bugfix] Fix dropdown select rendering issue on light theme (by @dawoudsheraz) - - ".wrapper-problem-response" did not need any dark theme variables outside dark-theme class for dropdown problems. This was causing the dropdown to use dark theme variables regardless of the theme that user selected. + - ".wrapper-problem-response" did not need any dark theme variables outside dark-theme class for dropdown problems. This was causing the dropdown to use dark theme variables regardless of the theme that user selected. - [Bugfix] Add dark-theme for Course Handouts and Course Updates that appears on Learning MFE Course Outline Page (by @hinakhadim) - [Bugfix] Update dark-theme styles for ORA (Open Response Assessment) so that it becomes readable, usable, beautiful, and appealing (by @hinakhadim) - - The readability of styles in the `scss` file is challenging and will be improved in subsequent releases. + - The readability of styles in the `scss` file is challenging and will be improved in subsequent releases. - [Bugfix] Fix various dark theme issues with Teams tab on LMS. (by @dawoudsheraz) - [Bugfix] Update dark-theme styles for Notes and Textbook Page (by @hinakhadim) + ## v18.2.2 (2024-10-29) - [Feature] Upgrade upstream apps to open-release/redwood.3. In particular, this will resolve serious issues with [course creation](https://github.com/openedx/frontend-app-authoring/issues/1199) and [language switching](https://github.com/openedx/frontend-app-account/issues/1052). (by @regisb) + ## v18.2.1 (2024-10-11) - [Feature] Introduced theme toggle feature with enable/disable option and runtime switch between light and dark modes. (by @hinakhadim) + ## v18.1.1 (2024-08-27) - [BugFix] Add the Indigo footer in MFEs via env.config.jsx to resolve display issues on the /account/ page after upgrading to Redwood. (by @hinakhadim) + ## v18.1.0 (2024-07-23) - [Improvement] Instead of forcing users to use Authentication MFe, the platform decides how users should log in. (by @CodeWithEmad) -- [Feature] Dark theme: the Indigo theme now covers dark theme for LMS pages, including the MFEs, and they are more beautiful! (by @tanveer65 and @hinakhadim) +- [Feature] Dark theme: the Indigo theme now covers dark theme for LMS pages, including the MFEs, and they are more beautiful! (by @tanveer65 and @hinakhadim) + ## v18.0.0 (2024-06-20) - πŸ’₯[Feature] Upgrade to Redwood (by @hinakhadim) + ## v17.4.2 (2024-06-11) - [BugFix] Add big screen variable of screen responsiveness (by @tanveer65) + ## v17.4.1 (2024-06-10) - [BugFix] Remove undefined variables of dark-theme. (by @hinakhadim) + ## v17.4.0 (2024-06-10) - [Bugfix] Make plugin compatible with Python 3.12 by removing dependency on `pkg_resources`. (by @regisb) -- [Bugfix] *.scss files in cms directory were not rendered in the tutor environment because they are stored in a "partials" subdirectory. (by @Talha-Rizwan) +- [Bugfix] \*.scss files in cms directory were not rendered in the tutor environment because they are stored in a "partials" subdirectory. (by @Talha-Rizwan) - [Improvement] Add styles for Profile and Account MFE and increase container width for better readability. (by @tanveer65) + ## v17.3.0 (2024-03-04) - πŸ’₯[Improvement] Allow the no_course_image.png image to pull from the current theme, not specifically named indigo (by @misilot) @@ -90,20 +158,21 @@ instructions, because git commits are used to generate release notes: - [Improvement] Style static pages of About, Contact, Privacy and bookmarks page (by @tanveer65) + ## v17.2.0 (2024-01-27) - πŸ’₯[Bugfix] Fixes: Minor Bug fixes with styling updates for discussion and learner-dashboard MFEs (by @hinakhadim and @TanveerAhmed) + ## v17.1.0 (2023-12-13) - πŸ’₯[Improvement] Complete overhaul and redesign: the Indigo theme now covers more pages, including the MFE footer and header, and they are more beautiful than ever! (by @hinakhadim and @TanveerAhmed) + ## v17.0.0 (2023-12-09) - πŸ’₯[Feature] Upgrade to Quince (by @hinakhadim) - [Improvement] Add a scriv-compliant changelog. (by @regisb) -- [Improvement] Added Makefile and test action to repository and formatted code with Black and isort. (by @CodeWithEmad) - - +- [Improvement] Added Makefile and test action to repository and formatted code with Black and isort. (by @CodeWithEmad) \ No newline at end of file diff --git a/MANIFEST.in b/MANIFEST.in deleted file mode 100644 index 3d2c03b12..000000000 --- a/MANIFEST.in +++ /dev/null @@ -1 +0,0 @@ -recursive-include tutorindigo/templates * diff --git a/README.rst b/README.rst index 5868f50f2..2a407fe77 100644 --- a/README.rst +++ b/README.rst @@ -86,11 +86,11 @@ Overriding the default "about", "contact", etc. static pages By default, the ``/about`` and ``/contact`` pages contain a simple line of text: "This page left intentionally blank. Feel free to add your own content". This is of course unusable in production. In the following, we detail how to override just any of the static templates used in Open edX. -The static templates used by Open edX to render those pages are all stored in the `edx-platform/lms/templates/static_templates `__ folder. To override those templates, you should add your own in the following folder:: +The static templates used by Open edX to render those pages are all stored in the `edx-platform/lms/templates/static_templates `__ folder. To override those templates, you should add your own in the following folder:: ls tutorindigo/templates/indigo/lms/templates/static_templates" -For instance, edit the "donate.html" file in this directory. We can derive the content of this file from the contents of the `donate.html `__ static template in edx-platform: +For instance, edit the "donate.html" file in this directory. We can derive the content of this file from the contents of the `donate.html `__ static template in edx-platform: .. code-block:: mako @@ -131,7 +131,7 @@ The indigo theme can’t override styles for MFEs directly. It overrides the sty )) -This Tutor plugin is maintained by Hina Khadim from `Edly `__. Community support is available from the official `Open edX forum `__. Do you need help with this plugin? See the `troubleshooting `__ section from the Tutor documentation. +This Tutor plugin is maintained by Ahmed Khalid and Hammad Yousaf from `Edly `__. Community support is available from the official `Open edX forum `__. Do you need help with this plugin? See the `troubleshooting `__ section from the Tutor documentation. License diff --git a/pyproject.toml b/pyproject.toml index d1e6ae6e5..d13c3de9b 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,2 +1,68 @@ +#https://hatch.pypa.io/latest/config/build/ + +[project] +name = "tutor-indigo" +description = "Indigo theme plugin for Tutor" +readme = { file = "README.rst", content-type = "text/x-rst" } +license = { text = "AGPLv3" } +requires-python = ">=3.9" +authors = [{ name = "Edly" }, { email = "hello@edly.io" }] +maintainers = [ + { name = "Ahmed Khalid" }, { email = "ahmed.khalid@arbisoft.com" }, + { name = "Hammad Yousaf" }, { email = "hammad.yousaf@arbisoft.com" } +] +classifiers = [ + "Development Status :: 5 - Production/Stable", + "Intended Audience :: Developers", + "License :: OSI Approved :: GNU Affero General Public License v3", + "Operating System :: OS Independent", + "Programming Language :: Python", + "Programming Language :: Python :: 3.9", + "Programming Language :: Python :: 3.10", + "Programming Language :: Python :: 3.11", + "Programming Language :: Python :: 3.12", +] +dependencies = [ + "tutor-mfe>=20.0.0,<21.0.0", + "tutor>=20.0.0,<21.0.0" +] + +# hatch_build.py will set it later +dynamic = ["version"] + +[project.optional-dependencies] +dev = [ + "tutor[dev]>=20.0.0,<21.0.0", + "pylint", + "black" +] + +[project.entry-points."tutor.plugin.v1"] +indigo = "tutorindigo.plugin" + +[project.urls] +Code = "https://github.com/overhangio/tutor-indigo" +Community = "https://discuss.openedx.org" +Documentation = "https://docs.tutor.edly.io/" +Homepage = "https://github.com/overhangio/tutor-indigo" +Changelog = "https://github.com/overhangio/tutor-indigo/blob/release/CHANGELOG.md" +Issues = "https://github.com/overhangio/tutor-indigo/issues" + +# hatch related configurations [build-system] -requires = ["setuptools", "wheel"] +requires = ["hatchling"] +build-backend = "hatchling.build" + +[tool.hatch.build.targets.sdist] +# Disable strict naming, otherwise twine is not able to detect name/version +strict-naming = false +include = ["/tutorindigo", ".hatch_build.py"] +exclude = ["tests*"] + +# we need this becuase our project escapes default hatch file selection. +# see https://hatch.pypa.io/latest/plugins/builder/wheel/#default-file-selection +[tool.hatch.build.targets.wheel] +packages = ["/tutorindigo"] + +[tool.hatch.metadata.hooks.custom] +path = ".hatch_build.py" diff --git a/setup.py b/setup.py deleted file mode 100644 index 6cdca5a7e..000000000 --- a/setup.py +++ /dev/null @@ -1,62 +0,0 @@ -import io -import os -from setuptools import setup, find_packages - -HERE = os.path.abspath(os.path.dirname(__file__)) - - -def load_readme(): - with io.open(os.path.join(HERE, "README.rst"), "rt", encoding="utf8") as f: - return f.read() - - -def load_about(): - about = {} - with io.open( - os.path.join(HERE, "tutorindigo", "__about__.py"), - "rt", - encoding="utf-8", - ) as f: - exec(f.read(), about) # pylint: disable=exec-used - return about - - -ABOUT = load_about() - - -setup( - name="tutor-indigo", - version=ABOUT["__version__"], - url="https://github.com/overhangio/tutor-indigo", - project_urls={ - "Documentation": "https://docs.tutor.edly.io/", - "Code": "https://github.com/overhangio/tutor-indigo", - "Issue tracker": "https://github.com/overhangio/tutor-indigo/issues", - "Community": "https://discuss.openedx.org", - }, - license="AGPLv3", - author="Edly", - author_email="hello@edly.io", - maintainer="Edly", - maintainer_email="hina.khadim@arbisoft.com", - description="Indigo theme plugin for Tutor", - long_description=load_readme(), - long_description_content_type="text/x-rst", - packages=find_packages(exclude=["tests*"]), - include_package_data=True, - python_requires=">=3.9", - install_requires=["tutor>=18.0.0,<19.0.0", "tutor-mfe>=18.0.0,<19.0.0"], - extras_require={"dev": "tutor[dev]>=18.0.0,<19.0.0"}, - entry_points={"tutor.plugin.v1": ["indigo = tutorindigo.plugin"]}, - classifiers=[ - "Development Status :: 5 - Production/Stable", - "Intended Audience :: Developers", - "License :: OSI Approved :: GNU Affero General Public License v3", - "Operating System :: OS Independent", - "Programming Language :: Python", - "Programming Language :: Python :: 3.9", - "Programming Language :: Python :: 3.10", - "Programming Language :: Python :: 3.11", - "Programming Language :: Python :: 3.12", - ], -) diff --git a/tutorindigo/__about__.py b/tutorindigo/__about__.py index 22ed76922..dd71ced3d 100644 --- a/tutorindigo/__about__.py +++ b/tutorindigo/__about__.py @@ -1 +1 @@ -__version__ = "18.3.0" +__version__ = "20.0.1" diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py index e20ea63f0..6f25e4351 100644 --- a/tutorindigo/plugin.py +++ b/tutorindigo/plugin.py @@ -2,11 +2,12 @@ import os import typing as t +from glob import glob import importlib_resources from tutor import hooks from tutor.__about__ import __version_suffix__ -from tutormfe.hooks import MFE_APPS +from tutormfe.hooks import PLUGIN_SLOTS from .__about__ import __version__ @@ -21,7 +22,7 @@ "defaults": { "VERSION": __version__, "WELCOME_MESSAGE": "The place for all your online learning", - "PRIMARY_COLOR": "#4600c7", # Indigo + "PRIMARY_COLOR": "#15376D", # Indigo "ENABLE_DARK_TOGGLE": True, # Footer links are dictionaries with a "title" and "url" # To remove all links, run: @@ -77,7 +78,7 @@ # Override openedx & mfe docker image names @hooks.Filters.CONFIG_DEFAULTS.add(priority=hooks.priorities.LOW) def _override_openedx_docker_image( - items: list[tuple[str, t.Any]] + items: list[tuple[str, t.Any]], ) -> list[tuple[str, t.Any]]: openedx_image = "" mfe_image = "" @@ -103,68 +104,43 @@ def _override_openedx_docker_image( hooks.Filters.CONFIG_OVERRIDES.add_items(list(config["overrides"].items())) -hooks.Filters.ENV_PATCHES.add_items( - [ - # MFE will install header version 3.0.x and will include indigo-footer as a - # separate package for use in env.config.jsx - ( - "mfe-dockerfile-post-npm-install-learning", - """ -RUN npm install '@edx/brand@https://github.com/MubeenFayyaz-Arbisoft/brand-openedx.git#v1.0.2' -RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3' -RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0 +# MFEs that are styled using Indigo +indigo_styled_mfes = [ + "learning", + "learner-dashboard", + "profile", + "account", + "discussions", +] -COPY indigo/env.config.jsx /openedx/app/ -""", - ), - ( - "mfe-dockerfile-post-npm-install-authn", - """ -RUN npm install '@edx/brand@https://github.com/MubeenFayyaz-Arbisoft/brand-openedx.git#v1.0.2' -""", - ), - # Tutor-Indigo v2.1 targets the styling updates in discussions and learner-dashboard MFE - # brand-openedx is related to styling updates while others are for header and footer updates - ( - "mfe-dockerfile-post-npm-install-discussions", - """ -RUN npm install '@edx/brand@https://github.com/MubeenFayyaz-Arbisoft/brand-openedx.git#v1.0.2' -RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3' -RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0 -COPY indigo/env.config.jsx /openedx/app/ -""", - ), - ( - "mfe-dockerfile-post-npm-install-learner-dashboard", - """ -RUN npm install '@edx/brand@https://github.com/MubeenFayyaz-Arbisoft/brand-openedx.git#v1.0.2' -RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0 +for mfe in indigo_styled_mfes: + hooks.Filters.ENV_PATCHES.add_items( + [ + ( + f"mfe-dockerfile-post-npm-install-{mfe}", + """ +RUN npm install @edly-io/indigo-frontend-component-footer@^3.0.0 +RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^4.0.0' +RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.2.2' -COPY indigo/env.config.jsx /openedx/app/ """, - ), - ( - "mfe-dockerfile-post-npm-install-profile", - """ -RUN npm install '@edx/brand@https://github.com/MubeenFayyaz-Arbisoft/brand-openedx.git#v1.0.2' -RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3' -RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0 - -COPY indigo/env.config.jsx /openedx/app/ + ), + ( + f"mfe-env-config-runtime-definitions-{mfe}", + """ +const { default: IndigoFooter } = await import('@edly-io/indigo-frontend-component-footer'); """, - ), - ( - "mfe-dockerfile-post-npm-install-account", - """ -RUN npm install '@edx/brand@https://github.com/MubeenFayyaz-Arbisoft/brand-openedx.git#v1.0.2' -RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3' -RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0 + ), + ] + ) -COPY indigo/env.config.jsx /openedx/app/ -""", - ), - ] + +hooks.Filters.ENV_PATCHES.add_item( + ( + "mfe-dockerfile-post-npm-install-authn", + "RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.2.2'", + ) ) # Include js file in lms main.html, main_django.html, and certificate.html @@ -195,37 +171,59 @@ def _override_openedx_docker_image( PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }} +MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }} """, ), ( "openedx-lms-production-settings", """ MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }} +MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }} """, ), ] ) -@MFE_APPS.add() -def _add_my_mfe(mfes): - mfes["authn"] = { - "repository": "https://github.com/edly-io/frontend-app-authn.git", - "port": 1999, - "version": "nelc-v1.0.1", # optional, will default to the Open edX current tag. - } - mfes["learning"] = { - "repository": "https://github.com/edly-io/frontend-app-learning.git", - "port": 2000, - "version": "nelc-v1.0.1", # optional, will default to the Open edX current tag. - } - mfes["discussions"] = { - "repository": "https://github.com/edly-io/frontend-app-discussions.git", - "port": 2002, - "version": "nelc-v1.0.1", # optional, will default to the Open edX current tag. - } - mfes["learner-dashboard"] = { - "repository": "https://github.com/edly-io/frontend-app-learner-dashboard.git", - "port": 1996, - "version": "nelc-v1.0.1", # optional, will default to the Open edX current tag. - } - return mfes + +# Apply patches from tutor-indigo +for path in glob( + os.path.join( + str(importlib_resources.files("tutorindigo") / "patches"), + "*", + ) +): + with open(path, encoding="utf-8") as patch_file: + hooks.Filters.ENV_PATCHES.add_item((os.path.basename(path), patch_file.read())) + + +for mfe in indigo_styled_mfes: + PLUGIN_SLOTS.add_item( + ( + mfe, + "footer_slot", + """ + { + op: PLUGIN_OPERATIONS.Hide, + widgetId: 'default_contents', + }, + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'default_contents', + type: DIRECT_PLUGIN, + priority: 1, + RenderWidget: , + }, + }, + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'read_theme_cookie', + type: DIRECT_PLUGIN, + priority: 2, + RenderWidget: AddDarkTheme, + }, + }, + """, + ), + ) diff --git a/tutorindigo/templates/indigo/lms/static/images/tutor-logo.png b/tutorindigo/templates/indigo/lms/static/images/tutor-logo.png index 33a146ebf..568602759 100644 Binary files a/tutorindigo/templates/indigo/lms/static/images/tutor-logo.png and b/tutorindigo/templates/indigo/lms/static/images/tutor-logo.png differ diff --git a/tutorindigo/templates/indigo/lms/static/js/dark-theme.js b/tutorindigo/templates/indigo/lms/static/js/dark-theme.js index a34dd330a..a12534264 100644 --- a/tutorindigo/templates/indigo/lms/static/js/dark-theme.js +++ b/tutorindigo/templates/indigo/lms/static/js/dark-theme.js @@ -8,11 +8,25 @@ $(document).ready(function() { $('body').toggleClass("indigo-dark-theme", theme === 'dark'); // append or remove dark-class based on cookie-value // update expiry $.cookie(themeCookie, theme, { domain: window.location.hostname, expires: 90, path: '/' }); + updateAccessibility(); } function setThemeToggleBtnState(){ const theme = $.cookie(themeCookie); $("#toggle-switch-input").prop("checked", theme === 'dark'); + updateAccessibility(); + } + + function updateAccessibility() { + const theme = $.cookie(themeCookie); + const textWrapper = $('#theme-label'); + if (theme === 'dark') { + textWrapper.text('Switch to Light Mode'); + textWrapper.attr('aria-checked', 'true'); + } else { + textWrapper.text('Switch to Dark Mode'); + textWrapper.attr('aria-checked', 'false'); + } } function toggleTheme(){ @@ -33,4 +47,9 @@ $(document).ready(function() { setThemeToggleBtnState(); // check/uncheck toggle btn based on theme $('#toggle-switch').on('change', toggleTheme); + $('#toggle-switch-input').on('keydown', function (event) { + if (event.key === "Enter") { + toggleTheme(); + } + }); }); diff --git a/tutorindigo/templates/indigo/lms/static/js/responsive-nav.js b/tutorindigo/templates/indigo/lms/static/js/responsive-nav.js new file mode 100644 index 000000000..4ee775a34 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/js/responsive-nav.js @@ -0,0 +1,119 @@ +/** + * Temporary fix for a legacy issue specific to the Tutor Indigo theme. + * This can be removed once the upstream fix is included in Open edX. + */ + +$(document).ready(function () { + $(".course-tabs, .instructor-nav").each(function () { + var $navList = $(this); + + // Skip if already initialized + if ($navList.hasClass("responsive-nav-initialized")) { + return; + } + $navList.addClass("responsive-nav responsive-nav-initialized"); + + var moreButtonClass = $navList.hasClass("instructor-nav") ? "btn-link" : ""; + var moreListItemClass = $navList.hasClass("instructor-nav") ? "nav-item" : "tab"; + var menuType = $navList.hasClass("instructor-nav") ? "instructor-nav" : "course-tabs"; + + // Create More dropdown + var $more = $( + '
  • ' + + '' + + '' + + '
    • ' + ); + $navList.append($more); + var $moreBtn = $more.find(".more-button"); + var $moreMenu = $more.find(".more-menu"); + + // Toggle dropdown + $moreBtn.on("click", function () { + var isOpen = $more.hasClass("open"); + $more.toggleClass("open"); + $moreBtn.attr("aria-expanded", !isOpen); + }); + + // Keyboard support + $moreBtn.on("keydown", function (e) { + if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") { + e.preventDefault(); + $moreBtn.click(); + } else if (e.key === "Escape") { + $more.removeClass("open"); + $moreBtn.attr("aria-expanded", "false").focus(); + } + }); + + $moreMenu.on("keydown", function (e) { + var $items = $moreMenu.find("[role='menuitem']"); + var index = $items.index(document.activeElement); + + if (e.key === "ArrowDown") { + e.preventDefault(); + if (index < $items.length - 1) $items.eq(index + 1).focus(); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + if (index > 0) $items.eq(index - 1).focus(); + } else if (e.key === "Escape") { + $more.removeClass("open"); + $moreBtn.attr("aria-expanded", "false").focus(); + } + }); + + // Close on outside click + $(document).on("click", function (e) { + if (!$more.is(e.target) && $more.has(e.target).length === 0) { + $more.removeClass("open"); + $moreBtn.attr("aria-expanded", "false"); + } + }); + + function updateNav() { + $moreMenu.children("li").each(function () { + $(this).insertBefore($more); + }); + + var navWidth = $navList.width(); + var usedWidth = $more.outerWidth(true); + var $items = $navList.children("li").not($more); + + var hideItems = []; + $items.each(function () { + usedWidth += $(this).outerWidth(true); + if (usedWidth > navWidth) { + hideItems.push(this); + } + }); + + if (hideItems.length > 0) { + $(hideItems).each(function () { + $(this).attr("role", "menuitem").attr("tabindex", "-1"); + }).appendTo($moreMenu); + $more.show(); + } else { + $more.hide().removeClass("open"); + } + + $moreBtn.attr("aria-expanded", "false"); + } + + // Store for reuse + $navList.data("updateNav", updateNav); + + // Initial call + updateNav(); + }); + + // On resize, update all responsive navs + $(window).on("resize", function () { + $(".responsive-nav-initialized").each(function () { + var update = $(this).data("updateNav"); + if (typeof update === "function") { + update(); + } + }); + }); +}); diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss index e062e7064..d11b5830f 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss @@ -84,6 +84,9 @@ border-radius: 8px; border: 1px solid $primary-light; } + .play-intro{ + z-index: 10; + } } } } @@ -91,26 +94,36 @@ @include media-breakpoint-up(md) { margin: -50px 0 0; } - a { - text-decoration: none !important; - span { - display: inline-block; - vertical-align: top; - padding: 7px 14px; - color: #374151; - border-radius: 6px; - background: #fff; - font-size: 16px; - line-height: 24px; - font-weight: 500; - text-decoration: none !important; - border: 1px solid #d1d5db; - margin-right: 20px; - @include media-breakpoint-up(md) { - padding: 12px 24px; + span { + &.register { + &.disabled { + display: inline-block; + vertical-align: top; + padding: 7px 14px; + color: #374151; + border-radius: 6px; + background: #fff; + font-size: 16px; + line-height: 24px; + font-weight: 500; + text-decoration: none !important; + border: 1px solid #D1D5DB; + margin-right: 20px; + @include media-breakpoint-up(md) { + padding: 12px 24px; + } + + &:hover { + opacity: 1; + } } } } + + a { + display: inline-block; + text-decoration: none !important; + } a.register, a strong, > span.register, diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss index f0714654d..b476f228a 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss @@ -79,7 +79,7 @@ .course-bookmarks { .bookmarks-results-list { a.bookmarks-results-list-item { - border: 1px solid #E5E7EB; + border: 1px solid $gray-light; border-left: 8px solid $primary-light; padding: 20px 30px; border-radius: 8px; diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss index a0f7a18c2..6ff2d7025 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss @@ -204,12 +204,12 @@ } } .discover-search { - overflow: hidden; + width: 100%; .wrapper-search-context { overflow: hidden; .wrapper-search-input { float: none; - display: block; + display: flex; margin: 0; width: auto; &:after { @@ -245,7 +245,7 @@ } } .input-holder { - overflow: hidden; + flex-grow: 1; border-radius: 6px; background: $primary-light; padding: 0 0 0 33px; @@ -283,9 +283,12 @@ } } .filter-block { - float: left; + flex: 0 0 80px; position: relative; z-index: 9; + @include media-breakpoint-up(sm) { + flex: 0 0 130px; + } &.show { .dropdown-menu { display: block; diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_responsive-nav.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_responsive-nav.scss new file mode 100644 index 000000000..9bebc90e7 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_responsive-nav.scss @@ -0,0 +1,45 @@ +/** + * Temporary fix for a legacy issue specific to the Tutor Indigo theme. + * This can be removed once the upstream fix is included in Open edX. + */ + +.responsive-nav { + white-space: nowrap; + position: relative; + + > li { + display: inline-block; + vertical-align: middle; + } + + .open { + + .more-responsive-menu { + display: block; + } + } +} + +.more-responsive-menu { + position: absolute; + top: 100%; + right: 0; + margin: 0; + padding: 0; + width: 250px; + border: 1px solid $gray-light; + z-index: 999; + background: $body-bg; + display: none; + + li { + display: block !important; + width: 100%; + margin: 0; + + a, + button { + display: block; + } + } +} diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss index b5d00b0b6..978da2f16 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss @@ -130,9 +130,13 @@ header.global-header { } } .hamburger-menu { - height: 12px; + height: 17px; width: 20px; top: 18px; + background: none; + border: 0; + padding: 0; + box-shadow: none; right: 20px !important; left: unset !important; &:dir(rtl){ @@ -229,6 +233,12 @@ header.global-header { opacity: 0; width: 0; height: 0; + &:focus { + ~ .slider { + outline: 2px solid $primary; + outline-offset: 1px; + } + } } /* The slider */ @@ -345,6 +355,13 @@ body.indigo-dark-theme { } #toggle-switch { .switch { + input { + &:focus { + ~ .slider { + outline-color: $primary-d; + } + } + } /* The slider */ .slider { background-color: #ccc; diff --git a/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss b/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss index 2543bc6cb..790707768 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss @@ -32,6 +32,7 @@ section.home { #main .home.style-logout { header { background: none; + overflow: visible; .outer-wrapper { .title { width: 100%; @@ -73,13 +74,8 @@ section.home { .course-search { padding: 0; .search-field-wrapper { - &:after { - clear: both; - content: ""; - display: block; - } + display: flex; .button-holder { - float: right; button { position: static; margin: 0 0 0 16px; @@ -105,7 +101,7 @@ section.home { } } .input-holder { - overflow: hidden; + flex-grow: 1; border-radius: 6px; background: $primary-light; padding: 0 0 0 33px; @@ -127,6 +123,12 @@ section.home { font-size: 14px; line-height: 20px; padding: 9px 10px; + + &:focus, + &:focus-visible { + outline: revert; + outline-width: 2px; + } } } } diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss index f51122c6b..915c52bd8 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss @@ -36,6 +36,22 @@ input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; box-shadow: none; } + +.register-btn, +.sign-in-btn, +.search-button, +.learn-more, +.see-children a, +.add-article-btn, +.member-list-widget .add, +section.wiki .btn.btn-primary { + + &:focus, + &:focus-visible { + outline-offset: 3px; + } +} + .page-content-container { max-width: 1600px; margin: 0 auto; @@ -43,6 +59,11 @@ input:-webkit-autofill:active { border: none; } +:focus, +:focus-visible { + outline-width: 2px; +} + %btn-pl-default-base { border-radius: 0; } @@ -333,12 +354,28 @@ body.view-wiki { margin: 0 auto; max-width: 1600px; padding: 20px 15px !important; + + .course-material { + overflow: visible; + } + .tabs.course-tabs { margin: 0 0 10px; border-bottom: 1px solid $border-color; li { margin: 0 32px 0 0; - a { + + &.more { + margin-right: 0; + } + + button { + border: 0; + background: none; + } + + a, + button { border-width: 2px; font-size: 14px; font-weight: 500; @@ -441,6 +478,14 @@ body.view-instructordash { } .instructor-dashboard-content-2 { padding: 0; + + .wrap-instructor-info { + @include media-breakpoint-down(xs) { + display: block; + text-align: right; + } + } + h2.instructor-dashboard-title { font-size: 24px; line-height: 30px; @@ -449,23 +494,20 @@ body.view-instructordash { background: $primary; color: white; margin: 0 0 10px; + outline-offset: 3px; + @include media-breakpoint-down(xs) { + display: inline-block; + float: none; + } } .instructor-nav { - overflow: hidden; + display: flex; width: 100%; white-space: nowrap; - overflow-x: auto; border: 1px solid $border-color; - border-radius: 6px; + border-radius: 0; padding: 0 !important; - letter-spacing: -0.32em; li { - letter-spacing: normal; - &:first-child { - button { - border: none; - } - } button { border: none !important; border-radius: 0 !important; @@ -476,6 +518,7 @@ body.view-instructordash { padding: 9px 17px; color: #374151; text-decoration: none !important; + outline-offset: 3px; &.active-section { background: $primary !important; color: white !important; @@ -483,6 +526,30 @@ body.view-instructordash { &:hover { color: #111827; } + &:focus { + position: relative; + z-index: 1; + } + } + + &:first-of-type { + button { + border: none; + border-radius: 6px 0 0 6px; + } + } + + &:last-of-type { + button { + border-radius: 0 6px 6px 0; + } + } + } + + .more-responsive-menu { + button { + display: block; + width: 100%; } } } @@ -817,6 +884,61 @@ body.view-wiki { } } } + +body { + .slick-header-column.ui-state-default { + height: auto; + } + .instructor-dashboard-wrapper-2 { + section.idash-section { + line-height: 1.3; + + &#membership .batch-beta-testers .request-res-section h3 { + color: $text-color-d; + } + &#student_admin input[type="text"] { + width: 100%; + max-width: 650px; + } + &#extensions { + select { + height: 35px; + border-color: $instructor-input-border-color; + + @include media-breakpoint-down(xs) { + display: block; + width: 100%; + } + + @include media-breakpoint-down(md) { + margin-bottom: 10px; + } + } + + input[type="text"] { + width: 100%; + + + input { + @include media-breakpoint-down(xs) { + margin-top: 10px; + } + } + + @include media-breakpoint-up(sm) { + max-width: 235px; + } + @include media-breakpoint-up(md) { + max-width: 300px; + } + } + } + } + .location-example { + word-wrap: break-word; + } + } +} + // Textbook Page body div.book-wrapper { margin: 0 auto; @@ -951,6 +1073,9 @@ body.indigo-dark-theme { &:hover { color: $text-color-d; } + &:focus { + box-shadow: inset 0 0 0 2px $border-color !important; + } } } } @@ -1454,6 +1579,43 @@ body.view-instructordash { } } +#data_download { + + .profile-data-display-table { + overflow-x: auto; + } + + .slick-cell { + padding: 3px; + height: 30px; + + &.active { + box-shadow: inset 0 0 0 2px $primary; + + .indigo-dark-theme & { + box-shadow: inset 0 0 0 2px $primary-d; + } + } + + a { + display: inline-block; + padding: 0 5px; + } + } +} + +.open-response-assessment-block { + .open-response-assessment-main-table { + th { + button { + &:focus { + outline: revert + } + } + } + } +} + @import "../../../instructor/instructor"; @import "../../../wiki/wiki"; @import "../../../extra/footer"; @@ -1468,3 +1630,6 @@ body.view-instructordash { @import "../../../programs/programs"; @import "../../../certificates/certificate"; @import "../../../xblock/xblock"; +@import '../../../views/teams'; +@import '../../../views/wiki'; +@import '../../../courseware/responsive-nav'; diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss index 234f8aeb9..029b06cc7 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss @@ -28,7 +28,9 @@ $border-color-l:#e4e4e4; $primary-d: #AEC7F6; $primary-light-d: #292A2C; -$light-drak-d: #374151; +$gray-light: #E5E7EB; +$gray-lighter: #c8c8c8; +$light-dark-d: #374151; $text-color-d: #f8f8f8; $text-color-primary: #DDDFE2; $border-color-d: #777792; @@ -36,8 +38,9 @@ $light-overlay-d: #36383B; $danger-d: #FFA07A; $success-d: #54CF5E; $btn-color-d: #112F6B; -$body-bg-d:#0D0D0E; +$body-bg-d: #0D0D0E; +$instructor-input-border-color: $gray-lighter; $warning-400: #ffe340; $page-color-transition: transparent .2s ease, color .2s ease; diff --git a/tutorindigo/templates/indigo/lms/static/sass/views/_teams.scss b/tutorindigo/templates/indigo/lms/static/sass/views/_teams.scss new file mode 100644 index 000000000..f4dc8c6f6 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/sass/views/_teams.scss @@ -0,0 +1,36 @@ +.view-teams { + + .topics-paging-header { + + .listing-tools { + margin: 2px 0 $baseline * 1.5; + } + } + + .cards-list { + box-sizing: border-box; + padding-bottom: $baseline; + + @include media-breakpoint-up(sm) { + display: flex; + flex-wrap: wrap; + gap: $baseline * 2; + } + + .card { + margin: 0 0 $baseline * 2; + box-sizing: border-box; + width: 100%; + display: block; + + @include media-breakpoint-up(sm) { + margin: 0; + width: calc(50% - #{$baseline}); + } + + @include media-breakpoint-up(md) { + width: calc(33% - 25px); + } + } + } +} diff --git a/tutorindigo/templates/indigo/lms/static/sass/views/_wiki.scss b/tutorindigo/templates/indigo/lms/static/sass/views/_wiki.scss new file mode 100644 index 000000000..c4da3d889 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/sass/views/_wiki.scss @@ -0,0 +1,23 @@ +.view-wiki { + + .wiki-wrapper { + + section.wiki { + line-height: 1.5; + + #hint_id_content { + position: static; + } + } + } +} + +.open-response-assessment { + line-height: 1.3; +} + +.open-response-assessment-summary, +.open-response-assessment-main-table { + max-width: 100%; + overflow-x: auto; +} diff --git a/tutorindigo/templates/indigo/lms/static/sass/wiki/_wiki.scss b/tutorindigo/templates/indigo/lms/static/sass/wiki/_wiki.scss index 5624e12cb..92af8d9b8 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/wiki/_wiki.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/wiki/_wiki.scss @@ -105,7 +105,7 @@ } a.btn { border-color: $new-border-color !important; - color: $light-drak-d !important; + color: $light-dark-d !important; &:hover { border-color: $new-border-color !important; background: $bg-color !important; @@ -124,7 +124,7 @@ } a.btn { border-color: $new-border-color !important; - color: $light-drak-d !important; + color: $light-dark-d !important; &:hover { border-color: $new-border-color !important; background: $bg-color !important; @@ -144,7 +144,7 @@ } a.btn { border-color: $new-border-color !important; - color: $light-drak-d !important; + color: $light-dark-d !important; &:hover { border-color: $new-border-color !important; background: $bg-color !important; diff --git a/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss b/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss index 4a83a4de1..46d86f935 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss @@ -470,6 +470,41 @@ } + #feedback-container{ + background: $body-bg-d; + border: 1px solid $text-color-d; + p{ + color: $text-color-d; + } + } + + .emoji-button{ + background-color: $body-bg-d; + border: 1px solid $light-overlay-d; + + &:hover, + &:hover:not(:disabled){ + background-color: $light-dark-d; + } + } + + .emoji-button-highlighted{ + background-color: $text-color-d; + + &:hover, + &:hover:not(:disabled){ + background-color: $text-color-d; + } + } + .xblock.xmodule_display.xmodule_HtmlBlock .blue-text{color: $primary;} + .xblock.xmodule_display.xmodule_HtmlBlock ul li::marker, + .xblock.xmodule_display.xmodule_HtmlBlock ul li strong{ + color: $text-color-d; + } + .xblock.xmodule_display.xmodule_HtmlBlock .course-structure h3{ + color: $text-color-d; + } + .edx-notes-wrapper{ .annotator-hl{ background: orange; diff --git a/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html b/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html index 6d33cd9ef..aad744d79 100644 --- a/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html +++ b/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html @@ -54,7 +54,7 @@ <%block name="pagetitle">${course.display_name_with_default} -
    +
    <%block name="course_about_header"> @@ -71,7 +71,7 @@

    % if get_course_about_section(request, course, "video"):
    - +
    @@ -79,7 +79,7 @@

    - +
    % endif @@ -87,12 +87,10 @@

    %if user.is_authenticated and registered: + ${_("Already Enrolled")} %if show_courseware_link: %endif - - ${_("Already Enrolled")} - %if show_courseware_link: ${_("View Course")} diff --git a/tutorindigo/templates/indigo/lms/templates/courseware/courses.html b/tutorindigo/templates/indigo/lms/templates/courseware/courses.html index c267a33cb..c63131e02 100644 --- a/tutorindigo/templates/indigo/lms/templates/courseware/courses.html +++ b/tutorindigo/templates/indigo/lms/templates/courseware/courses.html @@ -25,7 +25,8 @@ ${course_discovery_meanings | n, dump_js_escaped_json}, getParameterByName('search_query'), "${user_language | n, js_escaped_string}", - "${user_timezone | n, js_escaped_string}" + "${user_timezone | n, js_escaped_string}", + ${set_default_filter | n, dump_js_escaped_json} ); @@ -66,17 +67,17 @@

    ${_('Refine Your Search')}

    diff --git a/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore b/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore index d3be84f72..3ee320913 100644 --- a/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore +++ b/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore @@ -2,18 +2,21 @@
    - <%- content.display_name %> <%- content.number %> +
    -