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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="xs12 sm8">
|
<aside class="hook__page__content">
|
||||||
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
|
<div class="inner-wrap">
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="xs12" v-if="isLoading">
|
<div class="hook__page__content__meme left">
|
||||||
<div class="loader"></div>
|
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image" alt=""/>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -142,61 +175,3 @@ export default {
|
||||||
name: 'Step2'
|
name: 'Step2'
|
||||||
};
|
};
|
||||||
</script>
|
</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 {
|
.hook__page__hero__claim input {
|
||||||
input {
|
width: calc(100% - 10rem);
|
||||||
width: calc(100% - 10rem);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hook__page__hero__support {
|
.hook__page__hero__support {
|
||||||
|
|
@ -188,10 +186,8 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.hook__page__content {
|
.hook__page__content::after {
|
||||||
&::after {
|
@include clearfix;
|
||||||
@include clearfix;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hook__page__content__card {
|
.hook__page__content__card {
|
||||||
|
|
@ -211,3 +207,131 @@
|
||||||
width: 100%;
|
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