full frontend separation (you must be 18+ to view this commit)
Jeremy Kauffman
3
.gitignore
vendored
|
|
@ -0,0 +1,3 @@
|
|||
dist/css/*
|
||||
dist/js/*
|
||||
.sass-cache
|
||||
0
favicon.ico → dist/favicon.ico
vendored
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 306 KiB |
BIN
dist/img/busy.gif
vendored
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 9 KiB After Width: | Height: | Size: 9 KiB |
|
Before Width: | Height: | Size: 9 KiB After Width: | Height: | Size: 9 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 4 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 4 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
0
img/lbry-bg.png → dist/img/lbry-bg.png
vendored
|
Before Width: | Height: | Size: 992 KiB After Width: | Height: | Size: 992 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
27
dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>LBRY</title>
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
|
||||
<link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
|
||||
<link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="./img/fav/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="./img/fav/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="msapplication-TileColor" content="#155B4A">
|
||||
<meta name="msapplication-TileImage" content="/img/fav/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#155B4A">
|
||||
</head>
|
||||
<body>
|
||||
<div id="canvas"></div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
|
||||
<script src="./js/mimic.js"></script>
|
||||
<script src="./js/lbry.js"></script>
|
||||
<script src="./js/gui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
28
index.html
|
|
@ -1,28 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>LBRY</title>
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
|
||||
<link href="../../web/css/app/all.css" rel="stylesheet" type="text/css" media="screen,print" />
|
||||
<link rel="icon" type="image/png" href="../../web/img/fav/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="../../web/img/fav/favicon-194x194.png" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="../../web/img/fav/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="../../web/img/fav/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href=".../../web/img/fav/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
<meta name="msapplication-TileColor" content="#155B4A">
|
||||
<meta name="msapplication-TileImage" content="/img/fav/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#155B4A">
|
||||
</head>
|
||||
<body>
|
||||
<div id="canvas"></div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="../../web/js/gui/mimic.js"></script>
|
||||
<script src="../../web/js/gui/lbry.js"></script>
|
||||
<script type="text/babel" src="../../web/js/gui/gui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
var lbry = {
|
||||
isConnected: false,
|
||||
rootPath: '../../web/',
|
||||
rootPath: '.',
|
||||
colors: {
|
||||
primary: '#155B4A'
|
||||
}
|
||||
|
|
|
|||
115
scss/_global.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
$spacing-vertical: 24px;
|
||||
|
||||
$color-primary: #155B4A;
|
||||
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
||||
$color-text-dark: #000;
|
||||
$color-money: #216C2A;
|
||||
$color-meta-light: #505050;
|
||||
|
||||
$font-size: 18px;
|
||||
|
||||
$mobile-width-threshold: 801px;
|
||||
$max-content-width: 1000px;
|
||||
$max-text-width: 660px;
|
||||
|
||||
|
||||
@mixin clearfix()
|
||||
{
|
||||
&:before, &:after
|
||||
{
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($radius)
|
||||
{
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin display-flex()
|
||||
{
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($columns)
|
||||
{
|
||||
-webkit-flex: $columns;
|
||||
-moz-flex: $columns;
|
||||
-ms-flex: $columns;
|
||||
flex: $columns;
|
||||
}
|
||||
|
||||
@mixin flex-flow($flow) {
|
||||
-webkit-flex-flow: $flow;
|
||||
-moz-flex-flow: $flow;
|
||||
-ms-flex-flow: $flow;
|
||||
flex-flow: $flow;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin absolute-center()
|
||||
{
|
||||
@include display-flex();
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin linear-gradient($from-color, $to-color) {
|
||||
background-color: $to-color; /* Fallback Color */
|
||||
background-image: -webkit-linear-gradient(top, $from-color, $to-color); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(top, $from-color, $to-color); /* FF3.6 */
|
||||
background-image: -ms-linear-gradient(top, $from-color, $to-color); /* IE10 */
|
||||
background-image: linear-gradient(top, $from-color, $to-color);
|
||||
}
|
||||
|
||||
@mixin box-sizing( $type: border-box ) {
|
||||
-webkit-box-sizing: $type;
|
||||
-moz-box-sizing: $type;
|
||||
-o-box-sizing: $type;
|
||||
-ms-box-sizing: $type;
|
||||
box-sizing: $type;
|
||||
}
|
||||
|
||||
@mixin background-size ($size) {
|
||||
-webkit-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
@mixin offscreen() {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top:auto;
|
||||
width:1px;
|
||||
height:1px;
|
||||
overflow:hidden;
|
||||
}
|
||||
87
scss/_grid.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
@import "global";
|
||||
|
||||
$gutter_fluid: 4;
|
||||
|
||||
[class*="span"] {
|
||||
min-height: 1px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.span12 { width: 100%; }
|
||||
.span11 { width: 91.666%; }
|
||||
.span10 { width: 83.333%; }
|
||||
.span9 { width: 75%; }
|
||||
.span8 { width: 66.666%; }
|
||||
.span7 { width: 58.333%; }
|
||||
.span6 { width: 50%; }
|
||||
.span5 { width: 41.666%; }
|
||||
.span4 { width: 33.333%; }
|
||||
.span3 { width: 25%; }
|
||||
.span2 { width: 16.666%; }
|
||||
.span1 { width: 8.333%; }
|
||||
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
> [class*="span"] {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-left: 1% * $gutter_fluid;
|
||||
&:first-child
|
||||
{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$column_width: (100% - $gutter_fluid * 11) / 12;
|
||||
|
||||
> .span12 { width: $column_width * 12 + $gutter_fluid * 11; }
|
||||
> .span11 { width: $column_width * 11 + $gutter_fluid * 10; }
|
||||
> .span10 { width: $column_width * 10 + $gutter_fluid * 9; }
|
||||
> .span9 { width: $column_width * 9 + $gutter_fluid * 8; }
|
||||
> .span8 { width: $column_width * 8 + $gutter_fluid * 7; }
|
||||
> .span7 { width: $column_width * 7 + $gutter_fluid * 6; }
|
||||
> .span6 { width: $column_width * 6 + $gutter_fluid * 5; }
|
||||
> .span5 { width: $column_width * 5 + $gutter_fluid * 4; }
|
||||
> .span4 { width: $column_width * 4 + $gutter_fluid * 3; }
|
||||
> .span3 { width: $column_width * 3 + $gutter_fluid * 2; }
|
||||
> .span2 { width: $column_width * 2 + $gutter_fluid * 1; }
|
||||
> .span1 { width: $column_width; }
|
||||
}
|
||||
|
||||
.tile-fluid {
|
||||
width: 100%;
|
||||
> [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.column-fluid {
|
||||
@include display-flex();
|
||||
flex-wrap: wrap;
|
||||
> [class*="span"] {
|
||||
@include display-flex();
|
||||
@include flex(1 0 auto);
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.row-fluid, .tile-fluid {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-width-threshold) {
|
||||
.row-fluid, .tile-fluid, .column-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
.pull-left, .pull-right
|
||||
{
|
||||
float: none;
|
||||
}
|
||||
[class*="span"] {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
97
scss/_gui.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
@import "global";
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
font-size: $font-size;
|
||||
}
|
||||
body
|
||||
{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
line-height: 1.3333;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.0em; }
|
||||
h2 { font-size: 1.75em; }
|
||||
h3 { font-size: 1.4em; }
|
||||
h4 { font-size: 1.2em; }
|
||||
h5 { font-size: 1.1em; }
|
||||
sup, sub {
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
sup { top: -0.4em; }
|
||||
sub { top: 0.4em; }
|
||||
|
||||
input[type="search"]
|
||||
{
|
||||
border: 0 none;
|
||||
border: 1px solid rgba(160,160,160,.5);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
height: $spacing-vertical * 1.5;
|
||||
}
|
||||
|
||||
.busy-indicator
|
||||
{
|
||||
background: url('../img/busy.gif') no-repeat center center;
|
||||
display: inline-block;
|
||||
margin: -1em 0;
|
||||
min-width: 16px;
|
||||
min-height: 8px;
|
||||
vertical-align: middle;
|
||||
padding: 0 30px;
|
||||
&:last-child
|
||||
{
|
||||
padding-right: 2px;
|
||||
}
|
||||
&:first-child
|
||||
{
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-block
|
||||
{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: $spacing-vertical * 1.5;
|
||||
line-height: $spacing-vertical * 1.5;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
+ .button-block
|
||||
{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.icon:first-child
|
||||
{
|
||||
padding-right: 5px;
|
||||
}
|
||||
.icon:last-child
|
||||
{
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary
|
||||
{
|
||||
color: white;
|
||||
@include linear-gradient(lighten($color-primary, 5), darken($color-primary, 5));
|
||||
background-color: $color-primary;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.button-alt
|
||||
{
|
||||
@include linear-gradient(lighten($color-light-alt, 5), darken($color-light-alt, 5));
|
||||
color: hsl(hue($color-primary), 85, 15);
|
||||
border: 1px solid darken($color-primary, 10);
|
||||
}
|
||||
.button-text
|
||||
{
|
||||
color: $color-primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
1666
scss/_icons.scss
Normal file
44
scss/_reset.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td, iframe
|
||||
{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
input:focus, textarea:focus
|
||||
{
|
||||
outline: 0;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
fieldset, img, iframe
|
||||
{
|
||||
border: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
font-weight:normal;
|
||||
}
|
||||
ol, ul
|
||||
{
|
||||
list-style-position: inside;
|
||||
> li { list-style-position: inside; }
|
||||
}
|
||||
input, textarea, select
|
||||
{
|
||||
font-family:inherit;
|
||||
font-size:inherit;
|
||||
font-weight:inherit;
|
||||
}
|
||||
img {
|
||||
width: auto\9;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
a
|
||||
{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
4
scss/all.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import "_reset";
|
||||
@import "_grid";
|
||||
@import "_icons";
|
||||
@import "_gui";
|
||||
12
watch.sh
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
#!/bin/bash
|
||||
|
||||
trap 'jobs -p | xargs kill' EXIT
|
||||
|
||||
sass --watch scss:dist/css --sourcemap=none &
|
||||
|
||||
if [ $1 != "jeremyisbadatnode" ]; then
|
||||
babel --presets es2015,react --out-dir dist/js/ --watch js/
|
||||
else
|
||||
#yes I am dumb, but not a high prio fix - Jeremy
|
||||
babel --presets /home/jeremy/local/lib/node_modules/babel-preset-es2015,/home/jeremy/local/lib/node_modules/babel-preset-react --out-dir dist/js/ --watch ~/code/lbry-web-gui/js/
|
||||
fi
|
||||