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

approved

approved, waiting for a PR

dependencies

Pull requests that update a dependency file

duplicate

feedback wanted

high priority

I2P

The Invisible Internet Project (I2P)

iOS

low priority

OS

Operating Systems

Self-contained networks

Social media

stale

A label for stalebot if it gets added

streaming

Anything related to media streaming.

todo

Tor

Anything covering the Tor network

WIP

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

wontfix

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

XMPP

Extensible Messaging and Presence Protocol

[m]

Matrix protocol

₿ cryptocurrency

ℹ️ help wanted

↔️ file sharing

⚙️ web extensions

Browser Extension related issues

✨ enhancement

❌ software removal

💬 discussion

🤖 Android

🐛 bug

💢 conflicting

📝 correction

Correction of content on the website

🆘 critical

📧 email

🔒 file encryption

📁 file storage

🦊 Firefox

Firefox & forks, about:config etc.

💻 hardware

🌐 hosting

🏠 housekeeping

Anything primarily related to site cleanup.

🔐 password managers

🧰 productivity tools

🔎 research required

🌐 Social News Aggregators

🆕 software suggestion

👥 team chat

🔒 VPN

Virtual Private Network

🌐 website issue

*Technical* issues with the website.

🚫 Windows

👁️ browsers

🖊️ digital notebooks

🗄️ DNS

Domain Name System

🗨️ instant messaging (im)

🇦🇶 translations

Anything covering a translated version of the site

No labels 🤖 Android 🌐 website issue

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