From a28202e21b510a26457638c30fe1651c8ac292ad Mon Sep 17 00:00:00 2001 From: Ansh Date: Thu, 20 Aug 2026 16:46:37 +0000 Subject: [PATCH 01/19] Fix #16089: Add Hinglish translation tips (#27151) Add Hinglish translation tips --- assets/constants.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/constants.ts b/assets/constants.ts index d112708d036ee..cdf93f1131b56 100644 --- a/assets/constants.ts +++ b/assets/constants.ts @@ -6074,6 +6074,19 @@ export default { // eslint-disable-next-line max-len "Refer to Glossary - https://docs.google.com/spreadsheets/d/13NMEnYqLZuMbeX1Z6XXG-femHkKNAN8KwjhaC67EkxI/edit#gid=0" ], + // Hinglish. + "hi-en": [ + // eslint-disable-next-line max-len + "For mathematical terms in Hinglish, use the English words (e.g. numerator, denominator) instead of their Hindi equivalents (e.g. Bhinn, Ansh).", + // eslint-disable-next-line max-len + "Use respectful pronouns (like “Aap” instead of “Tum/Tu”) and a corresponding respectful tone like “kariye, karenge”.", + // eslint-disable-next-line max-len + "Feel free to change the voice and sequence of phrases to make the sentence more readable.", + // eslint-disable-next-line max-len + "Preserve punctuation and bolding. If the original content has bold text, make sure it is bold in Hinglish as well. If there are bullet points, double quotes, etc., make sure that the translated content also has bullet points and double quotes.", + // eslint-disable-next-line max-len + "If the original card has “components” (such as pictures, links, and equations), these need to be added to the translated content. You can use the “Copy tool” for this -- click on the Copy tool and then click on the component you want to carry over. Also, double-click on the image and translate the alt text (and caption, if any)." + ], // Spanish. "es": [ "Include proper punctuation, ¡blank!, ¿question? and accent marks.", From babdc6e9acc399e6b3837e03394b965c81c91c6c Mon Sep 17 00:00:00 2001 From: Aditya Lakhotia Date: Thu, 20 Aug 2026 18:12:05 +0000 Subject: [PATCH 02/19] Fix part of #25941: Clean up legacy embedded diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/flag-exploration-modal.component.ts b/core/templates/pages/exploration-player-page/current-lesson-player/modals/flag-exploration-modal.component.ts index 0284966220d56..14b442801ef2c 100644 --- a/core/templates/pages/exploration-player-page/current-lesson-player/modals/flag-exploration-modal.component.ts +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/flag-exploration-modal.component.ts @@ -21,6 +21,7 @@ import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component'; import {FocusManagerService} from 'services/stateful/focus-manager.service'; import {PlayerPositionService} from '../../services/player-position.service'; +import './flag-exploration-modal.component.css'; export interface FlagExplorationModalResult { report_type: boolean; @@ -31,6 +32,7 @@ export interface FlagExplorationModalResult { @Component({ selector: 'oppia-flag-exploration-modal', templateUrl: './flag-exploration-modal.component.html', + styleUrls: ['./flag-exploration-modal.component.css'], }) export class FlagExplorationModalComponent extends ConfirmOrCancelModal { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.css b/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.css new file mode 100644 index 0000000000000..ec2ad85473d35 --- /dev/null +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.css @@ -0,0 +1,12 @@ +.oppia-learner-refresher-exploration-confirmation-body { + word-wrap: break-word; +} + +.oppia-learner-refresher-exploration-confirmation-title { + color: #00786d; + font-family: 'Capriola', Roboto, arial, sans-serif; + font-size: 1.25em; + font-weight: bold; + padding-top: 20px; + text-align: center; +} diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.html b/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.html index f5c0575c6dede..ada4203f790f6 100644 --- a/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.html +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.html @@ -18,18 +18,3 @@ - - diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.ts b/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.ts index 73959fe6826a1..a452486504591 100644 --- a/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.ts +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.ts @@ -23,10 +23,12 @@ import {UrlInterpolationService} from 'domain/utilities/url-interpolation.servic import {UrlService} from 'services/contextual/url.service'; import {WindowRef} from 'services/contextual/window-ref.service'; import {PageContextService} from 'services/page-context.service'; +import './refresher-exploration-confirmation-modal.component.css'; @Component({ selector: 'oppia-refresher-confirmation-modal', templateUrl: './refresher-exploration-confirmation-modal.component.html', + styleUrls: ['./refresher-exploration-confirmation-modal.component.css'], }) export class RefresherExplorationConfirmationModal extends ConfirmOrCancelModal { confirmRedirectEventEmitter: EventEmitter = new EventEmitter(); diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.css b/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.css new file mode 100644 index 0000000000000..ed99413f703d3 --- /dev/null +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.css @@ -0,0 +1,3 @@ +.modal-body p { + line-height: 1.846; +} diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.html b/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.html index 83eabb3a87e03..38dac65263eeb 100644 --- a/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.html +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.html @@ -17,9 +17,3 @@

- - diff --git a/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.ts b/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.ts index e9086f41b99e2..ccd532ad8e5e2 100644 --- a/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.ts +++ b/core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.ts @@ -20,6 +20,7 @@ import {Component, Input} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {WindowRef} from 'services/contextual/window-ref.service'; +import './switch-content-language-refresh-required-modal.component.css'; export const INITIAL_CONTENT_LANGUAGE_CODE_URL_PARAM = 'initialContentLanguageCode'; @@ -28,7 +29,7 @@ export const INITIAL_CONTENT_LANGUAGE_CODE_URL_PARAM = selector: 'switch-content-language-refresh-required-modal', templateUrl: './switch-content-language-refresh-required-modal.component.html', - styleUrls: [], + styleUrls: ['./switch-content-language-refresh-required-modal.component.css'], }) export class SwitchContentLanguageRefreshRequiredModalComponent { @Input() languageCode!: string; diff --git a/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.css b/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.css new file mode 100644 index 0000000000000..ed99413f703d3 --- /dev/null +++ b/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.css @@ -0,0 +1,3 @@ +.modal-body p { + line-height: 1.846; +} diff --git a/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.html b/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.html index 6aa5489b5d636..2164f930377ff 100644 --- a/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.html +++ b/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.html @@ -17,9 +17,3 @@

- - diff --git a/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.ts b/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.ts index a4cc9894e4054..e68f2627c8f56 100644 --- a/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.ts +++ b/core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.ts @@ -18,11 +18,12 @@ import {Component} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; +import './take-break-modal.component.css'; @Component({ selector: 'take-break-modal', templateUrl: './take-break-modal.component.html', - styleUrls: [], + styleUrls: ['./take-break-modal.component.css'], }) export class TakeBreakModalComponent { constructor(private activeModal: NgbActiveModal) {} diff --git a/core/templates/pages/feedback-updates-page/feedback-updates-page.component.css b/core/templates/pages/feedback-updates-page/feedback-updates-page.component.css index 8464b436dab9e..0a439b0913d77 100644 --- a/core/templates/pages/feedback-updates-page/feedback-updates-page.component.css +++ b/core/templates/pages/feedback-updates-page/feedback-updates-page.component.css @@ -256,3 +256,16 @@ oppia-feedback-updates-page .oppia-pagination-button { .oppia-diagram-spinning-button { margin: 0 auto; } + +.oppia-profile-alignment { + vertical-align: middle; +} + +.oppia-box-size { + padding: 2px 10px; +} + +.feedback-updates-content-row { + display: flex; + justify-content: center; +} diff --git a/core/templates/pages/feedback-updates-page/feedback-updates-page.component.html b/core/templates/pages/feedback-updates-page/feedback-updates-page.component.html index 9019d8ecd2895..a5dae3b24740f 100644 --- a/core/templates/pages/feedback-updates-page/feedback-updates-page.component.html +++ b/core/templates/pages/feedback-updates-page/feedback-updates-page.component.html @@ -250,16 +250,3 @@ - - diff --git a/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.css b/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.css new file mode 100644 index 0000000000000..31e502cc3c41c --- /dev/null +++ b/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.css @@ -0,0 +1,135 @@ +.oppia-landing-page h2, button { + border-radius: 4px; + font-family: "Roboto", Arial, sans-serif; +} +.oppia-landing-page h2, h3, p { + line-height: 1.5; +} +.oppia-white-container { + background-color: #fff +} +.oppia-grey-container { + background-color: #e8e7e3 +} +.oppia-landing-section-inner { + margin-left: auto; + margin-right: auto; + max-width: 1200px; + padding: 4% 0; +} +.oppia-langing-page-qualities { + width: 30%; +} +.oppia-flex-box { + display: flex; + justify-content: center; +} +.oppia-flex-row { + flex-flow: row; +} +.oppia-flex-column { + flex-flow: column; +} +.oppia-flex-item { + padding: 5px; +} +.oppia-text-align-left { + text-align: left; +} +.oppia-flex-align-center { + align-items: center; +} +.oppia-landing-page-button { + background-color: #009688; + border: 4px solid #009688; + border-radius: 5px; + color: #fff; + margin: 14px 0; + min-width: 250px; + text-transform: uppercase; +} +.oppia-make-button-transparent { + background-color: transparent; + color: #009688; +} +.oppia-landing-page-image-container { + display: block; + margin: auto; + min-height: 150px; + min-width: 200px; + width: 80%; +} +.oppia-devices-image { + width: 80%; +} +.oppia-container-low-width { + width: 40%; +} +.oppia-only-display-in-mobile { + display: none; +} +.oppia-container-margin { + margin: 10px; +} +.oppia-landing-page-button:hover, +.oppia-landing-page-button:focus, +.oppia-landing-page-button:active { + background-color: #015c53; + border-color: #015c53; + color: #fff; +} +.oppia-make-button-transparent:hover, +.oppia-make-button-transparent:focus, +.oppia-make-button-transparent:active { + background-color: transparent; + border-color: #004d45; + color: #004d45; +} + +@media screen and (max-width: 780px) { + .oppia-landing-section-inner, + .oppia-landing-section { + height: auto; + } + .oppia-landing-page-button { + margin: 0 0 14px; + } + .oppia-flex-mobile-column { + flex-flow: column; + } + .oppia-flex-mobile-order-2 { + order: 2; + } + .oppia-flex-mobile-order-3 { + order: 3; + } + .oppia-flex-mobile-row { + flex-flow: row; + } + .oppia-flex-mobile-align-center { + align-items: center; + } + .oppia-mobile-text-align-center { + text-align: center; + } + .oppia-landing-page-image-container { + min-height: unset; + min-width: unset; + width: 35%; + } + .oppia-langing-page-qualities { + width: 100%; + } + .oppia-landing-qualities-description { + width: 65%; + } + .oppia-container-low-width { + width: 75%; + } + .oppia-only-display-in-mobile { + display: block; + } + .oppia-container-margin { + margin: 0; + } +} diff --git a/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.html b/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.html index e4e8dbf54eeae..e248805e0b045 100644 --- a/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.html +++ b/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.html @@ -74,141 +74,3 @@

Get started today! Looking for something else? Check out all of our other le - - diff --git a/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.ts b/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.ts index 73519a678fb4c..be469bda0e2a4 100644 --- a/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.ts +++ b/core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.ts @@ -28,6 +28,7 @@ import {UrlService} from 'services/contextual/url.service'; import {WindowRef} from 'services/contextual/window-ref.service'; import {SiteAnalyticsService} from 'services/site-analytics.service'; import {PageTitleService} from 'services/page-title.service'; +import './topic-landing-page.component.css'; type TopicLandingPageDataKey = keyof typeof TopicLandingPageConstants.TOPIC_LANDING_PAGE_DATA; @@ -53,7 +54,7 @@ interface TopicData { @Component({ selector: 'topic-landing-page', templateUrl: './topic-landing-page.component.html', - styleUrls: [], + styleUrls: ['./topic-landing-page.component.css'], }) export class TopicLandingPageComponent implements OnInit, OnDestroy { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.css b/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.css new file mode 100644 index 0000000000000..7c6f6e655ebe0 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.css @@ -0,0 +1,107 @@ +.oppia-learner-dash-button--default[disabled], +.oppia-learner-dash-button--default:disabled { + background-color: #f2f2f2 !important; + border: 1px solid #ccc !important; + color: #888 !important; + cursor: not-allowed; + opacity: 0.6; + pointer-events: none; +} + +.oppia-learner-dash-goals-modal-content { + box-sizing: border-box; + display: grid; + gap: 12px 24px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + height: auto; + max-height: 165px; + overflow-y: auto; + padding: 12px 20px 0; + width: 100%; +} + +.oppia-learner-dash-goals-checkbox { + align-items: flex-start; + display: flex; + font-size: 16px; + gap: 0 12px; + min-height: 40px; + overflow: hidden; +} + +.oppia-learner-dash-goals-checkbox-text { + -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-word; +} + +.oppia-learner-dash-goals-modal-actions { + bottom: 0; + display: flex; + gap: 12px; + justify-content: end; +} + +.oppia-learner-dash-button--modal { + flex: 1 1 auto; + height: 44px; + max-width: 178px; + min-width: 95px; +} + +.oppia-learner-dash-button--modal.outline { + border: 1px solid #00645c; +} + +.oppia-learner-dash-goals-modal-title { + font-size: 20px; + font-weight: 500; + text-align: center; +} + +.oppia-learner-dash-goals-modal-info { + font-size: 14px; + text-align: center; +} + +@media screen and (max-width: 1024px) { + .oppia-learner-dash-button--modal { + max-width: 85%; + } + + .oppia-learner-dash-goals-modal-content { + grid-template-columns: 1fr; + padding: 20px 16px; + } + + .oppia-learner-dash-goals-modal-actions { + flex-grow: 1; + justify-content: center; + } + + .oppia-learner-dash-goals-checkbox { + align-items: center; + display: flex; + min-height: 48px; + } +} + +@media screen and (max-width: 768px) { + + .oppia-learner-dash-goals-modal-content { + min-height: 256px; + } +} + +@media screen and (max-width: 576px) { + .oppia-learner-dash-goals-modal-actions { + gap: 0 0; + } + .oppia-learner-dash-button--modal { + flex: 1 1 45%; + } +} diff --git a/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.html b/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.html index 486425883b179..80f41ef6a1fc7 100644 --- a/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.html +++ b/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.html @@ -19,114 +19,3 @@

{{ 'I18N_LEAR - - diff --git a/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.ts b/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.ts index 084a09378c19f..da7ae44a8fd04 100644 --- a/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.ts +++ b/core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.ts @@ -17,10 +17,12 @@ */ import {Component, Inject} from '@angular/core'; import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import './add-goals-modal.component.css'; @Component({ selector: 'oppia-add-goals-modal', templateUrl: './add-goals-modal.component.html', + styleUrls: ['./add-goals-modal.component.css'], }) export class AddGoalsModalComponent { checkedTopics: Set; diff --git a/core/templates/pages/learner-dashboard-page/card-display/card-display.component.css b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.css new file mode 100644 index 0000000000000..a96cf0a0ed9c9 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.css @@ -0,0 +1,58 @@ +:host { + max-width: fit-content; + overflow: hidden; +} + +.card-display-arrow-button { + align-items: center; + background-color: #00645c; + border: none; + border-radius: .25em; + color: #fff; + display: flex; + height: 24px; + justify-content: center; + transition: all 300ms ease-out; + width: 24px; +} + +.card-display-arrow-button:disabled { + background-color: #667085; +} + +.card-display-arrow-button:not(:disabled):hover { + background-color: #429488; +} + +.card-display-content-container { + display: flex; + gap: 0 16px; + max-width: 100%; + overflow-x: hidden; + padding: .5px; +} + +.card-display-content-hidden { + flex-wrap: wrap; + gap: 16px 16px; + height: 289px; + overflow-y: hidden; +} + +.card-display-content-shown { + flex-wrap: wrap; + gap: 16px 16px; + height: 100%; +} + +.card-display-heading { + color: #333; + font-size: 20px; + font-weight: 500; + margin-bottom: 0; +} + +.card-display-arrow-button-container { + display: flex; + gap: 0 5px; +} diff --git a/core/templates/pages/learner-dashboard-page/card-display/card-display.component.html b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.html index 8fc9b4367b4d3..e8459821f4bdd 100644 --- a/core/templates/pages/learner-dashboard-page/card-display/card-display.component.html +++ b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.html @@ -17,64 +17,3 @@ - - diff --git a/core/templates/pages/learner-dashboard-page/card-display/card-display.component.ts b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.ts index d5e7f29fb7e69..f4138cd597e47 100644 --- a/core/templates/pages/learner-dashboard-page/card-display/card-display.component.ts +++ b/core/templates/pages/learner-dashboard-page/card-display/card-display.component.ts @@ -25,9 +25,11 @@ import { NgZone, } from '@angular/core'; import {I18nLanguageCodeService} from 'services/i18n-language-code.service'; +import './card-display.component.css'; @Component({ selector: 'oppia-card-display', templateUrl: './card-display.component.html', + styleUrls: ['./card-display.component.css'], }) export class CardDisplayComponent implements AfterContentInit { @Input() headingI18n!: string; diff --git a/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.css b/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.css new file mode 100644 index 0000000000000..5637c791b25ed --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.css @@ -0,0 +1,47 @@ +.oppia-learner-dash-button-lg { + align-items: center; + border: 1px solid; + border-radius: 4px; + display: inline-flex; + font-weight: 700; + gap: 0 4px; + justify-content: center; + max-width: 100%; + padding: 10px 0; + text-align: center; + text-decoration: none; + transition: all 300ms ease-out; + width: 344px; +} + +.oppia-learner-dash-button-lg:hover { + text-decoration: none; +} + +.oppia-learner-dash-button-lg:focus { + text-decoration: none; +} + +@media screen and (max-width: 500px) { + .oppia-learner-dash-button-lg { + padding: 10px 8px; + } +} + +.oppia-learner-dash-button--blue { + background-color: #fff; + border-color: #205d86; + color: #205d86; +} + +.oppia-learner-dash-button--blue:hover { + background-color: #cadbda; + border-color: #205d86; + color: #205d86; +} + +.oppia-learner-dash-button--blue:focus { + background-color: #429488; + border-color: #205d86; + color: #fff; +} diff --git a/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.html b/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.html index fa8941b17dad0..42dc7811111d3 100644 --- a/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.html +++ b/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.html @@ -3,53 +3,3 @@ {{ 'I18N_LEARNER_DASHBOARD_HOME_CLASSROOM_SECTION_LINK' | translate }} - - diff --git a/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.ts b/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.ts index 7326f764f326a..f4ac1a6277512 100644 --- a/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.ts +++ b/core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.ts @@ -17,9 +17,11 @@ */ import {Component, Input} from '@angular/core'; import {UrlInterpolationService} from 'domain/utilities/url-interpolation.service'; +import './classroom-button.component.css'; @Component({ selector: 'oppia-classroom-button', templateUrl: './classroom-button.component.html', + styleUrls: ['./classroom-button.component.css'], }) export class ClassroomButtonComponent { @Input() classroom!: string; diff --git a/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.css b/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.css new file mode 100644 index 0000000000000..2d3968a8b01f0 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.css @@ -0,0 +1,21 @@ +.content-toggle-button { + align-items: center; + background-color: #fff; + border: none; + border-radius: .25em; + color: #00645c; + display: flex; + float: inline-end; + font-size: 14px; + font-weight: 500; + gap: 0 4px; + justify-content: center; + padding: 8px; + transition: all 300ms ease-out; + width: fit-content; +} + +.content-toggle-button:not(:disabled):hover .content-toggle-button-text { + text-decoration: underline; + text-underline-offset: 4px; +} diff --git a/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.html b/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.html index 454cd769768ef..7abd813a8b3ef 100644 --- a/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.html +++ b/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.html @@ -2,27 +2,3 @@ {{ buttonText }} - - diff --git a/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.ts b/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.ts index 3d2f6eb84b895..2004e8dc326cc 100644 --- a/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.ts +++ b/core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.ts @@ -17,9 +17,11 @@ */ import {Component, EventEmitter, Output} from '@angular/core'; import {TranslateService} from '@ngx-translate/core'; +import './content-toggle-button.component.css'; @Component({ selector: 'oppia-content-toggle-button', templateUrl: './content-toggle-button.component.html', + styleUrls: ['./content-toggle-button.component.css'], }) export class ContentToggleButtonComponent { isExpanded: boolean = false; diff --git a/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.css b/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.css new file mode 100644 index 0000000000000..0edcc1643be2a --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.css @@ -0,0 +1,139 @@ +.goal-list-center { + align-items: center; + display: flex; + gap: 0 12px; + position: relative; +} + +.goal-list-container { + box-shadow: 0 2px 2px 0 #00000040; + width: 100%; +} + +.goal-list-details { + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + padding-bottom: 8px; + padding-top: 8px; +} + +.goal-list-details p { + font-family: 'Roboto', Arial, sans-serif; + font-weight: 500; +} + +.goal-list-img { + height: 96px; + width: 152px; +} + +.goal-list-options { + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + position: relative; +} + +.goal-list-progress-bar { + background-color: rgb(0, 100, 92, .24); + height: 4px; + max-width: 185px; + width: 100%; +} + +.goal-list-progress-bar>div { + background-color: rgb(0, 100, 92, 1); + height: 4px; +} + +.goal-list-progress-text { + font-size: 10px; + margin-bottom: 0; +} + +.goal-list-story-nodes { + display: flex; + flex-direction: column; + max-height: 276px; + overflow-y: auto; + padding-bottom: 12px; + padding-top: 12px; + scrollbar-color: #205d86; +} + +.goal-list-story-node-line { + border-left: 1px solid; + height: 12px; +} + +.goal-list-story-node-line-container { + display: flex; + justify-content: center; + width: 36px; +} + +.goal-list-stretch { + align-items: stretch; + display: flex; + gap: 0 12px; +} + +.goal-list-title { + font-size: 20px; +} + +.oppia-learner-dash-button--goals-list { + text-decoration: none; + width: 96px; +} + +.oppia-learner-dash-button--incomplete-goal { + opacity: 0; +} + +.oppia-learner-dash-button--incomplete-goal:hover { + opacity: 1; +} + +@media screen and (max-width: 500px) { + .goal-list-details { + width: 100%; + } + + .goal-list-img { + height: 187px; + width: 100%; + } + + .goal-list-options { + align-items: center; + flex-direction: row-reverse; + padding-top: 8px; + width: 100%; + } + + .goal-list-stretch { + flex-direction: column; + width: 100%; + } + + .goal-list-title { + font-size: 18px; + margin-bottom: 8px; + } +} +.oppia-learner-dash-button--disabled { + background-color: #f5f5f5; + border: 1px dashed #aaa; + border-radius: 4px; + color: #888; + cursor: default; + font-size: 14px; + font-weight: 500; + height: 36px; + padding: 10px 8px; + width: 122px; +} diff --git a/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.html b/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.html index 3ec430cd1ac63..231df016559a6 100644 --- a/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.html +++ b/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.html @@ -61,145 +61,3 @@ - - diff --git a/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.ts b/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.ts index 30de89dc05f15..0bd116ae750c1 100644 --- a/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.ts +++ b/core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.ts @@ -26,10 +26,12 @@ import {LearnerTopicSummary} from 'domain/topic/learner-topic-summary.model'; import {StorySummary} from 'domain/story/story-summary.model'; import {StoryNode} from 'domain/story/story-node.model'; import {PlatformFeatureService} from 'services/platform-feature.service'; +import './goal-list.component.css'; @Component({ selector: 'oppia-goal-list', templateUrl: './goal-list.component.html', + styleUrls: ['./goal-list.component.css'], }) export class GoalListComponent implements OnInit { @Input() goalTopic!: LearnerTopicSummary; diff --git a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.css b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.css index 0726d368f6a82..ceaa7b8671462 100644 --- a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.css +++ b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.css @@ -688,3 +688,15 @@ oppia-learner-dashboard-page .oppia-learner-groups-icon { font-size: 24px; word-wrap: break-word; } + +.oppia-profile-alignment { + vertical-align: middle; +} +.oppia-box-size { + padding: 2px 10px; +} +.col-md-3 { + flex: 0 0 25%; + padding-left: 15px; + padding-right: 15px; +} diff --git a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html index 2380405ecb831..5fb20573f1ab2 100644 --- a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html +++ b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html @@ -203,17 +203,3 @@ - - diff --git a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.ts b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.ts index 47a8eb0dbd7c7..9096fa90a8435 100644 --- a/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.ts +++ b/core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.ts @@ -53,6 +53,7 @@ import {PageTitleService} from 'services/page-title.service'; import {LearnerGroupBackendApiService} from 'domain/learner_group/learner-group-backend-api.service'; import {UrlService} from 'services/contextual/url.service'; import {PlatformFeatureService} from 'services/platform-feature.service'; +import './learner-dashboard-page.component.css'; interface LearnerDashboardExplorationsData { completedExplorationsList: LearnerExplorationSummary[]; diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitaiton-modal.component.ts b/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitaiton-modal.component.ts index 253a0fe9d8eb4..7a8e3aeba8550 100644 --- a/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitaiton-modal.component.ts +++ b/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitaiton-modal.component.ts @@ -19,10 +19,12 @@ import {Component} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component'; +import './decline-invitation-modal.component.css'; @Component({ selector: 'oppia-decline-invitation-modal', templateUrl: './decline-invitation-modal.component.html', + styleUrls: ['./decline-invitation-modal.component.css'], }) export class DeclineInvitationModalComponent extends ConfirmOrCancelModal { learnerGroupTitle!: string; diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.css b/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.css new file mode 100644 index 0000000000000..dc65574dd7989 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.css @@ -0,0 +1,13 @@ +.btn-primary { + background-color: #00645c; + border: solid 1px #00645c; + margin-right: 20px; + padding: 6px 16px; +} + +.btn-danger { + background: #fff; + border: solid 1px #a53417; + color: #a53417; + padding: 6px 16px; +} diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.html b/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.html index ced46303220b5..3d532c806d1cb 100644 --- a/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.html +++ b/core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.html @@ -8,19 +8,3 @@

- - diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.css b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.css new file mode 100644 index 0000000000000..9d701c0397737 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.css @@ -0,0 +1,26 @@ +.modal-header-title { + border-bottom: solid 1px #e0e0e0; +} + +.modal-header-title p { + margin: 0; +} + +.primary-color { + color: #00645c; +} + +.modal-header .btn-close { + cursor: pointer; + margin: 0.75rem 0 0.75rem auto; + opacity: 0.5; +} + +.modal-body .group-title, +.modal-body .group-description { + margin-bottom: 15px; +} + +.modal-footer { + display: none; +} diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.html b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.html index 78bb3adf2301b..460c00e75ef6b 100644 --- a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.html +++ b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.html @@ -28,32 +28,3 @@
- - diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.ts b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.ts index 1ad12012818b1..eac59fed709f4 100644 --- a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.ts +++ b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.ts @@ -20,10 +20,12 @@ import {Component} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component'; import {ShortLearnerGroupSummary} from 'domain/learner_group/short-learner-group-summary.model'; +import './view-learner-group-details-modal.component.css'; @Component({ selector: 'oppia-view-learner-group-details-modal', templateUrl: './view-learner-group-details-modal.component.html', + styleUrls: ['./view-learner-group-details-modal.component.css'], }) export class ViewLearnerGroupDetailsModalComponent extends ConfirmOrCancelModal { learnerGroup!: ShortLearnerGroupSummary; diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.css b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.css new file mode 100644 index 0000000000000..4afb61728a92d --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.css @@ -0,0 +1,45 @@ +.modal-header-title { + border-bottom: solid 1px #e0e0e0; +} + +.modal-header-title p { + margin: 0; +} + +.primary-color { + color: #00645c; +} + +.btn-primary { + background-color: #00645c; + border: solid 1px #00645c; + margin-right: 20px; + padding: 6px 16px; +} + +.btn-secondary { + border: solid 1px #00645c; + color: #00645c; + margin-right: 20px; + padding: 6px 16px; +} + +.btn-danger { + background: #fff; + border: solid 1px #a53417; + color: #a53417; + padding: 6px 16px; +} + +.modal-header .btn-close { + cursor: pointer; + margin: 0.75rem 0 0.75rem auto; + opacity: 0.5; +} + +.group-title, +.group-description, +.learner-groups-progress-sharing-info, +.group-facilitator { + margin-bottom: 15px; +} diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.html b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.html index 5d74af53f9c46..c63b7d3ed38da 100644 --- a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.html +++ b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.html @@ -43,51 +43,3 @@ - - diff --git a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.ts b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.ts index 4cf30778836e7..1a3351b48ee4d 100644 --- a/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.ts +++ b/core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.ts @@ -20,10 +20,12 @@ import {Component} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component'; import {ShortLearnerGroupSummary} from 'domain/learner_group/short-learner-group-summary.model'; +import './view-learner-group-invitation-modal.component.css'; @Component({ selector: 'oppia-view-learner-group-invitation-modal', templateUrl: './view-learner-group-invitation-modal.component.html', + styleUrls: ['./view-learner-group-invitation-modal.component.css'], }) export class ViewLearnerGroupInvitationModalComponent extends ConfirmOrCancelModal { learnerGroup!: ShortLearnerGroupSummary; diff --git a/core/templates/pages/learner-dashboard-page/old-progress-tab.component.css b/core/templates/pages/learner-dashboard-page/old-progress-tab.component.css new file mode 100644 index 0000000000000..700a67f0c088b --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/old-progress-tab.component.css @@ -0,0 +1,313 @@ +.progress-tab .completed-stories { + background-color: #fff; + border-radius: 4px; + box-shadow: 0 0 4px #0000001a; + margin-top: 15px; + min-height: 342px; + opacity: 1; + padding: 0 0 30px 40px; + width: 736px; +} +.progress-tab .empty-completed-stories { + background-color: #fff; + border-radius: 4px; + box-shadow: 0 0 4px #0000001a; + margin-top: 15px; + min-height: 206px; + opacity: 1; + padding: 0 0 30px 40px; + width: 360px; +} +.progress-tab .skill-proficiency { + background-color: #fff; + border-radius: 4px; + box-shadow: 0 0 4px #0000001a; + min-height: 220px; + opacity: 1; + padding: 0 30px 30px 40px; + width: 736px; +} +#setting-a-goal-link { + color: #00645c; + font-weight: bold; +} +.progress-tab .empty-section { + padding: 0 113px 30px 40px; +} +.progress-tab .completed-stories .completed-stories-title, +.progress-tab .empty-completed-stories .completed-stories-title, +.progress-tab .skill-proficiency-title { + color: #00645c; + display: inline-block; + font-family: "Capriola", "Roboto", Arial, sans-serif; + font-size: 24px; + letter-spacing: 0; + opacity: 1; + text-align: left; +} +.progress-tab .empty-section .skill-proficiency-title { + margin-bottom: 0; +} +.progress-tab .empty-skill-proficiency-section { + font-size: 18px; +} +.progress-tab .empty-skill-proficiency { + display: inline; + font-size: 18px; + margin-bottom: 0; + text-align: left; +} +.oppia-badge-image { + margin-right: 12px; + width: 32px; +} +.oppia-badge-image-for-topic { + bottom: 6px; + float: left; + margin-right: 20px; + position: relative; + width: 31px; +} +.progress-tab .skill-proficiency-topic-tile { + border-bottom: 1px solid; + height: 43px; + margin-bottom: 16px; + width: 656px; +} +.progress-tab .skill-proficiency-topic-title { + color: #333; + font-size: 19px; + font-weight: 500; + letter-spacing: 0; + opacity: 1; + position: relative; + text-align: left; +} +.progress-tab .progress-text { + bottom: 20px; + color: #00645c; + float: right; + font-size: 14px; + letter-spacing: 0; + opacity: 1; + position: relative; + right: 20px; + text-align: left; +} +.progress-tab .circle { + background-color: #fff; + border-radius: 100%; + height: 16px; + left: 6px; + position: relative; + text-align: center; + top: 6px; + width: 16px; +} +.progress-tab .circle-border { + background-color: #00645c; + border-radius: 100%; + bottom: 24px; + display: inline-block; + height: 28px; + left: 230px; + margin-left: 30%; + position: relative; + text-align: center; + width: 28px; +} +.progress-tab .info-tooltip { + display: inline-block; + opacity: 1; + position: relative; + text-decoration: none; +} +.progress-tab .info-tooltip span { + background: white; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + color: black; + display: none; +} +.progress-tab .progress-translate { + display: inline-block; +} +.progress-tab .info-tooltip span img { + float: left; + margin: 0 8px 8px 0; +} +.progress-tab .info-tooltip:hover span { + border: 0.5px solid #ccc; + border-radius: 4px; + box-shadow: 0 3px 6px #00000029; + display: block; + height: 155px; + margin-left: 32px; + padding: 9px 16px; + position: absolute; + top: -37px; + width: 157px; + z-index: 2; +} +.progress-tab .badge-type { + color: #333; + font-size: 16px; + margin-bottom: 0; + text-align: left; +} +.progress-tab .badge-percent { + color: #555; + font-size: 12px; + font-style: italic; + text-align: left; +} +.progress-tab .bg-info { + background-color: #fff; + color: #000; + margin-bottom: 16px; +} +.progress-tab .completed-stories-content { + display: inline-block; +} +.progress-tab .story-tile { + display: inline-block; + padding: 0 30px 0 0; +} +.progress-tab .empty-completed-stories-content { + font-size: 16px; + padding: 0 32px 0 0; +} +.progress-tab .completed-stories .completed-stories-heading, +.progress-tab .empty-completed-stories .completed-stories-heading, +.progress-tab .skill-proficiency-heading { + padding: 32px 0; +} +.progress-tab .completed-stories-length { + bottom: 3px; + font-size: 18px; + margin: 0 4px 0 12px; + position: relative; +} +.progress-tab .oppia-svg-star-image { + bottom: 4px; + filter: invert(95%) sepia(49%) saturate(2374%) hue-rotate(320deg) brightness(91%) contrast(89%); + position: relative; + width: 20px; +} +.progress-tab .skills-text { + color: #333; + font-size: 18px; + margin-bottom: 0; + text-align: left; + text-transform: uppercase; +} +.progress-tab .oppia-svg-dropdown-image, +.progress-tab .oppia-svg-up-image { + bottom: 5px; + float: right; + position: relative; + top: 2px; + width: 30px; +} +.progress-tab .oppia-svg-info-image { + bottom: 3px; + left: 10px; + position: relative; + width: 20px; +} +@media screen and (min-width: 768px) and (max-width: 950px) { + .progress-tab .completed-stories { + margin-top: 35px; + padding: 0 0 30px 25px; + position: relative; + right: 20px; + width: 555px; + } + .progress-tab .empty-completed-stories { + position: relative; + right: 25px; + width: 555px; + } + .progress-tab .circle-border { + left: 88px; + } + .progress-tab .scroll-content { + overflow: scroll; + } + .progress-tab .oppia-story-completion { + overflow: hidden; + } + .progress-tab .skill-proficiency { + position: relative; + right: 21px; + width: 555px; + } + .progress-tab .skill-proficiency-topic-tile { + width: 455px; + } + .progress-tab .skills-text { + font-size: 18px; + } + .progress-tab .skill-proficiency-title { + font-size: 20px; + margin-bottom: 0; + } +} +@media screen and (max-width: 767px) { + .progress-tab .empty-completed-stories { + margin: auto; + } + .progress-tab .completed-stories { + margin: auto; + margin-top: 35px; + padding: 0 0 30px 25px; + width: 360px; + } + .progress-tab .skill-proficiency { + margin: auto; + width: 360px; + } + .progress-tab .skill-proficiency-topic-tile { + height: 52px; + width: 280px; + } + .progress-tab .circle-border { + display: none; + } + .progress-tab .skill-proficiency-topic-title { + font-size: 16px; + } + .progress-tab .skills-text { + display: none; + } + .progress-tab .progress-text { + display: contents; + font-style: italic; + } + .progress-tab .skill-proficiency-title, + .progress-tab .completed-stories-title { + font-size: 20px; + margin-bottom: 0; + } + .progress-tab .story-tile { + padding: 0 14px 0 0; + } + .progress-tab .scroll-content { + overflow: scroll; + } + .progress-tab .skill-proficiency-heading { + padding: 23px 0; + } + .progress-tab .oppia-story-completion { + overflow: hidden; + } + .progress-tab .empty-section { + padding: 0 50px 30px 40px; + } +} +@media(max-width: 430px) { + .progress-tab .empty-completed-stories { + width: 355px; + } +} diff --git a/core/templates/pages/learner-dashboard-page/old-progress-tab.component.html b/core/templates/pages/learner-dashboard-page/old-progress-tab.component.html index eec665a9077ae..7cc05a8ae3a8a 100644 --- a/core/templates/pages/learner-dashboard-page/old-progress-tab.component.html +++ b/core/templates/pages/learner-dashboard-page/old-progress-tab.component.html @@ -131,318 +131,3 @@ - diff --git a/core/templates/pages/learner-dashboard-page/old-progress-tab.component.ts b/core/templates/pages/learner-dashboard-page/old-progress-tab.component.ts index ba805fbafe1a3..4bfbf9e3e72fe 100644 --- a/core/templates/pages/learner-dashboard-page/old-progress-tab.component.ts +++ b/core/templates/pages/learner-dashboard-page/old-progress-tab.component.ts @@ -28,10 +28,12 @@ import { } from 'domain/learner_dashboard/learner-dashboard-backend-api.service'; import {Subscription} from 'rxjs'; import {WindowDimensionsService} from 'services/contextual/window-dimensions.service'; +import './old-progress-tab.component.css'; @Component({ selector: 'oppia-old-progress-tab', templateUrl: './old-progress-tab.component.html', + styleUrls: ['./old-progress-tab.component.css'], }) export class OldProgressTabComponent implements OnInit { @Output() setActiveSection: EventEmitter = new EventEmitter(); diff --git a/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.css b/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.css new file mode 100644 index 0000000000000..94be3837d0ed4 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.css @@ -0,0 +1,50 @@ +.oppia-learner-dash-button--skill { + background-color: transparent; + border-color: #fff; + color: #fff; + width: 122px; +} + +.oppia-learner-dash-button--skill:hover { + background-color: #fff; + color: #c55f45; +} + +.skill-card-container { + background-color: #c55f45; + border-radius: 4px; + box-shadow: 0 2px 2px 0 #00000040; + height: 260px; + padding: 0; + width: 216px; +} + +.skill-card-info { + border-radius: 0 0 4px 4px; + height: 124px; + padding: 8px; +} + +.skill-card-img { + height: 136px; + max-height: 100%; + position: relative; +} + +.skill-card-title { + color: #fff; + font-family: Capriola, Roboto, Arial, sans-serif; + font-size: 15px; + -webkit-line-clamp: 2; + line-height: 20px; +} + +.skill-card-title-container { + height: 40px; +} + +.skill-card-topic { + color: #fff; + font-size: 12px; + font-weight: 600; +} diff --git a/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.html b/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.html index 321ae39720bf0..7b4a8c28459a1 100644 --- a/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.html +++ b/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.html @@ -22,56 +22,3 @@ - - diff --git a/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.ts b/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.ts index 367a5f77e6a72..2fbff20b4f4fb 100644 --- a/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.ts +++ b/core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.ts @@ -26,9 +26,11 @@ import {AssetsBackendApiService} from 'services/assets-backend-api.service'; import {LoaderService} from 'services/loader.service'; import {SiteAnalyticsService} from 'services/site-analytics.service'; import {WindowRef} from 'services/contextual/window-ref.service'; +import './skill-card.component.css'; @Component({ selector: 'oppia-skill-card', templateUrl: './skill-card.component.html', + styleUrls: ['./skill-card.component.css'], }) export class SkillCardComponent { @Input() topic!: LearnerTopicSummary; diff --git a/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.css b/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.css new file mode 100644 index 0000000000000..7386e064ea906 --- /dev/null +++ b/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.css @@ -0,0 +1,8 @@ +.oppia-learner-dashboard-suggestion-body .oppia-no-current-state { + color: red; +} +.oppia-learner-dashboard-suggestion-body .oppia-dashboard-suggestin-description-text { + margin-left: 10px; + margin-right: 10px; + margin-top: 20px; +} diff --git a/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.html b/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.html index 05fc5b1d362fe..7d4d3107012b0 100644 --- a/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.html +++ b/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.html @@ -34,13 +34,3 @@

- diff --git a/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.ts b/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.ts index bdb1a9385082a..a5f41ca6fdc98 100644 --- a/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.ts +++ b/core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.ts @@ -20,11 +20,12 @@ import {Component, Input} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component'; +import './learner-dashboard-suggestion-modal.component.css'; @Component({ selector: 'oppia-learner-dashboard-suggestion-modal', templateUrl: './learner-dashboard-suggestion-modal.component.html', - styleUrls: [], + styleUrls: ['./learner-dashboard-suggestion-modal.component.css'], }) export class LearnerDashboardSuggestionModalComponent extends ConfirmOrCancelModal { // These properties are initialized using Angular lifecycle hooks diff --git a/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.css b/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.css new file mode 100644 index 0000000000000..dc65574dd7989 --- /dev/null +++ b/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.css @@ -0,0 +1,13 @@ +.btn-primary { + background-color: #00645c; + border: solid 1px #00645c; + margin-right: 20px; + padding: 6px 16px; +} + +.btn-danger { + background: #fff; + border: solid 1px #a53417; + color: #a53417; + padding: 6px 16px; +} diff --git a/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.html b/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.html index 1f26029901c58..b49d18453a0f3 100644 --- a/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.html +++ b/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.html @@ -12,19 +12,3 @@

- - diff --git a/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.ts b/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.ts index fc4c437aa0651..287e182e1e95e 100644 --- a/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.ts +++ b/core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.ts @@ -19,10 +19,12 @@ import {Component} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {ConfirmOrCancelModal} from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component'; +import './delete-learner-group-modal.component.css'; @Component({ selector: 'oppia-delete-learner-group-modal', templateUrl: './delete-learner-group-modal.component.html', + styleUrls: ['./delete-learner-group-modal.component.css'], }) export class DeleteLearnerGroupModalComponent extends ConfirmOrCancelModal { learnerGroupTitle!: string; diff --git a/scripts/linters/html_style_tag_allowlist.txt b/scripts/linters/html_style_tag_allowlist.txt index 11a30ca345da8..b48f27d10c353 100644 --- a/scripts/linters/html_style_tag_allowlist.txt +++ b/scripts/linters/html_style_tag_allowlist.txt @@ -18,26 +18,6 @@ core/templates/pages/exploration-editor-page/editor-tab/graph-directives/state-g core/templates/pages/exploration-editor-page/editor-tab/state-name-editor/state-name-editor.component.html core/templates/pages/exploration-editor-page/editor-tab/state-param-changes-editor/state-param-changes-editor.component.html core/templates/pages/exploration-editor-page/editor-tab/state-version-history/state-version-history.component.html -core/templates/pages/exploration-player-page/current-lesson-player/modals/flag-exploration-modal.component.html -core/templates/pages/exploration-player-page/current-lesson-player/modals/refresher-exploration-confirmation-modal.component.html -core/templates/pages/exploration-player-page/current-lesson-player/modals/switch-content-language-refresh-required-modal.component.html -core/templates/pages/exploration-player-page/new-lesson-player/conversation-skin-components/conversation-display-components/take-break-modal.component.html -core/templates/pages/feedback-updates-page/feedback-updates-page.component.html -core/templates/pages/landing-pages/topic-landing-page/topic-landing-page.component.html -core/templates/pages/learner-dashboard-page/add-goals-modal/add-goals-modal.component.html -core/templates/pages/learner-dashboard-page/card-display/card-display.component.html -core/templates/pages/learner-dashboard-page/classroom-button/classroom-button.component.html -core/templates/pages/learner-dashboard-page/content-toggle-button/content-toggle-button.component.html -core/templates/pages/learner-dashboard-page/goal-list/goal-list.component.html -core/templates/pages/learner-dashboard-page/learner-dashboard-icons.component.html -core/templates/pages/learner-dashboard-page/learner-dashboard-page.component.html -core/templates/pages/learner-dashboard-page/modal-templates/decline-invitation-modal.component.html -core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-details-modal.component.html -core/templates/pages/learner-dashboard-page/modal-templates/view-learner-group-invitation-modal.component.html -core/templates/pages/learner-dashboard-page/old-progress-tab.component.html -core/templates/pages/learner-dashboard-page/skill-card/skill-card.component.html -core/templates/pages/learner-dashboard-page/suggestion-modal/learner-dashboard-suggestion-modal.component.html -core/templates/pages/learner-group-pages/templates/delete-learner-group-modal.component.html core/templates/pages/learner-group-pages/templates/exit-learner-group-modal.component.html core/templates/pages/learner-group-pages/templates/invite-learners-modal.component.html core/templates/pages/learner-group-pages/templates/invite-successful-modal.component.html From c9dc370e2989fa67b6c84a1f2713707b049260ac Mon Sep 17 00:00:00 2001 From: mosin74 Date: Fri, 21 Aug 2026 00:05:38 +0530 Subject: [PATCH 03/19] Handle network loss in certificate assessment player Pause the countdown timer while the learner is offline and show the interrupt card on reconnect with resume and retry actions. Render the interrupt card as a centered modal overlay. --- .../assessment-interrupt.component.css | 11 ++ .../assessment-interrupt.component.html | 54 +++---- ...essment-player-page-root.component.spec.ts | 143 ++++++++++++++++++ ...e-assessment-player-page-root.component.ts | 77 +++++++++- 4 files changed, 258 insertions(+), 27 deletions(-) diff --git a/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.css b/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.css index aebd23fd046bd..ffb8410babe8d 100644 --- a/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.css +++ b/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.css @@ -1,5 +1,16 @@ * { box-sizing: border-box; } +.assessment-interrupt-overlay { + align-items: center; + background: rgba(0, 0, 0, 0.5); + display: flex; + inset: 0; + justify-content: center; + padding: 16px; + position: fixed; + z-index: 1000; +} + .assessment-interrupt-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); diff --git a/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.html b/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.html index e8ba66e128752..45d4af544bef2 100644 --- a/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.html +++ b/core/templates/components/certificate-assessment-offering-helper/assessment-interrupt.component.html @@ -1,32 +1,34 @@ -