fixed file select button and top nav
This commit is contained in:
parent
b10bdd38ed
commit
a294854786
12 changed files with 77 additions and 41 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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
BIN
public/assets/img/down_triangle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 184 B |
BIN
public/assets/img/upload_arrow.png
Normal file
BIN
public/assets/img/upload_arrow.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 195 B |
|
@ -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>
|
||||
|
|
|
@ -7,8 +7,11 @@
|
|||
<div id="publish-dropzone-instructions">
|
||||
<p>Drag & drop image or video here</p>
|
||||
<p>OR</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"/>
|
||||
<form>
|
||||
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
||||
<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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)">
|
||||
|
|
|
@ -2,12 +2,13 @@
|
|||
<div class="nav-bar-title-section">
|
||||
<a href="/"><span class="nav-bar-title">spee<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>
|
|
@ -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}}
|
||||
|
|
Loading…
Reference in a new issue