Removed inline styling (oppia#10287)

* Added lint check * Fixed inline styling * Fixed lint errors * Addressed review comments * Changed class name * Added directive name * Fixed files * Fixed ng-class * fixed lint errors * Added prefix * revert changes * Fixed lint errors * Addressed review comments * Addressed review comments
AWS-BugBust-75 · Aug 21, 2020 · efeed23 · efeed23
1 parent 4ae441e
commit efeed23
Show file tree

Hide file tree

Showing 45 changed files with 760 additions and 462 deletions.
diff --git a/...plates/components/state-directives/answer-group-editor/answer-group-editor.directive.html b/...plates/components/state-directives/answer-group-editor/answer-group-editor.directive.html
@@ -54,16 +54,19 @@
     width: 100%;
     margin-top: 4%;
   }
+  answer-group-editor .oppia-answer-rule-block {
+    border-bottom: 1px solid #ccc;
+  }
 </style>
 
-<div style="height: 100%;">
+<div class="h-100">
   <!-- For the default answer group, 'rules' is null. Otherwise, 'rules' is a list of rules. -->
   <div ng-if="$ctrl.rules">
     <strong>
       If the learner's answer...
     </strong>
     <ul class="nav oppia-option-list nav-stacked nav-pills" role="tablist" ng-model="$ctrl.rules">
-      <li ng-repeat="rule in $ctrl.rules" ng-class="{'active': $ctrl.activeRuleIndex === $index}" class="oppia-rule-block oppia-sortable-rule-block protractor-test-rule-block" style="margin-top: 0;" ng-style="$last ? {'border-bottom': '1px solid #ccc'} : {}">
+      <li ng-repeat="rule in $ctrl.rules" ng-class="{'active': $ctrl.activeRuleIndex === $index, 'oppia-answer-rule-block': $last}" class="mt-0 oppia-rule-block oppia-sortable-rule-block protractor-test-rule-block">
         <a ng-click="$ctrl.openRuleEditor($index)" ng-hide="$ctrl.activeRuleIndex === $index" class="oppia-rule-tab protractor-test-answer-tab" ng-class="{'oppia-rule-tab-disabled': !$ctrl.isEditable}">
           <div class="oppia-rule-header">
             <span ng-if="$index > 0">or</span>

diff --git a/...plates/components/state-directives/answer-group-editor/summary-list-header.directive.html b/...plates/components/state-directives/answer-group-editor/summary-list-header.directive.html
@@ -28,6 +28,9 @@
     white-space: nowrap;
     width: 80%;
   }
+  summary-list-header .oppia-num-items-badge {
+    bottom: 4px;
+  }
 
   /* This is to break the line only when screen is too narrow to have both divs
      in same line.*/
@@ -41,7 +44,7 @@
   <div class="oppia-example-header">
     <span ng-if="!$ctrl.isActive()" ng-attr-title="<[$ctrl.getSummary()]>">
       <[$ctrl.getShortSummary()]>
-      <span ng-if="$ctrl.getNumItems() > 1" class="badge badge-primary" style="position: relative; bottom: 4px;">
+      <span ng-if="$ctrl.getNumItems() > 1" class="badge badge-primary position-relative oppia-num-items-badge">
         +<[$ctrl.getNumItems() - 1]>
       </span>
     </span>

diff --git a/core/templates/components/state-directives/hint-editor/hint-editor.directive.html b/core/templates/components/state-directives/hint-editor/hint-editor.directive.html
@@ -1,6 +1,6 @@
-<div style="height: 100%;">
+<div class="h-100">
   <div ng-if="!$ctrl.hintEditorIsOpen"
-       style="height: 100%;"
+       class="h-100"
        ng-attr-title="<[$ctrl.isEditable ? 'Edit hint' : '']>">
     <div class="oppia-readonly-rule-tile"
          ng-class="{'oppia-editable-section': $ctrl.isEditable}">
@@ -51,7 +51,7 @@
         </button>
       </div>
 
-      <div style="clear: both;"></div>
+      <div class="oppia-clear"></div>
     </div>
   </div>
 </div>
diff --git a/core/templates/components/state-directives/response-header/response-header.directive.html b/core/templates/components/state-directives/response-header/response-header.directive.html
@@ -45,6 +45,10 @@
     margin-bottom: 7px;
   }
 
+  response-header .oppia-num-rules {
+    bottom: 4px;
+  }
+
   /* This is to break the line only when screen is too narrow to have both divs
      in same line.*/
   @media screen and (min-width: 370px) {
@@ -60,7 +64,7 @@
     <i class="material-icons md-18 oppia-response-tick-cross  protractor-test-correct-tick-mark" ng-if="$ctrl.isCorrect() && $ctrl.isCorrectnessFeedbackEnabled() && $ctrl.isResponse() && !$ctrl.isCurrentInteractionLinear()">&#10004;</i>
     <span ng-if="!$ctrl.isActive()" ng-attr-title="<[$ctrl.getSummary()]>">
       <[$ctrl.getShortSummary()]>
-      <span ng-if="$ctrl.getNumRules() > 1" class="badge badge-primary" style="position: relative; bottom: 4px;">
+      <span ng-if="$ctrl.getNumRules() > 1" class="badge badge-primary position-relative oppia-num-rules">
         +<[$ctrl.getNumRules() - 1]>
       </span>
     </span>

diff --git a/core/templates/components/state-directives/rule-editor/rule-editor.directive.html b/core/templates/components/state-directives/rule-editor/rule-editor.directive.html
@@ -1,38 +1,35 @@
-<div style="position: relative;">
+<div class="position-relative">
   <form class="form-inline protractor-test-rule-details" role="form" name="$ctrl.ruleEditForm.form">
     <div ng-if="$ctrl.rule.type != 'FuzzyMatches'" class="rule-parent">
       <rule-type-selector class="protractor-test-answer-description" local-value="<[$ctrl.rule.type]>" on-selection-change="$ctrl.onSelectNewRuleType">
       </rule-type-selector>
 
       <span ng-repeat="item in $ctrl.ruleDescriptionFragments track by $index" class="form-group oppia-rule-editor-span protractor-test-answer-description-fragment">
-        <span ng-if="item.type == 'select'" style="color: black;">
+        <span ng-if="item.type == 'select'" class="text-dark">
           <span ng-if="$ctrl.ruleDescriptionChoices.length === 1">
             "<[$ctrl.ruleDescriptionChoices[0].val|convertToPlainText|truncate]>"
           </span>
           <span ng-if="$ctrl.ruleDescriptionChoices.length !== 1">
-            <html-select style="width: 250px;" options="$ctrl.ruleDescriptionChoices" selection="$ctrl.rule.inputs[item.varName]">
+            <html-select class="oppia-rule-description-choice" options="$ctrl.ruleDescriptionChoices" selection="$ctrl.rule.inputs[item.varName]">
             </html-select>
           </span>
         </span>
 
-        <div style="max-height: 320px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        text-overflow: ellipsis;">
-          <span ng-if="item.type == 'checkboxes'" style="color: black;">
+        <div class="oppia-custom-editor-container">
+          <span ng-if="item.type == 'checkboxes'" class="text-dark">
             <object-editor obj-type="SetOfHtmlString" init-args="{choices: $ctrl.ruleDescriptionChoices}" value="$ctrl.rule.inputs[item.varName]"></object-editor>
           </span>
-          <span ng-if="item.type == 'dropdown'" style="color: black;">
+          <span ng-if="item.type == 'dropdown'" class="text-dark">
             <object-editor obj-type="ListOfSetsOfHtmlStrings" init-args="{choices: $ctrl.ruleDescriptionChoices}" value="$ctrl.rule.inputs[item.varName]"></object-editor>
           </span>
-          <span ng-if="item.type == 'dragAndDropHtmlStringSelect'" style="color: black;">
+          <span ng-if="item.type == 'dragAndDropHtmlStringSelect'" class="text-dark">
             <object-editor obj-type="DragAndDropHtmlString" init-args="{choices: $ctrl.ruleDescriptionChoices}" value="$ctrl.rule.inputs[item.varName]"></object-editor>
           </span>
-          <span ng-if="item.type == 'dragAndDropPositiveIntSelect'" style="color: black;">
+          <span ng-if="item.type == 'dragAndDropPositiveIntSelect'" class="text-dark">
             <object-editor obj-type="DragAndDropPositiveInt" init-args="{choices: $ctrl.ruleDescriptionChoices}" value="$ctrl.rule.inputs[item.varName]"></object-editor>
           </span>
           <span ng-if="item.type != 'select' && item.type != 'noneditable'">
-            <object-editor obj-type="<[item.type]>" is-editable="$ctrl.isEditable" always-editable="true" value="$ctrl.rule.inputs[item.varName]" style="color: black;"></object-editor>
+            <object-editor obj-type="<[item.type]>" is-editable="$ctrl.isEditable" always-editable="true" value="$ctrl.rule.inputs[item.varName]" class="text-dark"></object-editor>
           </span>
           <span ng-if="item.type == 'noneditable'">
             <[item.text]>
@@ -48,13 +45,22 @@
       <button type="button" class="btn btn-success protractor-test-save-answer" ng-disabled="$ctrl.ruleEditForm.form.$invalid" ng-click="$ctrl.saveThisRule()">Save Answer</button>
     </div>
 
-    <div style="clear: both;"></div>
+    <div class="oppia-clear"></div>
   </div>
 </div>
 <style>
-  .form-group.oppia-rule-editor-span {
+  rule-editor .form-group.oppia-rule-editor-span {
     display: inline-block;
     margin-right: 5px;
     width: 100%;
   }
+  rule-editor .oppia-rule-description-choice {
+    width: 250px;
+  }
+  rule-editor .oppia-custom-editor-container {
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-overflow: ellipsis;
+  }
 </style>
diff --git a/core/templates/components/state-directives/solution-editor/solution-editor.directive.html b/core/templates/components/state-directives/solution-editor/solution-editor.directive.html
@@ -1,6 +1,6 @@
-<div style="height: 100%;">
+<div class="h-100">
   <div ng-if="!$ctrl.solutionEditorIsOpen"
-       style="height: 100%;"
+       class="h-100"
        ng-attr-title="Edit solution">
     <div class="oppia-readonly-rule-tile"
          ng-class="{'oppia-editable-section': true}">

diff --git a/...es/components/state-directives/solution-editor/solution-explanation-editor.directive.html b/...es/components/state-directives/solution-editor/solution-explanation-editor.directive.html
@@ -1,6 +1,6 @@
-<div style="height: 100%;">
+<div class="h-100">
   <div ng-if="!$ctrl.explanationEditorIsOpen"
-       style="height: 100%;"
+       class="h-100"
        ng-attr-title="<[$ctrl.isEditable ? 'Edit explanation' : '']>">
     <div class="oppia-readonly-rule-tile"
          ng-class="{'oppia-editable-section': $ctrl.isEditable}">
@@ -44,7 +44,7 @@
         </button>
       </div>
 
-      <div style="clear: both;"></div>
+      <div class="oppia-clear"></div>
     </div>
   </div>
 </div>
diff --git a/core/templates/css/oppia.css b/core/templates/css/oppia.css
@@ -1988,6 +1988,15 @@ pre.oppia-pre-wrapped-text {
   z-index: 50;
 }
 
+.oppia-clear {
+  clear: both;
+}
+
+.oppia-form-error-text {
+  color: #ff0000;
+  font-size: smaller;
+}
+
 .oppia-editor-trash-icon {
   opacity: 0.2;
   -webkit-transition: all 200ms;

diff --git a/core/templates/domain/learner_dashboard/learner-dashboard-icons.directive.html b/core/templates/domain/learner_dashboard/learner-dashboard-icons.directive.html
@@ -8,7 +8,7 @@
    tooltip-placement="left">
 </i>
 <div ng-show="canActivityBeAddedToLearnerPlaylist(getActivityId()) && isContainerNarrow()" class="btn-group dropdown oppia-learner-dashboard-icon" uib-dropdown>
-  <ul style="left:-150px;top:0" class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+  <ul class="dropdown-menu oppia-dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
     <li role="menuitem" ng-click="addToLearnerPlaylist(getActivityId(), getActivityType())">
       <a><['I18N_LIBRARY_ADD_TO_LEARNER_PLAYLIST' | translate]></a>
     </li>
@@ -39,8 +39,12 @@
    tooltip-placement="left">
 </i>
 <style>
-  .library-incomplete-activity-tooltip .tooltip-inner {
+  learner-dashboard-icons .library-incomplete-activity-tooltip .tooltip-inner {
     max-width: none;
     white-space: nowrap;
   }
+  learner-dashboard-icons .oppia-dropdown-menu {
+    left: -150px;
+    top: 0;
+  }
 </style>
diff --git a/core/templates/i18n-footer.directive.html b/core/templates/i18n-footer.directive.html
@@ -3,8 +3,8 @@
     <select ng-model="$ctrl.currentLanguageCode"
             ng-change="$ctrl.changeLanguage()"
             ng-options="language.id as language.text for language in $ctrl.supportedSiteLanguages"
-            class="oppia-language-selector protractor-test-i18n-language-selector"
-            style="color: black;" aria-label="Change languages">
+            class="text-dark oppia-language-selector protractor-test-i18n-language-selector"
+            aria-label="Change languages">
     </select>
   </li>
 </ul>
diff --git a/...s/contributor-dashboard-page/modal-templates/translation-suggestion-review.directive.html b/...s/contributor-dashboard-page/modal-templates/translation-suggestion-review.directive.html
@@ -4,14 +4,14 @@ <h3>Review translation</h3>
 
 <div class="modal-body">
   <section class="oppia-suggestion-review-container">
-    <div class="oppia-suggestion-review-panel-container" style="float: left;">
+    <div class="oppia-suggestion-review-panel-container float-left">
       <strong>Content to translate:</strong>
       <div class="oppia-suggestion-review-panel">
         <angular-html-bind html-data="contentHtml">
         </angular-html-bind>
       </div>
     </div>
-    <div class="oppia-suggestion-review-panel-container" style="float: right;">
+    <div class="oppia-suggestion-review-panel-container float-right">
       <strong> Translation:</strong>
       <div class="oppia-suggestion-review-panel">
         <angular-html-bind html-data="translationHtml">
@@ -21,11 +21,11 @@ <h3>Review translation</h3>
   </section>
   <div ng-show="reviewable" class="oppia-suggestion-review-message">
     Review message (required if rejecting):
-    <input class="protractor-test-suggestion-review-message" type="text" ng-model="reviewMessage" style="width: 100%">
+    <input class="protractor-test-suggestion-review-message w-100" type="text" ng-model="reviewMessage">
   </div>
   <div ng-show="reviewable" class="oppia-suggestion-review-message">
     Brief Description of Changes (required if accepting):
-    <input class="protractor-test-suggestion-commit-message" type="text" ng-model="commitMessage" maxlength="1000" style="width: 100%">
+    <input class="protractor-test-suggestion-commit-message w-100" type="text" ng-model="commitMessage" maxlength="1000">
   </div>
 </div>
 

diff --git a/core/templates/pages/error-pages/error-iframed.mainpage.html b/core/templates/pages/error-pages/error-iframed.mainpage.html
@@ -32,14 +32,18 @@
         width: 100%;
         z-index: 1;
       }
+
+      .oppia-main-page-container {
+        margin: 0 auto;
+      }
     </style>
   </head>
   <body>
     <service-bootstrap></service-bootstrap>
     <div ng-controller="Base">
       <base-content>
         <content>
-          <div role="main" style="margin: 0 auto; position: relative;">
+          <div role="main" class="position-relative oppia-main-page-container">
             <div class="oppia-page-container">
               <md-card class="oppia-main-error-card">
                 <h3>Exploration Not Found</h3>

diff --git a/core/templates/pages/get-started-page/get-started-page.mainpage.html b/core/templates/pages/get-started-page/get-started-page.mainpage.html
@@ -39,7 +39,7 @@ <h2 translate="I18N_GET_STARTED_PAGE_PARAGRAPH_3_HEADING"></h2>
                 <p translate="I18N_GET_STARTED_PAGE_PARAGRAPH_5">
 
                 </p>
-                <ul style="margin-left: 40px;">
+                <ul class="oppia-links-container">
                   <li><a href="https://www.oppia.org/explore/0" target="new">Welcome to Oppia</a></li>
                   <li><a href="https://www.oppia.org/collection/wqCTKpKA0LBe" target="new">Get Electrified!</a></li>
                   <li><a href="https://www.oppia.org/collection/inDXV0w8-p1C" target="new">Programming with Carla</a></li>
@@ -81,6 +81,9 @@ <h2 translate="I18N_GET_STARTED_PAGE_PARAGRAPH_11_HEADING"></h2>
           font-weight: bold;
           text-align: left;
         }
+        .oppia-links-container {
+          margin-left: 40px;
+        }
       </style>
 
     </oppia-root>