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

anubhavsinha98 · 2019-03-14T18:51:17Z

Added 4 tiles display for story & few UI changes for Topic Editor page.

Explanation

Checklist

The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
The PR explanation includes the words "Fixes #bugnum: ..." (or "Fixes part of #bugnum" if the PR only partially fixes an issue).
The linter/Karma presubmit checks have passed.
- These should run automatically, but if not, you can manually trigger them locally using python scripts/pre_commit_linter.py and bash scripts/run_frontend_tests.sh.
The PR is made from a branch that's not called "develop".
The PR follows the style guide.
The PR is assigned to an appropriate reviewer.
- If you're a new contributor, please ask on Gitter for someone to assign a reviewer.
- If you're not sure who the appropriate reviewer is, please assign to the issue's "owner" -- see the "talk-to" label on the issue.

…o develop

anubhavsinha98 · 2019-03-17T21:46:17Z

Also, can you either center the tabs in the topic viewer or have the left margin of the tabs be aligned with that of the story cards? (like in topics and skills dashboard). Also, the viewer looks like this for me:

It doesn't have the extended grey area in the tab header (which is how it should be).
Do you know why it was there in your screenshot?

Hi, @aks681 that screenshot is from Mozilla Firefox browser. Are you using any other browser?

aks681 · 2019-03-18T02:37:18Z

Yeah, I was using Chrome 73 on Windows.

seanlip

Generally no issues, just a few questions/nits. If @aks681 is happy with this PR then so am I :)

seanlip · 2019-03-18T22:54:52Z

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;


add space after colon

/cc @oppia/dev-workflow-team this should be a lint check?

Sorry for the delay.
Filed #6494.
Thanks.

@anubhavsinha98, We have merged this PR without this fix and now the tests are failing in develop branch!

seanlip · 2019-03-18T22:56:08Z

core/templates/dev/head/pages/topic_editor/topic_editor_navbar_directive.html

@@ -54,7 +54,7 @@
  </li>
  <li ng-class="{'active': getActiveTabName() === 'main', 'uib-dropdown': getWarningsCount()}" ng-attr-uib-dropdown="<[getWarningsCount()]>" class="icon">
    <a uib-tooltip="Main Editor" tooltip-placement="bottom" ng-click="selectMainTab()">
-      <i class="material-icons">&#xE254;</i> <span style="font-size: 0.8em;">Topic</span>
+      <i class="material-icons">&#xE254;<span style="font-size: 0.9em;">T</span></i>


I'm also not sure about this -- as @aks681 says, 'S' is ambiguous. Maybe "SUBTOPIC" or "SKILL" in small letters? But that may be hard to read, so we might need to look for a different way of representing this.

@aks681, this might be a question for a designer perhaps?

seanlip · 2019-03-18T22:56:17Z

core/templates/dev/head/pages/topic_editor/topic_editor_navbar_directive.html

@@ -75,20 +75,21 @@

  <li ng-class="{'active': getActiveTabName() === 'subtopics'}" class="icon">
    <a class="protractor-test-subtopics-tab-button" uib-tooltip="Subtopics Editor" tooltip-placement="bottom" ng-click="selectSubtopicsTab()">
-      <i class="material-icons">&#xE254;</i><span style="font-size: 0.7em;">Subtopics</span>
+      <i class="material-icons">&#xE254;<span style="font-size: 0.9em;">S</span></i>


Ditto here and below.

seanlip · 2019-03-18T22:56:54Z

core/templates/dev/head/pages/topic_viewer/stories_list_directive.html

@@ -90,7 +90,7 @@
  stories-list div .oppia-topic-viewer-carousel {
    float: left;
    height: 430px;
-    max-width: 1070px;
+    max-width: 1420px;


This seems a little big. Does it work well on mobile?

@anubhavsinha98 Can you confirm this?

Yeah, I just checked it on mobile view it seems its failing. Will fix it and update the PR.

@anubhavsinha98, are we expecting this to be fixed?

I have fixed it and actually in mobile view we get a list of story tiles vertically. Akshay has added screenshot for it. i think it can help.

seanlip · 2019-03-18T22:58:11Z

(Also, just to be clear, I was mainly looking at this from a code perspective. @aks681 can speak more as to the intended UI.)

anubhavsinha98 · 2019-03-24T08:59:21Z

Hi, @aks681 I have fixed the tab issue which was not extending earlier.

aks681

LGTM!
Can you reply to the one comment about mobile view? Other than that, looks good.

oppiabot · 2019-04-09T19:33:34Z

Hi @anubhavsinha98, I'm going to mark this PR as stale because it hasn't had any updates for 10 days. If no further activity occurs within 7 days, it will be automatically closed so that others can take up the issue.
If you are still working on this PR, please make a follow-up commit within 7 days (and submit it for review, if applicable). Please also let us know if you are stuck so we can help you!

anubhavsinha98 · 2019-04-11T10:02:08Z

Hi @aks681 corrected the mobile view. PTAL Thanks!

aks681

This is what I am getting now. Can you remove the extended gray area?
In mobile also, the same issue is there.

anubhavsinha98 · 2019-04-14T11:06:37Z

Hi @aks681 made the changes. PTAL Thanks!

anubhavsinha98 · 2019-04-19T19:17:37Z

anubhavsinha98 · 2019-04-19T19:18:21Z

aks681

LGTM

codician and others added 30 commits November 27, 2018 04:28

First

f115e45

First

28b6e0e

Second

c429cae

Third

83f6a9c

Fourth

9cac86f

Merge branch 'develop' of https://github.com/anubhavsinha98/oppia int…

010e82c

…o develop

Merge branch 'develop' of https://github.com/oppia/oppia into develop

ed6db59

Merge branch 'develop' of https://github.com/oppia/oppia into develop

cd0f299

Merge branch 'develop' of https://github.com/oppia/oppia into develop

a3c44a4

Merge branch 'develop' of https://github.com/oppia/oppia into develop

7276cb1

Merge branch 'develop' of https://github.com/oppia/oppia into develop

e04ff0e

Merge branch 'develop' of https://github.com/oppia/oppia into develop

f566c57

Merge branch 'develop' of https://github.com/oppia/oppia into develop

4913821

Merge branch 'develop' of https://github.com/oppia/oppia into develop

b017a2b

Merge branch 'develop' of https://github.com/oppia/oppia into develop

53f68cd

Merge branch 'develop' of https://github.com/oppia/oppia into develop

892949a

Merge branch 'develop' of https://github.com/oppia/oppia into develop

4aa5e63

Merge branch 'develop' of https://github.com/oppia/oppia into develop

0283d75

Merge branch 'develop' of https://github.com/oppia/oppia into develop

e595522

Merge branch 'develop' of https://github.com/oppia/oppia into develop

21d6944

Merge branch 'develop' of https://github.com/oppia/oppia into develop

46e2322

Merge branch 'develop' of https://github.com/oppia/oppia into develop

3cc076e

Merge branch 'develop' of https://github.com/oppia/oppia into develop

d4df339

Reset

a84476e

Merge branch 'develop' of https://github.com/oppia/oppia into develop

1bce319

Merge branch 'develop' of https://github.com/oppia/oppia into develop

9c75ed5

Merge branch 'develop' of https://github.com/oppia/oppia into develop

4448fdb

Merge branch 'develop' of https://github.com/oppia/oppia into develop

31758f9

Merge branch 'develop' of https://github.com/oppia/oppia into develop

4ec472a

Merge branch 'develop' of https://github.com/oppia/oppia into develop

9826745

aks681 requested a review from seanlip March 17, 2019 09:42

vojtechjelinek assigned anubhavsinha98 Mar 17, 2019

seanlip reviewed Mar 18, 2019

View reviewed changes

anubhavsinha98 added 6 commits March 22, 2019 15:06

Merge branch 'develop' of https://github.com/oppia/oppia into develop

5d322f3

Merge branch 'develop' into mock

38e29e7

Merge branch 'mock' of https://github.com/anubhavsinha98/oppia into mock

b4e5374

reverted changes

a54d5c4

Tab fixed

645574d

Update constants.js

ef2160b

Update topic_editor_navbar_directive.html

9a8e45d

aks681 approved these changes Mar 30, 2019

View reviewed changes

oppiabot bot added the stale label Apr 9, 2019

anubhavsinha98 added 3 commits April 11, 2019 15:18

Mobile view corrected

9918305

Merge branch 'mock' of https://github.com/anubhavsinha98/oppia into mock

2c00741

linting issues fixed

dee5636

oppiabot bot removed the stale label Apr 11, 2019

aks681 suggested changes Apr 13, 2019

View reviewed changes

Added mobile view tab section

ef01166

aks681 approved these changes Apr 19, 2019

View reviewed changes

aks681 merged commit 23ff087 into oppia:develop Apr 19, 2019

anubhavsinha98 mentioned this pull request Apr 19, 2019

Added a space after colon #6631

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

anubhavsinha98 commented Mar 14, 2019 •

edited

Loading

anubhavsinha98 commented Mar 17, 2019

aks681 commented Mar 18, 2019

seanlip left a comment

seanlip Mar 18, 2019

YashJipkate Mar 22, 2019

DubeySandeep Apr 20, 2019 •

edited

Loading

seanlip Mar 18, 2019

seanlip Mar 18, 2019

anubhavsinha98 Mar 24, 2019

seanlip Mar 18, 2019

aks681 Mar 30, 2019

anubhavsinha98 Mar 30, 2019

DubeySandeep Apr 20, 2019

anubhavsinha98 Apr 20, 2019

seanlip commented Mar 18, 2019

anubhavsinha98 commented Mar 24, 2019

aks681 left a comment

oppiabot bot commented Apr 9, 2019

anubhavsinha98 commented Apr 11, 2019

aks681 left a comment •

edited

Loading

anubhavsinha98 commented Apr 14, 2019

anubhavsinha98 commented Apr 19, 2019

anubhavsinha98 commented Apr 19, 2019

aks681 left a comment

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

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

Conversation

anubhavsinha98 commented Mar 14, 2019 • edited Loading

Explanation

Checklist

anubhavsinha98 commented Mar 17, 2019

aks681 commented Mar 18, 2019

seanlip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DubeySandeep Apr 20, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seanlip commented Mar 18, 2019

anubhavsinha98 commented Mar 24, 2019

aks681 left a comment

Choose a reason for hiding this comment

oppiabot bot commented Apr 9, 2019

anubhavsinha98 commented Apr 11, 2019

aks681 left a comment • edited Loading

Choose a reason for hiding this comment

anubhavsinha98 commented Apr 14, 2019

anubhavsinha98 commented Apr 19, 2019

anubhavsinha98 commented Apr 19, 2019

aks681 left a comment

Choose a reason for hiding this comment

anubhavsinha98 commented Mar 14, 2019 •

edited

Loading

DubeySandeep Apr 20, 2019 •

edited

Loading

aks681 left a comment •

edited

Loading