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

fixed top bar

Browse source
This commit is contained in:
bill bittner 2017-09-29 14:11:00 -07:00
parent 08e3680969
commit c4e2975038
10 changed files with 92 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
public/assets/css/BEM.css
View file

@ -22,18 +22,24 @@ p {
padding:0px;
}
.block-quote {
font-size: 4rem;
.pull-quote {
font-size: 3rem;
}
/* LINKS */
a, a:visited {
text-decoration: none;
}
/* HEADERS */
h1 {
font-size: x-large;
font-size: xx-large;
}
h2 {
font-size: medium;
font-size: x-large;
margin-top: 1em;
border-top: 1px #999 solid;
background-color: lightgray;
@ -41,32 +47,8 @@ h2 {
}
h3 {
color: black;;
font-size: large;
font-weight: normal;
font-size: 1rem;
}
.h3--secondary {
color: lightgray;
}
h4 {
padding: 3px;
}
/* CONTAINERS */
footer {
display: inline-block;
width: 100%;
margin-bottom: 2px;
padding-bottom: 2px;
border-bottom: 1px lightgrey solid;
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
text-align: center;
color: grey;
}
/* COLUMNS AND ROWS */
@ -170,26 +152,19 @@ footer {
overflow: hidden;
border-bottom: 2px solid #eaeaea;
position: relative;
z-index: 2;
}
.nav-bar-link-section {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}
/* elements */
.nav-bar-title, .nav-bar-link {
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
}
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
display: inline-block;
}
.nav-bar-title {
font-size: 1.5em;
color: black;
}
@ -199,20 +174,10 @@ footer {
}
.nav-bar-link {
border-bottom: 1px solid #eaeaea;
border-bottom: 2px solid white;
}
.nav-bar-link:hover {
background-color: yellow;
border-bottom: 1px solid blue;
}
/* LINKS */
a, a:visited {
color: blue;
text-decoration: none;
border-bottom: 2px solid blue;
}
/* ERROR MESSAGES */

2
routes/page-routes.js
View file

@ -31,7 +31,7 @@ module.exports = (app) => {
getTrendingClaims(dateTime)
.then(result => {
// logger.debug(result);
res.status(200).render('trending', {
res.status(200).render('popular', {
trendingAssets: result,
});
})

2
views/about.handlebars
View file

@ -2,7 +2,7 @@
<div class="row">
<div class="column column--5 align-content-top">
<div class="row">
<span class="block-quote">Open-source, decentralized image and video hosting</span>
<span class="pull-quote">Open-source, decentralized image and video hosting</span>
</div>
<div class="row">
<p>

25
views/login.handlebars
View file

@ -1,21 +1,14 @@
{{> topBar}}
{{> topBar}}
<h2>Log In</h2>
<div class="row row--wide">
<div class="column column--6">
<p>Log in to an existing channel:</p>
{{>channelLoginForm}}
</div>
<div class="row">
<div class="column column--5 align-content-top">
<p>Log in to an existing channel:</p>
{{>channelLoginForm}}
</div><div class="column column--5 align-content-top">
<p>Create a brand new channel:</p>
{{>channelCreationForm}}
</div>
<h2>Create New</h2>
<div class="row row--wide">
<div class="column column--6">
<p>Create a brand new channel:</p>
{{>channelCreationForm}}
</div>
</div>
</div>
<script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/validationFunctions.js"></script>

22
views/partials/channelCreationForm.handlebars
View file

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

36
views/partials/channelLoginForm.handlebars
View file

@ -1,28 +1,28 @@
<form id="channel-login-form">
<div class="column column--3">
<label class="label" for="login-channel-name">Name:</label>
</div>
<div class="column column--7">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
<div class="input-text--primary">
<span>@</span>
<input type="text" name="login-channel-name" id="login-channel-name" class="input-text" placeholder="" value="">
<div class="row row--wide">
<div class="column column--3">
<label class="label" for="login-channel-name">Name:</label>
</div><div class="column column--4">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
<div class="input-text--primary">
<span>@</span>
<input type="text" name="login-channel-name" id="login-channel-name" class="input-text" placeholder="" value="">
</div>
</div>
</div>
<div class="column column--3">
<label class="label" for="login-channel-password" >Password:</label>
<div class="row row--wide">
<div class="column column--3">
<label class="label" for="login-channel-password" >Password:</label>
</div><div class="column column--4">
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
</div>
</div>
<div class="column column--7">
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
<div class="row row--wide">
<button onclick="loginToChannel(event)">Login</button>
</div>
</form>
<div class="row row--wide">
<button onclick="loginToChannel(event)">Login</button>
</div>
<script type="text/javascript">
function loginToChannel (event) {

58
views/partials/publishForm.handlebars
View file

@ -1,40 +1,24 @@
<div class="panel">
<h2>Publish</h2>
<div class="row">
<div class="col-left">
<div id="file-selection-area">
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<div class="row">
<p>Drag and drop your file here, or choose your file below.</p>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
<div class="row">
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</div>
</div>
<div id="asset-preview-holder"></div>
</div>
</div>
<div class="col-right">
<div id="publish-active-area">
{{> publishForm-Channel}}
{{> publishForm-Url}}
{{> publishForm-Details}}
<div class="row">
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
<button onclick="resetPublishArea()">Reset</button>
</div>
</div>
</div>
</div>
<div class="row" id="file-selection-area">
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<div class="row">
<p>Drag and drop your file here, or choose your file below.</p>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
<div class="row">
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</div>
</div>
</div>
<div class="row">
<div class="column column--5" id="asset-preview-holder"></div>
<div class="column column--5" id="publish-active-area">
{{> publishForm-Channel}}
{{> publishForm-Url}}
{{> publishForm-Details}}
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
<button onclick="resetPublishArea()">Reset</button>
</div>
</div>
<script type="text/javascript" >

13
views/partials/topBar.handlebars
View file

@ -1,17 +1,18 @@
<div class="row-wide nav-bar">
<div class="nav-bar-title-section">
<a href="/"><span class="nav-bar-title">Spee.ch</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
<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="https://github.com/lbryio/spee.ch" target="_blank">source</a>
<a class="nav-bar-link" href="/about">about</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>
<option value="view">view</option>
<option value="logout">logout</option>
<option value="view">View</option>
<option value="logout">Logout</option>
</select>
{{else}}
<a class="nav-bar-link" href="/login">login</a>
<a class="nav-bar-link" href="/login">Login</a>
{{/if}}
</div>
</div>

9
views/popular.handlebars Normal file
View file

@ -0,0 +1,9 @@
{{> topBar}}
<div>
<h3>Popular</h3>
<p>Below are the 25 most popular items on spee.ch</p>
{{#each trendingAssets}}
{{> contentListItem}}
{{/each}}
</div>

11
views/trending.handlebars
View file

@ -1,11 +0,0 @@
{{> topBar}}
<div>
<h3>Popular</h3>
<p>Below are the 25 most popular items on spee.ch</p>
{{#each trendingAssets}}
{{> contentListItem}}
{{/each}}
</div>
{{> footer}}