Skip to content

Commit bf496e8

Browse files
hojberghojberg
committed
arrow css is updating
1 parent 04bd20f commit bf496e8

File tree

12 files changed

+397
-174
lines changed

12 files changed

+397
-174
lines changed

‎css/app.css‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,28 @@
1-
2-
31
/* =BASE
42
====================================================== */
5-
html, body { background: #d9d9d9 url(../img/noisebg.png); color: #444;
6-
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
7-
}
8-
body { font-size: 16px; font-family: 'Helvetica Neue', Helvetica, Arial; padding: 0; margin: 0; }
3+
html, body { background: #d9d9d9 url(../img/noisebg.png); color: #444; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }
4+
body { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; }
95

10-
a { color: #000; }
6+
a { color: #000; }
117

12-
ul, ol, form { margin: 0; padding: 0; }
8+
ul, ol, form { margin: 0; padding: 0; }
139

14-
ul, ol { list-style-type: none; }
10+
ul, ol { list-style-type: none; }
1511

1612
/* =LAYOUT
1713
====================================================== */
18-
#header { background: #000; }
14+
.canvas { background: url(../img/blueprintbg.png); padding: 60px; box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.2), 0 75px 200px #fff; border-bottom: 1px solid #fff; }
1915

20-
.canvas { background: url(../img/blueprintbg.png); padding: 60px;
21-
box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.2), 0 75px 200px #fff;
22-
border-bottom: 1px solid #fff;
23-
}
16+
#content { width: 800px; margin: auto; padding: 40px; }
2417

25-
#content { width: 800px; margin: auto; padding: 40px; overflow: hidden; }
18+
#footer { text-align: center; margin-top: 20px; font-size: 13px; color: #555; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4); }
2619

27-
#footer { text-align: center; margin-top: 20px; font-size: 11px; color: #888;
28-
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
29-
}
20+
.clr { overflow: hidden; }
3021

3122
/* =MODULES
3223
====================================================== */
33-
.configuration { float: left; width: 300px; }
24+
.configuration { float: left; width: 300px; }
25+
26+
.result_code { padding: 10px; float: right; width: 400px; font-size: 14px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); border-radius: 4px; }
3427

35-
.result_code { padding: 10px; float: right; width: 400px; font-size: 14px; font-family: 'Courier new'; font-weight: bold;
36-
background: rgba(0, 0, 0, 0.15);
37-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
38-
border-radius: 4px;
39-
}
28+
.arrow_box { padding: 40px; width: 320px; border: 1px solid; margin: auto; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; border-radius: 6px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

‎css/arrow.css‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎index.html‎

Lines changed: 82 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,109 @@
33
<head>
44
<meta charset='utf-8' />
55
<title>cssarrowplease</title>
6+
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:400,700' rel='stylesheet' type='text/css'>
67
<link rel="stylesheet" type="text/css" href="css/app.css" />
7-
<link rel="stylesheet" type="text/css" href="css/arrow.css" />
8+
9+
<script type='text/template' class='arrow_css_template'>
10+
.arrow_box { color: #fff; position: relative;
11+
background: rgba(255, 255, 255, 0.3);
12+
border-color: rgba(255, 255, 255, 0.5);
13+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
14+
}
15+
16+
.arrow_box:after, .arrow_box:before {
17+
border: solid transparent;
18+
content: ' ';
19+
height: 0;
20+
bottom: 100%;
21+
position: absolute;
22+
width: 0;
23+
}
24+
25+
.arrow_box:after {
26+
border-width: 12px;
27+
border-bottom-color: #7297e7;
28+
left: 50%;
29+
margin-left: -12px;
30+
}
31+
32+
.arrow_box:before {
33+
border-width: 14px;
34+
border-bottom-color: rgba(255, 255, 255, 0.5);
35+
left: 50%;
36+
margin-left: -14px;
37+
}
38+
</script>
839
</head>
940
<body>
1041

11-
<header></header>
12-
1342
<div class='canvas'>
1443

15-
<div class='arrow_box top'>
16-
css arrow please!
44+
<div class='preview'>
45+
<style class='preview_styles'></style>
46+
<div class='arrow_box'>
47+
css arrow please!
48+
</div>
1749
</div>
1850

1951
</div>
2052

2153
<div id='content'>
54+
<h1>Arrow configuration</h1>
55+
56+
<div class='clr'>
57+
<form class='configuration'>
58+
<ol>
59+
<li>
60+
<label>Position</label>
61+
<select class='position'>
62+
<option value='top'>Top</option>
63+
<option value='right'>Right</option>
64+
<option value='bottom'>Bottom</option>
65+
<option value='left'>Left</option>
66+
</select>
67+
</li>
68+
<li>
69+
<label>Size</label>
70+
<input class='size' />
71+
</li>
72+
<li>
73+
<label>Color</label>
74+
<input class='color' />
75+
</li>
76+
<li>
77+
<label>Border</label>
78+
Width: <input class='border_width' />
79+
Color: <input class='border_color' />
80+
</li>
81+
</ol>
82+
</form>
2283

23-
<form class='configuration'>
24-
<ol>
25-
<li>
26-
<label>arrow position</label>
27-
<select>
28-
<option selected='selected' value='top'>Top</option>
29-
<option value='right'>Right</option>
30-
<option value='bottom'>Bottom</option>
31-
<option value='left'>Left</option>
32-
</select>
33-
</li>
34-
<li>
35-
<label>arrow position</label>
36-
</li>
37-
</ol>
38-
</form>
39-
40-
<code class='result_code'>
41-
.arrow_box { position: relative; }
42-
</code>
84+
<code class='result_code'>
85+
.arrow_box { position: relative; }
86+
</code>
87+
</div>
4388

4489
</div>
4590

4691
<footer id='footer'>
47-
Build by <a href='http://icreateui.com'>Simon Højberg</a>
92+
By <a href='http://icreateui.com'>Simon Højberg</a>
4893
&middot;
4994
Follow me on twitter: <a href='https://twitter.com/shojberg'>@shojberg</a>
95+
&middot;
96+
Checkout the source on <a href='https://github.com/hojberg/cssarrowplease'>github</a>
5097
</footer>
5198

5299
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
100+
<script src='js/lib/models/arrow.js'></script>
101+
<script src='js/lib/views/arrow_configuration_view.js'></script>
102+
<script src='js/lib/views/arrow_preview_view.js'></script>
103+
<script src='js/lib/views/arrow_css_view.js'></script>
53104
<script src='js/lib/app.js'></script>
105+
<script>
106+
$(document).ready(function () {
107+
new CSSArrowPlease.App().render();
108+
});
109+
</script>
54110
</body>
55111
</html>

‎js/lib/app.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,29 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
1919
App.prototype = {
2020

2121
init: function () {
22-
this.currentView = '';
23-
24-
this.dispatch();
22+
this.model = new G.Arrow();
23+
this._initViews();
2524
},
2625

27-
dispatch: function () {
28-
if ($('.search').length > 0) {
29-
this.currentView = 'SearchView';
30-
}
31-
32-
this.showView();
26+
/**
27+
@method _initViews
28+
@description initializes views
29+
@protected
30+
**/
31+
_initViews: function () {
32+
var model = this.model;
33+
34+
this.views = [
35+
new G.ArrowConfigurationView({ model: model, container: $('.configuration') }),
36+
new G.ArrowPreviewView({ model: model, container: $('.preview') }),
37+
new G.ArrowCSSView({ model: model, container: $('.result_code') }),
38+
];
3339
},
3440

35-
showView: function () {
36-
var view = this.currentView;
37-
38-
if (view === 'SearchView') {
39-
new G.SearchView({
40-
container: $('.search')
41-
});
42-
}
41+
render: function () {
42+
$.each(this.views, function (i, view) {
43+
view.render();
44+
});
4345
}
4446

4547
};

‎js/lib/models/arrow.js‎

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,18 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
1414
Arrow.prototype = {
1515

1616
init: function () {
17-
// jquerify this
17+
// jquerify 'this'
1818
this._$self = $(this);
1919

20-
this._addAttrs();
20+
this._createAttrs();
2121
},
2222

23-
_addAttrs: function () {
23+
/**
24+
@method _createAttrs
25+
@description creates attributes from the ATTR constant
26+
@protected
27+
**/
28+
_createAttrs: function () {
2429
var ATTRS = Arrow.ATTRS,
2530
attributes = {};
2631

@@ -31,18 +36,46 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
3136
this._attributes = attributes;
3237
},
3338

39+
/**
40+
@method getAttrs
41+
@description returns all the attributes
42+
@returns {Object} all the model attributes
43+
**/
44+
getAttrs: function () {
45+
return this._attributes;
46+
},
47+
48+
/**
49+
@method get
50+
@description returns the provided attribute
51+
@param {String} attr the attribute to return
52+
@returns {?} the attribute
53+
**/
3454
get: function (attr) {
35-
attr = this._attributes[attr];
36-
return attr;
55+
return this._attributes[attr];
3756
},
3857

58+
/**
59+
@method set
60+
@description updates the provided attribute
61+
@param {String} attr the attribute to update
62+
@param {?} val the value to update with
63+
**/
3964
set: function (attr, val) {
4065
if (!(attr in this._attributes)) return;
4166

42-
this._attributes[attr] = 'val';
67+
this._attributes[attr] = val;
4368
this.fire('change');
4469
},
4570

71+
/**
72+
@method on
73+
@description adds event listeners
74+
@note uses jQuery custom events under the hood
75+
@param {String} evType the event type
76+
@param {Function} callback the event handler
77+
@param {Object} context the 'this' for the callback
78+
**/
4679
on: function (evType, callback, context) {
4780
var $self = this._$self;
4881

@@ -52,26 +85,33 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
5285
);
5386
},
5487

88+
/**
89+
@method fire
90+
@description trigger event
91+
@note uses jQuery custom events under the hood
92+
@param {String} evType the event type
93+
**/
5594
fire: function (evType) {
5695
var $self = this._$self;
5796

5897
$self.trigger(evType);
5998
},
6099

61100
toCSS: function () {
62-
return 'WOOT';
101+
return $('.arrow_css_template').text();
63102
}
64103

65104
};
66105

67106
Arrow.ATTRS = {
68-
position: 'top',
69-
color: '#fff',
70-
border: {color: '#000', thickness: '2px'}
107+
position: 'top',
108+
size: 10,
109+
color: '#fff',
110+
borderWidth: 5,
111+
borderColor: '#000'
71112
};
72113

73114
// Expose
74115
G.Arrow = Arrow;
75116

76117
}(window.CSSArrowPlease));
77-

0 commit comments

Comments
 (0)