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

basic styling for about

Browse source
This commit is contained in:
bill bittner 2017-09-29 11:59:53 -07:00
parent d7da83a77a
commit 3d4e31f2e1
26 changed files with 147 additions and 253 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
public/assets/css/BEM.css
View file

@ -5,7 +5,8 @@
/* TEXT */ /* TEXT */
body, button, input, textarea, label, select, option { body, button, input, textarea, label, select, option {
font-family: serif; font-family: monospace;
font-size: large;
} }
p { p {
@ -21,6 +22,10 @@ p {
padding:0px; padding:0px;
} }
.block-quote {
font-size: 4rem;
}
/* HEADERS */ /* HEADERS */
h1 { h1 {
@ -37,6 +42,8 @@ h2 {
h3 { h3 {
color: black;; color: black;;
font-weight: normal;
font-size: 1rem;
} }
.h3--secondary { .h3--secondary {
@ -49,31 +56,6 @@ h4 {
/* CONTAINERS */ /* CONTAINERS */
.wrapper {
margin-left: 20%;
width:60%;
}
.full {
clear: both;
}
.main {
float: left;
width: 65%;
}
.panel {
overflow: auto;
word-wrap: break-word;
}
.sidebar {
float: right;
width: 33%;
}
footer { footer {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -89,23 +71,8 @@ footer {
/* COLUMNS AND ROWS */ /* COLUMNS AND ROWS */
.col-left, .col-right {
overflow: auto;
margin: 0px;
width: 48%;
}
.col-left {
padding: 5px 10px 5px 0px;
float: left;
}
.col-right {
padding: 5px 0px 5px 10px;
float: right;
}
.row { .row {
clear: both;
padding: 1em 2% 1em 2%; padding: 1em 2% 1em 2%;
margin: 0px; margin: 0px;
@ -121,16 +88,6 @@ footer {
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
.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 { .column {
display: inline-block; display: inline-block;
padding: 0px; padding: 0px;
@ -138,51 +95,88 @@ footer {
} }
.column--1 { .column--1 {
width: 8%; width: 10%;
} }
.column--2 { .column--2 {
width: 16%; width: 20%;
} }
.column--3 { .column--3 {
width: 24%; width: 30%;
} }
.column--4 { .column--4 {
width: 32%;
}
.column--5 {
width: 40%; width: 40%;
} }
.column--5 {
width: 50%;
}
.column--6 { .column--6 {
width: 48%; width: 60%;
} }
.column--7 { .column--7 {
width: 56%; width: 70%;
} }
.column--8 { .column--8 {
width: 64%;
}
.column--9 {
width: 72%;
}
.column--10 {
width: 80%; width: 80%;
} }
.column--11 { .column--9 {
width: 88%; width: 90%;
} }
.column--12 { .column--10 {
width: 96%; width: 100%;
}
/* ALIGNMENT */
.align-content-left {
text-align: left;
}
.align-content-center {
text-align: center;
}
.align-content-right {
text-align: right;
}
.align-content-top {
vertical-align: top;
}
.align-content-right {
vertical-align: bottom;
}
/* TOP BAR */
.nav-bar {
border-bottom: 2px solid #eaeaea;
}
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
display: inline-block;
}
.nav-bar-title {
font-size: 1.5em;
color: black;
}
.nav-bar-title--superscript {
font-size: small;
vertical-align: top;
}
.nav-bar-link {
padding: 1em 0.5em 1em 0.5em;
} }
/* LINKS */ /* LINKS */
@ -263,10 +257,6 @@ table {
/* other */ /* other */
.stop-float {
clear: both;
}
.toggle-link { .toggle-link {
float: right; float: right;
} }

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

@ -5,24 +5,11 @@
} }
#logo { #logo {
height: 1.5em;
} }
#title { #title {
margin: 2px 5px 2px 5px;
}
.top-bar-left {
float: left;
}
.top-bar-tagline {
font-style: italic;
color: grey;
}
.top-bar-right {
margin-left: 0.5em;
} }
/* publish */ /* publish */

10
public/assets/css/mediaQueries.css
View file

@ -1,15 +1,5 @@
@media (max-width: 1250px) {
.wrapper {
margin-left: 10%;
width:80%;
}
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
.wrapper {
margin-left: 10%;
width:80%;
}
.main { .main {
float: none; float: none;

38
views/about.handlebars
View file

@ -1,17 +1,31 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div class="main"> <div class="row">
<h2>About Spee.ch</h2> <div class="column column--5 align-content-top">
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p> <div class="row">
<p>Spee.ch is an image hosting service, but with the added benefit that it stores your images on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p> <span class="block-quote">Open-source, decentralized image and video hosting</span>
{{> examples}}
{{> documentation}}
{{> bugs}}
</div> </div>
<div class="sidebar"> <div class="row">
{{> contribute}} <p>
<a href="#">GITHUB</a>
</p>
<p>
<a href="#">SLACK CHANNEL</a>
</p>
<p>
<a href="#">DOCUMENTATION</a>
</p>
</div> </div>
{{> footer}} </div><div class="column column--5 align-content-top">
</div> <div class="row">
<p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
<p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p>
<h3>[Contribute]</h3>
<p>Spee.ch is an open source project. Please contribute to the existing site, or fork it and make your own!</p>
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
</div>
</div>
</div>
<script src="/assets/js/generalFunctions.js"></script> <script src="/assets/js/generalFunctions.js"></script>

7
views/channel.handlebars
View file

@ -1,11 +1,8 @@
<div class="wrapper"> {{> topBar}}
{{> topBar}} <div>
<div>
<h3>{{this.channelName}}<span class="h3--secondary">:{{this.longChannelId}}</span></h3> <h3>{{this.channelName}}<span class="h3--secondary">:{{this.longChannelId}}</span></h3>
<p>Below is all the free content in this channel.</p> <p>Below is all the free content in this channel.</p>
{{#each this.claims}} {{#each this.claims}}
{{> contentListItem}} {{> contentListItem}}
{{/each}} {{/each}}
</div>
{{> footer}}
</div> </div>

3
views/fourOhFour.handlebars
View file

@ -1,7 +1,6 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div> <div>
<h3>404: Not Found</h3> <h3>404: Not Found</h3>
<p>That page does not exist. Return <a href="/">home</a>.</p> <p>That page does not exist. Return <a href="/">home</a>.</p>
</div> </div>
</div>

11
views/index.handlebars
View file

@ -1,14 +1,7 @@
<script src="/assets/js/generalFunctions.js"></script> <script src="/assets/js/generalFunctions.js"></script>
<div class="row"> {{> topBar}}
<div class="column column--2"></div> {{> publishForm}}
<div class="column column--8">
{{> topBar}}
{{> publishForm}}
{{> learnMore}}
{{> footer}}
</div>
</div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script> <script src="/siofu/client.js"></script>

5
views/login.handlebars
View file

@ -1,4 +1,4 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<h2>Log In</h2> <h2>Log In</h2>
<div class="row row--wide"> <div class="row row--wide">
@ -15,8 +15,7 @@
{{>channelCreationForm}} {{>channelCreationForm}}
</div> </div>
</div> </div>
{{> footer}}
</div>
<script src="/assets/js/generalFunctions.js"></script> <script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/validationFunctions.js"></script> <script src="/assets/js/validationFunctions.js"></script>

4
views/new.handlebars
View file

@ -1,4 +1,4 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div> <div>
<h2>New on Spee.ch</h2> <h2>New on Spee.ch</h2>
@ -22,5 +22,3 @@
</div> </div>
{{/each}} {{/each}}
</div> </div>
{{> footer}}
</div>

3
views/noChannel.handlebars
View file

@ -1,8 +1,7 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div> <div>
<h3>No Claims</h3> <h3>No Claims</h3>
<p>There are no free assets on this channel.</p> <p>There are no free assets on this channel.</p>
<p><i>If you think this message is an error, contact us in the <a href="https://lbry.slack.com/" target="_blank">LBRY slack!</a></i></p> <p><i>If you think this message is an error, contact us in the <a href="https://lbry.slack.com/" target="_blank">LBRY slack!</a></i></p>
</div> </div>
</div>

3
views/noClaims.handlebars
View file

@ -1,8 +1,7 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div> <div>
<h3>No Claims</h3> <h3>No Claims</h3>
<p>There are no free assets at that claim. You should publish one at <a href="/">spee.ch</a>.</p> <p>There are no free assets at that claim. You should publish one at <a href="/">spee.ch</a>.</p>
<p>NOTE: it is possible your claim was published, but it is still being processed by the blockchain</p> <p>NOTE: it is possible your claim was published, but it is still being processed by the blockchain</p>
</div> </div>
</div>

4
views/partials/channelCreationForm.handlebars
View file

@ -4,7 +4,7 @@
<div class="column column--3"> <div class="column column--3">
<label class="label" for="new-channel-name">Name:</label> <label class="label" for="new-channel-name">Name:</label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<div id="input-error-channel-name" class="info-message info-message--failure"></div> <div id="input-error-channel-name" class="info-message info-message--failure"></div>
<div class="input-text--primary"> <div class="input-text--primary">
<span>@</span> <span>@</span>
@ -16,7 +16,7 @@
<div class="column column--3"> <div class="column column--3">
<label class="label" for="new-channel-password">Password:</label> <label class="label" for="new-channel-password">Password:</label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<div id="input-error-channel-password" class="info-message info-message--failure"></div> <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"> <input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
</div> </div>

4
views/partials/channelLoginForm.handlebars
View file

@ -4,7 +4,7 @@
<div class="column column--3"> <div class="column column--3">
<label class="label" for="login-channel-name">Name:</label> <label class="label" for="login-channel-name">Name:</label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<div id="login-error-display-element" class="info-message info-message--failure"></div> <div id="login-error-display-element" class="info-message info-message--failure"></div>
<div class="input-text--primary"> <div class="input-text--primary">
<span>@</span> <span>@</span>
@ -15,7 +15,7 @@
<div class="column column--3"> <div class="column column--3">
<label class="label" for="login-channel-password" >Password:</label> <label class="label" for="login-channel-password" >Password:</label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value=""> <input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
</div> </div>

8
views/partials/contribute.handlebars
View file

@ -1,8 +0,0 @@
<div>
<h2>Contribute
<a href="https://github.com/lbryio/spee.ch" target="_blank"><img id="github-logo" src="/assets/img/GitHub-Mark-32px.png"/></a>
</h2>
<p><strong>Spee.ch is an open source project. Please contribute to the existing site, or fork it and make your own!</strong></p>
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
</div>

36
views/partials/documentation.handlebars
View file

@ -1,36 +0,0 @@
<div class="panel">
<h2>Documentation
<a class="toggle-link" id="documentation-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[ - ]" data-closedlabel="[ + ]" data-slaveelementid="documentation-detail">[ + ]</a>
</h2>
<div id="documentation-detail" hidden="true">
<code>https://spee.ch/</code>
<ul>
<li>Learn about Spee.ch and publish your own media</li>
</ul>
<code>https://spee.ch/:name.ext</code>
<ul>
<li >Serves the winning free, public claim at this name directly</li>
<li >E.g. <a href="/doitlive.png">spee.ch/doitlive.png</a></li>
</ul>
<code>https://spee.ch/:name</code>
<ul>
<li >Serves an HTML page which shows the winning claim at this name with additional details</li>
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
</ul>
<code>https://spee.ch/:name/:claim_id.ext</code>
<ul>
<li >Serves a specific image or video file directly</li>
<li >E.g. <a href="/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0/doitlive.jpg">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0.jpg</a></li>
</ul>
<code>https://spee.ch/:name/:claim_id</code>
<ul>
<li >Serves an HTML page with this specific claim and additional details</li>
<li >E.g. <a href="/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0/doitlive">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
</ul>
<code>https://spee.ch/:name/all</code>
<ul>
<li >Displays a list of all files at a claim</li>
<li >E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
</ul>
</div>
</div>

17
views/partials/examples.handlebars
View file

@ -1,17 +0,0 @@
<div class="panel">
<h2>Examples
<a class="toggle-link" id="examples-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[ - ]" data-closedlabel="[ + ]" data-slaveelementid="examples-detail">[ + ]</a>
</h2>
<div id="examples-detail" hidden="true">
<div class="example">
<h4>Use spee.ch to embed a specific image:</h4>
<a href="/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0/doitlive.jpg"><img class="example-image" src="/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0/doitlive.jpg"/></a>
<div class="example-code">&lt;img src="https://spee.ch/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0/doitlive.jpg"/&gt;</div>
</div>
<div class="example">
<h4>Use spee.ch to serve the top free image at a claim:</h4>
<a href="/doitlive.png"><img class="example-image" src="/doitlive.png"/></a>
<div class="example-code">&lt;img src="https://spee.ch/doitlive.png"/&gt;</div>
</div>
</div>
</div>

3
views/partials/footer.handlebars
View file

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

3
views/partials/learnMore.handlebars
View file

@ -1,3 +0,0 @@
<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>

2
views/partials/publishForm-Channel.handlebars
View file

@ -2,7 +2,7 @@
<div class="column column--3"> <div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label> <label class="label" for="channel-name-select">Channel:</label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<div id="input-error-channel-select" class="info-message info-message--failure"></div> <div id="input-error-channel-select" class="info-message info-message--failure"></div>
<select type="text" id="channel-name-select" class="select select--primary" value="channel" onchange="toggleChannel(event)"> <select type="text" id="channel-name-select" class="select select--primary" value="channel" onchange="toggleChannel(event)">
<optgroup> <optgroup>

8
views/partials/publishForm-Details.handlebars
View file

@ -4,7 +4,7 @@
<div class="column column--3"> <div class="column column--3">
<label for="publish-title" class="label">Title: </label> <label for="publish-title" class="label">Title: </label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<input type="text" id="publish-title" class="input-text input-text--primary"> <input type="text" id="publish-title" class="input-text input-text--primary">
</div> </div>
</div> </div>
@ -13,7 +13,7 @@
<div class="column column--3"> <div class="column column--3">
<label for="publish-description" class="label">Description: </label> <label for="publish-description" class="label">Description: </label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<textarea rows="2" id="publish-description" class="input-textarea"></textarea> <textarea rows="2" id="publish-description" class="input-textarea"></textarea>
</div> </div>
</div> </div>
@ -22,7 +22,7 @@
<div class="column column--3"> <div class="column column--3">
<label for="publish-license" class="label">License:* </label> <label for="publish-license" class="label">License:* </label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<select type="text" id="publish-license" class="select select--primary"> <select type="text" id="publish-license" class="select select--primary">
<option value="Public Domain">Public Domain</option> <option value="Public Domain">Public Domain</option>
<option value="Creative Commons">Creative Commons</option> <option value="Creative Commons">Creative Commons</option>
@ -34,7 +34,7 @@
<div class="column column--3"> <div class="column column--3">
<label for="publish-nsfw" class="label">NSFW*</label> <label for="publish-nsfw" class="label">NSFW*</label>
</div> </div>
<div class="column column--9"> <div class="column column--7">
<input class="input-checkbox" type="checkbox" id="publish-nsfw"> <input class="input-checkbox" type="checkbox" id="publish-nsfw">
</div> </div>
</div> </div>

6
views/partials/publishForm-Url.handlebars
View file

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

20
views/partials/topBar.handlebars
View file

@ -1,20 +1,20 @@
<div class="row top-bar"> <div class="row nav-bar">
<a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a> <div class="column column--3 align-content-left">
<h1 id="title"><a href="/">Spee.ch</a></h1><span class="top-bar-left">(beta)</span> <a href="/"><span class="nav-bar-title">Spee.ch</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
<a href="/popular" class="top-bar-right">popular</a> </div><div class="column column--7 align-content-right">
<a href="https://github.com/lbryio/spee.ch" target="_blank" class="top-bar-right">source</a> <a class="nav-bar-link" href="/popular">popular</a>
<a href="/about" class="top-bar-right">help</a> <a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">source</a>
<a class="nav-bar-link" href="/about">about</a>
{{#if user}} {{#if user}}
<select type="text" class="select" onchange="toggleLogin(event)"> <select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
<option value="none">@{{user.userName}}</option> <option value="none">@{{user.userName}}</option>
<option value="view">view</option> <option value="view">view</option>
<option value="logout">logout</option> <option value="logout">logout</option>
</select> </select>
{{else}} {{else}}
<a href="/login" class="top-bar-right">login</a> <a class="nav-bar-link" href="/login">login</a>
{{/if}} {{/if}}
<div class="top-bar-tagline">Open-source, decentralized image and video hosting.</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">

5
views/partials/whatIsSpeech.handlebars
View file

@ -1,5 +0,0 @@
<h2>What Is Spee.ch?</h2>
<h3>Spee.ch is for sharing</h3>
<p>Spee.ch is a platform by which you can publish images to the Lbry blockchain. Just upload an image, title it, and send it off into the lbry blockchain.</p>
<p>Spee.ch is also a platform to serve you those images. It's like have a personal chef that will serve you a meal anywhere in the world. All you have to do is ask for it, by using "spee.ch/" + the name of a claim.</p>
<p>If you want a specific image, just ask for it with the claim_id by using "spee.ch/" + the name of the claim + "/" + the claim id.</p>

6
views/show.handlebars
View file

@ -1,4 +1,4 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div class="main"> <div class="main">
{{> asset}} {{> asset}}
@ -6,8 +6,8 @@
<div class="sidebar"> <div class="sidebar">
{{> assetInfo}} {{> assetInfo}}
</div> </div>
{{> footer}}
</div>
<script type ="text/javascript"> <script type ="text/javascript">
function copyToClipboard(event){ function copyToClipboard(event){

3
views/statistics.handlebars
View file

@ -1,4 +1,4 @@
<div class="wrapper">
<div class="top-bar"> <div class="top-bar">
{{> topBar}} {{> topBar}}
</div> </div>
@ -35,4 +35,3 @@
</table> </table>
</div> </div>
</div>

4
views/trending.handlebars
View file

@ -1,4 +1,4 @@
<div class="wrapper">
{{> topBar}} {{> topBar}}
<div> <div>
<h3>Popular</h3> <h3>Popular</h3>
@ -8,4 +8,4 @@
{{/each}} {{/each}}
</div> </div>
{{> footer}} {{> footer}}
</div>