Skip to content

Commit 090cce6

Browse files
hojberghojberg
committed
initial preset work
1 parent 543e8ec commit 090cce6

File tree

2 files changed

+66
-57
lines changed

2 files changed

+66
-57
lines changed

‎public/css/app.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ input { font-size: 14px; border: 1px solid #777; box-sha
2323
}
2424
#footer { text-align: center; padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; }
2525
#footer a { vertical-align: top; color: #fff; }
26-
.clr { overflow: hidden; }
26+
.clr:after { clear:both; content:"."; display: block; height:0; visibility: hidden; line-height:0; font-size:0; }
2727

2828
.preview_and_configuration { float: left; width: 395px; }
2929

@@ -41,6 +41,7 @@ input { font-size: 14px; border: 1px solid #777; box-sha
4141
.configuration .section.positions { width: 140px; margin-left: 14px }
4242
.configuration .section li { margin-bottom: 5px; }
4343
.configuration .section label { display: inline-block; width: 112px; }
44+
.configuration .section label.sub_label { font-size: 18px; }
4445

4546
.configuration .size,
4647
.configuration .border_width { width: 28px; text-align: right; }

‎public/index.html‎

Lines changed: 64 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,56 @@
1010

1111
<a href="http://github.com/hojberg/cssarrowplease"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
1212

13-
<div id='content' class='clr'>
14-
<div class='preview_and_configuration'>
15-
<div class='preview'>
16-
<div class='arrow_box'>
17-
<h1 class='logo'>css arrow please!</h1>
13+
<div id='content'>
14+
<div class='clr'>
15+
<div class='preview_and_configuration'>
16+
<div class='preview'>
17+
<div class='arrow_box'>
18+
<h1 class='logo'>css arrow please!</h1>
19+
</div>
1820
</div>
21+
<form class='configuration'>
22+
<h2>Arrow configuration</h2>
23+
<div class='clr'>
24+
<ol class='section positions'>
25+
<li>
26+
<label>Position</label>
27+
<label class='sub_label'><input type="radio" name="position" value="top" class="position" /> Top</label>
28+
<label class='sub_label'><input type="radio" name="position" value="right" class="position" /> Right</label>
29+
<label class='sub_label'><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
30+
<label class='sub_label'><input type="radio" name="position" value="left" class="position" /> Left</label>
31+
</li>
32+
</ol>
33+
<ol class='section'>
34+
<li>
35+
<label for='size'>Size</label>
36+
<input class='size' id='size' /><span class='unit'>px</span>
37+
</li>
38+
<li>
39+
<label for='color'>Color</label>
40+
<input class='base_color color {hash:true,caps:false}' id='color' />
41+
</li>
42+
</ol>
43+
<ol class='section'>
44+
<li>
45+
<label for='border_width'>Border width</label>
46+
<input class='border_width' id='border_width' /><span class='unit'>px</span>
47+
</li>
48+
<li>
49+
<label for='border_color'>Border color</label>
50+
<input class='border_color color {hash:true,caps:false}' id='border_color' />
51+
</li>
52+
</ol>
53+
</div>
54+
</form>
1955
</div>
20-
<form class='configuration'>
21-
<h2>Arrow configuration</h2>
22-
<div class='clr'>
23-
<ol class='section positions'>
24-
<li>
25-
<label>Position</label>
26-
<label><input type="radio" name="position" value="top" class="position" /> Top</label>
27-
<label><input type="radio" name="position" value="right" class="position" /> Right</label>
28-
<label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
29-
<label><input type="radio" name="position" value="left" class="position" /> Left</label>
30-
</li>
31-
</ol>
32-
<ol class='section'>
33-
<li>
34-
<label for='size'>Size</label>
35-
<input class='size' id='size' /><span class='unit'>px</span>
36-
</li>
37-
<li>
38-
<label for='color'>Color</label>
39-
<input class='base_color color {hash:true,caps:false}' id='color' />
40-
</li>
41-
</ol>
42-
<ol class='section'>
43-
<li>
44-
<label for='border_width'>Border width</label>
45-
<input class='border_width' id='border_width' /><span class='unit'>px</span>
46-
</li>
47-
<li>
48-
<label for='border_color'>Border color</label>
49-
<input class='border_color color {hash:true,caps:false}' id='border_color' />
50-
</li>
51-
</ol>
52-
</div>
53-
</form>
56+
<code class='result_code' readonly='readonly'></code>
57+
</div>
58+
59+
<div class='presets'>
60+
<h2>Presets</h2>
61+
<ul></ul>
5462
</div>
55-
<code class='result_code' readonly='readonly'></code>
5663

5764
</div>
5865

@@ -74,6 +81,7 @@ <h2>Arrow configuration</h2>
7481
<script src='js/lib/views/arrow_configuration_view.js'></script>
7582
<script src='js/lib/views/arrow_preview_view.js'></script>
7683
<script src='js/lib/views/arrow_css_view.js'></script>
84+
<script src='js/lib/views/presets_view.js'></script>
7785
<script src='js/lib/app.js'></script>
7886
<script>
7987
$(document).ready(function () {
@@ -88,26 +96,26 @@ <h2>Arrow configuration</h2>
8896

8997
(function() {
9098
var defer = (function (document, script) {
91-
var urls = [],
92-
firstScript = document.getElementsByTagName(script)[0];
99+
var urls = [],
100+
firstScript = document.getElementsByTagName(script)[0];
93101

94-
return function (url, callback) {
95-
var inc;
102+
return function (url, callback) {
103+
var inc;
96104

97-
if (url && urls.indexOf(url) === -1) {
98-
inc = document.createElement(script);
99-
inc.async = true;
100-
inc.src = url;
101-
inc.onload = callback || function () {};
102-
firstScript.parentNode.insertBefore(inc, firstScript);
103-
}
105+
if (url && urls.indexOf(url) === -1) {
106+
inc = document.createElement(script);
107+
inc.async = true;
108+
inc.src = url;
109+
inc.onload = callback || function () {};
110+
firstScript.parentNode.insertBefore(inc, firstScript);
104111
}
105-
}(document, 'script'));
112+
}
113+
}(document, 'script'));
106114

107-
window.onload = function () {
108-
defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
109-
defer('//platform.twitter.com/widgets.js');
110-
};
115+
$(document).ready(function () {
116+
defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
117+
defer('//platform.twitter.com/widgets.js');
118+
});
111119
})();
112120
</script>
113121
</body>

0 commit comments

Comments
 (0)