LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

updated css

Browse source
This commit is contained in:
bill bittner 2017-09-26 15:12:47 -07:00
parent 84c525dcc0
commit 12279aed3b
19 changed files with 376 additions and 254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
helpers/publishHelpers.js
View file

@ -73,7 +73,7 @@ module.exports = {
if (title === '' || title === null) {
title = name;
}
if (description === ' ' || description === null) {
if (description.trim() === '' || description === null) {
description = `${name} published via spee.ch`;
}
// create the publish params

256
public/assets/css/generalStyle.css → public/assets/css/BEM.css
View file

@ -1,26 +1,21 @@
/* TEXT */
body, button, input, textarea, label, select, option {
font-family: serif;
}
/* Containters */
p {
padding-left: 0.3em;
}
/* CONTAINERS */
.wrapper {
margin-left: 20%;
width:60%;
}
.top-bar {
width: 100%;
margin-bottom: 2px;
padding-bottom: 2px;
border-bottom: 1px lightgrey solid;
margin-top: 2em;
overflow: auto;
text-align: right;
display: inline-block;
vertical-align: text-bottom;
}
.full {
clear: both;
}
@ -31,6 +26,11 @@ body, button, input, textarea, label, select, option {
}
.panel {
overflow: auto;
word-wrap: break-word;
}
.sidebar {
float: right;
width: 33%;
@ -49,12 +49,7 @@ footer {
color: grey;
}
/* panels */
.panel {
overflow: auto;
word-wrap: break-word;
}
/* COLUMNS AND ROWS */
.col-left, .col-right {
overflow: auto;
@ -72,13 +67,84 @@ footer {
float: right;
}
/* text */
.row {
padding: 1em 2% 1em 2%;
margin: 0px;
a, a:visited {
color: blue;
text-decoration: none;
}
.row--wide {
padding: 1em 0px 1em 0px;
margin: 0px;
}
.top-bar {
margin: 2em 0px 2px 0px;
padding: 0px 0px 2px 0px;
border-bottom: 1px lightgrey solid;
overflow: auto;
text-align: right;
vertical-align: text-bottom;
}
.column {
display: inline-block;
padding: 0px;
margin: 0px;
}
.column--1 {
width: 8%;
}
.column--2 {
width: 16%;
}
.column--3 {
width: 24%;
}
.column--4 {
width: 32%;
}
.column--5 {
width: 40%;
}
.column--6 {
width: 48%;
}
.column--7 {
width: 56%;
}
.column--8 {
width: 64%;
}
.column--9 {
width: 72%;
}
.column--10 {
width: 80%;
}
.column--11 {
width: 88%;
}
.column--12 {
width: 96%;
}
/* HEADERS */
h1 {
font-size: x-large;
}
@ -103,21 +169,55 @@ h4 {
text-align: center;
}
/* other */
/* LINKS */
input {
a, a:visited {
color: blue;
text-decoration: none;
}
/* ERROR MESSAGES */
.info-message {
font-weight: bold;
}
.info-message--success {
color: green;
}
.info-message--failure {
color: red;
}
/* INPUT FIELDS */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.label, .input-text, .select, .textarea {
font-size: medium;
padding: 0.3em;
outline: none;
border: 0px;
background-color: white;
}
table {
width: 100%;
text-align: left;
.input-text--primary, .select--primary, .textarea--primary {
border-bottom: 1px solid blue;
}
.input-text--primary:focus, .select--primary:focus, .textarea--primary:focus {
border-bottom: 1px solid grey;
}
/* BUTTONS */
button {
border: 1px solid black;
padding: 0.5em;
margin: 0.5em 0 0.5em 0;
margin: 0.5em 0.3em 0.5em 0.3em;
color: black;
background-color: white;
}
@ -134,6 +234,15 @@ button:active{
background-color: white;
}
/* TABLES */
table {
width: 100%;
text-align: left;
}
/* other */
.stop-float {
clear: both;
}
@ -145,92 +254,3 @@ button:active{
.wrap-words {
word-wrap: break-word;
}
/* BEM */
.info-message {
font-weight: bold;
}
.info-message--success {
color: green;
}
.info-message--failure {
color: red;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.input-text, .select, .textarea {
outline: none;
border: 0px;
background-color: white;
}
.input-text--primary, .select--primary, .textarea--primary {
border-bottom: 1px solid blue;
}
.input-text--primary:focus, .select--primary:focus, .textarea--primary:focus {
border-bottom: 1px solid grey;
}
/* MEDIA QUERIES */
@media (max-width: 1250px) {
.wrapper {
margin-left: 10%;
width:80%;
}
}
@media (max-width: 1000px) {
.wrapper {
margin-left: 10%;
width:80%;
}
.main {
float: none;
width: 100%;
margin-right: 0px;
padding-right: 0px;
border-right: 0px;
margin-bottom: 5px;
}
.sidebar {
border-top: 1px solid lightgray;
float: none;
width: 100%;
}
}
@media (max-width: 750px ) {
.col-left, .col-right {
float: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.col-right {
padding-top: 20px;
}
}
@media (max-width: 475px) {
.wrapper {
margin: 0px;
width: 100%;
}
}

40
public/assets/css/componentStyle.css
View file

@ -108,8 +108,6 @@ button.copy-button {
/* learn more */
.learn-more {
text-align: center;
margin-top: 2px;
padding-top: 2px;
border-top: 1px solid lightgrey;
}
@ -200,42 +198,4 @@ button.copy-button {
word-wrap: break-word;
}
@media (max-width: 750px) {
.all-claims-asset {
width:30%;
}
.all-claims-details {
font-size: small;
}
.show-asset-lite {
width: 100%;
}
.top-bar-tagline {
clear: both;
text-align: left;
width: 100%;
}
}
@media (max-width: 475px) {
div#publish-active-area {
margin-left: 2em;
margin-right: 2em;
}
.all-claims-asset {
width:50%;
}
.top-bar-right {
display: none;
}
}

59
public/assets/css/mediaQueries.css Normal file
View file

@ -0,0 +1,59 @@
@media (max-width: 1250px) {
.wrapper {
margin-left: 10%;
width:80%;
}
}
@media (max-width: 1000px) {
.wrapper {
margin-left: 10%;
width:80%;
}
.main {
float: none;
width: 100%;
margin-right: 0px;
padding-right: 0px;
border-right: 0px;
margin-bottom: 5px;
}
.sidebar {
border-top: 1px solid lightgray;
float: none;
width: 100%;
}
}
@media (max-width: 750px ) {
.col-left, .col-right {
float: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.col-right {
padding-top: 20px;
}
.all-claims-asset {
width:30%;
}
.all-claims-details {
font-size: small;
}
.show-asset-lite {
width: 100%;
}
.top-bar-tagline {
clear: both;
text-align: left;
width: 100%;
}
}

0
public/assets/css/reset.css Normal file
View file

15
views/index.handlebars
View file

@ -1,10 +1,11 @@
<div class="wrapper">
{{> topBar}}
<div class="full">
{{> publishForm}}
{{> learnMore}}
</div>
{{> footer}}
<div class="row">
<div class="column column--2"></div>
<div class="column column--8">
{{> topBar}}
{{> publishForm}}
{{> learnMore}}
{{> footer}}
</div>
</div>
<script src="/socket.io/socket.io.js"></script>

4
views/layouts/main.handlebars
View file

@ -5,8 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Spee.ch</title>
<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
<link rel="stylesheet" href="/assets/css/BEM.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/mediaQueries.css" type="text/css">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@lbryio" />
<meta property="og:title" content="spee.ch">

6
views/layouts/show.handlebars
View file

@ -5,8 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Spee.ch</title>
<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
<link rel="stylesheet" href="/assets/css/BEM.css" type="text/css">
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
<link rel="stylesheet" href="/assets/css/mediaQueries.css" type="text/css">
<meta property="fb:app_id" content="1371961932852223">
{{#unless fileInfo.nsfw}}
{{{addTwitterCard fileInfo.fileType openGraphInfo.source openGraphInfo.embedUrl openGraphInfo.directFileUrl}}}

17
views/login.handlebars
View file

@ -1,13 +1,18 @@
<div class="wrapper">
{{> topBar}}
<div class="full">
<div class="row row--wide">
<h2>Log In</h2>
<p>Log in to an existing channel:</p>
{{>channelLogin}}
<div class="column column--6">
<p>Log in to an existing channel:</p>
{{>channelLoginForm}}
</div>
</div>
<div class="row row--wide">
<h2>Create New</h2>
<p>Create a brand new channel:</p>
{{>channelCreation}}
<div class="column column--6">
<p>Create a brand new channel:</p>
{{>channelCreationForm}}
</div>
</div>
{{> footer}}
</div>

2
views/partials/asset.handlebars
View file

@ -1,4 +1,4 @@
<div class="panel">
<div class="row">
<div id="asset-placeholder">
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}

45
views/partials/channelCreation.handlebars → views/partials/channelCreationForm.handlebars
View file

@ -1,22 +1,35 @@
<div id="channel-publish-wrapper">
<p>
<form id="publish-channel-form">
<div>
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
<label for="new-channel-name">Channel Name: </label>
@<input type="text" name="new-channel-name" id="new-channel-name" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
<span id="input-success-channel-name" class="info-message info-message--success"></span>
</div>
<div>
<div id="input-error-channel-password" class="info-message info-message--failure"></div>
<label for="new-channel-password">Password: </label>
<input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
</div>
</form>
</p>
<form id="publish-channel-form">
<div class="column column--3">
<label class="label" for="new-channel-name">Name:</label>
</div>
<div class="column column--9">
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
<div class="input-text--primary">
<span>@</span>
<input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
<span id="input-success-channel-name" class="info-message info-message--success"></span>
</div>
</div>
<div class="column column--3">
<label class="label" for="new-channel-password">Password:</label>
</div>
<div class="column column--9">
<div id="input-error-channel-password" class="info-message info-message--failure"></div>
<input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
</div>
</form>
<div class="row row--wide">
<button onclick="publishNewChannel(event)">Create Channel</button>
</div>
<div id="channel-publish-wrapper"></div>
<script type="text/javascript">
function publishNewChannel (event) {
const channelName = document.getElementById('new-channel-name').value;

38
views/partials/channelLogin.handlebars → views/partials/channelLoginForm.handlebars
View file

@ -1,18 +1,28 @@
<p>
<form id="channel-login-form">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
<div>
<label for="login-channel-name">Channel Name: </label>
@<input type="text" name="login-channel-name" id="login-channel-name" class="input-text input-text--primary" placeholder="" value="">
</div>
<div>
<label for="login-channel-password" >Password: </label>
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
</div>
</form>
</p>
<button onclick="loginToChannel(event)">Login</button>
<form id="channel-login-form">
<div class="column column--3">
<label class="label" for="login-channel-name">Name:</label>
</div>
<div class="column column--9">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
<div class="input-text--primary">
<span>@</span>
<input type="text" name="login-channel-name" id="login-channel-name" class="input-text" placeholder="" value="">
</div>
</div>
<div class="column column--3">
<label class="label" for="login-channel-password" >Password:</label>
</div>
<div class="column column--9">
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
</div>
</form>
<div class="row row--wide">
<button onclick="loginToChannel(event)">Login</button>
</div>
<script type="text/javascript">
function loginToChannel (event) {

2
views/partials/footer.handlebars
View file

@ -1,3 +1,3 @@
<footer class="stop-float">
<footer class="row">
<p> thanks for visiting spee.ch </p>
</footer>

2
views/partials/learnMore.handlebars
View file

@ -1,3 +1,3 @@
<div class="learn-more stop-float">
<div class="row learn-more">
<p><i>Spee.ch is an open-source project. You should <a href="https://github.com/lbryio/spee.ch/issues">contribute</a> on github, or <a href="https://github.com/lbryio/spee.ch">fork it</a> and make your own!</i></p>
</div>

30
views/partials/publishChannel.handlebars → views/partials/publishForm-Channel.handlebars
View file

@ -1,29 +1,35 @@
<div>
<p>
<div class="row">
<div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label>
</div>
<div class="column column--7">
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
<label for="channel-name-select">Channel:</label>
<select type="text" id="channel-name-select" class="select select--primary" value="channel" onclick="toggleChannel(event)">
<optgroup>
{{#if user}}
<option value="@{{user.userName}}" >@{{user.userName}}</option>
{{/if}}
<option value="none" >None</option>
</optgroup>
<optgroup>
<option value="login">Login</option>
<option value="new" >New</option>
</optgroup>
</select>
</p>
<div id="channel-login-details" hidden="true">
{{> channelLogin}}
</div>
<div id="channel-create-details" hidden="true">
{{> channelCreation}}
</div>
</div>
<div id="channel-login-details" class="row" hidden="true">
{{> channelLoginForm}}
</div>
<div id="channel-create-details" class="row" hidden="true">
{{> channelCreationForm}}
</div>
<script src="/assets/js/authFunctions.js"></script>
<script type="text/javascript">
function toggleChannel (event) {
const createChannelTool = document.getElementById('channel-create-details');
const loginToChannelTool = document.getElementById('channel-login-details');

19
views/partials/publishDetails.handlebars → views/partials/publishForm-Details.handlebars
View file

@ -1,7 +1,14 @@
<p>Details
<a class="toggle-link" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="details-detail">[open]</a>
</p>
<div id="details-detail" hidden="true">
<div class="row">
<div class="column column--3">
<label class="label">Details:</label>
</div>
<div class="column column--9">
<a class="toggle-link" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="details-detail">[open]</a>
</div>
</div>
<div class="row" id="details-detail" hidden="true">
<table>
<tr>
<td><label for="publish-title">Title: </label></td>
@ -25,5 +32,9 @@
<td><input type="checkbox" id="publish-nsfw"></td>
</tr>
</table>
</div>

14
views/partials/publishForm-Url.handlebars Normal file
View file

@ -0,0 +1,14 @@
<div class="row">
<div class="column column--3">
<label class="label">URL:</label>
</div>
<div class="column column--9">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
<div class="input-text--primary">
<span>Spee.ch/{{user.channelName}}/</span>
<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
<span id="input-success-claim-name" class="info-message info-message--success"></span>
</div>
</div>
</div>

50
views/partials/publishForm.handlebars
View file

@ -1,35 +1,37 @@
<div class="panel">
<h2>Publish</h2>
<div class="row" style="overflow:auto; height: 100%;">
<div class="col-left" id="file-selection-area">
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<p>Drag and drop your file here, or choose your file below.</p>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</div>
<div id="asset-preview-holder"></div>
<div class="row">
<div class="col-left">
<div id="file-selection-area">
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<div class="row">
<p>Drag and drop your file here, or choose your file below.</p>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
<div class="row">
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</div>
</div>
<div id="asset-preview-holder"></div>
</div>
</div>
<div class="col-right">
<div id="publish-active-area">
<div class="stop-float">
<p>
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
Spee.ch/
<input type="text" id="claim-name-input" class="input-text input-text--primary" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
<span id="input-success-claim-name" class="info-message info-message--success"></span>
</p>
</div>
<div class="stop-float">
{{> publishChannel}}
</div>
<div class="stop-float">
{{> publishDetails}}
</div>
<p>
{{> publishForm-Channel}}
{{> publishForm-Url}}
{{> publishForm-Details}}
<div class="row">
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
<button onclick="resetPublishArea()">Reset</button>
</p>
</div>
</div>
</div>
</div>

23
views/partials/topBar.handlebars
View file

@ -1,4 +1,4 @@
<div class="top-bar">
<div class="row top-bar">
<a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a>
<h1 id="title"><a href="/">Spee.ch</a></h1><span class="top-bar-left">(beta)</span>
<a href="/popular" class="top-bar-right">popular</a>
@ -6,10 +6,27 @@
<a href="/about" class="top-bar-right">help</a>
{{#if user}}
<a href="/{{user.channelName}}:{{user.channelClaimId}}" class="top-bar-right">@{{user.userName}}</a>
<a href="/logout" class="top-bar-right">logout</a>
<select type="text" class="select" onchange="toggleLogin(event)">
<option value="none">@{{user.userName}}</option>
<option value="view">view</option>
<option value="logout">logout</option>
</select>
{{else}}
<a href="/login" class="top-bar-right">login</a>
{{/if}}
<div class="top-bar-tagline">Open-source, decentralized image and video hosting.</div>
</div>
<script type="text/javascript">
function toggleLogin (event) {
console.log(event);
const selectedOption = event.target.selectedOptions[0].value;
if (selectedOption === 'logout') {
console.log('login');
window.location.href = '/logout';
} else if (selectedOption === 'view') {
console.log('view channel');
window.location.href = '/{{user.channelName}}:{{user.channelClaimId}}';
}
}
</script>