Opened 4 years ago

Last modified 4 years ago

#3031 closed change

Add Adblock Browser section to First Run Page — at Version 7

Reported by: sven Assignee:
Priority: P2 Milestone:
Module: User-Interface Keywords:
Cc: sebastian, greiner, philll Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

https://codereview.adblockplus.org/29326238/
https://codereview.adblockplus.org/29327142/

Description (last modified by greiner)

Background

We want to enhance the first run page with a section which is informing about Adblock Browser for Android and iOS

What to change

Include a new element on the FRP for Adblock Plus for Chrome, Firefox, Opera, Safari.

Behavior description:
Change the current box containing the text "We want to make the web better" ... .
1) Divide the box into 2 halfs with a vertical line
2) Insert the original text in the left side of the box
3) Insert a new text and a clickable element (button 1) in the right side of the box. Button 1 redirects

A part of the element (Button 1, see the elements description below) is clickable and links to https://adblockbrowser.org/?ref=frp. When a visitor hovers over the clickable element, the element's border is made visible (see the visual below).

Element Description:

This change shouldn’t be performed for the French version of the FRP.

Box 1
Description: A gray box separated into two sections (left and right) by a vertical gray dashed line

  • Left Box:
    • Text 1 : (keep the text from the original box)
  • Right Box:
    • Text 2: Got a smartphone or a tablet?
    • Button 1: Description: A dark blue box including an icon and a text. The button should expand or retract accordingly depending on its content.
      • Button 1 - Icon 1: Adblock Browser icon
      • Button 1 - Text 3: Get Adblock Browser here
      • Button 1 - Text 4: Available for Android and iOS

What should happen if the text exceeds the specified button width:

  • The text should wrap in this case.
  • The logo should remain vertically centered.

What should happen if the screen is not wide enough to show both boxes next to each other:

  • They should be aligned vertically then. A separator line is not necessary in this case

Behavior of the separator line:

  • The separator line should take the full height and have a padding of 40 px to the bottom of this box.

Style guides

Change History (10)

Changed 4 years ago by sven

Changed 4 years ago by sven

comment:1 Changed 4 years ago by sven

  • Cc sebastian greiner added
  • Component changed from Unknown to User-Interface
  • Description modified (diff)

comment:2 in reply to: ↑ description Changed 4 years ago by sebastian

  • Cc philll added

Replying to sven:

  • Text 2: Got a smartphone or a tablet?
    • Button 1 - Text 3: Get Adblock Browser here
    • Button 1 - Text 4: Available for Android and iOS

@philll: Since we don't have CrowdIn integration for the UI yet, and this is a rather urgent change anyway, would you mind getting translations for these texts into the most important languages?

Last edited 4 years ago by sebastian (previous) (diff)

comment:3 Changed 4 years ago by greiner

  • Description modified (diff)

There are still a few points missing:

  • Please add a public link to the Adblock Browser logo image.
  • Specify what should happen if the text exceeds the specified button width.
  • Specify what should happen if the screen is not wide enough to show both boxes next to each other.
  • Specify whether the vertical line is supposed to be as high as the box on the left or the box on the right.

Changed 4 years ago by sven

comment:4 Changed 4 years ago by sven

  • Description modified (diff)

comment:5 Changed 4 years ago by greiner

Thanks for the additions. Just one more question in regard to

What should happen if the text exceeds the specified button width:

  • The text should wrap in this case.

Is the icon supposed to stay vertically aligned on the top or centered in this case?

comment:6 Changed 4 years ago by sven

centered

comment:7 Changed 4 years ago by greiner

  • Description modified (diff)
  • Priority changed from Unknown to P2
  • Ready set
Note: See TracTickets for help on using tickets.