Fixes part of oppia#3064: pull the directive specific css in correspo…

…nding files from oppia.css (oppia#3077) * Fixes oppia#3064: initial script to scrape out oppia classes from directive html file [NOT FOR MERGE] * Fixes oppia#3064: linting issues solved * Fixes oppia#3064: linting issues solved * Fixes oppia#3064: linting issues solved * Fixes oppia#3064: linting issues * Fixes oppia#3064: script modified to search entire directory and subdirectory and give files and unique classes that belong to it * Fixes oppia#3064: linting issues fixed * Fixes oppia#3064: linting issues fixed * Fixes oppia#3064: linting issues fixed * Fixes oppia#3064: linting issues fixed * Fixes oppia#3064: script modified for looking unique classes among all html files instead of among all directive files * Fixes oppia#3064: script modified * FIXES oppia#3064: documentation added for script * Fixes oppia#3064: unique css transferred for schema_based_list_editor_directive.html * Fixes oppia#3064: unique css shifter for answer_group_editor_directive.html * Fixes oppia#3064: unique css shifted for side_navigation_bar_directive.html * Fixes oppia#3064: unique css shifted for embed_exploration_modal_directive.html * Fixes oppia#3064: unique css shifted for schema_based_int_editor_directive.html * Fixes oppia#3064: shifted css to before the html and made some changes in side_navigation_bar_directive.html * Fixes oppia#3064: newline added in end of search_results_directive.html * Fixes oppia#3064: shifted .css-class-name to directive-name.css-class-name for scoping purposes * Fixes oppia#3064: side_navgation_bar_directive file updated * Fixes oppia#3064: css classes in directive files updated to directive-name .css-class * Fixes oppia#3064: embed_exploration_modal_directive updated
hridayns · Mar 11, 2017 · efb9976 · efb9976
1 parent baf05be
commit efb9976
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 186 deletions.
diff --git a/core/templates/dev/head/components/answer_group_editor_directive.html b/core/templates/dev/head/components/answer_group_editor_directive.html
@@ -1,4 +1,48 @@
 <script type="text/ng-template" id="inline/answer_group_editor">
+  <style>
+    answer-group-editor .oppia-rule-header {
+      color: rgb(120, 120, 120);
+      overflow: hidden;
+      padding-left: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    answer-group-editor .oppia-multiple-choice-rule p {
+      display: inline;
+    }
+    answer-group-editor .oppia-multiple-choice-rule p::before {
+      content: ' ';
+    }
+    answer-group-editor .oppia-add-rule-button {
+      background-color: rgba(165,165,165,0.9);
+      border: 0;
+      border-radius: 0;
+      color: white;
+      opacity: 0.9;
+      padding: 7px;
+      width: 100%;
+    }
+
+    answer-group-editor .oppia-add-rule-button:active,
+    answer-group-editor .oppia-add-rule-button:focus,
+    answer-group-editor .oppia-add-rule-button:hover {
+      background-color: rgba(165,165,165,1);
+      color: white;
+      opacity: 1;
+    }
+    answer-group-editor .oppia-delete-rule-button {
+      cursor: pointer;
+      opacity: 0.5;
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      width: 20px;
+    }
+    answer-group-editor .oppia-delete-rule-button:hover {
+      opacity: 1;
+    }
+  </style>
+
   <div style="height: 100%;">
     <!-- For the default answer group, 'rules' is null. Otherwise, 'rules' is a list of rules. -->
     <div ng-if="rules">

diff --git a/core/templates/dev/head/components/embed_modal/embed_exploration_modal_directive.html b/core/templates/dev/head/components/embed_modal/embed_exploration_modal_directive.html
@@ -1,21 +1,37 @@
 <script type="text/ng-template" id="modals/embedExploration">
-  <div class="modal-header">
-    <h3>Embed this exploration</h3>
-  </div>
+  <style>
+    .oppia-embed-exploration-modal .oppia-embed-modal-code {
+      background-color: #fcfcfc;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      display: inline-block;
+      padding: 10px;
+    }
 
-  <div class="modal-body">
-    <p>
-      To embed this exploration in another webpage, copy the following HTML into the source code of the webpage:
-    </p>
+    .oppia-embed-exploration-modal .oppia-embed-modal-code:hover {
+      background-color: #f9f9f9;
+    }
+  </style>
+
+  <div class="oppia-embed-exploration-modal">
+    <div class="modal-header">
+      <h3>Embed this exploration</h3>
+    </div>
 
-    <div class="oppia-embed-modal-code" ng-click="selectText($event)">&lt;iframe src="<[serverName]>/embed/exploration/<[explorationId]>" width="700" height="1000"&gt;</div>
+    <div class="modal-body">
+      <p>
+        To embed this exploration in another webpage, copy the following HTML into the source code of the webpage:
+      </p>
 
-    <p>
-      For more details, as well as instructions on how to embed a particular version of an exploration, please see the <a href="https://oppia.github.io/#/EmbeddingAnExploration" target="_blank">documentation</a>.
-    </p>
-  </div>
+      <div class="oppia-embed-modal-code" ng-click="selectText($event)">&lt;iframe src="<[serverName]>/embed/exploration/<[explorationId]>" width="700" height="1000"&gt;</div>
+
+      <p>
+        For more details, as well as instructions on how to embed a particular version of an exploration, please see the <a href="https://oppia.github.io/#/EmbeddingAnExploration" target="_blank">documentation</a>.
+      </p>
+    </div>
 
-  <div class="modal-footer">
-    <button class="btn btn-default" ng-click="close()">Close</button>
+    <div class="modal-footer">
+      <button class="btn btn-default" ng-click="close()">Close</button>
+    </div>
   </div>
 </script>
diff --git a/...templates/dev/head/components/forms/schema_editors/schema_based_int_editor_directive.html b/...templates/dev/head/components/forms/schema_editors/schema_based_int_editor_directive.html
@@ -1,4 +1,11 @@
 <script type="text/ng-template" id="schemaBasedEditor/int">
+  <style>
+    schema-based-int-editor .oppia-blue-on-focus > input:focus {
+      border-bottom-color: rgb(63, 81, 181);
+      border-bottom-width: 2px;
+    }  
+  </style>
+
   <div class="input-group">
     <span ng-if="!expressionMode">
       <md-input-group class="long oppia-blue-on-focus md-default-theme" style="margin: 0px;">

diff --git a/...emplates/dev/head/components/forms/schema_editors/schema_based_list_editor_directive.html b/...emplates/dev/head/components/forms/schema_editors/schema_based_list_editor_directive.html
@@ -1,4 +1,22 @@
 <script type="text/ng-template" id="schemaBasedEditor/list">
+  <style>
+    schema-based-list-editor .oppia-delete-list-entry-button {
+      background: none;
+      border: 0;
+      color: #000;
+      cursor: pointer;
+      height: 30px;
+      opacity: 0.5;
+      width: 30px;
+    }
+    schema-based-list-editor .oppia-delete-list-entry-button {
+      margin-top: 6px;
+    }
+    schema-based-list-editor .oppia-delete-list-entry-button:hover {
+      opacity: 1;
+    }
+  </style>
+
   <table style="width: 100%;">
     <tr ng-repeat="item in localValue track by $index">
       <td>

diff --git a/core/templates/dev/head/components/side_navigation_bar/side_navigation_bar_directive.html b/core/templates/dev/head/components/side_navigation_bar/side_navigation_bar_directive.html
@@ -1,4 +1,99 @@
 <script type="text/ng-template" id="components/sideNavigationBar">
+  <style>
+    side-navigation-bar .oppia-sidebar-menu {
+      background: #fff;
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      width: 270px;
+      z-index: 100;
+    }
+    side-navigation-bar .oppia-sidebar-menu-transition {
+      -webkit-transition: all 0.5s;
+      transition: all 0.5s;
+    }
+    side-navigation-bar .oppia-sidebar-menu::after {
+      background: rgba(0,0,0,0.2);
+      content: '';
+      display: none;
+      height: 100%;
+      opacity: 1;
+      position: absolute;
+      right: 0;
+      top: 0;
+      -webkit-transition: opacity 0.5s;
+      transition: opacity 0.5s;
+      width: 100%;
+    }
+    side-navigation-bar .oppia-sidebar-menu-icon {
+      height: 22px;
+      margin: 0 16px 3px 6px;
+      vertical-align: middle;
+      width: 22px;
+    }
+    side-navigation-bar .oppia-sidebar-menu ul {
+      font-size: 16px;
+      list-style: none;
+      margin-bottom: 0;
+      padding-left: 0;
+      padding-top: 10px;
+    }
+    side-navigation-bar .oppia-sidebar-menu hr {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+    side-navigation-bar .oppia-sidebar-menu .oppia-sidebar-section-header {
+      color: #888;
+      display: block;
+      margin-left: 10px;
+      padding: 1em 0 0 0;
+      text-decoration: none;
+    }
+    side-navigation-bar .oppia-sidebar-menu a {
+      color: #333;
+      display: block;
+      padding: 1em 0 1em 18px;
+      text-decoration: none;
+    }
+    side-navigation-bar .oppia-sidebar-menu a:hover,
+    side-navigation-bar .oppia-sidebar-menu a:focus {
+      background: rgb(243, 248, 255);
+    }
+    side-navigation-bar .oppia-sidebar-menu li.active a {
+      background: rgba(243, 248, 255, 0.5);
+    }
+    side-navigation-bar .oppia-sidebar-logo-container {
+      color: #333;
+      margin: 0 auto;
+      width: 120px;
+    }
+
+    side-navigation-bar .oppia-sidebar-header {
+      background: #eee;
+      border-bottom: 1px solid #ccc;
+      height: 56px;
+      padding-top: 6px;
+    }
+
+    side-navigation-bar .oppia-sidebar-menu-open .oppia-sidebar-menu {
+      box-shadow: 1px 0 3px rgba(0,0,0,0.12), 1px 0 2px rgba(0,0,0,0.24);
+      overflow-y: scroll;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
+    }
+    side-navigation-bar .oppia-sidebar-menu-open .oppia-sidebar-menu::after {
+      height: 0;
+      opacity: 0;
+      -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+      transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+      width: 0;
+    }
+
+  </style>
   <nav class="oppia-sidebar-menu oppia-sidebar-menu-transition">
     <div class="oppia-sidebar-header">
       <div class="oppia-sidebar-logo-container">