Explorar el Código

Style registration form

tags/v0.1.0
Immanuel Onyeka hace 3 años
padre
commit
ef8951a8e7
Se han modificado 6 ficheros con 86 adiciones y 22 borrados
  1. +1
    -1
      build.sh
  2. +6
    -0
      public/main.js
  3. +10
    -0
      resources/js/main.js
  4. +2
    -0
      resources/scss/_vars.scss
  5. +53
    -13
      resources/scss/main.scss
  6. +14
    -8
      resources/views/home.blade.php

resources/build.sh → build.sh Ver fichero

@@ -3,7 +3,7 @@
export project=$HOME/projects/trendplays

watch() {
npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources/views $project/resources/scss &
npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources &
pid=$!
sass --load-path=sass --watch --error-css $project/resources/scss/main.scss\
$project/public/main.css &

+ 6
- 0
public/main.js Ver fichero

@@ -1,5 +1,6 @@
var toggle = document.querySelector(".nav-toggle");
var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
var registerToggles = document.querySelectorAll(".register-btn, .register-area .cancel-button, .services-cards button");
toggle.addEventListener("click", function() {
heroText.forEach((item) => {
item.classList.toggle("hidden");
@@ -7,6 +8,11 @@ toggle.addEventListener("click", function() {
document.querySelector("nav form.login").classList.toggle("active");
this.classList.toggle("toggled");
});
for (i = 0; i < registerToggles.length; i++) {
registerToggles[i].addEventListener("click", function() {
document.querySelector(".register-area").classList.toggle("active");
});
}
var cols = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < cols.length; i++) {


+ 10
- 0
resources/js/main.js Ver fichero

@@ -1,5 +1,7 @@
var toggle = document.querySelector(".nav-toggle")
var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
var registerToggles = document.querySelectorAll(".register-btn, .register-area
.cancel-button, .services-cards button")

toggle.addEventListener("click", function() {
heroText.forEach(item => {
@@ -10,6 +12,14 @@ toggle.addEventListener("click", function() {
// this.src = "/images/close.svg"
})

//Triggers for registration menu
for (i = 0; i < registerToggles.length; i++) {
registerToggles[i].addEventListener("click", function() {
document.querySelector(".register-area").classList.toggle("active")
});
}


//FAQ code
var cols = document.getElementsByClassName("collapsible");
var i;


+ 2
- 0
resources/scss/_vars.scss Ver fichero

@@ -16,6 +16,8 @@ $theme-colors: (
"dark-grey": #212121,
"faded-text": #425466,
"faded-text2": #6c757d,
"dark-green": #3bb78f,
"light-green": #0bab64
);

@function getColor($col) {


+ 53
- 13
resources/scss/main.scss Ver fichero

@@ -85,7 +85,6 @@ nav h1 {

nav #logo {
margin-right: 50px;
z-index: 2;
}

nav form {
@@ -467,18 +466,59 @@ footer a {
display: none;
}

div.toggle-area {
display: none;
div.register-area {
overflow: hidden;
height: 0px;
width: 100%;
z-index: 1;
@include vars.hovering3;
// background-color: vars.getColor("light-grey");
margin-bottom: 2em;
position: absolute;
position: fixed;
border-radius: 0;
padding: 0;
opacity: 0;
transition: all 0.2s;
background: white;
h3 {
text-align: center;
}

label,input {
color: black;
display: block;
border-color: black;
}

div {
margin-top: 20px;
margin-bottom: 20px;
}

form {
width: fit-content;
margin: 20px auto;
}

.submit-btn {
width: 100%;
background-color: #3bb78f;
@include vars.special-button("light-green", "dark-green");
}

.cancel-button {
width: 20px;
height: 20px;
background: url("/images/close-black.svg");
background-size: cover;
position: absolute;
top: 20px;
right: 20px;
}
}

div.register-area.active {
height: 400px;
opacity: 1;
}


@@ -518,21 +558,21 @@ div.toggle-area {
display: block;
}

div.toggle-area.active {
div.register-area.active {
display: initial;
}

div.toggle-area h1 {
div.register-area h1 {
font-size: 1.5rem;
display: inline-block;
color: vars.getColor("brand-orange");
}

div.toggle-area h3 {
div.register-area h3 {
text-align: center;
}

div.toggle-area .login {
div.register-area .login {
color: vars.getColor("brand-orange");
display: block;
margin-left: auto;
@@ -543,18 +583,18 @@ div.toggle-area {
// position: absolute;
}

div.toggle-area .login input {
div.register-area .login input {
border: 2px solid black;
border-color: vars.getColor("brand-orange");
border-color: black;
color: black;
}

div.toggle-area button {
div.register-area button {
margin-top: 1em;
width: 6em;
}

div.toggle-area div {
div.register-area div {
margin-top: 10px;
margin-bottom: 5px;
}


+ 14
- 8
resources/views/home.blade.php Ver fichero

@@ -10,15 +10,16 @@
@section('content')
@parent
<main>
<div class="toggle-area">
<a id='logo' href='/'>
<h1>Trendplays</h1>
<img src="/images/arrow-up.svg" height="30px" alt="">
</a>
<h3>Login</h3>
<div class="register-area">
<h3>Registration</h3>
<form class="login" action="">
@csrf
<div>
<label for='sender_name'>Name</label>
<input required type='name' name='sender_name' placeholder=''
spellcheck='false'>
</div>
<div>
<label for='sender_email'>Email</label>
<input required type='email' name='sender_email' placeholder=''
spellcheck='false'>
@@ -27,13 +28,18 @@ spellcheck='false'>
<label for='sender_password'>Password</label>
<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
</div>
<button class='login-btn'type="login">Log in</button>
<div>
<label for='sender_password'>Confirm Password</label>
<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
</div>
<button class="submit-btn" type="submit">Submit</button>
<div class="cancel-button"></div>
</form></div>
<div class='landing-hero'>
<div class='hero-filter'>
<h2>The web's #1 content promoter</h2>
<p>Give your brand the boost it needs for oganic growth with the web's most trusted social media marketing panel.</p>
<a class='register-btn' href="/register">Register Now</a>
<a class='register-btn'>Register Now</a>
</div>
</div>
<div class='blue-background'><section class="about-us">


Cargando…
Cancelar
Guardar