|
|
Line 26: |
Line 26: |
| # Print boxes around text using print_simple_box, use the CSS hooks for IDs and Classes | | # Print boxes around text using print_simple_box, use the CSS hooks for IDs and Classes |
|
| |
|
| ===Tabs=== | | ==Form layout== |
| | |
| .userinfobox {
| |
| border-top:0 none;
| |
| padding-top:0;
| |
| margin-top:0;
| |
| }
| |
| | |
| #mod-forum-user .forumpost,
| |
| #course-user .section .content {
| |
| border-top:0 none;
| |
| }
| |
| | |
| #course-user .section {
| |
| background-color:#fff;
| |
| padding:1em;
| |
| }
| |
| | |
| #course-user .section h2 {
| |
| margin-top:0;
| |
| }
| |
| | |
| #user-view .tabs td,
| |
| #user-edit .tabs td,
| |
| #mod-forum-user .tabs td {
| |
| padding-bottom:0;
| |
| }
| |
| | |
| #user-edit .generalbox {
| |
| width:100%
| |
| }
| |
| | |
| .mod-glossary .glossarydisplay tr,
| |
| .mod-glossary .glossarydisplay td {
| |
| border:0 none !important;
| |
| padding-bottom:0;
| |
| }
| |
| | |
| .mod-glossary td.entryboxheader {
| |
| height:0 !important;
| |
| background-color:#fff;
| |
| }
| |
| | |
| .mod-glossary .entrybox {
| |
| padding:0;
| |
| }
| |
| | |
| .tabs {
| |
| width:auto;
| |
| margin-left:auto;
| |
| margin-right:auto;
| |
| margin-bottom:0;
| |
| padding-bottom:0;
| |
| border-bottom:0 none;
| |
| }
| |
| | |
| #user-view .tabs {
| |
| width:80%;
| |
| }
| |
| | |
| .tabs tr,
| |
| .tabs .left,
| |
| .tabs .right {
| |
| background:url(pix/tab/tabsbg_x2.gif) bottom left repeat-x
| |
| }
| |
| | |
| .tabs .side {
| |
| border-bottom:0 none
| |
| }
| |
| | |
| .tabs td {
| |
| padding:0
| |
| }
| |
| | |
| .tabs .left {
| |
| width:0
| |
| }
| |
| | |
| .tabs .right {
| |
| width:75%
| |
| }
| |
| | |
| .tabrow {
| |
| width:100%;
| |
| margin:0;
| |
| border-collapse:collapse
| |
| }
| |
| | |
| .tabrow td {
| |
| padding:0 0 0 14px;
| |
| height:34px;
| |
| border-width:0
| |
| }
| |
| | |
| .tabs .r1 {
| |
| margin-bottom:1px
| |
| }
| |
| .tabrow td.selected {
| |
| border-width: 0px
| |
| }
| |
| | |
| .tabs .r0 .active {
| |
| background:url(pix/tab/left.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r1 .active {
| |
| background:url(pix/tab/left2.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r0 .inactive {
| |
| background:url(pix/tab/left_inactive.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r1 .inactive {
| |
| background:url(pix/tab/left_inactive2.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r0 .activetwo {
| |
| background:url(pix/tab/left_active2.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r1 .activetwo {
| |
| background:url(pix/tab/left_active2.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs,
| |
| .tabs tr,
| |
| .tabs .td,
| |
| .tabrow,
| |
| .tabrow tbody,
| |
| .tabrow tr,
| |
| .tabrow td {
| |
| background-color:transparent
| |
| }
| |
| | |
| .tabrow th {
| |
| display:none
| |
| }
| |
| | |
| .tabrow td .tablink {
| |
| padding:0 14px 0 0;
| |
| /*display:block;*/
| |
| white-space:nowrap;
| |
| line-height:32px;
| |
| text-align:center;
| |
| text-decoration:none;
| |
| height:34px;
| |
| width:auto
| |
| }
| |
| | |
| .tabs .r0 .active .tablink {
| |
| background:url(pix/tab/right.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabs .r1 .active .tablink {
| |
| background:url(pix/tab/right2.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabs .r0 .inactive .tablink {
| |
| background:url(pix/tab/right_inactive.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabs .r1 .inactive .tablink {
| |
| background:url(pix/tab/right_inactive2.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabs .r0 .activetwo .tablink {
| |
| background:url(pix/tab/right_active2.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabs .r1 .activetwo .tablink {
| |
| background:url(pix/tab/right_active2.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabrow td .tablink a {
| |
| width:auto;
| |
| line-height:32px
| |
| }
| |
| | |
| .tabs .r0 .active:hover {
| |
| background:url(pix/tab/left_hover.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r0 .active:hover .tablink {
| |
| background:url(pix/tab/right_hover.gif) bottom right no-repeat;
| |
| line-height:32px
| |
| }
| |
| | |
| .tabs .r0 .inactive:hover {
| |
| background:url(pix/tab/left_inactive.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r0 .inactive:hover .tablink {
| |
| background:url(pix/tab/right_inactive.gif) bottom right no-repeat;
| |
| line-height:32px
| |
| }
| |
| | |
| .tabs .r1 .active:hover {
| |
| background:url(pix/tab/left_hover2.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r1 .active:hover .tablink {
| |
| background:url(pix/tab/right_hover2.gif) bottom right no-repeat;
| |
| line-height:32px
| |
| }
| |
| | |
| .tabrow .last span {
| |
| padding:0 1px 0 0;
| |
| display:block;
| |
| background:url(pix/tab/right_end.gif) bottom right no-repeat
| |
| }
| |
| | |
| .tabs .r0 .selected {
| |
| background:url(pix/tab/left_active.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r1 .selected {
| |
| background:url(pix/tab/left_active2.gif) bottom left no-repeat
| |
| }
| |
| | |
| .tabs .r0 .selected .tablink {
| |
| background:url(pix/tab/right_active.gif) bottom right no-repeat;
| |
| line-height:32px
| |
| }
| |
| | |
| .tabs .r1 .selected .tablink {
| |
| background:url(pix/tab/right_active2.gif) bottom right no-repeat;
| |
| line-height:32px
| |
| }
| |
| | |
| /*.tabrow td.selected:hover {
| |
| background:url(pix/tab/left_active.gif) bottom left no-repeat;
| |
| }
| |
| | |
| .tabrow td.selected .tablink:hover {
| |
| background:url(pix/tab/right_active.gif) bottom right no-repeat;
| |
| }*/
| |
| | |
| .user-content h2 {
| |
| margin:0;
| |
| padding:0 1em
| |
| }
| |
| | |
| .user-content {
| |
| background-color:#FFFFFF;
| |
| border:1px solid #D1D7DC;
| |
| border-top-width:0;
| |
| padding:0.5em
| |
| }
| |
|
| |
|
| | # Show the more important settings at the top |
| | # Each entry should have a label, and if necessary, a help file |
| | # If there are more than 10 options, split them into required and optional/extra/advanced parameters |
|
| |
|
| ===Tabs=== | | ===Tabs=== |
This document is not authoritative, it is a collection of ideas and under construction.
Keeping it simple
Use the minimum interface required to get the job done
Standard pages
Activity modules
- index.php - lists all instances for that module in a course
- view.php - displays a particular instance
- config.html - configure an instance of the module
Blocks
- config.html - configure an instance of the block
One script per major function/page
...
Page layout
- Print headings with print_heading, use the CSS hooks for IDs and Classes
- Print boxes around text using print_simple_box, use the CSS hooks for IDs and Classes
Form layout
- Show the more important settings at the top
- Each entry should have a label, and if necessary, a help file
- If there are more than 10 options, split them into required and optional/extra/advanced parameters
Tabs
.tabs {
font-size:0.8em
}
.tablink a:link,
.tablink a:visited {
color:#000066;
}
.tablink a:hover {
text-decoration: none;
}
.selected .tablink a:link,
.selected .tablink a:visited {
color:#000000;
}
Dealing with tables
Use the print_table function whenever possible.
Standard navigation tools
- All pages should call print_header, and supply a standard navigation path to be displayed in it. Where possible, it should look like: COURSE >> INDEX >> INSTANCE >> SUBPAGES...
- Pages within activity modules should call navmenu() to generate the appropriate navigation menu.
URLs
- URLs should be as short as possible.
- No underscores in parameter names or files names
- Never use two words when one would do.
Buttons vs links
This is a hard one to define ...
The Google Web Accelerator issue definitely provides some pointers here:
- Actions which can modify the state of Moodle (data files, database, session information) should be performed through buttons
- At the very least, such actions which are implemented as links should forward to a confirmation page which *does* use buttons
CSS naming
Linking to help
- Help buttons should be on the right of the thing (as an exception it can be left, if the thing is right-aligned)
Related topics
Robin Good's Latest News. "Interaction Design Meets Online Real Estate" 1 Mar. 2005 http://www.masternewmedia.org/news/2005/03/01/interaction_design_meets_online_real.htm
The article presents a view of virtual spaces with the focus on human actions. It reminded me of communicative approaches like Moodle. The interface serves as the handle of all the communication tools.