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

added media queries

Browse source
This commit is contained in:
bill bittner 2017-10-03 16:26:43 -07:00
parent 47fda21e03
commit a54e7c6c2c
12 changed files with 95 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@ html, body {
body, button, input, textarea, label, select, option {
font-family: monospace;
font-size: large;
word-wrap: break-word;
}
p {
@ -162,6 +163,7 @@ h3 {
/* INPUT FIELDS */
/* blocks */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
@ -174,10 +176,38 @@ input:-webkit-autofill {
background-color: white;
}
.input-disabled {
border: 1px solid black;
padding: 0.5em;
margin: 0px;
color: black;
background-color: white;
}
option {
font-family: monospace;
}
.input-checkbox, .input-textarea {
border: 1px solid grey;
}
.input-file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.input-file-label {
color: dodgerblue;
text-decoration: underline;
cursor: pointer;
}
.select--no-arrow {
-moz-appearance:none;
-webkit-appearance: none;
@ -191,6 +221,7 @@ option {
padding-right: 1em;
}
/* modifiers */
.input-text--primary, .select--primary, .textarea--primary {
border-bottom: 1px solid dodgerblue;
}
@ -212,31 +243,8 @@ option {
width: calc(100% - 0.6em);
}
.input-checkbox, .input-textarea {
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;
margin: 0.5em 0.3em 0.5em 0.3em;
color: black;
background-color: white;
.input-disabled--full-width {
width: calc(100% - 1em - 2px);
}
/* BUTTONS */

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

@ -18,32 +18,38 @@
}
@media (max-width: 750px ) {
.col-left, .col-right {
float: none;
margin: 0px;
padding: 0px;
.column--med-10 {
width: 100%;
}
.col-right {
padding-top: 20px;
}
.all-claims-asset {
width:30%;
}
.all-claims-details {
font-size: small;
}
.show-asset-lite {
width: 100%;
}
.top-bar-tagline {
clear: both;
text-align: left;
width: 100%;
.h2--top {
margin-top: 1em;
}
}
@media (max-width: 475px) {
.nav-bar {
height: 8rem;
}
.nav-bar-title {
padding-bottom: 0px;
}
.nav-bar-link-section {
position: relative;
padding-left: 0px;
}
.row--full-height {
height: calc(100% - 11rem);
}
.column--sml-10 {
width: 100%;
}
}

4
views/about.handlebars
View file

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

5
views/index.handlebars
View file

@ -22,7 +22,7 @@
<!-- title input -->
<input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Title (optional)">
</div>
<div class="column column--5 align-content-top" >
<div class="column column--5 column--med-10 align-content-top" >
<!-- preview -->
<div class="row">
<div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()">
@ -36,14 +36,13 @@
<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 class="info-message info-message--failure" id="" hidden="true"></div>
</div>
</div>
</div>
<!-- description input -->
<textarea rows="2" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea>
</div><div class="column column--5 align-content-top">
</div><div class="column column--5 column--med-10 align-content-top">
<div id="publish-status" class="row" hidden="true"></div>
<div id="publish-progress-bar" class="row" hidden="true"></div>
<div id="publish-active-area">

4
views/login.handlebars
View file

@ -1,10 +1,10 @@
{{> topBar}}
<div class="row row--full-height">
<div class="column column--5 align-content-top">
<div class="column column--5 column--med-10 align-content-top">
<p>Log in to an existing channel:</p>
{{>channelLoginForm}}
</div><div class="column column--5 align-content-top">
</div><div class="column column--5 column--med-10 align-content-top">
<p>Create a brand new channel:</p>
{{>channelCreationForm}}
</div>

14
views/partials/assetInfo.handlebars
View file

@ -6,26 +6,26 @@
{{!-- short direct link to asset --}}
<div class="row row--short">
<div class="column column--7">
<a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a>
<p><a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a></p>
<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
<br/>
<input type="text" id="short-link" class="input-disabled" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
</div><div class="column column--3">
<input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
</div><div class="column column--1"></div><div class="column column--2">
<button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
</div>
</div>
{{!-- html text for embedding asset--}}
<div class="row row--short">
<div class="column column--7">
Embed HTML
<p>Embed HTML</p>
<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
<br/>
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<input type="text" id="embed-text" class="input-disabled" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
{{else}}
<input type="text" id="embed-text" class="input-disabled" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" />'/>
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
{{/ifConditional}}
</div><div class="column column--3">
</div><div class="column column--1"></div><div class="column column--2">
<button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
</div>
</div>

8
views/partials/channelCreationForm.handlebars
View file

@ -1,9 +1,9 @@
<form id="publish-channel-form">
<div class="row row--wide">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label class="label" for="new-channel-name">Name:</label>
</div><div class="column column--6">
</div><div class="column column--6 column--sml-10">
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
<div class="input-text--primary">
<span>@</span>
@ -13,9 +13,9 @@
</div>
</div>
<div class="row row--wide">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label class="label" for="new-channel-password">Password:</label>
</div><div class="column column--6">
</div><div class="column column--6 column--sml-10">
<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">
</div>

8
views/partials/channelLoginForm.handlebars
View file

@ -1,9 +1,9 @@
<form id="channel-login-form">
<div class="row row--wide">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label class="label" for="login-channel-name">Name:</label>
</div><div class="column column--6">
</div><div class="column column--6 column--sml-10">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
<div class="input-text--primary">
<span>@</span>
@ -12,9 +12,9 @@
</div>
</div>
<div class="row row--wide">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label class="label" for="login-channel-password" >Password:</label>
</div><div class="column column--6">
</div><div class="column column--6 column--sml-10">
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
</div>
</div>

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

@ -1,7 +1,7 @@
<div class="row">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label class="label" for="channel-name-select">Channel:</label>
</div><div class="column column--7">
</div><div class="column column--7 column--sml-10">
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
<select type="text" id="channel-name-select" class="select select--primary select--arrow" value="channel" onchange="toggleChannel(event)">
{{#if user}}

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

@ -1,9 +1,9 @@
<div id="details-detail" hidden="true">
<div class="row">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label for="publish-license" class="label">License:* </label>
</div><div class="column column--7">
</div><div class="column column--7 column--sml-10">
<select type="text" id="publish-license" class="select select--primary">
<option value="Public Domain">Public Domain</option>
<option value="Creative Commons">Creative Commons</option>
@ -12,16 +12,16 @@
</div>
<div class="row">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label for="publish-nsfw" class="label">NSFW*</label>
</div><div class="column column--7">
</div><div class="column column--7 column--sml-10">
<input class="input-checkbox" type="checkbox" id="publish-nsfw">
</div>
</div>
</div>
<div class="row">
<div class="column column--12">
<div class="column column--10">
<a class="label" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="details-detail">[more]</a>
</div>
</div>

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

@ -1,8 +1,8 @@
<div class="row">
<div class="column column--3">
<div class="column column--3 column--sml-10">
<label class="label">URL:</label>
</div><div class="column column--6">
</div><div class="column column--6 column--sml-10">
<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)">

4
views/show.handlebars
View file

@ -1,9 +1,9 @@
{{> topBar}}
<div class="row">
<div class="column column--6 align-content-top">
<div class="column column--6 column--med-10 align-content-top">
{{> asset}}
</div><div class="column column--4 align-content-top">
</div><div class="column column--4 column--med-10 align-content-top">
<div class="row row--short">
{{> assetInfo}}
</div>