Survey of existing page views and markup: Difference between revisions
From MoodleDocs
Amy Groshek (talk | contribs) |
Amy Groshek (talk | contribs) |
||
Line 1: | Line 1: | ||
==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== | ==File resource== | ||
[[Image:file-resource-screenshot.png|frame|center| | [[Image:file-resource-screenshot.png|600x400px|frame|border|center|Screenshot of file resource view for a non-image, embedded file]] | ||
Markup as follows: | |||
<code xml> | |||
<div class="region-content"> | |||
<span id="maincontent"></span> | |||
<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 19:56, 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
Markup as follows:
<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>
Resource intro text
CSS is alotted using the following selectors:
/* 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;
}
- #region-content is our content parent on this page
- there is no parent object (parent of both .resourcecontent and #resourceintro which binds them together