Skip to content

Commit a04d2c6

Browse files
futa-ikedacslzchen
futa-ikeda
and
cslzchen
authored
[ENG-9015] Redesign legacy pages (#11353)
* Update font-awesome * Update font-awesome import * Update CSS * Update footer * WIP nav and base mako * Update to styling for main content background * Update Orcid login page * Update leftnav links and styling; Add proper icons * Move maintenance banner to a more appropriate place * Remove old navbar * Appease jshint * Rework external_login_email_get&post without push status message --------- Co-authored-by: Longze Chen <cslzchen@gmail.com>
1 parent b796c25 commit a04d2c6

File tree

13 files changed

+585
-250
lines changed

13 files changed

+585
-250
lines changed

‎framework/auth/views.py‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1072,6 +1072,8 @@ def external_login_email_post():
10721072
destination = campaign
10731073
break
10741074

1075+
status_message = None
1076+
error_list = []
10751077
if form.validate():
10761078
clean_email = form.email.data
10771079
user = get_user(email=clean_email)
@@ -1104,11 +1106,11 @@ def external_login_email_post():
11041106
destination=destination
11051107
)
11061108
# 3. notify user
1107-
message = language.EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS.format(
1109+
status_message = language.EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS.format(
1110+
fullname=fullname,
11081111
external_id_provider=external_id_provider,
11091112
email=user.username
11101113
)
1111-
kind = 'success'
11121114
# 4. Clear session data
11131115
clear_external_first_login_anonymous_session_data(session)
11141116
else:
@@ -1134,22 +1136,26 @@ def external_login_email_post():
11341136
destination=destination
11351137
)
11361138
# 4. notify user
1137-
message = language.EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS.format(
1139+
status_message = language.EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS.format(
1140+
fullname=fullname,
11381141
external_id_provider=external_id_provider,
11391142
email=user.username
11401143
)
1141-
kind = 'success'
1142-
# 5. Clear session data
1144+
# 5. clear session data
11431145
clear_external_first_login_anonymous_session_data(session)
1144-
status.push_status_message(message, kind=kind, trust=False)
11451146
else:
1146-
forms.push_errors_to_status(form.errors)
1147+
form_errors = form.errors
1148+
for field, _ in form_errors.items():
1149+
for error in form_errors[field]:
1150+
error_list.append(error)
11471151

11481152
# Don't go anywhere
11491153
return {
11501154
'form': form,
11511155
'external_id_provider': external_id_provider,
1152-
'auth_user_fullname': fullname
1156+
'auth_user_fullname': fullname,
1157+
'status_message': status_message,
1158+
'error_list': error_list,
11531159
}
11541160

11551161

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
"@centerforopenscience/markdown-it-toc": "~1.1.1",
1313
"@centerforopenscience/markdown-it-video": "1.0.0",
1414
"@centerforopenscience/osf-style": "1.9.0",
15+
"@fortawesome/fontawesome-free": "^7.0.1",
16+
"@fortawesome/fontawesome-svg-core": "^7.0.1",
17+
"@fortawesome/free-brands-svg-icons": "^7.0.1",
18+
"@fortawesome/react-fontawesome": "^3.0.2",
1519
"URIjs": "^1.14.1",
1620
"assets-webpack-plugin": "^2.3.0",
1721
"babel-core": "^6.0.0",
@@ -25,7 +29,6 @@
2529
"dropzone": "https://github.com/CenterForOpenScience/dropzone.git#aba21eb6b82cc823ac7a7a53d6e035791c082bae",
2630
"exports-loader": "0.6.3",
2731
"file-loader": "^0.11.2",
28-
"font-awesome": "^4.4.0",
2932
"font-awesome-webpack": "0.0.5-beta.2",
3033
"gsap": "3.9.1",
3134
"highlight.js": "~9.18.2",

‎website/language.py‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,8 @@
5757

5858
REGISTRATION_SUCCESS = """Registration successful. Please check {email} to confirm your email address."""
5959

60-
EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS = """A new OSF account has been created with your {external_id_provider} profile. Please check {email} to confirm your email address."""
61-
62-
EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS = """Your OSF account has been linked with your {external_id_provider}. Please check {email} to confirm this action."""
60+
EXTERNAL_LOGIN_EMAIL_CREATE_SUCCESS = """Hello {fullname}, a new OSF account has been created with your {external_id_provider} profile. Please check {email} to confirm your email address."""
61+
EXTERNAL_LOGIN_EMAIL_LINK_SUCCESS = """Hello {fullname}, your OSF account has been linked with your {external_id_provider}. Please check {email} to confirm this action."""
6362

6463
# Shown if registration is turned off in website.settings
6564
REGISTRATION_UNAVAILABLE = 'Registration currently unavailable.'

‎website/static/css/style.css‎

Lines changed: 238 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ html, body {
44
}
55

66
body {
7-
padding-top: 50px; /* body padding for fixed top nav */
87
position: relative; /* for bootstrap affix */
98
-webkit-font-smoothing: antialiased;
109
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -38,6 +37,19 @@ a {
3837

3938
/* Footer
4039
-------------------------------------------------- */
40+
.footer-wrapper {
41+
margin-top: 20px;
42+
text-shadow: 0 1px 0 #fff;
43+
width: 100%;
44+
color: #515151;
45+
text-align: center;
46+
background-color: #e6f1fc;
47+
border-radius: 0 0 0 0.75rem;
48+
49+
.footer-row:first-of-type {
50+
background-color: #f1f8fd;
51+
}
52+
}
4153
.footer {
4254
padding-top: 10px;
4355
margin-top: 20px;
@@ -52,13 +64,25 @@ a {
5264
color: #2d6a9f;
5365
}
5466

55-
5667
.footer ul, .footer li {
5768
padding: 0;
5869
margin: 0;
5970
list-style-type: none;
6071
}
6172

73+
.footer-row {
74+
display: flex;
75+
justify-content: space-between;
76+
flex-wrap: wrap;
77+
align-items: center;
78+
padding: 1.5em;
79+
}
80+
81+
.footer-logo span {
82+
font-size: 20px;
83+
width: 44px;
84+
}
85+
6286
/* Warning Banner for cookies and browser depreciation goes on bottom of page */
6387
.warningBanner {
6488
margin-bottom: 0px;
@@ -82,6 +106,15 @@ a {
82106
color: #264F82;
83107
}
84108

109+
.footer-social-links-list {
110+
display: inline-flex;
111+
}
112+
113+
.footer-links-list {
114+
display: inline-flex;
115+
gap: 0.5em;
116+
}
117+
85118
.warningBannerText {
86119
margin-left: 10%;
87120
margin-right: 75px;
@@ -954,3 +987,206 @@ table.add-links {
954987
.text-smaller {
955988
color: #4d4d4d;
956989
}
990+
991+
/* Override of Bootstrap button styles */
992+
.container.container {
993+
width: auto !important;
994+
}
995+
996+
.btn.btn {
997+
border-radius: 6px;
998+
padding-block: 0.5rem;
999+
padding-inline: 1rem;
1000+
font-weight: 700;
1001+
}
1002+
1003+
.btn-primary.btn-primary {
1004+
color: #fff;
1005+
background-color: #337ab7;
1006+
border-color: #2e6da4;
1007+
}
1008+
1009+
.btn-secondary.btn-secondary {
1010+
color: #337ab7;
1011+
background: #f1f8fd;
1012+
}
1013+
1014+
input.form-control.form-control {
1015+
border-radius: 6px;
1016+
}
1017+
1018+
/* Utility classes */
1019+
1020+
.border-top {
1021+
border-top: 1px solid #eee;
1022+
}
1023+
1024+
.flex-row {
1025+
display: flex;
1026+
}
1027+
1028+
.gap-1 {
1029+
gap: 1em;
1030+
}
1031+
1032+
.flex-grow-1 {
1033+
flex-grow: 1;
1034+
}
1035+
1036+
.padding-top-2 {
1037+
padding-top: 2em;
1038+
}
1039+
1040+
.navbar {
1041+
background: #24384a;
1042+
}
1043+
1044+
.main-wrapper {
1045+
display: flex;
1046+
min-height: 100vh;
1047+
flex-direction: row;
1048+
background: #24384a;
1049+
}
1050+
1051+
.content-wrapper {
1052+
flex-grow: 1;
1053+
display: flex;
1054+
flex-direction: column;
1055+
height: 100vh;
1056+
overflow-y: auto;
1057+
background: linear-gradient(135deg, #e6f1fc 0%, #f7f7f7 60%, #eaf6ff 100%);
1058+
background-color: #f7f7f7;
1059+
}
1060+
1061+
.main-content {
1062+
margin: 50px auto 0;
1063+
display: flex;
1064+
align-items: center;
1065+
1066+
[role="main"] {
1067+
border-radius: 0.75rem;
1068+
background: #fff;
1069+
padding: 2em;
1070+
}
1071+
}
1072+
1073+
.left-logo {
1074+
display: inline-flex;
1075+
align-items: center;
1076+
margin-left: 0 !important;
1077+
height: 100%;
1078+
line-height: 27px !important;
1079+
gap: 8px;
1080+
font-size: 32px;
1081+
font-weight: lighter;
1082+
color: #f7f7f7;
1083+
1084+
.osf-navbar-logo {
1085+
width: 33px;
1086+
height: 33px;
1087+
margin: 6px 0 0 12px;
1088+
}
1089+
}
1090+
1091+
.toggle-nav-input {
1092+
float: right;
1093+
}
1094+
1095+
.toggle-nav-label {
1096+
color: #f7f7f7;
1097+
float: right;
1098+
margin: 12px;
1099+
}
1100+
1101+
.slideout {
1102+
position: fixed;
1103+
top: 0;
1104+
left: 0;
1105+
height: 100%;
1106+
background: #24384a;
1107+
color: #f7f7f7;
1108+
transition: transform 0.3s ease;
1109+
margin-left: 0 !important;
1110+
}
1111+
1112+
.left-pane-nav {
1113+
width: 300px;
1114+
max-width: 300px;
1115+
height: 100vh;
1116+
overflow-y: auto;
1117+
scrollbar-width: thin;
1118+
scrollbar-color: #eff0f1 #24384a;
1119+
}
1120+
1121+
.left-pane-ul {
1122+
list-style: none;
1123+
padding: 0;
1124+
margin: 0;
1125+
margin-top: 2em;
1126+
margin-bottom: 4em;
1127+
1128+
li {
1129+
margin: 0 1.5em 1em;
1130+
}
1131+
1132+
a {
1133+
display: flex;
1134+
align-items: center;
1135+
padding: 0.75em;
1136+
gap: 0.5em;
1137+
width: 100%;
1138+
font-size: medium;
1139+
font-weight: 700;
1140+
color: #F7F7F7;
1141+
text-decoration: none;
1142+
}
1143+
1144+
a:hover {
1145+
background: #384b5c;
1146+
border-radius: 0.375em;
1147+
}
1148+
}
1149+
1150+
.chevron-right {
1151+
margin-left: auto;
1152+
}
1153+
1154+
@media (min-width: 1200px){
1155+
.content-wrapper {
1156+
border-radius: 0.75rem 0 0 0.75rem;
1157+
}
1158+
.slideout {
1159+
transform: translateX(0);
1160+
}
1161+
.desktop-only {
1162+
display: block;
1163+
}
1164+
.mobile-only {
1165+
display: none;
1166+
}
1167+
}
1168+
1169+
@media (max-width: 1199.99px){
1170+
.slideout {
1171+
transform: translateX(-100%);
1172+
}
1173+
1174+
input#toggle-leftnav:checked~.slideout {
1175+
transform: translateX(0);
1176+
}
1177+
.desktop-only {
1178+
display: none;
1179+
}
1180+
.mobile-only {
1181+
display: block;
1182+
}
1183+
1184+
#maintenance {
1185+
margin-top: 50px;
1186+
}
1187+
}
1188+
1189+
#slideout-nav {
1190+
margin-left: 0 !important;
1191+
margin-top: 50px;
1192+
}

‎website/static/img/left-nav-icons/meetings.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎website/static/img/left-nav-icons/preprints.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎website/static/img/left-nav-icons/registries.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎website/static/js/pages/base-page.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ require('../../vendor/bootstrap-editable-custom/css/bootstrap-editable.css');
88
require('../../vendor/bower_components/jquery-ui/themes/base/resizable.css');
99
require('../../css/bootstrap-xl.css');
1010
require('../../css/animate.css');
11-
require('font-awesome-webpack');
11+
12+
import '@fortawesome/fontawesome-free/css/all.css';
1213

1314
var $ = require('jquery');
1415
var Cookie = require('js-cookie');

0 commit comments

Comments
 (0)