Users
(Admin)
The
first icon in the "Admin Dashboard" navigation
menu shall open Readingful's teacher "Userbase."
In this table, we'll list all existing teacher accounts
by name, email address, number of student accounts created,
and last active, in its beginning state, as shown in the
first mockup, above. The table's initial sort shall be by
"Last Active," but the admin may resort the table
by clicking the table headings. The topline menu has two
icons—one for searching the userbase, and another
for changing the table view.
Table
Carousel
I'd
like for the last two columns in this "Userbase"
table to act like a carousel. When the last icon in the
topline menu is clicked, it should push those two columns,
by one, to the left. I'm showing this in the second mockup
above. Note that the table still lists the user's name,
and email address, but that now the "Active" column
is in the third position, and a new column, "Expiry"
(the date upon which the user's subscription expires, or
has expired) is now in the fourth position. In short, each
time the icon is clicked, a new column rotates in, and the
one previously in the third position, rotates out. And,
when all columns have been viewed, the rotation continues
back to the start (but does not zoom back to the start,
rather continues rotating). Additional columns of data shall
be...
"Created"
(date the account was created on),
"Unpaid"
(number of student accounts that have been created by the
teacher, but not yet paid for to be part of his or her current
subscription),
"Referral"
(total lifetime referral earnings), - REDACTED
"Login"
(an off/on toggle to restrict the login for the teacher
account, and his or her student accounts, if ever becomes
necessary... such as when a teacher issues a credit card
chargeback),
"Payments"
(total dollar amount of lifetime subscription payments made),
and...
"Password"
(a link titled "Reset" that, when clicked, shows
a 6 digit number that replaces the teacher's current password...
for instances in which an admin needs to help a teacher
regain access to his or her account).
Truncation
Let's
truncate a user's name, if longer than 24 characters (including
space and comma), by making it Last Name, First Initial.
For example, "Williamson, Christopher" would become
"Williamson, C." In addition, please truncate
the user's email address at 30 characters, by adding ellipses
at the end. Yet, if the email address is clicked, let's
make the full address copy to the admin's clipboard, so
that it can be pasted elsewhere to get the full address.
Userbase
Search
The
third mockup, above, shows the admin's ability to search
the userbase. This should function the same as the "Story
Library" search, just that instead the users table
name and email address fields should be searched.
Styling
Checklist:
Images:
1.
Users Section Topline Menu Search Icon: user_search.svg,
32 x 32
2.
Users Section Topline Menu Table Navigation Icon:
user_navigation.svg, 32 x 32
3.
Admin Account Topline Menu Button: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
4.
Admin Account Topline Menu Button Hover: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
5.
Admin Account Topline Menu Button OnClick: #FFFFFF40
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
6.
Admin Account Topline Menu Button Selected: #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
-NOTE:
Colors 3 to 6 account for images 1 and 2, above.
7.
Admin Subsection Close Button: close_button.svg,
24 x 24, #E2E8F7
8.
Admin Subsection Close Button Hover: #E2E8F7BF
9.
Admin Subsection Close Button OnClick: #E2E8F780
10.
Admin Subsection Processing Animation Component:
processing_dot_icon.svg, 12
x 12, #6F8AE2 - NOT SHOWN
Text:
MOCKUP
1:
1.
Admin Account Section Title: 3.8
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "ADMIN DASHBOARD" SPECS)
2.
Admin Account Section Subtitle: 2.0
rem, #FFFFFFB3 (DUPLICATE,
ORIGINAL SHOWN IN "ADMIN DASHBOARD" SPECS)
3.
User Table Heading Text: 1.8
rem, #727C96
4.
User Table Teacher Name Text: 1.6
rem, #40424C
5.
User Table Data Text Positive: 1.6
rem, #456DB5
6.
User Table Link: 1.6 rem,
#6195FF
7.
User Table Link Hover: 1.6
rem, #6195FFBF
8.
User Table Link OnClick: 1.6
rem, #6195FF80
9.
Admin Profile Name: 2.4 rem,
#FFFFFF (DUPLICATE, ORIGINAL SHOWN
IN "ADMIN DASHBOARD" SPECS)
MOCKUP
2:
1.
User Table Data Text Negative: 1.6
rem, #B24658
MOCKUP
3:
1.
Admin Subsection Title: 2.4
rem, #6F8AE2
2.
Admin Subsection Subtitle: 2.0
rem, #B7C7F7
3.
Admin Subsection Form Field Text Default: 2.0
rem, #9BA9C9
4.
Admin Subsection Form Field Text: 2.0
rem, #50557F - NOT SHOWN
5.
Admin Subsection Informational Text: 1.6
rem, #576082
6.
Admin Subsection Infoline Footer Text: 1.6
rem, #BFC6DD
7.
Admin Subsection Search Awaiting Input Notification:
2.0 rem, #DFE3EF
8.
Admin Subsection Submit Button Text: 2.2
rem, #FFFFFF - NOT SHOWN
9.
Admin Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF - NOT SHOWN
10.
Admin Subsection Submit Button Text OnClick: 2.2
rem, #FFFFFF80 - NOT SHOWN
11.
Admin Subsection Submit Button Text Disabled: 2.2
rem, #FFFFFF80 - NOT SHOWN
Objects:
1.
Admin Subsection Table Divider: 714
x 2, #E7EBF2
2.
Users Table Row Background 1: 714
x 40, #E9F3FF
3.
Users Table Row Background 2: 714
x 40, #D3E5FF
4.
Users Table Row Background Hover: 714
x 40, #FFE884
5.
Admin Subsection Form Field Background: 230
x 50, #EBF0FC
6.
Admin Subsection Submit Button Background: Variable
x 50,
#6C96FF
7.
Admin Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF
8.
Admin Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80
9.
Admin Subsection Submit Button Background Disabled:
Variable x 50,
#6C96FF80
|
