Fix #4773: Add responsive behavior to the landing page #4801

nithusha21 · 2018-03-12T18:17:12Z

Explanation

Fixes #4773 This PR adds responsive behavior to the landing page

Checklist

The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes.
The PR explanation includes the words "Fixes #bugnum: ...".
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.

seanlip · 2018-03-12T18:51:54Z

core/templates/dev/head/pages/landing/fractions/Fractions.js

    $scope.getStaticSubjectImageUrl = function(subjectName) {
      return UrlInterpolationService.getStaticImageUrl('/subjects/' +
        subjectName + '.svg');
    };
+
    $scope.onClickGetStartedButton = function(viewerType) {
      siteAnalyticsService.registerOpenFractionsFromLandingPageEvent(
        viewerType);
      $timeout(function() {
        $window.location = ' /collection/4UgTQUc1tala';


Why is there a leading space in the string?

Oops fixed that.

seanlip · 2018-03-12T18:52:08Z

core/templates/dev/head/pages/landing/fractions/Fractions.js

+
+    $scope.onClickLearnMoreButton = function() {
+      $timeout(function() {
+        $window.location = 'https://www.oppia.org/splash';


/splash, otherwise it'll go to the wrong place when you're testing on the test server.

Okay. fixed that

seanlip · 2018-03-12T18:55:21Z

core/templates/dev/head/pages/landing/fractions/landing_page_teacher.html

+            </div>
+            <div class="col-sm-6">
+              <h2 class="oppia-fractions-landing-h2" style="color: #242424; text-align: right; right: 10%">With Oppia, we make it easy to go through the lessons and learn something new!
+                <br><br>You will work to learn new concepts and help Matt become a great baker along the way. We make it fun and easy to get started.


Just realized something is off about the text on this page. Suggest:

You will work ... --> Students will work ...
Matt --> Matthew

(edit: please check the mocks again, this text is not correct)

I had missed this when I finally pasted the student page to the teacher page. Fixed it now. Sorry about that

seanlip · 2018-03-12T18:58:55Z

Also, please delete any image asset files that aren't used.

seanlip · 2018-03-12T19:01:56Z

Bug report: on a larger screen, images seem to be getting cut off. See the arrow in the image below.

Also if you zoom out farther, the main content detaches from the side of the screen:

codecov-io · 2018-03-12T19:41:28Z

Codecov Report

Merging #4801 into develop will decrease coverage by <.01%.
The diff coverage is 0%.

@@             Coverage Diff             @@
##           develop    #4801      +/-   ##
===========================================
- Coverage    44.72%   44.71%   -0.01%     
===========================================
  Files          385      385              
  Lines        23473    23476       +3     
  Branches      3793     3793              
===========================================
  Hits         10498    10498              
- Misses       12975    12978       +3

Impacted Files	Coverage Δ
...ates/dev/head/pages/landing/fractions/Fractions.js	`8.33% <0%> (-2.78%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e9c5983...783d514. Read the comment docs.

nithusha21 · 2018-03-12T19:48:37Z

Deleted all the unused assets and also fixed the large screen styling. In my opinion the page looks nice upto laptop view and doesn't break at higher sizes but doesn't look as appealing 😅. Maybe it's just because I am viewing it at 50% zoom.

seanlip · 2018-03-12T20:08:54Z

core/templates/dev/head/pages/landing/fractions/landing_page_teacher.html

+            </div>
+            <div class="col-sm-6">
+              <h2 class="oppia-fractions-landing-h2" style="color: #242424; text-align: right; right: 80px">With Oppia, we make it easy to go through the lessons and learn something new!
+                <br><br>Students get to work through stories and apply their knowledge of real-world problems.


Let's change this to "knowledge to".

Changed this

seanlip

Hi @nithusha21 -- thanks, looks good! One very small wording change and it's good to go.

seanlip · 2018-03-13T03:27:16Z

Thanks, LGTM!

seanlip · 2018-03-13T03:28:06Z

@BenHenning, FYI -- this needs cherrypicking!

* added new fractions landing pages and removed old landing pages * Fixed linting errors * made review changes * linting fixes * linting fixes * Some changes * made the landing page responsive * linting fixes * changed image for mobile display on teacher page * made review changes and bug fixes * changed of -> to

* upstream/develop: Fix part of oppia#3905: Add check for period at comment and docstring end (oppia#4759) Remove numpy as a dependency. (oppia#4808) Fix part of oppia#3905: Add check for keyword arguments (oppia#4752) Fix oppia#4056:There is no way to add an exploration/collection into "play-later" list for mobile users. (oppia#4709) Fixes part of oppia#4374: Add docstring to user_query_services.py & user_services.py (oppia#4796) Fix oppia#4776: possible race condition in audio preview in editor tab. (oppia#4802) Fix oppia#4773: Add responsive behavior to the landing page (oppia#4801) Fix part of oppia#4364 : Enhancements to the correctness footer (oppia#4770)

* added new fractions landing pages and removed old landing pages * Fixed linting errors * made review changes * linting fixes * linting fixes * Some changes * made the landing page responsive * linting fixes * changed image for mobile display on teacher page * made review changes and bug fixes * changed of -> to

nithusha21 added 9 commits March 1, 2018 23:44

added new fractions landing pages and removed old landing pages

db39ae1

Fixed linting errors

4d76736

made review changes

4cf1ff1

linting fixes

e0a61c0

linting fixes

aa7ce71

Some changes

aa58fa1

made the landing page responsive

bcb5798

linting fixes

ce8ad6b

Merge branch 'develop' into landing-page-fix

2fb456d

nithusha21 requested review from seanlip and tjiang11 March 12, 2018 18:24

changed image for mobile display on teacher page

17c0c1b

seanlip reviewed Mar 12, 2018

View reviewed changes

made review changes and bug fixes

e2c3eaf

seanlip added the PR: for current release label Mar 12, 2018

seanlip reviewed Mar 12, 2018

View reviewed changes

seanlip approved these changes Mar 12, 2018

View reviewed changes

changed of -> to

783d514

seanlip merged commit 6b9d750 into oppia:develop Mar 13, 2018

BenHenning added PR: released and removed PR: for current release labels Mar 17, 2018

seanlip removed the PR: released label Aug 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #4773: Add responsive behavior to the landing page #4801

Fix #4773: Add responsive behavior to the landing page #4801

nithusha21 commented Mar 12, 2018 •

edited

Loading

seanlip Mar 12, 2018

nithusha21 Mar 12, 2018

seanlip Mar 12, 2018

nithusha21 Mar 12, 2018

seanlip Mar 12, 2018

nithusha21 Mar 12, 2018

seanlip commented Mar 12, 2018

seanlip commented Mar 12, 2018

codecov-io commented Mar 12, 2018 •

edited

Loading

nithusha21 commented Mar 12, 2018

seanlip Mar 12, 2018

nithusha21 Mar 13, 2018

seanlip left a comment

seanlip commented Mar 13, 2018

seanlip commented Mar 13, 2018

Fix #4773: Add responsive behavior to the landing page #4801

Fix #4773: Add responsive behavior to the landing page #4801

Conversation

nithusha21 commented Mar 12, 2018 • edited Loading

Explanation

Checklist

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 12, 2018

seanlip commented Mar 12, 2018

codecov-io commented Mar 12, 2018 • edited Loading

Codecov Report

nithusha21 commented Mar 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seanlip left a comment

Choose a reason for hiding this comment

seanlip commented Mar 13, 2018

seanlip commented Mar 13, 2018

nithusha21 commented Mar 12, 2018 •

edited

Loading

codecov-io commented Mar 12, 2018 •

edited

Loading