re-organized publish components
This commit is contained in:
bill bittner
parent
c4e2975038
commit
7321b2c2f5
9 changed files with 108 additions and 98 deletions
|
|
@ -1,7 +1,3 @@
|
|||
|
||||
/* GENERAL */
|
||||
|
||||
|
||||
/* TEXT */
|
||||
|
||||
body, button, input, textarea, label, select, option {
|
||||
|
|
@ -137,49 +133,6 @@ h3 {
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* TOP BAR */
|
||||
|
||||
/* blocks */
|
||||
.nav-bar {
|
||||
|
||||
}
|
||||
|
||||
.nav-bar-title-section, .nav-bar-link-section {
|
||||
padding: 0px 1em 0px 1em;
|
||||
}
|
||||
|
||||
.nav-bar-title-section {
|
||||
overflow: hidden;
|
||||
border-bottom: 2px solid #eaeaea;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-bar-link-section {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* elements */
|
||||
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
|
||||
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.nav-bar-title--superscript {
|
||||
font-size: small;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.nav-bar-link {
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
.nav-bar-link:hover {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
/* ERROR MESSAGES */
|
||||
|
||||
.info-message {
|
||||
42
public/assets/css/navBar.css
Normal file
42
public/assets/css/navBar.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* NAV BAR */
|
||||
|
||||
/* blocks */
|
||||
.nav-bar {
|
||||
|
||||
}
|
||||
|
||||
.nav-bar-title-section, .nav-bar-link-section {
|
||||
padding: 0px 1em 0px 1em;
|
||||
}
|
||||
|
||||
.nav-bar-title-section {
|
||||
overflow: hidden;
|
||||
border-bottom: 2px solid #eaeaea;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-bar-link-section {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* elements */
|
||||
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
|
||||
padding: 1.5rem 0.5rem 1.5rem 0.5rem;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.nav-bar-title--superscript {
|
||||
font-size: small;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.nav-bar-link {
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
.nav-bar-link:hover {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
14
public/assets/css/publish.css
Normal file
14
public/assets/css/publish.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/* Publish Form */
|
||||
|
||||
/* blocks */
|
||||
.publish {
|
||||
|
||||
}
|
||||
|
||||
/* elements */
|
||||
.publish-dropzone {
|
||||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
height: 13em;
|
||||
background: #F5F0EF;
|
||||
}
|
||||
|
|
@ -1,12 +1,54 @@
|
|||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
|
||||
{{> topBar}}
|
||||
{{> publishForm}}
|
||||
<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}}
|
||||
{{> publishForm-Submit}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
<script src="/assets/js/validationFunctions.js"></script>
|
||||
<script src="/assets/js/publishFileFunctions.js"></script>
|
||||
<script type="text/javascript" >
|
||||
function resetPublishArea (){
|
||||
// reset file selection area
|
||||
document.getElementById('file-selection-area').innerHTML = `<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<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>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<div id="asset-preview-holder"></div>`;
|
||||
// reset inputs
|
||||
document.getElementById('claim-name-input').value = '';
|
||||
document.getElementById('publish-title').value = '';
|
||||
document.getElementById('publish-description').value = '';
|
||||
document.getElementById('publish-nsfw').checked = false;
|
||||
// remove staged files
|
||||
stagedFiles = null;
|
||||
// clear any errors
|
||||
document.getElementById('input-error-file-selection').innerHTML = '';
|
||||
document.getElementById('input-error-claim-name').innerHTML = '';
|
||||
document.getElementById('input-error-publish-submit').innerHTML = '';
|
||||
document.getElementById('input-success-claim-name').hidden = true;
|
||||
}
|
||||
</script>
|
||||
<script typ="text/javascript">
|
||||
// define variables
|
||||
var socket = io();
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Spee.ch</title>
|
||||
<link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/BEM.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/general.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/navBar.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/publish.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/mediaQueries.css" type="text/css">
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@lbryio" />
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Spee.ch</title>
|
||||
<link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/BEM.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/general.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/navBar.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/publish.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/mediaQueries.css" type="text/css">
|
||||
<meta property="fb:app_id" content="1371961932852223">
|
||||
{{#unless fileInfo.nsfw}}
|
||||
|
|
|
|||
3
views/partials/publishForm-Submit.handlebars
Normal file
3
views/partials/publishForm-Submit.handlebars
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<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>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<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" >
|
||||
function resetPublishArea (){
|
||||
// reset file selection area
|
||||
document.getElementById('file-selection-area').innerHTML = `<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<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>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<div id="asset-preview-holder"></div>`;
|
||||
// reset inputs
|
||||
document.getElementById('claim-name-input').value = '';
|
||||
document.getElementById('publish-title').value = '';
|
||||
document.getElementById('publish-description').value = '';
|
||||
document.getElementById('publish-nsfw').checked = false;
|
||||
// remove staged files
|
||||
stagedFiles = null;
|
||||
// clear any errors
|
||||
document.getElementById('input-error-file-selection').innerHTML = '';
|
||||
document.getElementById('input-error-claim-name').innerHTML = '';
|
||||
document.getElementById('input-error-publish-submit').innerHTML = '';
|
||||
document.getElementById('input-success-claim-name').hidden = true;
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue