ソースを参照

Remove margin from body and add padding to #rnahw-wrapper

iou90 5 年 前
コミット
00ec7fe21b
共有3 個のファイルを変更した12 個の追加4 個の削除を含む
  1. 9
    1
      demo/App.js
  2. 2
    2
      demo/config.js
  3. 1
    1
      demo/newsletterZeit.js

+ 9
- 1
demo/App.js ファイルの表示

@@ -115,7 +115,15 @@ const Explorer = () => {
115 115
         alignItems: 'center',
116 116
       }}>
117 117
       <AutoHeightWebView
118
-        customStyle={heightStyle}
118
+        customStyle={
119
+          `
120
+          #rnahw-wrapper {
121
+            padding: 0 30px;
122
+            width: 100vw;
123
+            box-sizing: border-box;
124
+          }
125
+          `
126
+        }
119 127
         onError={onError}
120 128
         onLoad={onHeightLoad}
121 129
         onLoadStart={onHeightLoadStart}

+ 2
- 2
demo/config.js ファイルの表示

@@ -2,9 +2,9 @@
2 2
 
3 3
 import newsletterZeit from "./newsletterZeit";
4 4
 
5
-const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
5
+const autoHeightHtml0 = newsletterZeit;//`<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
6 6
 
7
-const autoHeightHtml1 = newsletterZeit;//`Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
7
+const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
8 8
 
9 9
 const style0 = `
10 10
     p {

+ 1
- 1
demo/newsletterZeit.js ファイルの表示

@@ -346,7 +346,7 @@ export default `<!doctype html>
346 346
 		}
347 347
 
348 348
 }</style></head>
349
-    <body style="background:#ffffff none no-repeat center/cover;height: 100%;margin: 0 30px;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;">
349
+    <body style="background:#ffffff none no-repeat center/cover;height: 100%;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;">
350 350
         <!--
351 351
 -->
352 352
         <!--[if !gte mso 9]><!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">Our upstream provider AWS is deprecating support for Node.js 8. As a result, you need to switch to a more recent Node.js version.</span><!--<![endif]-->