Conditionally add top padding to Android addons icons #1129

Merged

nitrohorse merged 3 commits from pad-top-android-addon-icons into master 2019-08-10 18:27:23 +00:00

Conversation 5 Commits 3 Files Changed 2

+5 -5

nitrohorse commented 2019-08-10 05:34:54 +00:00 (Migrated from github.com)

Copy Link

Copy Source

Description

This PR hopefully increases the UX on the Android Addons page by adding 50 pixels of top padding to the icons conditionally (using a media query) on the "large" Bootstrap layout until the layout collapses for smaller screens.

Before

After

Not modified (small screen layout)

Check List

• I have read and understand CONTRIBUTING.md.

• [ ] I have listed the source code for this project in source_code.md.

• [ ] This project is free/libre software.

• [ ] This project has an associated discussion.

Code Repository (if applicable): N/A

<!-- PLEASE READ OUR [CONTRIBUTING GUIDELINES](https://github.com/privacytoolsIO/privacytools.io/blob/master/.github/CONTRIBUTING.md) BEFORE SUBMITTING --> ## Description This PR hopefully increases the UX on the [Android Addons page](https://www.privacytools.io/operating-systems/#aaddons) by adding 50 pixels of top padding to the icons conditionally (using a [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)) on the "large" Bootstrap layout until the layout collapses for smaller screens. ### Before  ### After  ### Not modified (small screen layout)  #### Check List <!-- Please add an x in each box below, like so: [x] --> - [x] I have read and understand [CONTRIBUTING.md](https://github.com/privacytoolsIO/privacytools.io/blob/master/.github/CONTRIBUTING.md). - ~~[ ] I have listed the source code for this project in [source_code.md](https://github.com/privacytoolsIO/privacytools.io/blob/master/source_code.md).~~ - ~~[ ] This project is [free/libre software](https://www.wikipedia.org/wiki/Free_software).~~ - ~~[ ] This project has an [associated discussion](https://github.com/privacytoolsIO/privacytools.io/issues).~~ Code Repository (if applicable): N/A

netlify[bot] commented 2019-08-10 05:35:34 +00:00 (Migrated from github.com)

Copy Link

Copy Source

Deploy preview for privacytools-io ready!

Built with commit f5902f9993

https://deploy-preview-1129--privacytools-io.netlify.com

Deploy preview for *privacytools-io* ready! Built with commit f5902f9993497fa4cc2c51883275e8218ce5ceb9 https://deploy-preview-1129--privacytools-io.netlify.com

dawidpotocki commented 2019-08-10 07:56:18 +00:00 (Migrated from github.com)

Copy Link

Copy Source

Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, pt-lg-5.

EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding.

Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, `pt-lg-5`. EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding.

😆 1

nitrohorse commented 2019-08-10 18:18:06 +00:00 (Migrated from github.com)

Copy Link

Copy Source

Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, pt-lg-5.

EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding.

Oh TIL! I'm not really familiar with Bootstrap or flexbox but will look into that instead.

[edit] Updated to use pt-lg-5! Wow, that works great 👀

> Why are you making your own CSS class? No need for that, you can use utility classes from Bootstrap, like, `pt-lg-5`. > > EDIT: Btw cleaner solution would be using flexbox instead of XYZ padding. Oh TIL! I'm not really familiar with Bootstrap or flexbox but will look into that instead. [edit] Updated to use `pt-lg-5`! Wow, that works great :eyes:

blacklight447 (Migrated from github.com) reviewed 2019-08-10 18:19:59 +00:00

blacklight447 (Migrated from github.com) left a comment

seems good for merching.

seems good for merching.

blacklight447 (Migrated from github.com) approved these changes 2019-08-10 18:25:57 +00:00

This repo is archived. You cannot comment on pull requests.

Reviewers

No Reviewers

blacklight447

Labels

Clear labels

:mag:🤖 Search Engines

I2P

The Invisible Internet Project (I2P)

OS

Operating Systems

Self-contained networks

Social media

Tor

Anything covering the Tor network

WIP

active work in progress, do not merge or PR (yet)!

XMPP

Extensible Messaging and Presence Protocol

[m]

Matrix protocol

approved

approved, waiting for a PR

dependencies

Pull requests that update a dependency file

duplicate

feedback wanted

high priority

iOS

low priority

stale

A label for stalebot if it gets added

streaming

Anything related to media streaming.

todo

wontfix

Issues or bugs that will not be fixed and/or do not have significant impact on the project.

₿ cryptocurrency

ℹ️ help wanted

↔️ file sharing

⚙️ web extensions

Browser Extension related issues

✨ enhancement

❌ software removal

🆕 software suggestion

🆘 critical

🇦🇶 translations

Anything covering a translated version of the site

🌐 Social News Aggregators

🌐 hosting

🌐 website issue

*Technical* issues with the website.

🏠 housekeeping

Anything primarily related to site cleanup.

🐛 bug

👁️ browsers

👥 team chat

💢 conflicting

💬 discussion

💻 hardware

📁 file storage

📝 correction

Correction of content on the website

📧 email

🔎 research required

🔐 password managers

🔒 VPN

Virtual Private Network

🔒 file encryption

🖊️ digital notebooks

🗄️ DNS

Domain Name System

🗨️ instant messaging (im)

🚫 Windows

🤖 Android

🦊 Firefox

Firefox & forks, about:config etc.

🧰 productivity tools

No labels 🌐 website issue 🤖 Android

Milestone

No items

No Milestone

Assignees

Clear assignees

jonah

No Assignees

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: privacyguides/privacytools.io#1129