Skip to content

Commit

Permalink
fixing side effects from tailwind css
Browse files Browse the repository at this point in the history 
Tailwind was causing side effects, specifically
- undo-ing display: inline on images
- undo-ing display: inline-block on some buttons

Tested on iPhone, Android, Chrome Desktop, Safari Desktop
  • Loading branch information
Philip Fung committed Nov 9, 2024
1 parent e737b26 commit ba1c2e5
Show file tree
Hide file tree
Showing 24 changed files with 80 additions and 8 deletions.
11 changes: 7 additions & 4 deletions dist/add-to-homescreen.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@
}

.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-list-button {
display: inline;
display: inline-block;
/* border: 0.5px solid lightgrey; */
border-radius: 4px;
box-shadow: 1px 1px 2px gray;
Expand Down Expand Up @@ -230,9 +230,10 @@
.adhs-list-item
.adhs-list-button
.adhs-list-button-image-only {
display: inline;
position: relative;
top: 3px;
left: 0px;
bottom: 2px;
}

.adhs-container
Expand All @@ -241,9 +242,10 @@
.adhs-list-item
.adhs-list-button
.adhs-list-button-image-left {
display: inline;
position: relative;
margin: 0 5px 0 0;
top: 2px;
bottom: 2px;
}

.adhs-container
Expand All @@ -252,9 +254,10 @@
.adhs-list-item
.adhs-list-button
.adhs-list-button-image-right {
display: inline;
position: relative;
margin: 0 0 0 5px;
top: 2px;
bottom: 2px;
}

/* IOS Safari */
Expand Down
3 changes: 3 additions & 0 deletions dist/debug.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_cs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_cs.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_da.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_da.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_de.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_en.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_es.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_es.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_fr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_fr.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_he.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_he.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_it.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_it.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_ja.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_ja.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_ko.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_ko.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_lv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_lv.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_pl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_pl.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_pt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_pt.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_ru.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_ru.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_th.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_th.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_vn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_vn.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_zh_CN.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_zh_CN.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_zh_HK.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_zh_HK.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions dist/index_zh_TW.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./add-to-homescreen.min.css" />
<script defer src="add-to-homescreen_zh_TW.min.js"></script><link href="add-to-homescreen.min.css" rel="stylesheet"></head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
3 changes: 3 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<link rel="stylesheet" href="./dist/add-to-homescreen.min.css" />
</head>
<!-- ==================== END: Include add-to-homescreen resources ==================== -->
<!-- ==================== BEGIN: Testing Tailwind CSS side effects ================ -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- ==================== END: Testing Tailwind CSS side effects ================ -->

<!-- ==================== BEGIN: EXAMPLE WEBSITE CONTENT ==================== -->
<style>
Expand Down
11 changes: 7 additions & 4 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
}

.adhs-container .adhs-modal .adhs-list .adhs-list-item .adhs-list-button {
display: inline;
display: inline-block;
/* border: 0.5px solid lightgrey; */
border-radius: 4px;
box-shadow: 1px 1px 2px gray;
Expand Down Expand Up @@ -231,9 +231,10 @@
.adhs-list-item
.adhs-list-button
.adhs-list-button-image-only {
display: inline;
position: relative;
top: 3px;
left: 0px;
bottom: 2px;
}

.adhs-container
Expand All @@ -242,9 +243,10 @@
.adhs-list-item
.adhs-list-button
.adhs-list-button-image-left {
display: inline;
position: relative;
margin: 0 5px 0 0;
top: 2px;
bottom: 2px;
}

.adhs-container
Expand All @@ -253,9 +255,10 @@
.adhs-list-item
.adhs-list-button
.adhs-list-button-image-right {
display: inline;
position: relative;
margin: 0 0 0 5px;
top: 2px;
bottom: 2px;
}

/* IOS Safari */
Expand Down

0 comments on commit ba1c2e5

Please sign in to comment.