ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix issue w/ responsiveness due to media querie

Browse Source 
device-width is deprecated and only works in chrome it seems. reworked to use regular min/max-width queries for both scss & react-responsive. submitted a ticket to react-responsive to fix
This commit is contained in:
Jeff Reiner 2019-01-03 10:04:27 +01:00
parent df3f8e98ed
commit b96db4ef96
10 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ContextualInfo/contextual-info.scss
View File

@ -28,7 +28,7 @@
border-top-right-radius: 1rem;
transition: 250ms ease-in-out;
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
max-width: 560px;
position: absolute;
margin-left: auto;

2
src/components/CurrencyInputPanel/currency-panel.scss
View File

@ -254,7 +254,7 @@
font-weight: 200;
}
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
max-width: 560px;
max-height: 768px;
position: absolute;

2
src/components/Header/header.scss
View File

@ -68,7 +68,7 @@
}
}
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
//position: fixed;
top: 0px;
left: 0px;

2
src/index.scss
View File

@ -22,7 +22,7 @@ html, body {
background-color: $white;
z-index: 100;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
justify-content: center;
align-items: center;
}

2
src/pages/App.js
View File

@ -40,7 +40,7 @@ class App extends Component {
return (
<div id="app-container">
<MediaQuery query="(min-device-width: 768px)">
<MediaQuery query="(min-width: 768px)">
<Header />
</MediaQuery>
<Web3Connect />

7
src/pages/App.scss
View File

@ -5,9 +5,10 @@
height: 100%;
position: relative;
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
margin: auto;
width: 560px;
max-width: 560px;
width: 100%;
}
& > div {
@ -25,7 +26,7 @@
height: 100vh;
@extend %col-nowrap;
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
//max-width: 560px;
}
}

2
src/pages/Pool/index.js
View File

@ -16,7 +16,7 @@ class Pool extends Component {
render() {
return (
<div className="pool">
<MediaQuery query="(max-device-width: 768px)">
<MediaQuery query="(max-width: 768px)">
<Header />
</MediaQuery>
<Switch>

4
src/pages/Pool/pool.scss
View File

@ -92,7 +92,7 @@
border-top-right-radius: 1rem;
transition: 250ms ease-in-out;
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
max-width: 560px;
position: absolute;
margin-left: auto;
@ -130,7 +130,7 @@
transition: 250ms ease-in-out;
padding: 1rem 0 .5rem;
@media only screen and (min-device-width : 768px) {
@media only screen and (min-width : 768px) {
max-width: 560px;
position: absolute;
margin-left: auto;

2
src/pages/Send/index.js
View File

@ -719,7 +719,7 @@ class Send extends Component {
return (
<div className="send">
<MediaQuery query="(max-device-width: 767px)">
<MediaQuery query="(max-width: 767px)">
<Header />
</MediaQuery>
<div

2
src/pages/Swap/index.js
View File

@ -701,7 +701,7 @@ class Swap extends Component {
return (
<div className="swap">
<MediaQuery query="(max-device-width: 767px)">
<MediaQuery query="(max-width: 767px)">
<Header />
</MediaQuery>
<div