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

fixed file select button and top nav

Browse source
This commit is contained in:
bill bittner 2017-10-02 16:23:09 -07:00
parent b10bdd38ed
commit a294854786
12 changed files with 77 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,9 +52,8 @@ h3 {
.row {
clear: both;
padding: 1em 2% 1em 2%;
padding: 2rem 2rem 2rem 2rem;
margin: 0px;
}
.row--wide {
@ -63,13 +62,12 @@ h3 {
}
.row--short {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-top: 0px;
padding-bottom: 0px;
}
.row--full-height {
padding: 2em;
height: calc(100% - 4rem - 4.5rem - 4px);
height: calc(100% - 9rem);
}
.column {
@ -160,13 +158,25 @@ input:-webkit-autofill {
}
.label, .input-text, .select, .textarea {
font-size: medium;
padding: 0.3em;
outline: none;
border: 0px;
background-color: white;
}
.select--no-arrow {
-moz-appearance:none;
-webkit-appearance: none;
}
.select--arrow {
-moz-appearance:none;
-webkit-appearance: none;
align-items: left;
background: url('../img/down_triangle.png') no-repeat right;
}
.input-text--primary, .select--primary, .textarea--primary {
border-bottom: 1px solid dodgerblue;
}
@ -179,6 +189,21 @@ input:-webkit-autofill {
border: 1px solid grey;
}
.input-file-label {
color: dodgerblue;
text-decoration: underline;
cursor: pointer;
}
.input-file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.input-disabled {
border: 1px solid black;
padding: 0.5em;

9
public/assets/css/navBar.css
View file

@ -2,7 +2,7 @@
/* blocks */
.nav-bar {
height: 4.5rem;
height: 5rem;
}
.nav-bar-title-section, .nav-bar-link-section {
@ -24,7 +24,7 @@
/* elements */
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
padding: 2rem 0.5rem 1.5rem 0.5rem;
display: inline-block;
color: black;
}
@ -37,6 +37,7 @@
.nav-bar-link {
border-bottom: 2px solid white;
}
.nav-bar-link:hover {
border-bottom: 2px solid dodgerblue;
.nav-bar-link--active {
color: #1e90ff;
border-bottom: 2px solid #1e90ff;
}

9
public/assets/css/publish.css
View file

@ -5,13 +5,16 @@
}
#publish-dropzone {
border: 2px dashed darkgrey;
background: #F5F0EF;
border: 2px dashed dodgerblue;
height: calc(100% - 2px);
position: relative;
}
#publish-dropzone-instructions {
margin-top: 20%;
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%) translateY(-40%);
}
.asset-preview {

BIN
public/assets/img/down_triangle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 B

BIN
public/assets/img/upload_arrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 195 B

4
views/about.handlebars
View file

@ -1,7 +1,7 @@
{{> topBar}}
<div class="row row--full-height">
<div class="column column--5 align-content-top">
<div class="row">
<div class="row row--short">
<span class="pull-quote">Open-source, decentralized image and video hosting</span>
</div>
<div class="row">
@ -16,7 +16,7 @@
</p>
</div>
</div><div class="column column--5 align-content-top">
<div class="row">
<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>

5
views/index.handlebars
View file

@ -7,8 +7,11 @@
<div id="publish-dropzone-instructions">
<p>Drag & drop image or video here</p>
<p>OR</p>
<form>
<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"/>
<label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
<input class=" input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</form>
</div>
</div>
</div>

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

@ -1,10 +1,9 @@
<div class="row">
<div class="column column--3">
<div class="column column--4">
<label class="label" for="channel-name-select">Channel:</label>
</div>
<div class="column column--7">
</div><div class="column column--6">
<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 select--arrow" value="channel" onchange="toggleChannel(event)">
<optgroup>
{{#if user}}
<option value="{{user.channelName}}" >@{{user.userName}}</option>

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

@ -1,28 +1,25 @@
<div id="details-detail" hidden="true">
<div class="row row--short">
<div class="column column--3">
<div class="column column--4">
<label for="publish-title" class="label">Title: </label>
</div>
<div class="column column--7">
</div><div class="column column--6">
<input type="text" id="publish-title" class="input-text input-text--primary">
</div>
</div>
<div class="row row--short">
<div class="column column--3">
<div class="column column--4">
<label for="publish-description" class="label">Description: </label>
</div>
<div class="column column--7">
</div><div class="column column--6">
<textarea rows="2" id="publish-description" class="input-textarea"></textarea>
</div>
</div>
<div class="row row--short">
<div class="column column--3">
<div class="column column--4">
<label for="publish-license" class="label">License:* </label>
</div>
<div class="column column--7">
</div><div class="column column--6">
<select type="text" id="publish-license" class="select select--primary">
<option value="Public Domain">Public Domain</option>
<option value="Creative Commons">Creative Commons</option>
@ -31,10 +28,9 @@
</div>
<div class="row row--short">
<div class="column column--3">
<div class="column column--4">
<label for="publish-nsfw" class="label">NSFW*</label>
</div>
<div class="column column--7">
</div><div class="column column--6">
<input class="input-checkbox" type="checkbox" id="publish-nsfw">
</div>
</div>

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

@ -1,10 +1,8 @@
<div class="row">
<div class="column column--3">
<div class="column column--4">
<label class="label">URL:</label>
</div>
<div class="column column--7">
</div><div class="column column--6">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
<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)">

15
views/partials/topBar.handlebars
View file

@ -2,12 +2,13 @@
<div class="nav-bar-title-section">
<a href="/"><span class="nav-bar-title">spee&lt;h</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
<div class="nav-bar-link-section">
<a class="nav-bar-link" href="/">Upload</a>
<a class="nav-bar-link" href="/popular">Popular</a>
<a class="nav-bar-link" href="/about">About</a>
<a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">Source</a>
{{#if user}}
<select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
<option value="none">@{{user.userName}}</option>
<select type="text" class="select select--no-arrow nav-bar-link" onchange="toggleLogin(event)">
<option value="{{user.channelName}}:{{user.channelClaimId}}">@{{user.userName}}</option>
<option value="view">View</option>
<option value="logout">Logout</option>
</select>
@ -32,4 +33,14 @@
window.location.href = '/{{user.channelName}}:{{user.channelClaimId}}';
}
}
// highlight the link for the current page
const navBarLinks = document.getElementsByClassName('nav-bar-link');
for (let i = 0; i < navBarLinks.length; i++){
const link = navBarLinks[i];
if (link.href == window.location.href) {
link.setAttribute('class', 'nav-bar-link nav-bar-link--active');
} else if (`/${link.value}` === window.location.pathname) {
link.setAttribute('class', 'select select--no-arrow nav-bar-link nav-bar-link--active');
}
}
</script>

2
views/popular.handlebars
View file

@ -1,5 +1,5 @@
{{> topBar}}
<div>
<div class="row">
<h3>Popular</h3>
<p>Below are the 25 most popular items on spee.ch</p>
{{#each trendingAssets}}