Redesign 1 bcrypt #226
6 changed files with 149 additions and 122 deletions
|
|
@ -172,6 +172,7 @@ input:-webkit-autofill {
|
|||
.select--no-arrow {
|
||||
-moz-appearance:none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select--arrow {
|
||||
|
|
@ -190,6 +191,16 @@ input:-webkit-autofill {
|
|||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.input-text--large, .select--large, .textarea--large {
|
||||
font-size: 2rem;
|
||||
border-left: 1px solid dodgerblue;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.input-text--large:focus, .select--large:focus, .textarea--large:focus {
|
||||
border-left: 1px solid grey;
|
||||
}
|
||||
|
||||
.input-checkbox, .input-textarea {
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
|
@ -220,6 +231,10 @@ input:-webkit-autofill {
|
|||
/* BUTTONS */
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
border: 1px solid black;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0.3em 0.5em 0.3em;
|
||||
|
|
@ -227,18 +242,31 @@ button {
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
.button--primary:hover {
|
||||
border: 1px solid dodgerblue;
|
||||
color: white;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
button:active{
|
||||
.button--primary:active{
|
||||
border: 1px solid dodgerblue;
|
||||
color: white;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.button--large{
|
||||
margin: 0px;
|
||||
width: calc(100% - 2px);
|
||||
padding: 2rem;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.button--cancel{
|
||||
border: 0px;
|
||||
background-color: white;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* TABLES */
|
||||
|
||||
table {
|
||||
|
|
@ -246,6 +274,101 @@ table {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
/* NAV BAR */
|
||||
|
||||
.nav-bar {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.nav-bar-logo, .nav-bar-title, .nav-bar-link {
|
||||
padding: 2rem 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--active {
|
||||
color: #1e90ff;
|
||||
border-bottom: 2px solid #1e90ff;
|
||||
}
|
||||
|
||||
/* Publish Form */
|
||||
|
||||
#publish-dropzone-wrapper, #publish-form-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#publish-dropzone {
|
||||
border: 2px dashed lightgrey;
|
||||
height: calc(100% - 2px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#publish-dropzone:hover {
|
||||
border: 2px dashed dodgerblue;
|
||||
}
|
||||
|
||||
#publish-dropzone-instructions {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-40%);
|
||||
}
|
||||
|
||||
.asset-preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Show page */
|
||||
|
||||
.asset-display {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copy-input {
|
||||
|
||||
}
|
||||
|
||||
/* item lists */
|
||||
|
||||
.content-list-item {
|
||||
|
||||
}
|
||||
|
||||
.content-list-item-asset {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.content-list-item-link {
|
||||
|
||||
}
|
||||
|
||||
/* other */
|
||||
|
||||
.toggle-link {
|
||||
|
|
@ -254,4 +377,5 @@ table {
|
|||
|
||||
.wrap-words {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
/* NAV BAR */
|
||||
|
||||
/* blocks */
|
||||
.nav-bar {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.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: 2rem 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--active {
|
||||
color: #1e90ff;
|
||||
border-bottom: 2px solid #1e90ff;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* Publish Form */
|
||||
|
||||
#publish-dropzone-wrapper, #publish-form-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#publish-dropzone {
|
||||
border: 2px dashed lightgrey;
|
||||
height: calc(100% - 2px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#publish-dropzone:hover {
|
||||
border: 2px dashed dodgerblue;
|
||||
}
|
||||
|
||||
#publish-dropzone-instructions {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-40%);
|
||||
}
|
||||
|
||||
.asset-preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Show page */
|
||||
|
||||
.asset-display {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copy-input {
|
||||
|
||||
}
|
||||
|
||||
/* item lists */
|
||||
|
||||
.content-list-item {
|
||||
|
||||
}
|
||||
|
||||
.content-list-item-asset {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.content-list-item-link {
|
||||
|
||||
}
|
||||
|
|
@ -16,11 +16,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="publish-form-wrapper" hidden="true">
|
||||
<div class="column column--4 align-content-top" >
|
||||
<div id="asset-preview-holder" class="asset-show"></div>
|
||||
</div><div class="column column--1" ></div><div class="column column--5 align-content-top">
|
||||
<div id="publish-status" hidden="true"></div>
|
||||
<div id="publish-progress-bar" hidden="true"></div>
|
||||
<div class="column column--10">
|
||||
<!-- title input -->
|
||||
<input type="text" id="publish-title" class="input-text input-text--large" placeholder="Title (optional)">
|
||||
</div>
|
||||
<div class="column column--5 align-content-top" >
|
||||
<!-- preview -->
|
||||
<div class="row">
|
||||
<div id="asset-preview-holder" class="asset-show"></div>
|
||||
</div>
|
||||
<!-- description input -->
|
||||
<textarea rows="3" id="publish-description" class="textarea textarea--large" placeholder="Description (optional)"></textarea>
|
||||
|
||||
</div><div class="column column--5 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">
|
||||
{{> publishForm-Channel}}
|
||||
{{> publishForm-Url}}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,5 @@
|
|||
<div id="details-detail" hidden="true">
|
||||
|
||||
<div class="row row--short">
|
||||
<div class="column column--4">
|
||||
<label for="publish-title" class="label">Title: </label>
|
||||
</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--4">
|
||||
<label for="publish-description" class="label">Description: </label>
|
||||
</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--4">
|
||||
<label for="publish-license" class="label">License:* </label>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<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 class="row">
|
||||
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
|
||||
<button id="publish-submit" class="button--primary button--large" onclick="publishSelectedImage(event)">Upload</button>
|
||||
</div>
|
||||
<div class="row row--short align-content-center">
|
||||
<button class="button--cancel" onclick="resetPublishArea()">Cancel</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" >
|
||||
function resetPublishArea () {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue