Skip to content

Commit 510f93a

Browse files
dmolsdmols
authored
Merge pull request ucfopen#1109 from mbusch3/welcome-screen-ui
Welcome screen UI refresh
2 parents 28eb7f3 + ca21187 commit 510f93a

7 files changed

Lines changed: 109 additions & 70 deletions

File tree

‎assets/css/udoit4-theme.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
--container-color: #F2F4F7;
7474
--border-color: #C5C9D3; /* #E5E7EB; */
7575
--progress-bar-background-color: var(--gray-light);
76-
--progress-bar-color: var(--success-color);
76+
--progress-bar-color: var(--selection-color);
7777
--shadow-color: #00000044;
7878
--backdrop-color: rgba(0, 0, 0, 0.25);
7979

@@ -91,6 +91,7 @@
9191
}
9292

9393
#app-container {
94+
overflow: hidden;
9495
border: 1px solid var(--border-color);
9596
box-shadow: 3px 3px 3px var(--gray-light);
9697
background-color: var(--background-color);

‎assets/js/Components/HomePage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default function HomePage({
164164
<button className="btn-small btn-icon-left" tabIndex="0" disabled>
165165
<ProgressIcon className="icon-sm spinner" />
166166
<div className="flex-column justify-content-center">
167-
{t('welcome.button.scanning')}
167+
{t('welcome.label.scanning')}
168168
</div>
169169
</button>
170170
) : (

‎assets/js/Components/WelcomePage.css‎

Lines changed: 63 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -81,20 +81,50 @@
8181
}
8282
}
8383

84-
.logo-large {
85-
width: 75%;
86-
min-width: 250px;
87-
max-width: 300px;
88-
margin-bottom: 1.25rem;
89-
margin: 0 auto 2rem;
90-
padding: 0 1rem 1rem 1rem;
91-
92-
@media screen and (max-width: 768px) {
93-
align-self: center;
94-
max-width: 325px;
84+
.welcome-container {
85+
margin: 0 auto;
86+
max-width: 40em;
87+
text-align: center;
88+
border-radius: var(--window-radius);
89+
padding: 2em;
90+
91+
.logo-large {
92+
width: 200px;
93+
min-width: 30%;
94+
95+
@media screen and (max-width: 768px) {
96+
align-self: center;
97+
max-width: 325px;
98+
}
99+
}
100+
101+
h2 {
102+
font-size: 1.5em;
103+
}
104+
105+
p {
106+
color: var(--text-secondary-color);
107+
}
108+
109+
.scanner-container {
110+
height: 6em;
111+
112+
.status-text {
113+
font-size: 1.2em;
114+
font-weight: 400;
115+
}
116+
}
117+
118+
button {
119+
padding: .75em;
120+
width: 100%;
121+
background-color: var(--selection-color);
122+
border-color: transparent;
95123
}
96124
}
97125

126+
127+
98128
.invisible-spacer {
99129
padding-bottom: 4rem;
100130
}
@@ -106,7 +136,7 @@
106136
.tagline {
107137
text-transform: uppercase;
108138
font-size: 0.9em;
109-
font-weight: 600;
139+
font-weight: 400;
110140
color: var(--text-color);
111141
text-decoration: none;
112142
}
@@ -120,4 +150,25 @@
120150
&:hover {
121151
opacity: 1;
122152
}
153+
}
154+
155+
/* Adapted from https://css-loaders.com/progress/ (#16) */
156+
.loader {
157+
height: 8px;
158+
border-radius: 4px;
159+
width: 100%;
160+
--c: no-repeat linear-gradient(var(--progress-bar-color) 0 0);
161+
background: var(--c),var(--c), var(--progress-bar-background-color);
162+
background-size: 60% 100%;
163+
animation: l16 5s infinite;
164+
165+
&.complete {
166+
animation: none;
167+
background: var(--selection-color);
168+
}
169+
}
170+
@keyframes l16 {
171+
0% {background-position:-150% 0,-150% 0}
172+
66% {background-position: 250% 0,-150% 0}
173+
100% {background-position: 250% 0, 250% 0}
123174
}

‎assets/js/Components/WelcomePage.js‎

Lines changed: 35 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import UDOITLogo from '../../mediaAssets/udoit-logo.svg'
33
import UDOITLogoDark from '../../mediaAssets/udoit-logo-inverse.svg'
44
import UCFOpenLogo from '../../mediaAssets/ucfopen-logo.svg'
55
import UCFOpenLogoDark from '../../mediaAssets/ucfopen-logo-inverse.svg'
6-
import SummaryIcon from './Icons/SummaryIcon'
7-
import UFIXITIcon from './Icons/UFIXITIcon'
8-
import ReportIcon from './Icons/ReportIcon'
9-
import ProgressIcon from './Icons/ProgressIcon'
6+
import CheckIcon from './Icons/CheckIcon'
107
import './WelcomePage.css'
118

129
export default function WelcomePage({
@@ -20,56 +17,43 @@ export default function WelcomePage({
2017
<main className="flex-column flex-grow-1">
2118
<div className="flex-column justify-content-between flex-grow-1">
2219
<div className="invisible-spacer"></div>
23-
<div className="flex-column">
24-
<div className="welcome-content-wrapper flex-column gap-3">
25-
<div className="welcome-content flex-column">
26-
<h1 className="primary-text text-center">{t('welcome.title')}</h1>
27-
<img src={settings?.user?.roles?.dark_mode ? UDOITLogoDark : UDOITLogo} alt={t('alt.UDOIT')} className="logo-large pt-3"/>
28-
<div className="text-center welcome-description">{t('welcome.description')}</div>
20+
21+
<div className="callout-container welcome-container">
22+
<h1 className="m-0 pt-3 pb-4 flex-row justify-content-center">
23+
<img
24+
src={settings?.user?.roles?.dark_mode ? UDOITLogoDark : UDOITLogo}
25+
alt={t('udoit')}
26+
aria-label={t('udoit')}
27+
title={t('alt.UDOIT')}
28+
className="logo-large" />
29+
</h1>
30+
31+
<h2 className="m-0">{t('welcome.subtitle')}</h2>
32+
33+
<p>{t('welcome.description')}</p>
34+
35+
{!syncComplete && (
36+
<div className="scanner-container w-100 flex-column justify-content-center gap-2">
37+
<div className="status-text">{t('welcome.label.scanning')}</div>
38+
<div className={`loader ${syncComplete ? 'complete' : ''}`} />
2939
</div>
30-
<div className="welcome-content-list-container">
31-
<div className="welcome-content-list-item">
32-
<div className="welcome-content-list-item-icon">
33-
<SummaryIcon className="icon-lg primary-text"/>
34-
</div>
35-
<div className="summary-text flex-grow-1">
36-
{t('welcome.scan')}
37-
</div>
38-
</div>
39-
<div className="welcome-content-list-item">
40-
<div className="welcome-content-list-item-icon">
41-
<UFIXITIcon className="icon-lg primary-text"/>
42-
</div>
43-
<div className="summary-text flex-grow-1">
44-
{t('welcome.fix')}
45-
</div>
46-
</div>
47-
<div className="welcome-content-list-item">
48-
<div className="welcome-content-list-item-icon">
49-
<ReportIcon className="icon-lg primary-text"/>
50-
</div>
51-
<div className="summary-text flex-grow-1">
52-
{t('welcome.report')}
53-
</div>
54-
</div>
40+
)}
41+
{syncComplete && (
42+
<div className="scanner-container w-100 flex-row justify-content-center align-items-center gap-2">
43+
<CheckIcon className="icon-lg udoit-success" />
44+
<div className="status-text">{t('welcome.label.scan_complete')}</div>
5545
</div>
56-
</div>
57-
<div className="flex-row justify-content-center mt-3">
58-
{ !syncComplete ? (
59-
<button className="btn-large flex-row" tabIndex="0" disabled>
60-
<div className="flex-column justify-content-center align-self-center">
61-
<ProgressIcon className="icon-md spinner" />
62-
</div>
63-
<div className="flex-column justify-content-center ms-3">
64-
{t('welcome.button.scanning')}
65-
</div>
66-
</button>
67-
) : (
68-
<button className="btn-large btn-primary" tabIndex="0" onClick={() => setWelcomeClosed(true)}>{t('welcome.button.ready')}</button>
69-
)
70-
}
71-
</div>
46+
)}
47+
48+
<button
49+
className="btn-large btn-primary"
50+
tabIndex="0"
51+
disabled={!syncComplete}
52+
onClick={() => setWelcomeClosed(syncComplete)}>
53+
{t('welcome.button.ready')}
54+
</button>
7255
</div>
56+
7357
<div className="welcome-footer flex-row justify-content-between ps-3 pe-3 gap-3">
7458
<div className="flex-column justify-content-center tagline">
7559
{t('welcome.version')} {settings.versionNumber}

‎assets/js/Components/Widgets/MessageTray.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
position: absolute;
33
top: 3rem;
44
right: 1rem;
5-
transform: translateX(calc(100vw));
65
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35);
76
z-index: 1000;
87
box-sizing: border-box;
@@ -55,7 +54,7 @@
5554
padding: 1rem 2.75rem 1rem 1rem;
5655
box-sizing: border-box;
5756
font-size: .9em;
58-
font-weight: 500;
57+
font-weight: 400;
5958
color: var(--text-color)
6059
}
6160

‎translations/en.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@
1919
"menu.nav.toggle_menu": "Toggle Menu",
2020

2121
"welcome.title": "Welcome to",
22-
"welcome.description": "UDOIT helps you through the process of removing accessibility barriers in your online course content.",
22+
"welcome.subtitle": "Make Your Course Accessible",
23+
"welcome.description": "UDOIT scans your online course content to identify accessibility barriers and gives you the tools to create inclusive learning experiences for all students.",
2324
"welcome.scan": "Find accessibility barriers quickly with an automated scan.",
2425
"welcome.fix": "Fix issues easily with simple tools and just-in-time instructions.",
2526
"welcome.report": "Make steady progress with small daily goals and easy reporting tools.",
2627
"welcome.product_tagline": "A Product of",
2728
"welcome.version": "Version ",
28-
"welcome.button.scanning": "Scanning Course... Please Wait",
29+
"welcome.label.scanning": "Scanning Course... Please Wait",
30+
"welcome.label.scan_complete": "Scan Complete",
2931
"welcome.button.ready": "Get Started",
3032

3133
"summary.title": "Accessibility Summary",

‎translations/es.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@
1919
"menu.nav.toggle_menu": "TODO: Toggle Menu",
2020

2121
"welcome.title": "Bienvenido a",
22+
"welcome.subtitle": "TODO: Make Your Online Course Content Accessible",
2223
"welcome.description": "UDOIT te ayuda con el proceso de eliminar barreras de accesibilidad en el contenido de tu curso en línea.",
2324
"welcome.scan": "Encontrar barreras de accesibilidad rápidamente con un escaneo automatizado.",
2425
"welcome.fix": "Solucionar problemas rápidamente con herramientas simples e instrucciones inmediatas.",
2526
"welcome.report": "Progreso de forma constante con pequeñas metas diarias y herramientas fáciles de informes.",
2627
"welcome.product_tagline": "Un Producto de",
2728
"welcome.version": "Versión ",
28-
"welcome.button.scanning": "Escaneando el Curso... Por Favor Espere",
29+
"welcome.label.scanning": "Escaneando el Curso... Por Favor Espere",
30+
"welcome.label.scan_complete": "Escaneo Completo",
2931
"welcome.button.ready": "Comenzar",
3032

3133
"summary.title": "Resumen de Accesibilidad",

0 commit comments

Comments
 (0)