Props to my ho cause he fly. Plus a retro style upadte

This commit is contained in:
MichaelCook 2017-02-27 12:58:17 +00:00
parent 8f66b98324
commit 91335bebf3
5 changed files with 43 additions and 6 deletions

2
dist/css/app.css vendored
View File

@ -1 +1 @@
body{font-size:calc(10px + .5vw);padding:0 0 30px;font-family:Play,sans-serif}.container-fluid{max-width:1440px;overflow:auto}h2{font-size:20px}th{position:relative;text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.react-bs-table table td,.react-bs-table table th{white-space:normal;word-break:break-word}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px calc(0px + 1vw)}.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th{padding-right:20px}td:nth-child(1),th:nth-child(1){width:50%}td:nth-child(2),th:nth-child(2){width:22%}td:nth-child(3),th:nth-child(3){width:14%}td:nth-child(4),th:nth-child(4){width:14%}.order{position:absolute;top:1px;right:3px} body{font-size:calc(10px + .5vw);padding:0 0 30px;font-family:Play,sans-serif;background:#000;color:#47c101}.container-fluid{max-width:1440px;overflow:auto}h1,h2,h3{color:#ba4ee4}h2{font-size:20px}a{color:#df3968}a:hover{color:#fff}th{position:relative;text-transform:capitalize;background:#052c36;color:#15afd9}.react-bs-table{border:1px solid #052c36;border-radius:2px;margin:0}.react-bs-table table td,.react-bs-table table th{white-space:normal;word-break:break-word}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{border-color:#052c36;padding:1px calc(0px + 1vw)}.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th{padding-right:20px}.table-hover>tbody>tr:hover{background:#060f00}td:nth-child(1),th:nth-child(1){width:50%}td:nth-child(2),th:nth-child(2){width:22%}td:nth-child(3),th:nth-child(3){width:14%}td:nth-child(4),th:nth-child(4){width:14%}.order{position:absolute;top:1px;right:3px}

2
dist/js/app.js vendored
View File

@ -1 +1 @@
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var _createClass=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),client=new XMLHttpRequest,objectifyMarkdownNotWomen=new marked.Renderer,moviesCollection,movies,cellCounter=0,lastHeading="",headers=["movie","genre","year","rating"],parseNowt=function(e,t){return e},parseTheImdb=function(e,t){if(null!=e)return e.replace("/10","")},Table=function(e){function t(e){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.movies=e.movies,o.columns=[],headers.map(function(e,t){var n=0==t,r="rating"==e;o.columns.push(React.createElement(TableHeaderColumn,{key:t,isKey:n,dataFormat:r?parseTheImdb:parseNowt,dataField:e,dataSort:!0},e))}),o}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){return React.createElement(BootstrapTable,{data:this.movies,hover:!0},this.columns)}}]),t}(React.Component);objectifyMarkdownNotWomen.heading=function(e,t){lastHeading=e},objectifyMarkdownNotWomen.tablerow=function(e){cellCounter=0,movies.push({})},objectifyMarkdownNotWomen.tablecell=function(e,t){movies[movies.length-1][headers[cellCounter]]=e,cellCounter++},objectifyMarkdownNotWomen.table=function(e,t){movies[0][headers[0]].toLowerCase()==headers[0]&&movies.splice(0,1),null==movies[movies.length-1][headers[0]]&&movies.pop(),moviesCollection.push({heading:lastHeading,movies:movies}),movies=[{}]},client.open("GET",window.location.href+"README.md"),client.onreadystatechange=function(e){document.getElementById("root").innerHTML="",moviesCollection=[],movies=[{}],marked(client.responseText,{renderer:objectifyMarkdownNotWomen},function(){if(null!=moviesCollection[0]){console.log(moviesCollection);var e=[];moviesCollection.map(function(t,o){e.push(React.createElement("div",{key:o},React.createElement("h2",null,t.heading),React.createElement(Table,{movies:t.movies})))}),ReactDOM.render(React.createElement("div",null,React.createElement("h1",null,"Movies For Hackers"),e),document.getElementById("root"))}})},client.send(); "use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var _createClass=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),client=new XMLHttpRequest,objectifyMarkdownNotWomen=new marked.Renderer,moviesCollection,movies,cellCounter=0,lastHeading="",headers=["movie","genre","year","rating"],parseNowt=function(e,t){return e},parseTheImdb=function(e,t){if(null!=e)return e.replace("/10","")},Table=function(e){function t(e){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.movies=e.movies,o.columns=[],headers.map(function(e,t){var n=0==t,r="rating"==e;o.columns.push(React.createElement(TableHeaderColumn,{key:t,isKey:n,dataFormat:r?parseTheImdb:parseNowt,dataField:e,dataSort:!0},e))}),o}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){return React.createElement(BootstrapTable,{data:this.movies,hover:!0},this.columns)}}]),t}(React.Component);objectifyMarkdownNotWomen.heading=function(e,t){lastHeading=e},objectifyMarkdownNotWomen.tablerow=function(e){cellCounter=0,movies.push({})},objectifyMarkdownNotWomen.tablecell=function(e,t){movies[movies.length-1][headers[cellCounter]]=e,cellCounter++},objectifyMarkdownNotWomen.table=function(e,t){movies[0][headers[0]].toLowerCase()==headers[0]&&movies.splice(0,1),null==movies[movies.length-1][headers[0]]&&movies.pop(),moviesCollection.push({heading:lastHeading,movies:movies}),movies=[{}]},client.open("GET",window.location.href+"README.md"),client.onreadystatechange=function(e){document.getElementById("root").innerHTML="",moviesCollection=[],movies=[{}],marked(client.responseText,{renderer:objectifyMarkdownNotWomen},function(){if(null!=moviesCollection[0]){console.log(moviesCollection);var e=[];moviesCollection.map(function(t,o){e.push(React.createElement("div",{key:o},React.createElement("h2",null,t.heading),React.createElement(Table,{movies:t.movies})))}),ReactDOM.render(React.createElement("div",null,e),document.getElementById("root"))}})},client.send();

View File

@ -12,6 +12,10 @@
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<h1>Movies For Hackers</h1>
<p>Every aspiring hacker &amp; cyberpunk must watch these movies - drawing directly from the impressive <a href="https://github.com/k4m4/movies-for-hackers">curated list</a> from <a href="https://github.com/k4m4">Nikolaos Kamarinakis</a></p>
<div id="root"></div> <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>

View File

@ -134,7 +134,6 @@ client.onreadystatechange = function(e) {
ReactDOM.render( ReactDOM.render(
<div> <div>
<h1>Movies For Hackers</h1>
{moviesCollectionJSX} {moviesCollectionJSX}
</div>, </div>,
document.getElementById("root") document.getElementById("root")

View File

@ -1,22 +1,46 @@
// Realistically, this would bring in bootstrap as a package and use it properly but this is a quick project.
$brand-primary: #ba4ee4;
$brand-secondary: #47c101;
$brand-tertiary: #15afd9;
$headings-color: $brand-primary;
$link-color: #df3968;
$border-color: adjust-color(
$brand-tertiary,
$lightness: -35%
);
body { body {
font-size: calc(10px + .5vw); font-size: calc(10px + .5vw);
padding: 0 0 30px; padding: 0 0 30px;
font-family: 'Play', sans-serif; font-family: 'Play', sans-serif;
background: black;
color: $brand-secondary;
} }
.container-fluid { .container-fluid {
max-width: 1440px; max-width: 1440px;
overflow: auto; overflow: auto;
} }
h1,
h2,
h3 {
color: $headings-color;
}
h2 { h2 {
font-size: 20px; font-size: 20px;
} }
a {
color: $link-color;
&:hover {
color: white;
}
}
th { th {
position: relative; position: relative;
text-transform: capitalize; text-transform: capitalize;
background: #eef7fd; background: $border-color;
color: $brand-tertiary;
} }
.react-bs-table { .react-bs-table {
border: 1px solid #ddd; border: 1px solid $border-color;
border-radius: 2px; border-radius: 2px;
margin: 0; margin: 0;
&, &,
@ -34,7 +58,6 @@ th {
} }
} }
} }
// Realistically, this would bring in bootstrap as a package and use it properly
.table { .table {
// Cells // Cells
> thead, > thead,
@ -43,6 +66,7 @@ th {
> tr { > tr {
> th, > th,
> td { > td {
border-color: $border-color;
padding: 1px calc(0px + 1vw); padding: 1px calc(0px + 1vw);
} }
> th { > th {
@ -51,6 +75,16 @@ th {
} }
} }
} }
.table-hover {
> tbody {
> tr:hover {
background: adjust-color(
$brand-secondary,
$lightness: -35%
);
}
}
}
// Quick solution to the forced table-layout: fixed // Quick solution to the forced table-layout: fixed
th, th,
td { td {