Revert "Fix oppia#12238: Making the question and header sticky in the…

… question editor modal" (oppia#20341) Revert "Fix oppia#12238: Making the question and header sticky in the question edi…" This reverts commit 985e84d.
AFZL210 · May 23, 2024 · 6345bf8 · 6345bf8
1 parent a22bdad
commit 6345bf8
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 58 deletions.
diff --git a/core/templates/components/question-directives/question-editor/question-editor.component.html b/core/templates/components/question-directives/question-editor/question-editor.component.html
@@ -9,8 +9,7 @@
                       (onSaveInapplicableSkillMisconceptionIds)="saveInapplicableSkillMisconceptionIds($event)"
                       [interactionIsShown]="interactionIsShown"
                       [stateContentPlaceholder]="getStateContentPlaceholder()"
-                      [stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()"
-                      [stateContentShouldStayVisibleOnScroll]="stateContentShouldStayVisibleOnScroll">
+                      [stateContentSaveButtonPlaceholder]="getStateContentSaveButtonPlaceholder()">
   </oppia-state-editor>
 </div>
 

diff --git a/core/templates/components/question-directives/question-editor/question-editor.component.ts b/core/templates/components/question-directives/question-editor/question-editor.component.ts
@@ -60,7 +60,6 @@ export class QuestionEditorComponent implements OnInit, OnDestroy {
   @Input() question!: Question;
   @Input() questionId!: string;
   @Input() questionStateData!: State;
-  @Input() stateContentShouldStayVisibleOnScroll!: boolean;
   interactionIsShown!: boolean;
   oppiaBlackImgUrl!: string;
   stateEditorIsInitialized!: boolean;

diff --git a/core/templates/components/question-directives/questions-list/questions-list.component.html b/core/templates/components/question-directives/questions-list/questions-list.component.html
@@ -43,8 +43,7 @@ <h4> <strong> Linked Skills </strong> </h4>
                            [misconceptionsBySkill]="misconceptionsBySkill"
                            [questionStateData]="questionStateData"
                            [question]="question"
-                           [userCanEditQuestion]="canEditQuestion"
-                           [stateContentShouldStayVisibleOnScroll]="false">
+                           [userCanEditQuestion]="canEditQuestion">
     </oppia-question-editor>
     <div class="alert alert-danger" *ngIf="question.getStateData().interaction.id && questionValidationService.getValidationErrorMessage(question)">
       {{questionValidationService.getValidationErrorMessage(question)}}

diff --git a/core/templates/components/state-editor/state-editor.component.html b/core/templates/components/state-editor/state-editor.component.html
@@ -23,7 +23,7 @@ <h3 class="e2e-test-joyride-title" tabindex="0">Responses</h3>
   </p>
 </ng-template>
 
-<mat-card class="oppia-editor-card-with-avatar" [ngClass]="{'oppia-editor-card-with-avatar-sticky': stateContentShouldStayVisibleOnScroll}">
+<mat-card class="oppia-editor-card-with-avatar">
   <div class="state-content-header-container" (click)="toggleConceptCard()">
     <div class="state-content-header oppia-mobile-collapsible-card-header">
       <h3 class="oppia-exp-content-card-header">Content</h3>
@@ -92,12 +92,6 @@ <h3 class="oppia-exp-content-card-header">Content</h3>
 </div>
 
 <style>
-  .oppia-editor-card-with-avatar-sticky {
-    position: sticky;
-    top: 82px;
-    z-index: 1;
-  }
-
   .state-content-header-container {
     display: none;
     padding: 0 30px;

diff --git a/core/templates/components/state-editor/state-editor.component.ts b/core/templates/components/state-editor/state-editor.component.ts
@@ -81,7 +81,6 @@ export class StateEditorComponent implements OnInit, OnDestroy {
   @Input() interactionIsShown!: boolean;
   @Input() stateContentSaveButtonPlaceholder!: string;
   @Input() stateContentPlaceholder!: string;
-  @Input() stateContentShouldStayVisibleOnScroll!: boolean;
 
   oppiaBlackImgUrl!: string;
   // State name is null if their is no state selected or have no active state.

diff --git a/...ontributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html b/...ontributor-dashboard-page/modal-templates/question-suggestion-editor-modal.component.html
@@ -33,8 +33,7 @@ <h3>Your Practice Question</h3>
                              [misconceptionsBySkill]="misconceptionsBySkill"
                              [questionStateData]="questionStateData"
                              [question]="question"
-                             [userCanEditQuestion]="canEditQuestion"
-                             [stateContentShouldStayVisibleOnScroll]="false">
+                             [userCanEditQuestion]="canEditQuestion">
       </oppia-question-editor>
     </div>
     <div class="alert alert-danger" *ngIf="question.getStateData().interaction.id && getQuestionValidationErrorMessage()">

diff --git a/...ages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html b/...ages/contributor-dashboard-page/modal-templates/question-suggestion-review.component.html
@@ -20,37 +20,32 @@ <h3 class="oppia-mobile-question-header" title="{{questionHeader}}">
 </div>
 
 <div class="modal-body">
-  <section class="oppia-suggestion-review-container">
-    <div class="oppia-question-details" tabindex="0">
-      <div class="oppia-question-suggestion">
-        <strong class="oppia-difficulty-title">
-          Selected Difficulty: {{skillDifficultyLabel}}
-        </strong>
-        <div *ngIf="skillRubricExplanations.length > 0">
-          <strong class="oppia-skill-rubrics"
-                  title="Use these notes to make sure your question is at the right difficulty.">
-            Notes from Skill Rubric
-          </strong>
-          <ul>
-            <li *ngFor="let explanation of skillRubricExplanations">
-              <span class="oppia-skill-explanation" [innerHtml]="explanation"></span>
-            </li>
-          </ul>
-        </div>
-      </div>
+  <div class="oppia-question-details" tabindex="0">
+    <strong class="oppia-difficulty-title">
+      Selected Difficulty: {{skillDifficultyLabel}}
+    </strong>
+    <div *ngIf="skillRubricExplanations.length > 0">
+      <strong class="oppia-skill-rubrics"
+              title="Use these notes to make sure your question is at the right difficulty.">
+        Notes from Skill Rubric
+      </strong>
+      <ul>
+        <li *ngFor="let explanation of skillRubricExplanations">
+          <span class="oppia-skill-explanation" [innerHtml]="explanation"></span>
+        </li>
+      </ul>
     </div>
-    <div *ngIf="showQuestion">
-      <oppia-question-editor [questionId]="questionId"
-                             [misconceptionsBySkill]="misconceptionsBySkill"
-                             [questionStateData]="questionStateData"
-                             [question]="question"
-                             [userCanEditQuestion]="canEditQuestion"
-                             [stateContentShouldStayVisibleOnScroll]="true"
-                             (questionChange)="questionChanged()"
-                             tabindex="0">
-      </oppia-question-editor>
-    </div>
-  </section>
+  </div>
+  <div *ngIf="showQuestion">
+    <oppia-question-editor [questionId]="questionId"
+                           [misconceptionsBySkill]="misconceptionsBySkill"
+                           [questionStateData]="questionStateData"
+                           [question]="question"
+                           [userCanEditQuestion]="canEditQuestion"
+                           (questionChange)="questionChanged()"
+                           tabindex="0">
+    </oppia-question-editor>
+  </div>
   <section [hidden]="!reviewable"
            class="oppia-reviewer-actions">
     <div class="oppia-suggestion-review-message">
@@ -115,17 +110,6 @@ <h3 class="oppia-mobile-question-header" title="{{questionHeader}}">
 </div>
 
 <style>
-  .modal-header {
-    background-color: #fff;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-  }
-  .oppia-suggestion-review-container {
-    height: 1300px;
-    padding-bottom: 0;
-    padding-top: 0;
-  }
   .oppia-close-button-position {
     font-size: 2.5rem;
     position: absolute;
@@ -197,7 +181,7 @@ <h3 class="oppia-mobile-question-header" title="{{questionHeader}}">
   }
   .oppia-question-suggestion {
     height: 100%;
-    overflow: auto;
+    overflow: scroll;
   }
   .oppia-reviewer-actions {
     border-top: 1px solid #e5e5e5;

diff --git a/.../templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html b/.../templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
@@ -47,7 +47,6 @@ <h4>Now for the fun part...</h4>
                           [addState]="addState.bind(this)"
                           [interactionIsShown]="interactionIsShown"
                           [explorationIsLinkedToStory]="explorationIsLinkedToStory"
-                          [stateContentShouldStayVisibleOnScroll]="false"
                           (onSaveStateContent)="saveStateContent($event)"
                           (onSaveNextContentIdIndex)="saveNextContentIdIndex()"
                           (onSaveInteractionData)="saveInteractionData($event)"