Helpbook
(Admin)
The
master admin account view of the Helpbook will be almost
identical to the version viewed by users, albeit with necessary
changes to facilitate the easy updating of both its text
articles, and videos. As shown in the first mockup, above,
you'll notice that the topline navigation menu's "Request
Assistance" icon has been replaced with a new icon
(add section), and that when the admin hovers over a Helpbook
section, in addition to the article count, there is also
an editing icon. These two buttons control adding a new
section, and editing an existing section, respectively—both
which shall use the same module.
Adding
a Section
The
second and third mockups, above, show the two steps necessary
to add a new section to the Helpbook—entering its
title and uploading its icon.
Uploading
an Icon
When
the file for an icon is selected, the processing animation
should be shown in place of the "Save" button,
along with "Uploading icon..." in the infoline
footer. And then, when the icon is successfully uploaded,
the state shown in the fourth mockup above, shall display.
Here, we have the file name of the icon as the button text.
If the button is clicked in this state, it should replace
the icon with a new upload. There's also an "x"
button beside it, to the upper right, to allow the icon
to be deleted altogether.
Editing/Deleting
a Section
The
fifth and sixth mockups, above, show how the "Edit
Section" version of the modules should function. The
key takeaway is that there is a "Delete Section"
link in the infoline footer that, when clicked, should provide
a warning, and the user the option to confirm complete deletion
of the section, along with all articles published within.
Note that "Edit" has replaced the "+"
in the title, and that the "+" icon in the topline
menu is not active for the editing states.
Ordering
Sections
The
admin shall be able to drag and drop sections, to reorder
them.
Article
Listing
The
differences in the "Article Listing" for the admin
view of the Helpbook, versus the regular user view, are
shown in the seventh mockup, above. Here, all the way at
the bottom of the article list, shall be a "+ New Article"
for adding an article to an existing section. Note that
articles will never need to be moved between sections. If
the admin ever wishes to take an article in one section,
and move it to another, he or she can simple delete it from
one section, and add it as a new article in the other. Also,
in place of the decorative right arrows that display after
each article title for the regular user, is an edit button
for the admin that, when clicked, allows the admin to edit
each article.
Ordering
Articles Within a Section
The
admin shall be able to drag and drop articles within a section,
to order them.
Adding/Editing
an Article
Mockups
eight to ten show the 3 step process for adding a new article—consisting
of entering a title, the text of the article itself, and
associating a quicktorial video by reference number (if
applicable). The process of deleting an existing article
shall be the same as deleting a section, with a "Delete
Article" link in the infoline footer. Note: the admin
will need the ability to hyperlink text in the Helpbook
articles, for the purposes of linking directly to files...
such as PDFs. So, the article entry should accept some basic
html code for this. All hyperlinks should open in a new
tab or window.
Quicktorials
Section
As
shown in the eleventh mockup, above, the differences between
the regular user view of the "Quicktorials" module,
and the admin view, involve the addition of an edit button
beside the play button, to open the module for editing an
existing quicktorial video entry, and a ( + New ) link in
the infoline footer, to allow for the adding of a new video.
Important that, if a quicktorial video is ever deleted,
that is linked to a Helpbook article, that the association
is simply removed. We want to avoid any "not found"
display when a video is deleted. The association between
the two should delete when a video's entire entry is deleted.
Admin
needs the ability to drag and drop "Quicktorial"
icons into the display order that teachers will see.
Adding/Editing
a Video Entry
The
twelfth to fifteenth mockups show the 4 step process for
adding/editing a quicktorial video entry—title, description,
preview image, and video.
Styling
Checklist:
Images:
1.
Admin Helpbook Topline Menu Icon (Search Helpbook):
search_helpbook.svg, 32 x 32
2.
Admin Helpbook Topline Menu Icon (Quicktorials):
quicktorials.svg, 32 x 32
3.
Admin Helpbook Topline Menu Icon (New Section):
new_section.svg, 32 x 32
4.
Admin Account Topline Menu Button: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
5.
Admin Account Topline Menu Button Hover: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
6.
Admin Account Topline Menu Button OnClick: #FFFFFF40
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
7.
Admin Account Topline Menu Button Selected: #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "ADMIN DASHBOARD"
SPECS)
-NOTE:
Colors 4 to 7 account for images 1 to 3, above.
8.
Admin Helpbook Section Menu Icon: Variable,
42 x 40, #FFFFFF
9.
Admin Helpbook Section Menu Icon Hover: #FFFFFFBF
10.
Admin Helpbook Section Menu Icon OnClick: #FFFFFF80
11.
Admin Helpbook Section Menu Right Arrow: helpbook_section_right_arrow.svg,
12 x 18, #FFFFFF80
12.
Admin Helpbook Section Navigation Up Arrow: helpbook_section_navigation_up.svg,
30 x 36
13.
Admin Helpbook Section Navigation Down Arrow: helpbook_section_navigation_down.svg,
30 x 36
14.
Admin Helpbook Section Navigation Arrow: #E2E8F7
15.
Admin Helpbook Section Navigation Arrow Hover:
#E2E8F7BF
16.
Admin Helpbook Section Navigation Arrow OnClick:
#E2E8F780
17.
Admin Helpbook Section Navigation Arrow Disabled:
#E2E8F780
-NOTE:
Colors 10 to 13 cover images 8 and 9.
18.
Admin Helpbook Section Editing Icon: edit_section.svg,
16 x 16, #FFFFFF80
19.
Admin Helpbook Section Editing Icon Hover: #FFFFFFBF
20.
Admin Helpbook Section Editing Icon OnClick: #FFFFFF
21.
Admin Subsection Close Button: close_button.svg,
24 x 24, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
22.
Admin Subsection Close Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "USERS" SPECS)
23.
Admin Subsection Close Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "USERS" SPECS)
24.
Admin Subsection Back Button: back_arrow.svg,
20 x 30, #E2E8F7
25.
Admin Subsection Back Button Hover: #E2E8F7BF
26.
Admin Subsection Back Button OnClick: #E2E8F780
27.
Admin Delete File Icon: delete_file.svg,
14 x 14, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STORIES ADMIN" SPECS)
28.
Admin Delete File Icon Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
29.
Admin Delete File Icon OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
30.
Admin Helpbook Article Editing Icon: edit_article.svg,
16 x 16, #DFE2E9
31.
Admin Helpbook Article Editing Icon Hover: #DFE2E9BF
32.
Admin Helpbook Article Editing Icon OnClick: #DFE2E980
33.
Admin Helpbook Article Navigation Up Arrow: article_navigation_up.svg,
50 x 50
34.
Admin Helpbook Article Navigation Down Arrow: article_navigation_down.svg,
50 x 50
35.
Admin Helpbook Article Navigation Right Arrow:
article_navigation_right.svg,
50 x 50
36.
Admin Helpbook Article Navigation Left Arrow: article_navigation_left.svg,
50 x 50
37.
Admin Helpbook Article Navigation Arrow: #FFFFFF
38.
Admin Helpbook Article Navigation Arrow Hover:
#FFFFFFBF
39.
Admin Helpbook Article Navigation Arrow OnClick:
#FFFFFF80
40.
Admin Helpbook Article Navigation Arrow Disabled:
#FFFFFF80
-NOTE:
Colors 37 to 40 apply to images 33 to 36.
41.
Admin Subsection Slider Navigation Arrow: slider_navigation_arrow.svg,
24 x 36, #E2E8F7
42.
Admin Subsection Slider Navigation Arrow Hover:
#E2E8F7BF
43.
Admin Subsection Slider Navigation Arrow OnClick:
#E2E8F780
44.
Admin Subsection Slider Navigation Arrow Disabled:
#E2E8F780
45.
Admin Helpbook Quicktorials Preview Play Icon:
quicktorial_play.svg, 16 x
16, #FFFFFFBF
46.
Admin Helpbook Quicktorials Preview Play Icon Hover:
#FFFFFF80
47.
Admin Helpbook Quicktorials Preview Play Icon OnClick:
#FFFFFF
48.
Admin Helpbook Quicktorials Preview Play Icon Selected:
#FFFFFF
49.
Admin Edit Button: edit.svg,
50 x 50, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STORIES ADMIN" SPECS)
50.
Admin Edit Button Hover: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
51.
Admin Edit Button OnClick: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
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.
Admin Helpbook Menu Section Title: 2.0
rem, #FFFFFF
4.
Admin Helpbook Menu Section Title Hover: #FFFFFFBF
5.
Admin Helpbook Menu Section Title OnClick: #FFFFFF80
6.
Admin Helpbook Menu Article Count Text: 1.8
rem, #FFFFFF4D
7.
Admin Helpbook Menu Article Count Text OnClick:
#FFFFFF26
8.
Admin Profile Name: 2.4 rem,
#FFFFFF (DUPLICATE, ORIGINAL SHOWN
IN "ADMIN DASHBOARD" SPECS)
MOCKUP
2:
1.
Admin Subsection Title: 2.4
rem, #6F8AE2 (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
2.
Admin Subsection Subtitle: 2.0
rem, #B7C7F7 (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
3.
Admin Subsection Form Field Text Default: 2.0
rem, #9BA9C9 (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
4.
Admin Subsection Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
5.
Admin Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
6.
Admin Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "USERS" SPECS)
7.
Admin Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
8.
Admin Subsection Submit Button Text OnClick: 2.2
rem, #FFFFFF80 (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
9.
Admin Subsection Submit Button Text Disabled: 2.2
rem, #FFFFFF80 (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
MOCKUP
3:
3.
Admin Subsection Selection Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STORIES ADMIN" SPECS)
4.
Admin Subsection Selection Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STORIES ADMIN" SPECS)
5.
Admin Subsection Selection Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
MOCKUP
4:
1.
Admin Subsection Selection Button Selected: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STORIES ADMIN" SPECS)
MOCKUP
5:
1.
Admin Subsection Form Field Text: 2.0
rem, #50557F
(DUPLICATE, ORIGINAL SHOWN IN "USERS" SPECS)
2.
Admin Subsection Infoline Footer Link: 1.6
rem, #BFC6DD
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
3.
Admin Subsection Infoline Footer Link Hover: 1.6
rem, #4B70E8
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
4.
Admin Subsection Infoline Footer Link OnClick:
1.6 rem, #4B70E880
(DUPLICATE, ORIGINAL SHOWN IN "STORIES ADMIN"
SPECS)
MOCKUP
7:
1.
Admin Helpbook Section Title: 2.6
rem, #6F8AE2
2.
Admin Helpbook Article Title: 2.0
rem, #616F91
3.
Admin Helpbook Article Title Hover: 2.0
rem, #616F91BF
4.
Admin Helpbook Article Title OnClick: 2.0
rem, #616F9180
5.
Admin Helpbook New Article Link: 2.0
rem, #BFC6DD
6.
Admin Helpbook New Article Link Hover: 2.0
rem, #6C96FF
7.
Admin Helpbook New Article Link OnClick: 2.0
rem, #6C96FF80
MOCKUP
9:
1.
Admin Subsection Expanded Form Field Text Default:
1.8 rem, #9BA9C9
(DUPLICATE, ORIGINAL SHOWN IN "SETTINGS" SPECS)
2.
Admin Subsection Expanded Form Field Text: 1.8
rem, #50557F - NOT SHOWN
(DUPLICATE, ORIGINAL SHOWN IN "SETTINGS" SPECS)
MOCKUP
11:
1.
Admin Subsection Video Icon Text Overlay: 2.4
rem, #FFFFFFBF
2.
Admin Subsection Video Icon Text Overlay Hover:
2.4 rem, #FFFFFF80
3.
Admin Subsection Video Icon Text Overlay OnClick:
2.4 rem, #FFFFFF
4.
Admin Subsection Video Icon Text Overlay Selected:
2.4 rem, #FFFFFF
NOT
SHOWN
1.
Admin Helpbook Article Entry Title: 2.0
rem, #6F8AE2
2.
Admin Helpbook Article Entry Paragraph Text: 1.6
rem, #576082
3.
Admin Helpbook Article Entry Related Video Button
Text: 1.8 rem, #FFFFFF
4.
Admin Helpbook Article Entry Related Video Button
Text Hover: 1.8 rem, #FFFFFFBF
5.
Admin Helpbook Article Entry Related Video Button
Text OnClick: 1.8 rem, #FFFFFF80
Objects:
1.
Admin Helpbook Menu Section Table Background 1:
660 x 40, #7B82FF
2.
Admin Helpbook Menu Section Table Background 1
Hover: 660 x 40, #7B82FFBF
3.
Admin Helpbook Menu Section Table Background 1
OnClick: 660 x 40, #7B82FF80
4.
Admin Helpbook Menu Section Table Background 2:
660 x 40, #B3CEFF
5.
Admin Helpbook Menu Section Table Background 2
Hover: 660 x 40, #B3CEFFBF
6.
Admin Helpbook Menu Section Table Background 2
OnClick: 660 x 40, #B3CEFF80
7.
Admin Subsection Form Field Background: 350
x 50, #EBF0FC (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
8.
Admin Subsection Submit Button Background: Variable
x 50,
#6C96FF (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
9.
Admin Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
10.
Admin Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80 (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
11.
Admin Subsection Submit Button Background Disabled:
Variable x 50,
#6C96FF80 (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
12.
Admin Subsection Selection Button Background: Variable
x 50,
#E2E8F7 (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
13.
Admin Subsection Selection Button Background Hover:
Variable x 50,
#E2E8F7BF (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
14.
Admin Subsection Selection Button Background Onclick:
Variable x 50,
#E2E8F780 (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
15.
Admin Subsection Selection Button Background Selected:
Variable x 50,
#94B8FF (DUPLICATE,
ORIGINAL SHOWN IN "USERS" SPECS)
16.
Admin Helpbook Article Navigation Button Background:
50 x 50, #6F8AE2
17.
Admin Helpbook Article Navigation Button Background
Hover: 50 x 50, #6F8AE2BF
18.
Admin Helpbook Article Navigation Button Background
OnClick: 50 x 50, #6F8AE280
19.
Amin Helpbook Article Navigation Button Background
Disabled: 50 x 50, #6F8AE280
20.
Admin Helpbook Article Related Video Button Background:
Variable x 50, #8DB2FF
21.
Admin Helpbook Article Related Video Button Background
Hover: Variable x 50, #8DB2FFBF
22.
Admin Helpbook Article Related Video Button Background
OnClick: Variable x 50, #8DB2FF80
23.
Admin Helpbook Search Results Entry Placeholder:
Variable x 16, #F0F2F7
24.
Admin Subsection Expanded Form Field Background:
550 x 100, #EBF0FC
|
