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

updated row spacing and channel layout

Browse source
This commit is contained in:
bill bittner 2017-10-19 18:55:15 -07:00
parent 524ec39f2f
commit c616ece1f9
6 changed files with 74 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/css/general.css
View file

@ -25,7 +25,7 @@ html, body {
/* TEXT */
body, button, input, textarea, label, select, option {
body, button, input, textarea, label, select, option, p {
font-family: 'Lekton', monospace;
font-size: medium;
word-wrap: break-word;

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

@ -16,12 +16,17 @@
display: none;
}
.row--narrow {
margin: 0px;
padding: 0px;
}
}
@media (max-width: 750px ) {
body, button, input, textarea, label, select, option {
body, button, input, textarea, label, select, option, p {
font-size: medium;
}
@ -65,7 +70,7 @@
@media (max-width: 450px) {
body, button, input, textarea, label, select, option, .publish-fine-print {
body, button, input, textarea, label, select, option, p, .publish-fine-print {
font-size: small;
}
@ -74,9 +79,9 @@
}
.grid-item {
width: 100%;
width: calc(100% - 2em);
float: none;
padding-bottom: 2rem;
padding: 1em;
margin: 0px;
}
@ -84,12 +89,12 @@
@media (max-width: 360px) {
body, button, input, textarea, label, select, option, .publish-fine-print {
body, button, input, textarea, label, select, option, p, .publish-fine-print, .instructions-text--large {
font-size: x-small;
}
.instructions-text--large, .pull-quote, .input-text--large, .button--large {
font-size: x-small;
.pull-quote, .input-text--large, .button--large {
font-size: small;
}
}

48
views/about.handlebars
View file

@ -1,26 +1,28 @@
<div class="row row--full-height row--narrow">
<div class="column column--5 column--med-10 align-content-top">
<div class="row">
<span class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</span>
</div>
<div class="row">
<p>
<a target="_blank" href="https://github.com/lbryio/spee.ch">GITHUB</a>
</p>
<p>
<a target="_blank" href="https://slack.lbry.io/">SLACK CHANNEL</a>
</p>
<p>
<a target="_blank" href="https://github.com/lbryio/spee.ch/blob/master/README.md">DOCUMENTATION</a>
</p>
</div>
</div><div class="column column--5 column--med-10 align-content-top">
<div class="row row--short">
<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>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 class="row row--narrow">
<div class="row">
<div class="column column--5 column--med-10 align-content-top">
<div class="row">
<span class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</span>
</div>
<div class="row">
<p>
<a target="_blank" href="https://github.com/lbryio/spee.ch">GITHUB</a>
</p>
<p>
<a target="_blank" href="https://slack.lbry.io/">SLACK CHANNEL</a>
</p>
<p>
<a target="_blank" href="https://github.com/lbryio/spee.ch/blob/master/README.md">DOCUMENTATION</a>
</p>
</div>
</div><div class="column column--5 column--med-10 align-content-top">
<div class="row row--short">
<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>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>
</div>

49
views/channel.handlebars
View file

@ -1,32 +1,31 @@
<div class="row row--full-height row--narrow">
<div class="column column--10">
<h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
</div>
<div class="grid">
{{#each this.claims}}
{{> gridItem}}
{{/each}}
</div>
<div class="row">
<div class="column column--3 align-content--left">
<a href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a>
</div><div class="column column--4 align-content-center">
{{#if this.previousPage}}
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.previousPage}}">Previous</a>
{{else}}
<a disabled>Previous </a>
{{/if}}
|
{{#if this.nextPage}}
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.nextPage}}">Next</a>
{{else}}
<a disabled>Next</a>
{{/if}}
</div><div class="column column--3 align-content-right">
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
<h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
<div class="grid">
{{#each this.claims}}
{{> gridItem}}
{{/each}}
</div>
<div class="row">
<div class="column column--3 align-content--left">
<a href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a>
</div><div class="column column--4 align-content-center">
{{#if this.previousPage}}
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.previousPage}}">Previous</a>
{{else}}
<a disabled>Previous </a>
{{/if}}
|
{{#if this.nextPage}}
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.nextPage}}">Next</a>
{{else}}
<a disabled>Next</a>
{{/if}}
</div><div class="column column--3 align-content-right">
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
</div>
</div>
</div>
</div>
<script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script>

12
views/login.handlebars
View file

@ -1,12 +1,12 @@
<div class="row row--full-height row--narrow">
<div class="row row--wide">
<p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting <a target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div>
<div class="row row--wide">
<div class="column column--5 column--med-10 align-content-top">
<div class="column column--5 column--med-10 align-content-top">
<div class="row">
<p class="pull-quote">Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting <a target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div>
</div><div class="column column--5 column--med-10 align-content-top">
<div class="row">
<h3>Log in to an existing channel:</h3>
{{>channelLoginForm}}
</div><div class="column column--5 column--med-10 align-content-top">
<h3>Create a brand new channel:</h3>
{{>channelCreationForm}}
</div>

10
views/popular.handlebars
View file

@ -1,8 +1,10 @@
<div class="row row--narrow">
<div class="grid">
{{#each trendingAssets}}
{{> gridItem}}
{{/each}}
<div class="row">
<div class="grid">
{{#each trendingAssets}}
{{> gridItem}}
{{/each}}
</div>
</div>
</div>