Modified topic viewer page and few UI changes on topic editor page. (#…

…6455) * First * First * Second * Third * Fourth * Reset * Added 4 tiles & fixed tab issues * Maded some changes * Linting Fixed * Lint fixed * Updated constant.js * reverted changes * Tab fixed * Update constants.js * Update topic_editor_navbar_directive.html * Mobile view corrected * linting issues fixed * Added mobile view tab section
oppia · Apr 19, 2019 · 23ff087 · 23ff087
1 parent 30e4f81
commit 23ff087
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/core/templates/dev/head/pages/topic_editor/main_editor/topic_editor_tab_directive.html b/core/templates/dev/head/pages/topic_editor/main_editor/topic_editor_tab_directive.html
@@ -47,6 +47,9 @@ <h4 ng-if="topic.getCanonicalStoryIds().length === 0" style="color: gray;">
 </div>
 
 <style>
+  .topic-editor textarea {
+    resize:vertical;
+  }
   .topic-editor {
     margin-top: 2%;
     margin-left: 25%;

diff --git a/core/templates/dev/head/pages/topic_viewer/StoriesListDirective.js b/core/templates/dev/head/pages/topic_viewer/StoriesListDirective.js
@@ -29,7 +29,7 @@ oppia.directive('storiesList', [
         function(WindowDimensionsService, $scope, $timeout) {
           var STORY_TILE_WIDTH_PX = 360;
           $scope.leftmostCardIndices = 0;
-          var MAX_NUM_TILES_PER_ROW = 3;
+          var MAX_NUM_TILES_PER_ROW = 4;
           $scope.tileDisplayCount = 0;
 
           var initCarousels = function() {
@@ -38,7 +38,7 @@ oppia.directive('storiesList', [
               return;
             }
 
-            var windowWidth = $(window).width() * 0.85;
+            var windowWidth = $(window).width();
             $scope.tileDisplayCount = Math.min(
               Math.floor(windowWidth / (STORY_TILE_WIDTH_PX + 20)),
               MAX_NUM_TILES_PER_ROW);

diff --git a/core/templates/dev/head/pages/topic_viewer/stories_list_directive.html b/core/templates/dev/head/pages/topic_viewer/stories_list_directive.html
@@ -37,10 +37,10 @@
 
 <div ng-if="topicViewerWindowIsNarrow" class="oppia-topic-viewer-low-width">
   <md-card ng-repeat="canonicalStory in canonicalStories" class="oppia-story-summary-tile">
-    <canonical-story-summary-tile story-id="canonicalStory.id"
-                                  title="canonicalStory.title"
-                                  description="canonicalStory.description">
-    </canonical-story-summary-tile>
+    <story-summary-tile story-id="canonicalStory.id"
+                        title="canonicalStory.title"
+                        description="canonicalStory.description">
+    </story-summary-tile>
   </md-card>
 </div>
 
@@ -90,7 +90,7 @@
   stories-list div .oppia-topic-viewer-carousel {
     float: left;
     height: 430px;
-    max-width: 1070px;
+    max-width: 1420px;
     overflow: hidden;
     position: relative;
     width: auto;

diff --git a/core/templates/dev/head/pages/topic_viewer/topic_viewer.html b/core/templates/dev/head/pages/topic_viewer/topic_viewer.html
@@ -80,19 +80,14 @@
     .oppia-topic-viewer-tabs {
       background-color: #7e7e7e;
       margin: 0 auto 0 10%;
-      width: fit-content;
+      display: inline-block;
     }
     .oppia-topic-viewer-tabs .oppia-topic-viewer-tabs-text:hover {
-      font-size: 1em;
       padding: 10px;
       text-transform: uppercase;
       width: 100%;
+      text-shadow: 0.5px 0.5px 0.5px #e7e7e2;
     }
-    .oppia-topic-viewer-tabs .oppia-topic-viewer-tabs-text:hover,
-    .oppia-topic-viewer-tabs .oppia-topic-viewer-tabs-text:focus {
-      text-decoration: underline;
-    }
-
     @media(max-width: 925px) {
       .oppia-topic-viewer-tabs {
         margin: 0 auto;
@@ -116,6 +111,15 @@
         display: inline-grid;
       }
     }
+
+    @media(max-width: 426px) {
+      .oppia-topic-viewer-tabs span {
+        width: auto;
+      }
+      .oppia-topic-viewer-container .oppia-topic-viewer-tabs {
+        max-width: 280px;
+      }
+    }
   </style>
 {% endblock %}