Skip to content

Commit 1f55ce1

Browse files
oscaroterooscarotero
committed
test styles improvements
1 parent 2a0708c commit 1f55ce1

File tree

1 file changed

+75
-17
lines changed

1 file changed

+75
-17
lines changed

‎test.php‎

Lines changed: 75 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,81 @@
1212
<meta charset="utf-8">
1313

1414
<title>Embed tests</title>
15+
1516
<style type="text/css">
1617
body {
1718
font-family: sans-serif;
19+
min-width: 650px;
1820
}
1921
input[type="url"] {
2022
width: 400px;
23+
width: calc(100% - 220px);
24+
}
25+
input[type="text"] {
26+
width: 400px;
2127
}
2228
input[type="number"] {
2329
width: 50px;
2430
}
25-
fieldset.main {
31+
input[type="url"], input[type="number"], input[type="text"] {
2632
border: none;
27-
background: #DDD;
33+
background: white;
34+
padding: 4px;
35+
border-radius: 2px;
36+
}
37+
fieldset.main {
2838
font-weight: bold;
39+
background: #BBB;
40+
border-bottom: solid 1px #999;
41+
border-radius: 2px 2px 0 0;
2942
}
3043
fieldset.options {
31-
border: none;
32-
background: #DDD;
3344
font-size: 0.9em;
45+
border-bottom: solid 1px #CCC;
46+
}
47+
fieldset.options label:hover {
48+
background: #DDD;
49+
}
50+
fieldset {
51+
border: none;
52+
background: #EEE;
53+
}
54+
fieldset h2 {
55+
font-size: 1.2em;
56+
margin-left: 6px;
57+
}
58+
fieldset label {
59+
display: block;
60+
margin-top: 5px;
61+
padding: 3px 6px;
62+
border-radius: 2px;
63+
cursor: pointer;
64+
}
65+
fieldset label span {
66+
display: inline-block;
67+
width: 200px;
68+
}
69+
button[type="submit"] {
70+
font-size: 1.6rem;
71+
font-weight: bold;
72+
font-family: Arial;
73+
background: yellowgreen;
74+
border: none;
75+
border-radius: 2px;
76+
padding: 0.2em 1em;
77+
cursor: pointer;
78+
margin-top: 5px;
79+
}
80+
button[type="submit"]:hover {
81+
background: black;
82+
color: white;
3483
}
3584
img {
3685
border: solid 1px black;
3786
}
3887
table.embed {
3988
width: 100%;
89+
margin-top: 100px;
4090
}
4191
table.embed th,
4292
table.embed td {
@@ -65,21 +115,29 @@ function getOption($name, $default = null)
65115
<body>
66116
<form action="test.php">
67117
<fieldset class="main">
68-
<label>Url to test: <input type="url" name="url" autofocus placeholder="http://" value="<?php echo isset($_GET['url']) ? $_GET['url'] : ''; ?>"></label>
69-
<button type="submit">Test</button>
118+
<label><span>Url to test:</span> <input type="url" name="url" autofocus placeholder="http://" value="<?php echo isset($_GET['url']) ? $_GET['url'] : ''; ?>"></label>
70119
</fieldset>
71120
<fieldset class="options">
72-
<label>Min image width: <input type="number" name="options[minImageWidth]" value="<?php echo getOption('minImageWidth', 0); ?>"></label>
73-
<label>Min image height: <input type="number" name="options[minImageHeight]" value="<?php echo getOption('minImageHeight', 0); ?>"></label>
74-
<p>
75-
<label><input type="checkbox" name="options[getBiggerImage]" value="1" <?php echo getOption('getBiggerImage') ? 'checked' : ''; ?>> Get bigger image</label>
76-
<label><input type="checkbox" name="options[getBiggerIcon]" value="1" <?php echo getOption('getBiggerIcon') ? 'checked' : ''; ?>> Get bigger icon</label>
77-
</p>
78-
<p>
79-
<label>Facebook access token: <input type="text" name="options[facebookAccessToken]" value="<?php echo getOption('facebookAccessToken'); ?>"></label><br>
80-
<label>Embedly key: <input type="text" name="options[embedlyKey]" value="<?php echo getOption('embedlyKey'); ?>"></label><br>
81-
<label>Soundcloud client id: <input type="text" name="options[soundcloudClientId]" value="<?php echo getOption('soundcloudClientId', 'YOUR_CLIENT_ID'); ?>"></label>
82-
</p>
121+
<h2>Info options</h2>
122+
123+
<label><span>Min image width:</span> <input type="number" name="options[minImageWidth]" value="<?php echo getOption('minImageWidth', 0); ?>"></label>
124+
<label><span>Min image height:</span> <input type="number" name="options[minImageHeight]" value="<?php echo getOption('minImageHeight', 0); ?>"></label>
125+
<label><span>Get bigger image</span> <input type="checkbox" name="options[getBiggerImage]" value="1" <?php echo getOption('getBiggerImage') ? 'checked' : ''; ?>></label>
126+
<label><span>Get bigger icon</span> <input type="checkbox" name="options[getBiggerIcon]" value="1" <?php echo getOption('getBiggerIcon') ? 'checked' : ''; ?>></label>
127+
<label><span>Facebook access token:</span> <input type="text" name="options[facebookAccessToken]" value="<?php echo getOption('facebookAccessToken'); ?>"></label>
128+
<label><span>Embedly key:</span> <input type="text" name="options[embedlyKey]" value="<?php echo getOption('embedlyKey'); ?>"></label>
129+
<label><span>Soundcloud client id:</span> <input type="text" name="options[soundcloudClientId]" value="<?php echo getOption('soundcloudClientId', 'YOUR_CLIENT_ID'); ?>"></label>
130+
</fieldset>
131+
<fieldset class="options">
132+
<h2>Request resolver options:</h2>
133+
134+
<label><span>User agent:</span> <input type="text" name="options[user_agent]" value="<?php echo getOption('user_agent', 'Embed PHP Library'); ?>"></label>
135+
<label><span>Max redirections:</span> <input type="number" name="options[max_redirections]" value="<?php echo getOption('max_redirections', 20); ?>"></label>
136+
<label><span>Connection timeout:</span> <input type="number" name="options[connection_timeout]" value="<?php echo getOption('connection_timeout', 10); ?>"></label>
137+
<label><span>Timeout:</span> <input type="number" name="options[timeout]" value="<?php echo getOption('timeout', 10); ?>"></label>
138+
</fieldset>
139+
<fieldset class="action">
140+
<button type="submit">Test</button>
83141
</fieldset>
84142
</form>
85143

0 commit comments

Comments
 (0)