Responsiveness for second hook
This commit is contained in:
ポール ウェッブ
parent
9920b6d20e
commit
04fbaa807a
2 changed files with 203 additions and 104 deletions
|
|
@ -9,45 +9,78 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="xs12 sm8">
|
||||
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
|
||||
<canvas id="meme-canvas" width="400" height="300">
|
||||
Sorry, canvas not supported
|
||||
</canvas>
|
||||
<div class="xs12 sm6">
|
||||
<div class="image-upload-container">
|
||||
<p>Upload a background image</p>
|
||||
<image-uploader
|
||||
:quality="0.8"
|
||||
:autoRotate=true
|
||||
:maxWidth="400"
|
||||
outputFormat="string"
|
||||
:preview=false
|
||||
@input="setImage"
|
||||
@onComplete="imageUploaded"
|
||||
></image-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xs12 sm4">
|
||||
<div class="form-container">
|
||||
<form>
|
||||
<input type="text" v-model="topLine" placeholder="Top line" required />
|
||||
<input type="text" v-model="bottomLine" placeholder="Bottom line" required />
|
||||
<input type="text" v-model="title" placeholder="Title" required />
|
||||
<input type="text" v-model="description" placeholder="Description" required />
|
||||
<input type="text" v-model="author" placeholder="Author" required />
|
||||
<input type="text" v-model="language" placeholder="Language" required />
|
||||
<input type="text" v-model="license" placeholder="License" required />
|
||||
<label><input type="checkbox" v-model="nsfw" name="nsfw" />NSFW</label>
|
||||
<input type="submit" class="__button-black" v-on:click="submit" value="Submit" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hook__page__content">
|
||||
<div class="inner-wrap">
|
||||
|
||||
<div class="xs12" v-if="isLoading">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<div class="hook__page__content__meme left">
|
||||
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image" alt=""/>
|
||||
<canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>
|
||||
|
||||
<div class="hook__page__content__meme__uploader">
|
||||
Upload an image
|
||||
<image-uploader
|
||||
:quality="0.8"
|
||||
:autoRotate=true
|
||||
:maxWidth="400"
|
||||
outputFormat="string"
|
||||
:preview=false
|
||||
@input="setImage"
|
||||
@onComplete="imageUploaded"
|
||||
></image-uploader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="hook__page__content__meme right">
|
||||
<fieldset>
|
||||
<label for="meme-top-line">Top line</label>
|
||||
<input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-bottom-line">Bottom line</label>
|
||||
<input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-title">Title</label>
|
||||
<input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-description">Description</label>
|
||||
<input name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-author">Author</label>
|
||||
<input name="meme-author" id="meme-author" type="text" v-model="author" placeholder="Author" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-language">Language</label>
|
||||
<input name="meme-language" id="meme-language" type="text" v-model="language" placeholder="Language" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-license">License</label>
|
||||
<input name="meme-license" id="meme-license" type="text" v-model="license" placeholder="License" required/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<input type="submit" class="__button-black" v-on:click="submit" value="Submit"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div class="xs12" v-if="isLoading">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
@ -142,61 +175,3 @@ export default {
|
|||
name: 'Step2'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
#step2-page {
|
||||
.sm8 {
|
||||
float: left;
|
||||
width: 66%;
|
||||
}
|
||||
.sm4 {
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
#meme-canvas {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
#base-image {
|
||||
left: -10000px;
|
||||
top: -10000px;
|
||||
position: absolute;
|
||||
}
|
||||
.image-upload-container {
|
||||
background: white;
|
||||
width: 80%;
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
p {
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
.form-container {
|
||||
input {
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
width: 80%;
|
||||
&[type='checkbox'] {
|
||||
margin: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
-moz-appearance: checkbox;
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
}
|
||||
label {
|
||||
text-align: left;
|
||||
display: block;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
#fileInput {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -162,10 +162,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hook__page__hero__claim {
|
||||
input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
.hook__page__hero__claim input {
|
||||
width: calc(100% - 10rem);
|
||||
}
|
||||
|
||||
.hook__page__hero__support {
|
||||
|
|
@ -188,10 +186,8 @@
|
|||
|
||||
|
||||
|
||||
.hook__page__content {
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
.hook__page__content::after {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.hook__page__content__card {
|
||||
|
|
@ -211,3 +207,131 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
@media (min-width: 701px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
img {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%; height: 100%;
|
||||
background-color: rgba($teal, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
margin-bottom: 0.025rem;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
@media (min-width: 901px) {
|
||||
&:not([type="checkbox"]):not([type="submit"]) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
&:not([type="checkbox"]):not([type="submit"]) {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
||||
border-bottom: 2px solid;
|
||||
padding-bottom: 0.15rem;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not([type="file"]):not([type="submit"]) {
|
||||
&:not(:hover):not(:active) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 0.35rem;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 100%;
|
||||
|
||||
content: "✓";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:not(:checked)::after {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hook__page__content__meme__uploader {
|
||||
@extend .__button-black;
|
||||
text-align: center;
|
||||
width: 11rem;
|
||||
|
||||
> div:first-of-type {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input {
|
||||
top: 0; left: 0;
|
||||
bottom: 0; right: 0;
|
||||
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue