refactor: Login page cssversion-14
@@ -0,0 +1,203 @@ | |||||
/* login-css */ | |||||
#page-login { | |||||
.hero-and-content { | |||||
/*background-color: #f5f7fa;*/ | |||||
background-color: #fafbfc; | |||||
} | |||||
.page-sidebar, | |||||
#wrap-footer, | |||||
.page-header { | |||||
display: none; | |||||
} | |||||
.page-content { | |||||
right: 0%; | |||||
width: 100%; | |||||
} | |||||
.icon-twitter, | |||||
.icon-twitter-sign { | |||||
color: #00a0d1; | |||||
} | |||||
.icon-linkedin, | |||||
.icon-linkedin-sign { | |||||
color: #4875b4; | |||||
} | |||||
#wrap { | |||||
background-color: #7575ff; | |||||
} | |||||
.for-login { | |||||
display: none; | |||||
} | |||||
.for-forgot { | |||||
display: none; | |||||
} | |||||
.for-signup { | |||||
display: none; | |||||
} | |||||
.form-signin { | |||||
.form-signin-heading, | |||||
.checkbox { | |||||
margin-bottom: 10px; | |||||
} | |||||
.checkbox { | |||||
font-weight: normal; | |||||
} | |||||
.form-control { | |||||
position: relative; | |||||
height: auto; | |||||
-webkit-box-sizing: border-box; | |||||
-moz-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
padding: 6px; | |||||
font-size: 14px; | |||||
margin-bottom: 10px; | |||||
} | |||||
.form-control:focus { | |||||
z-index: 2; | |||||
} | |||||
} | |||||
.btn-social { | |||||
margin: 10px; | |||||
} | |||||
.social-logins .fa { | |||||
margin-right: 5px; | |||||
color: #8d99a6; | |||||
} | |||||
.form-footer { | |||||
margin-top: -45px; | |||||
text-align: center; | |||||
font-size: 12px; | |||||
color: #8d99a6; | |||||
font-weight: bold; | |||||
a { | |||||
font-size: 12px; | |||||
color: #8d99a6; | |||||
font-weight: bold; | |||||
} | |||||
h6 { | |||||
font-size: 12px; | |||||
color: #8d99a6; | |||||
font-weight: bold; | |||||
} | |||||
.btn-default { | |||||
color: #36414c; | |||||
} | |||||
} | |||||
h5 { | |||||
position: relative; | |||||
text-align: center; | |||||
margin-top: 20px; | |||||
margin-bottom: 20px; | |||||
} | |||||
p { | |||||
margin-bottom: 20px; | |||||
} | |||||
.login-content .btn { | |||||
font-size: 14px; | |||||
margin-top: 45px; | |||||
} | |||||
.page-card { | |||||
max-width: 360px; | |||||
padding: 15px; | |||||
margin: 70px auto; | |||||
border: 1px solid #d1d8dd; | |||||
border-radius: 4px; | |||||
background-color: #fff; | |||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); | |||||
.page-card-head { | |||||
padding: 10px 15px; | |||||
margin: -15px; | |||||
margin-bottom: 15px; | |||||
border-bottom: 1px solid #d1d8dd; | |||||
} | |||||
.page-card-head .indicator { | |||||
color: #36414c; | |||||
font-size: 14px; | |||||
} | |||||
.page-card-head .indicator::before { | |||||
margin: 0 6px 0.5px 0px; | |||||
} | |||||
.btn { | |||||
margin-top: 30px; | |||||
} | |||||
} | |||||
.bordered { | |||||
border: 1px solid #d1d8dd; | |||||
padding: 10px; | |||||
border-radius: 4px; | |||||
} | |||||
.toggle-password { | |||||
right: 9px; | |||||
top: 9px; | |||||
position: absolute; | |||||
z-index: 2; | |||||
cursor: pointer; | |||||
font-size: 12px; | |||||
} | |||||
.invalid-login { | |||||
-webkit-animation: wiggle 0.5s linear; | |||||
animation: wiggle 0.5s linear; | |||||
} | |||||
@-webkit-keyframes wiggle { | |||||
8%, 41% { | |||||
-webkit-transform: translateX(-10px); | |||||
} | |||||
25%, 58% { | |||||
-webkit-transform: translateX(10px); | |||||
} | |||||
75% { | |||||
-webkit-transform: translateX(-5px); | |||||
} | |||||
92% { | |||||
-webkit-transform: translateX(5px); | |||||
} | |||||
0%, 100% { | |||||
-webkit-transform: translateX(0); | |||||
} | |||||
} | |||||
@keyframes wiggle { | |||||
8%, 41% { | |||||
transform: translate(-10px); | |||||
} | |||||
25%, 58% { | |||||
transform: translate(10px); | |||||
} | |||||
75% { | |||||
transform: translate(-5px); | |||||
} | |||||
92% { | |||||
transform: translate(5px); | |||||
} | |||||
0%, 100% { | |||||
transform: translate(0); | |||||
} | |||||
} | |||||
} |
@@ -12,6 +12,7 @@ | |||||
@import 'portal'; | @import 'portal'; | ||||
@import 'search'; | @import 'search'; | ||||
@import 'doc'; | @import 'doc'; | ||||
@import 'login'; | |||||
.ql-editor.read-mode { | .ql-editor.read-mode { | ||||
padding: 0; | padding: 0; | ||||
@@ -1,167 +0,0 @@ | |||||
/* login-css */ | |||||
.hero-and-content { | |||||
/*background-color: #f5f7fa;*/ | |||||
background-color: #fafbfc; | |||||
} | |||||
.page-sidebar, #wrap-footer, .page-header { | |||||
display: none; | |||||
} | |||||
.page-content { | |||||
right: 0%; | |||||
width: 100%; | |||||
} | |||||
.icon-twitter, .icon-twitter-sign{ | |||||
color: #00a0d1; | |||||
} | |||||
.icon-linkedin, .icon-linkedin-sign{ | |||||
color: #4875B4; | |||||
} | |||||
#wrap { | |||||
background-color: #7575ff; | |||||
} | |||||
.for-login { | |||||
display: none; | |||||
} | |||||
.for-forgot { | |||||
display: none; | |||||
} | |||||
.for-signup { | |||||
display: none; | |||||
} | |||||
.form-signin .form-signin-heading, | |||||
.form-signin .checkbox { | |||||
margin-bottom: 10px; | |||||
} | |||||
.form-signin .checkbox { | |||||
font-weight: normal; | |||||
} | |||||
.form-signin .form-control { | |||||
position: relative; | |||||
height: auto; | |||||
-webkit-box-sizing: border-box; | |||||
-moz-box-sizing: border-box; | |||||
box-sizing: border-box; | |||||
padding: 6px; | |||||
font-size: 14px; | |||||
margin-bottom: 10px; | |||||
} | |||||
.form-signin .form-control:focus { | |||||
z-index: 2; | |||||
} | |||||
.btn-social { | |||||
margin: 10px; | |||||
} | |||||
.social-logins .fa { | |||||
margin-right: 5px; | |||||
color: #8D99A6; | |||||
} | |||||
.form-footer { | |||||
margin-top: -45px; | |||||
text-align: center; | |||||
} | |||||
.form-footer, .form-footer a, .form-footer h6 { | |||||
font-size: 12px; | |||||
color: #8D99A6; | |||||
font-weight: bold; | |||||
} | |||||
.form-footer .btn-default { | |||||
color: #36414C; | |||||
} | |||||
h5 { | |||||
position: relative; | |||||
text-align: center; | |||||
margin-top:20px; | |||||
margin-bottom:20px; | |||||
} | |||||
p { | |||||
margin-bottom:20px; | |||||
} | |||||
.login-content .btn { | |||||
font-size: 14px; | |||||
margin-top: 45px; | |||||
} | |||||
.page-card { | |||||
max-width: 360px; | |||||
padding: 15px; | |||||
margin: 70px auto; | |||||
border: 1px solid #d1d8dd; | |||||
border-radius: 4px; | |||||
background-color: #fff; | |||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); | |||||
} | |||||
.page-card .page-card-head { | |||||
padding: 10px 15px; | |||||
margin: -15px; | |||||
margin-bottom: 15px; | |||||
border-bottom: 1px solid #d1d8dd; | |||||
} | |||||
.page-card .page-card-head .indicator { | |||||
color: #36414C; | |||||
font-size: 14px; | |||||
} | |||||
.page-card .page-card-head .indicator::before { | |||||
margin: 0 6px 0.5px 0px; | |||||
} | |||||
.page-card .btn { | |||||
margin-top: 30px; | |||||
} | |||||
.bordered { | |||||
border: 1px solid #d1d8dd; | |||||
padding: 10px; | |||||
border-radius: 4px; | |||||
} | |||||
.toggle-password { | |||||
right: 9px; | |||||
top: 9px; | |||||
position: absolute; | |||||
z-index: 2; | |||||
cursor: pointer; | |||||
font-size: 12px; | |||||
} | |||||
.invalid-login { | |||||
-webkit-animation: wiggle 0.5s linear; | |||||
} | |||||
@-webkit-keyframes wiggle { | |||||
8%, | |||||
41% { | |||||
-webkit-transform: translateX(-10px); | |||||
} | |||||
25%, | |||||
58% { | |||||
-webkit-transform: translateX(10px); | |||||
} | |||||
75% { | |||||
-webkit-transform: translateX(-5px); | |||||
} | |||||
92% { | |||||
-webkit-transform: translateX(5px); | |||||
} | |||||
0%, | |||||
100% { | |||||
-webkit-transform: translateX(0); | |||||
} | |||||
} | |||||
@@ -9,6 +9,7 @@ from frappe.utils import set_request | |||||
class TestWebsite(unittest.TestCase): | class TestWebsite(unittest.TestCase): | ||||
def test_home_page_for_role(self): | def test_home_page_for_role(self): | ||||
frappe.delete_doc_if_exists('User', 'test-user-for-home-page@example.com') | frappe.delete_doc_if_exists('User', 'test-user-for-home-page@example.com') | ||||
frappe.delete_doc_if_exists('Role', 'home-page-test') | frappe.delete_doc_if_exists('Role', 'home-page-test') | ||||
@@ -42,8 +43,6 @@ class TestWebsite(unittest.TestCase): | |||||
frappe.cache().hdel('home_page', frappe.session.user) | frappe.cache().hdel('home_page', frappe.session.user) | ||||
self.assertEqual(get_home_page(), 'test-portal-home') | self.assertEqual(get_home_page(), 'test-portal-home') | ||||
def test_page_load(self): | def test_page_load(self): | ||||
frappe.set_user('Guest') | frappe.set_user('Guest') | ||||
set_request(method='POST', path='login') | set_request(method='POST', path='login') | ||||
@@ -53,7 +52,6 @@ class TestWebsite(unittest.TestCase): | |||||
html = frappe.safe_decode(response.get_data()) | html = frappe.safe_decode(response.get_data()) | ||||
self.assertTrue('/* login-css */' in html) | |||||
self.assertTrue('// login.js' in html) | self.assertTrue('// login.js' in html) | ||||
self.assertTrue('<!-- login.html -->' in html) | self.assertTrue('<!-- login.html -->' in html) | ||||
frappe.set_user('Administrator') | frappe.set_user('Administrator') | ||||
@@ -1,11 +1,5 @@ | |||||
{% extends "templates/web.html" %} | {% extends "templates/web.html" %} | ||||
{% block style %} | |||||
<style> | |||||
{% include "templates/includes/login/login.css" %} | |||||
</style> | |||||
{% endblock %} | |||||
{% block page_content %} | {% block page_content %} | ||||
<!-- {{ for_test }} --> | <!-- {{ for_test }} --> | ||||
<div style='min-height: 360px'> | <div style='min-height: 360px'> | ||||