Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Survey of existing page views and markup: Difference between revisions

From MoodleDocs
Line 5: Line 5:


==File resource==
==File resource==
===Visible Conventions===
* First-level header (optional)
* Content embedded or as link
* Content description, "intro"


  [[Image:file-resource-screenshot.png|600x400px|frame|border|center|Screenshot of file resource view for a non-image, embedded file]]
  [[Image:file-resource-screenshot.png|600x400px|frame|border|center|Screenshot of file resource view for a non-image, embedded file]]


  [[Image:file-resource-screenshot-withheading.png|600x400px|frame|border|center|Screenshot of file resource view for a non-image, embedded file, with *Display resource name* setting enabled]]
  [[Image:file-resource-screenshot-withheading.png|600x400px|frame|border|center|Screenshot of file resource view for a non-image, embedded file, with *Display resource name* setting enabled]]
Markup as follows:
<code xml>
<div class="region-content">
  <span id="maincontent"></span>
  <h2 id="resourceheading" class="main">File</h2><!-- included here if Display resource name setting is enabled -->
  <div class="resourcecontent resourcegeneral">
    <object id="resourceobject" data="http://localhost/code/moodle22/pluginfile.php/31/mod_resource/content/7/Sample%20PowerPoint.pptx" type="application/vnd.openxmlformats-officedocument.presentationml.presentation" width="800" height="600" style="width: 971px; height: 400px; ">
      <param name="src" value="http://localhost/code/moodle22/pluginfile.php/31/mod_resource/content/7/Sample%20PowerPoint.pptx">
          Click <a href="http://localhost/code/moodle22/pluginfile.php/31/mod_resource/content/7/Sample%20PowerPoint.pptx">Sample PowerPoint.pptx</a> link to view the file.
    </object>
  </div>
  <div id="resourceintro" class="box mod_introbox">
    <div class="no-overflow"><p>Resource intro text</p></div>
  </div>                       
</div>
</code>
CSS is alotted using the following selectors:
<code xml>
/* Note both body classname .path-mod-resource and body ID #page-mod-resource-view are used */
#page-mod-resource-view .resourcecontent {
text-align: center;
}
.path-mod-resource .resourcecontent {
text-align: center;
}
#page-mod-resource-view .resourcecontent {
text-align: center;
margin: 20px;
}
.mod_introbox {
width: 90%;
margin: 1em auto;
}
.mod_introbox {
border-color: #DDD;
}
.mod_introbox {
border: 1px solid;
padding: 10px;
}
</code>
* #region-content is our content parent on this page
* there is no parent object (parent of both .resourcecontent and #resourceintro which binds them together


==Folder resource==
==Folder resource==

Revision as of 20:21, 6 November 2012

Overall Conventions

  • First, the no-brainer: page content is inside of #region-main #region-content
  • Classes .box and .generalbox are utilized in many screen views, but not consistently across different resource and activity types
  • Most resources and activities use a combination of IDs and classes to style components

File resource

Visible Conventions

  • First-level header (optional)
  • Content embedded or as link
  • Content description, "intro"
Screenshot of file resource view for a non-image, embedded file
Screenshot of file resource view for a non-image, embedded file, with *Display resource name* setting enabled

Folder resource

Page resource

URL resource

Assignment Activity

Chat activity

Choice activity

Database activity

Forum activity

Glossary activity

Lesson activity

Quiz activity

SCORM activity

Survey activity

Wiki activity

Workshop activity

Retrieved from "https://docs.moodle.org/dev/index.php?title=Survey_of_existing_page_views_and_markup&oldid=36059"
Powered by MediaWiki