some mobile friendliness updates

This commit is contained in:
Evert Prants 2017-08-24 00:42:55 +03:00
parent 1f54626a33
commit 6e246fe687
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
6 changed files with 123 additions and 14 deletions

View File

@ -1,6 +1,13 @@
window.$ = require('jquery')
$(document).ready(function () {
if (window.location.hash) {
let hash = window.location.hash
if ($(hash).length) {
$(window).scrollTop($(hash).offset().top - $('.navigator').innerHeight() * 2)
}
}
$(window).on('scroll', function() {
if($(window).scrollTop() >= $('.banner').innerHeight()) {
$('.anchor').css('height', $('.navigator').innerHeight() + 'px')
@ -35,9 +42,42 @@ $(document).ready(function () {
}, 1000, 'swing')
})
$('#mobile').click(function (e) {
e.preventDefault()
$('.flexview').toggleClass('extended')
})
$('body').click(function(e) {
if (!$(e.target).is('#mobile') && !$(e.target).is('#mobile i') && $('.flexview').hasClass('extended')) {
$('.flexview').removeClass('extended')
}
})
if ($('#repeatcheck').length) {
function pwcheck (e) {
let pw = $('#password').val()
let pwa = $('#password_repeat').val()
if (pwa !== pw) {
$('#password_repeat').addClass('invalid')
$('#repeatcheck').show()
$('#repeatcheck').html('<span class="error">The passwords do not match.</span>')
} else {
$('#password_repeat').removeClass('invalid')
$('#repeatcheck').hide()
$('#repeatcheck').html('')
}
}
$('#password_repeat').on('keyup', pwcheck)
$('#password').on('keyup', function (e) {
if ($('#password_repeat').val()) {
pwcheck(e)
}
})
}
window.checkLoginState = function () {
FB.getLoginStatus(function(response) {
console.log(response)
$.ajax({
type: 'post',
url: '/api/external/facebook/callback',
@ -45,7 +85,6 @@ $(document).ready(function () {
data: response,
success: (data) => {
if (data.error) {
console.log(data)
$('.message').addClass('error')
$('.message span').text(data.error)
return

View File

@ -2,11 +2,15 @@ body
margin: 0
color: black
font-family: sans-serif
background-color: #82fff4;
/*background-color: #82fff4;
background-image: linear-gradient(-45deg, #80d7ff 25%, transparent 25.5%, transparent 50%,
#80d7ff 50.5%, #80d7ff 75%, transparent 75.5%, transparent)
height: 100vh;
background-size: 50px 50px;
background-size: 50px 50px;*/
background: #6fefff
background: -moz-linear-gradient(top, #6fefff 0%, #53cbf1 51%, #05abe0 100%)
background: -webkit-linear-gradient(top, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
background: linear-gradient(to bottom, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
a
color: green
@ -148,7 +152,7 @@ footer
.wrapper
overflow: hidden
height: 100vh
min-height: 100vh
.document
overflow: hidden
@ -161,6 +165,38 @@ footer
width: 60%
font-size: 120%
//.cssextend:hover > .flexview
// display: block
// left: 40%
ul.flexview
position: fixed
right: 0
left: 100%
width: auto
top: 68px
bottom: 0
background-color: rgba(53, 53, 53, 0.8)
z-index: 1
overflow: hidden
transition: all 0.1s linear
.division
border-top: 1px solid #a7a7a7
li
display: block
min-width: 100px
a
display: block
padding: 5px 20px
color: #fff
font-weight: normal
text-transform: none
&.extended
display: block
left: 40%
code
white-space: pre
@ -175,6 +211,7 @@ input:not([type="submit"])
border: 1px solid #c1c1c1
background-color: #f5f5f5
box-shadow: inset 2px 2px 5px #ddd
transition: border 0.1s linear
input[type="submit"]
display: block
@ -219,7 +256,7 @@ input[type="submit"]
padding: 0 12px
.twitterLogin
display: inline-block
display: block
padding: 10px
width: 215px
margin: 5px 0
@ -238,11 +275,11 @@ input[type="submit"]
margin-left: 12px;
.discordLogin
display: block;
background-color: #99AAB5;
width: 225px;
height: 40px;
padding: 5px 5px;
display: inline-block;
border-radius: 5px;
text-decoration: none
span
@ -317,6 +354,20 @@ input.authorize
color: #fff
border: 1px solid #2196F3
input.deny
font-size: 160%
background-color: #f10
border: 1px solid #e00000
color: #fff
input.invalid
border: 1px solid #f00
outline: red
#repeatcheck
color: red
padding: 10px
@media all and (max-width: 800px)
.navigator
padding: 0 10px
@ -356,6 +407,13 @@ input.authorize
margin-top: 0
p
font-size: 100%
.box
.left, .right
float: initial !important
display: block !important
border: 0 !important
width: fit-content !important
margin: auto
@media all and (max-width: 500px)
section

View File

@ -18,7 +18,7 @@ block body
.info
.name= client.title
.description= client.description
a.url(href=client.url)= client.url
a.url(href=client.url, target="_blank", rel="nofollow")= client.url
form#loginForm(method="POST", action="")
input(type="hidden", name="csrf", value=csrf)
input(type="hidden", name="decision", value='1')
@ -26,7 +26,7 @@ block body
form#loginForm(method="POST", action="")
input(type="hidden", name="csrf", value=csrf)
input(type="hidden", name="decision", value='0')
input(type="submit", value="Deny")
input.deny(type="submit", value="Deny")
.right
.haveaccess
span This application can

View File

@ -38,9 +38,23 @@ html
li
a(href="/login") Log in
ul.mobview.floating
li
li.cssextend
a#mobile(href="#")
i.fa.fa-fw.fa-bars
ul.flexview
li
a.scroll(href="/#home") Home
li
a.scroll(href="/#news") News
.division
if user
li#user
a(href="/user/manage") #{user.display_name}
li
a(href="/logout") Log out
else
li
a(href="/login") Log in
block body
block footer
footer

View File

@ -6,8 +6,8 @@ block body
.wrapper
.boxcont
.box#login
h1 Log in
.left
h1 Log in
if message
if message.error
.message.error
@ -23,5 +23,4 @@ block body
input(type="submit", value="Log in")
a#create(href="/register") Create an account
.right
h3 More options
include includes/external.pug

View File

@ -6,8 +6,8 @@ block body
.wrapper
.boxcont
.box#login
h1 Create a new account
.left
h1 Create a new account
if message
if message.error
.message.error
@ -30,5 +30,4 @@ block body
input(type="submit", value="Register")
a#create(href="/login") Log in with an existing account
.right
h3 More options
include includes/external.pug