From 6e246fe68713056e1c4a85e7dbafed25e6e43999 Mon Sep 17 00:00:00 2001 From: Evert Date: Thu, 24 Aug 2017 00:42:55 +0300 Subject: [PATCH] some mobile friendliness updates --- src/script/main.js | 43 ++++++++++++++++++++++++-- src/style/main.styl | 68 ++++++++++++++++++++++++++++++++++++++--- views/authorization.pug | 4 +-- views/layout.pug | 16 +++++++++- views/login.pug | 3 +- views/register.pug | 3 +- 6 files changed, 123 insertions(+), 14 deletions(-) diff --git a/src/script/main.js b/src/script/main.js index 27de1f1..29dde45 100644 --- a/src/script/main.js +++ b/src/script/main.js @@ -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('The passwords do not match.') + } 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 diff --git a/src/style/main.styl b/src/style/main.styl index 44ef3dc..5ca2652 100644 --- a/src/style/main.styl +++ b/src/style/main.styl @@ -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 diff --git a/views/authorization.pug b/views/authorization.pug index 631e59c..5c048d2 100644 --- a/views/authorization.pug +++ b/views/authorization.pug @@ -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 diff --git a/views/layout.pug b/views/layout.pug index 2fea1a1..3950944 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -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 diff --git a/views/login.pug b/views/login.pug index 704db1b..d1e36ba 100644 --- a/views/login.pug +++ b/views/login.pug @@ -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 diff --git a/views/register.pug b/views/register.pug index b8f4a94..2008aef 100644 --- a/views/register.pug +++ b/views/register.pug @@ -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