diff --git a/css/ascribe-fonts/Mercury_Light.otf b/css/ascribe-fonts/Mercury_Light.otf new file mode 100755 index 00000000..e94e7dd3 Binary files /dev/null and b/css/ascribe-fonts/Mercury_Light.otf differ diff --git a/css/ascribe-fonts/Mercury_Medium.otf b/css/ascribe-fonts/Mercury_Medium.otf new file mode 100755 index 00000000..fa111de9 Binary files /dev/null and b/css/ascribe-fonts/Mercury_Medium.otf differ diff --git a/css/ascribe-fonts/Mercury_Regular.otf b/css/ascribe-fonts/Mercury_Regular.otf new file mode 100755 index 00000000..5e9b4556 Binary files /dev/null and b/css/ascribe-fonts/Mercury_Regular.otf differ diff --git a/css/ascribe-fonts/ascribe-fonts.css b/css/ascribe-fonts/ascribe-fonts.css new file mode 100644 index 00000000..e41ee3be --- /dev/null +++ b/css/ascribe-fonts/ascribe-fonts.css @@ -0,0 +1,55 @@ + @font-face { + font-family: 'ascribe'; + src:url('ascribe.eot?-oi6ttk'); + src:url('ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'), + url('ascribe.woff?-oi6ttk') format('woff'), + url('ascribe.ttf?-oi6ttk') format('truetype'), + url('ascribe.svg?-oi6ttk#ascribe') format('svg'); + font-weight: normal; + font-style: normal; + } + + [class^="glyph-ascribe-"], [class*=" glyph-ascribe-"] { + font-family: 'ascribe'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + .glyph-ascribe-logo-spool:before { + content: "\e600"; + } + + .glyph-ascribe-spool:before { + content: "\e601"; + } + + .glyph-ascribe-logo-spool-chunked:before { + content: "\e602"; + } + + .glyph-ascribe-spool-chunked:before { + content: "\e603"; + } + + @font-face { + font-family: mercury_regular; + src: url(Mercury_Regular.otf); + } + + @font-face { + font-family: mercury_medium; + src: url(Mercury_Medium.otf); + } + + @font-face { + font-family: mercury_light; + src: url(Mercury_Light.otf); + } \ No newline at end of file diff --git a/css/ascribe-fonts/ascribe.eot b/css/ascribe-fonts/ascribe.eot new file mode 100644 index 00000000..39a72757 Binary files /dev/null and b/css/ascribe-fonts/ascribe.eot differ diff --git a/css/ascribe-fonts/ascribe.svg b/css/ascribe-fonts/ascribe.svg new file mode 100644 index 00000000..5151a129 --- /dev/null +++ b/css/ascribe-fonts/ascribe.svg @@ -0,0 +1,51 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/ascribe-fonts/ascribe.ttf b/css/ascribe-fonts/ascribe.ttf new file mode 100644 index 00000000..ad669075 Binary files /dev/null and b/css/ascribe-fonts/ascribe.ttf differ diff --git a/css/ascribe-fonts/ascribe.woff b/css/ascribe-fonts/ascribe.woff new file mode 100644 index 00000000..9e1a8cee Binary files /dev/null and b/css/ascribe-fonts/ascribe.woff differ diff --git a/css/ascribe-fonts/ascribe_logo.svg b/css/ascribe-fonts/ascribe_logo.svg new file mode 100644 index 00000000..3d28d0a8 --- /dev/null +++ b/css/ascribe-fonts/ascribe_logo.svg @@ -0,0 +1,43 @@ + + + + + + + + diff --git a/css/ascribe-fonts/ascribe_wortmarke_logo.svg b/css/ascribe-fonts/ascribe_wortmarke_logo.svg new file mode 100644 index 00000000..8e12812f --- /dev/null +++ b/css/ascribe-fonts/ascribe_wortmarke_logo.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + diff --git a/css/ascribe-fonts/ascribe_wortmarke_logo_chunked.svg b/css/ascribe-fonts/ascribe_wortmarke_logo_chunked.svg new file mode 100644 index 00000000..03dccf2c --- /dev/null +++ b/css/ascribe-fonts/ascribe_wortmarke_logo_chunked.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css/ascribe-fonts/style.css b/css/ascribe-fonts/style.css new file mode 100644 index 00000000..c4ecbdc8 --- /dev/null +++ b/css/ascribe-fonts/style.css @@ -0,0 +1,189 @@ +@font-face { + font-family: 'ascribe'; + src:url('fonts/ascribe.eot?-6bb2dq'); + src:url('fonts/ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'), + url('fonts/ascribe.woff?-6bb2dq') format('woff'), + url('fonts/ascribe.ttf?-6bb2dq') format('truetype'), + url('fonts/ascribe.svg?-6bb2dq#ascribe') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="glyph-ascribe-"], [class*=" glyph-ascribe-"] { + font-family: 'ascribe'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.glyph-ascribe-ascribe-spool:before { + content: "\e600"; +} + +.glyph-ascribe-spool:before { + content: "\e601"; +} + +.glyph-ascribe-ascribe-spool-chunked:before { + content: "\e602"; +} + +.glyph-ascribe-spool-chunked:before { + content: "\e603"; +} + +.glyph-ascribe-home:before { + content: "\e900"; +} + +.glyph-ascribe-home2:before { + content: "\e901"; +} + +.glyph-ascribe-home3:before { + content: "\e902"; +} + +.glyph-ascribe-pencil:before { + content: "\e905"; +} + +.glyph-ascribe-pencil2:before { + content: "\e906"; +} + +.glyph-ascribe-quill:before { + content: "\e907"; +} + +.glyph-ascribe-image:before { + content: "\e90d"; +} + +.glyph-ascribe-camera:before { + content: "\e90f"; +} + +.glyph-ascribe-music:before { + content: "\e911"; +} + +.glyph-ascribe-play:before { + content: "\e912"; +} + +.glyph-ascribe-film:before { + content: "\e913"; +} + +.glyph-ascribe-credit-card:before { + content: "\e93f"; +} + +.glyph-ascribe-pushpin:before { + content: "\e946"; +} + +.glyph-ascribe-undo2:before { + content: "\e967"; +} + +.glyph-ascribe-redo2:before { + content: "\e968"; +} + +.glyph-ascribe-enlarge:before { + content: "\e989"; +} + +.glyph-ascribe-shrink:before { + content: "\e98a"; +} + +.glyph-ascribe-enlarge2:before { + content: "\e98b"; +} + +.glyph-ascribe-shrink2:before { + content: "\e98c"; +} + +.glyph-ascribe-share:before { + content: "\ea7d"; +} + +.glyph-ascribe-new-tab:before { + content: "\ea7e"; +} + +.glyph-ascribe-share2:before { + content: "\ea82"; +} + +.glyph-ascribe-google:before { + content: "\ea87"; +} + +.glyph-ascribe-google-plus:before { + content: "\ea88"; +} + +.glyph-ascribe-google-plus2:before { + content: "\ea89"; +} + +.glyph-ascribe-facebook:before { + content: "\ea8c"; +} + +.glyph-ascribe-facebook2:before { + content: "\ea8d"; +} + +.glyph-ascribe-twitter:before { + content: "\ea91"; +} + +.glyph-ascribe-twitter2:before { + content: "\ea92"; +} + +.glyph-ascribe-youtube3:before { + content: "\ea99"; +} + +.glyph-ascribe-dropbox:before { + content: "\eaaf"; +} + +.glyph-ascribe-file-pdf:before { + content: "\eada"; +} + +.glyph-ascribe-chrome:before { + content: "\eae5"; +} + +.glyph-ascribe-firefox:before { + content: "\eae6"; +} + +.glyph-ascribe-IE:before { + content: "\eae7"; +} + +.glyph-ascribe-opera:before { + content: "\eae8"; +} + +.glyph-ascribe-safari:before { + content: "\eae9"; +} + diff --git a/css/main.css b/css/main.css index 8a790a64..fb8a4cf4 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,44 @@ + +/* Taken from http://stackoverflow.com/a/20548578 */ +.vcenter { + display: inline-block; + vertical-align: middle; + float: none; +} + +.ascribe-table-header-row { + border-bottom: 2px solid rgba(2, 182, 163, 0.5); + border-top: 2px solid rgba(2, 182, 163, 0.5); +} + .ascribe-table-header-column { + display: table; font-weight: bold; + height:4em; +} + +.ascribe-table-header-column > span { + display:table-cell; + vertical-align: middle; + font-family: 'mercury_light'; + color: rgba(2, 182, 163, 1); + font-size: 1.25em; +} + +.ascribe-table-item:nth-child(even) { + background-color: #F5F5F5; +} + +.ascribe-table-item:hover { + background-color: #EEEEEE; +} + +.ascribe-table-item-column { + display: table; + height:4em; +} + +.ascribe-table-item-column > * { + display:table-cell; + vertical-align: middle; } \ No newline at end of file diff --git a/index.html b/index.html index 04ddb219..9c8665a9 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + +
diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 088b6dde..9b140dae 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -23,19 +23,19 @@ let PieceList = React.createClass({ // Specifiy how a TableItemX should look like let columnMap = { 'thumbnail': { - 'displayName': 'Thumbnail', + 'displayName': '', 'displayType': TableItemImg, 'rowWidth': 2 }, 'artist_name': { 'displayName': 'Artist', 'displayType': TableItemText, - 'rowWidth': 3 + 'rowWidth': 5 }, 'title': { 'displayName': 'Title', 'displayType': TableItemText, - 'rowWidth': 6 + 'rowWidth': 5 } }; return ( diff --git a/js/components/table.js b/js/components/table.js index 329bf14d..8e2a8878 100644 --- a/js/components/table.js +++ b/js/components/table.js @@ -12,7 +12,7 @@ let Table = React.createClass({ if(this.props.itemList && this.props.itemList.length > 0) { return ( -
+
{this.props.itemList.map((item, i) => { return ( diff --git a/js/components/table_header.js b/js/components/table_header.js index ef92ea28..a2ce8df8 100644 --- a/js/components/table_header.js +++ b/js/components/table_header.js @@ -14,7 +14,7 @@ let TableHeader = React.createClass({ let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap); return ( -
+
{columnMapValuesList.map((val, i) => { @@ -22,7 +22,9 @@ let TableHeader = React.createClass({ return (
- {val.displayName} + + {val.displayName} +
); })} diff --git a/js/components/table_item.js b/js/components/table_item.js index c1f06872..5b29fd00 100644 --- a/js/components/table_item.js +++ b/js/components/table_item.js @@ -36,7 +36,7 @@ let TableItem = React.createClass({ let columnClass = this.calcColumnClasses(this.props.columnMap, i); return ( -
+
); @@ -45,7 +45,7 @@ let TableItem = React.createClass({ }; return ( -
+
{calcColumnElementContent()}
diff --git a/js/components/table_item_img.js b/js/components/table_item_img.js index 3075f26b..c082e85a 100644 --- a/js/components/table_item_img.js +++ b/js/components/table_item_img.js @@ -10,7 +10,9 @@ let TableItemImg = React.createClass({ render() { return ( - + + + ); } });