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

Merge pull request #40 from lbryio/front-end-collapse-nav

Browse source 
Front end collapse nav
This commit is contained in:
Bill Bittner 2017-06-23 12:54:58 -07:00 committed by GitHub
commit 00847b1c9a
8 changed files with 98 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/assets/css/allStyle.css
View file

@ -78,4 +78,8 @@ h4 {
.stop-float {
clear: both;
}
.toggle-link {
float: right;
}

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

@ -45,8 +45,17 @@ canvas {
/* all claims */
.all-claims-item {
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
overflow: auto;
}
.all-claims-img {
height: 200px;
width: 20%;
float: left;
margin: 5px 30px 5px 0px;
}
/* footer */

19
public/assets/js/generalFunctions.js Normal file
View file

@ -0,0 +1,19 @@
function toggleSection(event){
event.preventDefault();
var dataSet = event.target.dataset;
var status = dataSet.open;
var masterElement = document.getElementById(event.srcElement.id);
var slaveElement = document.getElementById(dataSet.slaveelementid);
if (status === "false") {
slaveElement.hidden = false;
masterElement.innerText = "[close]";
masterElement.dataset.open = "true";
} else {
slaveElement.hidden = true;
masterElement.innerText = "[open]";
masterElement.dataset.open = "false";
}
console.log(status);
}

23
views/allClaims.handlebars
View file

@ -6,15 +6,22 @@
<h3>All Claims</h3>
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
{{#each claims}}
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" />
<div class="card card-block">
<p>claim_id: {{this.claim_id}}</p>
<p>direct link <a href="/{{this.name}}/{{this.claim_id}}">here</a></p>
<p>author: {{this.value.stream.metadata.author}}</p>
<p>description: {{this.value.stream.metadata.description}}</p>
<p>license: {{this.value.stream.metadata.license}}</p>
<div class="all-claims-item">
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" />
<div class="all-claims-details">
<ul style="list-style-type:none">
<li>claim: {{this.name}}</li>
<li>claim_id: {{this.claim_id}}</li>
<li>direct link: <a href="/{{this.name}}/{{this.claim_id}}">spee.ch/{{this.name}}/{{this.claim_id}}</a></li>
<li>author: {{this.value.stream.metadata.author}}</li>
<li>description: {{this.value.stream.metadata.description}}</li>
<li>license: {{this.value.stream.metadata.license}}</li>
</ul>
</div>
</div>
<hr>
{{/each}}
</div>
<div class="footer">
{{> footer}}
</div>
</div>

1
views/layouts/main.handlebars
View file

@ -10,6 +10,7 @@
</head>
<body>
{{{ body }}}
<script src="/assets/js/generalFunctions.js"></script>
<!-- google analytics -->
{{ googleAnalytics }}
</body>

48
views/partials/documentation.handlebars
View file

@ -1,23 +1,27 @@
<div class="panel">
<h2>Documentation</h2>
<strong>spee.ch/</strong>
<ul>
<li><a href="/">https://spee.ch</a></li>
<li>Learn about Spee.ch and publish your own media</li>
</ul>
<strong>spee.ch/&ltthe name of the claim&gt</strong>
<ul>
<li >Serves the newest file with the largest bid at a claim</li>
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
</ul>
<strong>spee.ch/&lt the name of the claim &gt/&lt the claim_id &gt</strong>
<ul>
<li >Serves a specific file at a claim</li>
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
</ul>
<strong>spee.ch/&ltthe name of the claim&gt/all</strong>
<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>
<h2>Documentation
<a class="toggle-link" id="documentation-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="documentation-detail">[open]</a>
</h2>
<div id="documentation-detail" hidden="true">
<strong>spee.ch/</strong>
<ul>
<li><a href="/">https://spee.ch</a></li>
<li>Learn about Spee.ch and publish your own media</li>
</ul>
<strong>spee.ch/&ltthe name of the claim&gt</strong>
<ul>
<li >Serves the newest file with the largest bid at a claim</li>
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
</ul>
<strong>spee.ch/&lt the name of the claim &gt/&lt the claim_id &gt</strong>
<ul>
<li >Serves a specific file at a claim</li>
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
</ul>
<strong>spee.ch/&ltthe name of the claim&gt/all</strong>
<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>

40
views/partials/examples.handlebars
View file

@ -1,23 +1,27 @@
<div class="panel">
<h2>What is spee.ch? </h2>
<p>Spee.ch is an image hosting service based on the LBRY blockchain. It reads and publishes free, public images.</p>
<div class="example">
<h4>Use spee.ch to embed a specific image:</h4>
<img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/>
<span class="code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</span>
<p><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></p>
</div>
<div class="example">
<h4>Use spee.ch to serve a top LBRY claim:</h4>
<img class="example-image" src="/doitlive"/>
<span class="code">&lt;img src="https://spee.ch/doitlive"/&gt;</span>
<p><a href="/doitlive">spee.ch/doitlive</a></p>
</div>
<div class="example">
<h4>Use spee.ch to view all the assets at a LBRY claim:</h4>
<h2>What is spee.ch?
<a class="toggle-link" id="examples-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="examples-detail">[open]</a>
</h2>
<div id="examples-detail" hidden="true">
<p>Spee.ch is an image hosting service based on the LBRY blockchain. It reads and publishes free, public images.</p>
<div class="example">
<a href="/doitlive/all">spee.ch/doitlive/all</a>
<h4>Use spee.ch to embed a specific image:</h4>
<img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/>
<span class="code">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</span>
<p><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></p>
</div>
<div class="example">
<h4>Use spee.ch to serve a top LBRY claim:</h4>
<img class="example-image" src="/doitlive"/>
<span class="code">&lt;img src="https://spee.ch/doitlive"/&gt;</span>
<p><a href="/doitlive">spee.ch/doitlive</a></p>
</div>
<div class="example">
<h4>Use spee.ch to view all the assets at a LBRY claim:</h4>
<div class="example">
<a href="/doitlive/all">spee.ch/doitlive/all</a>
</div>
</div>
</div>
</div>

2
views/partials/whatIsSpeech.handlebars
View file

@ -1,5 +1,5 @@
<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 ecosystem.</p>
<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>