testar commita demopage och två csser

This commit is contained in:
Fredrik Friis 2011-08-08 17:05:43 +09:00
parent 166e82d1b5
commit f07467ce23
3 changed files with 326 additions and 243 deletions
src/main
java/se/su/dsv/scipro/basepages
webapp/css

@ -1,246 +1,311 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"> <html
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body> <body>
<wicket:extend> <wicket:extend>
<div class="info-box rounded-box span-20 last"> <div class="span-22 last">
<p>Remember to save the thingamajig before continuing.</p>
<ul> <table class="rounded-table seminar-table even-rows">
<li>Edit</li> <tr>
<li>Save</li> <th>Date</th>
<li>Continue working</li> <th>Level</th>
</ul> </tr>
</div> <tr>
<td><span class="span-2">20XX-XX-XX</span>
<div class="info-box rounded-box span-12 last"> </td>
<p>Do not leave your computer unsupervised.</p> <td>Bachelor</td>
</div> </tr>
<tr>
<div class="info-box rounded-box span-8 last"> <td><span class="span-2">20XX-XX-XX</span>
Text without p enclosed. </td>
</div> <td>Bachelor</td>
</tr>
<div class="span-22 last"> <tr>
<h2 class="section">This is a section</h2> <td><span class="span-2">20XX-XX-XX</span>
<p>Cool</p> </td>
</div> <td>Bachelor</td>
</tr>
<div class="span-18 last"> <tr>
<h3 class="section">This is a subsection</h3> <td><span class="span-2">20XX-XX-XX</span>
<p>Even cooler</p> </td>
</div> <td>Bachelor</td>
</tr>
<div id="message-list" class="span-16 last"> <tr>
<table class="rounded-table"> <td colspan="22"></td>
<tr> </tr>
<th>Subject</th> </table>
<th>From</th>
<th>Date</th> <!-- Left column -->
</tr> <div class="span-11 colborder">
<tr class="unread-message-table-row">
<td>Mötesförslag</td> <div class="append-bottom"></div>
<td>Lars Larsson</td>
<td>2011-04-01</td> <div class="append-bottom">
</tr>
<tr> <div class="box-title rounded">
<td>Urgent: Changed dates for peer-review</td> <span>Just a heading</span>
<td>Nils Nilsson</td> </div>
<td>2011-03-27</td>
</tr> </div>
<tr>
<td>Handledning 29 mars inställd</td>
<td>Hand Ledare</td> <div class="append-bottom">
<td>2011-03-26</td>
</tr> <fieldset class="rounded-fieldset">
<tr> <legend>Group view </legend>
<td colspan="3"><a href="#">All your messages...</a></td> <div>Title: SciPro</div>
</tr> <div>Level: Bachelor</div>
</table> <div>Authors: Janne</div>
</div> </fieldset>
<div id="file-list" class="span-14 last"> </div>
<table class="rounded-table">
<tr>
<th>Filename</th>
<th>Size</th>
<th>Date</th>
</tr> <div class="append-bottom">
<tr>
<td>file1.pdf</td> <div class="info-box rounded-box last">
<td>201 KiB</td> <p>Remember to save the thingamajig before continuing.</p>
<td>2011-04-01</td> <ul>
</tr> <li>Edit</li>
<tr> <li>Save</li>
<td>file2.pdf</td> <li>Continue working</li>
<td>13 KiB</td> </ul>
<td>2011-03-27</td> </div>
</tr>
<tr> </div>
<td>Total: 2</td>
<td>214 KiB</td>
<td>&nbsp;</td> <div class="append-bottom">
</tr>
</table> <div class="rounded-box">
</div>
<span class="box-title rounded">Round box <span><a
<div id="unstyled-table" class="span-18 last"> href="#" class="right-corner-resource"><img class="icon-12"
<table class="rounded-table-top"> src="images/icons/delete_16x16.png" alt="Delete" title="Delete" />
<tr> </a> </span> </span> <span>With a heading and close/delete button</span>
<th>Column A</th> </div>
<th>Column B</th>
<th>Column C</th> </div>
</tr>
<tr> <div class="append-bottom">
<td>Hej</td>
<td>Svejs</td> <div class="rounded-box">
<td>Karamelltroll</td>
</tr> <span class="box-title rounded">Round box</span> <span>With
<tr> a heading</span>
<td>Knoll</td> </div>
<td>Tott</td>
<td>Pepparlott</td> </div>
</tr>
</table>
</div> <div class="append-bottom">
<div class="span-18 last"> <div class="rounded-box">
<h3 wicket:id="tooltipDemo">MouseOver here for tooltip</h3> <span>Just a round box</span>
<h3>Highlighted form components</h3> </div>
<div wicket:id="radioChoices"></div>
</div>
<div>
<span class="hilight"> <div class="append-bottom">
<!-- Just stick a normal wicket:id onto the input to use it with wicket.
To get the highlight effect it must be contained in this span and the order of input+label is important --> <div>Lorum ipsum blabla blabla bla bla</div>
<input id="d1" type="checkbox" class="question-display"></input>
<label for="d1">Checkbox</label> </div>
</span>
<span class="hilight"> <div class="append-bottom">
<input id="d2" type="checkbox" checked class="question-display"></input> <button type="submit">Button</button>
<label for="d2">Checked Checkbox</label> </div>
</span>
<span class="hilight">
<input id="d3" type="checkbox" checked disabled class="question-display"></input>
<label for="d3">Checked Checkbox disabled</label> <div class="append-bottom">
</span> <span wicket:id="tooltipDemo">MouseOver here for tooltip</span>
</div>
<span class="hilight">
<input id="d4" type="checkbox" disabled class="question-display"></input> <div class="append-bottom">
<label for="d4">Checkbox disabled</label> <h4>Example of ExpandableMulitLineLabel:</h4>
</span> <span wicket:id="exMultiLineLabel"></span>
</div> </div>
</div>
<div class="span-5 last">
<h3>Icons</h3>
<table> </div>
<tr>
<td>Expand section</td> <div class="span-10.5 last">
<td><img wicket:id="expandIcon" /></td>
</tr> <div class="append-bottom">
<tr>
<td>Contract section</td> <table>
<td><img wicket:id="contractIcon" /></td> <tr>
</tr> <th>Date</th>
<tr> <th>Level</th>
<td>Edit</td> </tr>
<td><img wicket:id="editIcon" /></td> <tr>
</tr> <td>Blabla</td>
<tr> <td>HlaHla</td>
<td>Delete</td> </tr>
<td><img wicket:id="deleteIcon" /></td>
</tr> </table>
<tr>
<td>Add</td> </div>
<td><img wicket:id="addIcon" /></td>
</tr>
<tr>
<td>Details</td> <button>Hej</button>
<td><img wicket:id="detailsIcon" /></td>
</tr> <h3>Icons</h3>
<tr>
<td>Yes</td> <button>Hej</button>
<td><img wicket:id="yesIcon" /></td>
</tr>
<tr>
<td>No</td>
<td><img wicket:id="noIcon" /></td> <table>
</tr> <tr>
<tr> <td>Expand section</td>
<td>Check</td> <td><img wicket:id="expandIcon" />
<td><img wicket:id="checkIcon" /></td> </td>
</tr> </tr>
<tr> <tr>
<td>Arrow down</td> <td>Contract section</td>
<td><img wicket:id="arrowDownIcon" /></td> <td><img wicket:id="contractIcon" />
</tr> </td>
<tr> </tr>
<td>Arrow up</td> <tr>
<td><img wicket:id="arrowUpIcon" /></td> <td>Edit</td>
</tr> <td><img wicket:id="editIcon" />
<tr> </td>
<td>Arrow left</td> </tr>
<td><img wicket:id="arrowLeftIcon" /></td> <tr>
</tr> <td>Delete</td>
<tr> <td><img wicket:id="deleteIcon" />
<td>Arrow right</td> </td>
<td><img wicket:id="arrowRightIcon" /></td> </tr>
</tr> <tr>
<tr> <td>Add</td>
<td>Help</td> <td><img wicket:id="addIcon" />
<td><img wicket:id="helpIcon" /></td> </td>
</tr> </tr>
<tr> <tr>
<td>Home</td> <td>Details</td>
<td><img wicket:id="homeIcon" /></td> <td><img wicket:id="detailsIcon" />
</tr> </td>
<tr> </tr>
<td>Important</td> <tr>
<td><img wicket:id="importantIcon" /></td> <td>Yes</td>
</tr> <td><img wicket:id="yesIcon" />
<tr> </td>
<td>Mail</td> </tr>
<td><img wicket:id="mailIcon" /></td> <tr>
</tr> <td>No</td>
<tr> <td><img wicket:id="noIcon" />
<td>New mail</td> </td>
<td><img wicket:id="mailNewIcon" /></td> </tr>
</tr> <tr>
<tr> <td>Check</td>
<td>Settings</td> <td><img wicket:id="checkIcon" />
<td><img wicket:id="settingsIcon" /></td> </td>
</tr> </tr>
<tr> <tr>
<td>Empty</td> <td>Arrow down</td>
<td><img wicket:id="emptyIcon" /></td> <td><img wicket:id="arrowDownIcon" />
</tr> </td>
<tr> </tr>
<td>User</td> <tr>
<td><img wicket:id="userIcon" /></td> <td>Arrow up</td>
</tr> <td><img wicket:id="arrowUpIcon" />
<tr> </td>
<td>Done event</td> </tr>
<td><img wicket:id="eventDoneIcon" /></td> <tr>
</tr> <td>Arrow left</td>
<tr> <td><img wicket:id="arrowLeftIcon" />
<td>Upcoming event</td> </td>
<td><img wicket:id="eventUpcomingIcon" /></td> </tr>
</tr> <tr>
</table> <td>Arrow right</td>
<div> <td><img wicket:id="arrowRightIcon" />
<span>Example of IconizedComponent</span><br /> </td>
<span wicket:id="user"></span> </tr>
</div> <tr>
<div> <td>Help</td>
<span>Example of AjaxActionIcon: </span><img wicket:id="actionIcon" /> <td><img wicket:id="helpIcon" />
</div> </td>
</div> </tr>
<div class="prepend-1 span-8 last"> <tr>
<h4>Example of ExpandableMulitLineLabel:</h4> <td>Home</td>
<span wicket:id="exMultiLineLabel"></span> <td><img wicket:id="homeIcon" />
</div> </td>
</tr>
</wicket:extend> <tr>
<td>Important</td>
<td><img wicket:id="importantIcon" />
</td>
</tr>
<tr>
<td>Mail</td>
<td><img wicket:id="mailIcon" />
</td>
</tr>
<tr>
<td>New mail</td>
<td><img wicket:id="mailNewIcon" />
</td>
</tr>
<tr>
<td>Settings</td>
<td><img wicket:id="settingsIcon" />
</td>
</tr>
<tr>
<td>Empty</td>
<td><img wicket:id="emptyIcon" />
</td>
</tr>
<tr>
<td>User</td>
<td><img wicket:id="userIcon" />
</td>
</tr>
<tr>
<td>Done event</td>
<td><img wicket:id="eventDoneIcon" />
</td>
</tr>
<tr>
<td>Upcoming event</td>
<td><img wicket:id="eventUpcomingIcon" />
</td>
</tr>
</table>
<div>
<span>Example of IconizedComponent</span><br /> <span
wicket:id="user"></span>
</div>
<div>
<span>Example of AjaxActionIcon: </span><img wicket:id="actionIcon" />
</div>
</div>
</div>
</wicket:extend>
</body> </body>
</html> </html>

@ -118,6 +118,7 @@ form.inline p {margin-bottom:0;}
.span-8 {width:310px;} .span-8 {width:310px;}
.span-9 {width:350px;} .span-9 {width:350px;}
.span-10 {width:390px;} .span-10 {width:390px;}
.span-10.5 {width:429}
.span-11 {width:430px;} .span-11 {width:430px;}
.span-12 {width:470px;} .span-12 {width:470px;}
.span-13 {width:510px;} .span-13 {width:510px;}

@ -1,6 +1,6 @@
@IMPORT url("menu.css"); @IMPORT url("menu.css");
/* är det såhär man aktiverar plugins? */ /* är det såhär man aktiverar plugins? */
@IMPORT url("blueprint/plugins/buttons/screen.css"); /* @IMPORT url("blueprint/plugins/buttons/screen.css"); */
/* BASE */ /* BASE */
@ -119,6 +119,23 @@ img.department-logotype {
.inline-link-list li a { display: block; padding: 5px 10px; text-decoration: none; } .inline-link-list li a { display: block; padding: 5px 10px; text-decoration: none; }
.inline-link-list li:hover > a { text-decoration: underline; } .inline-link-list li:hover > a { text-decoration: underline; }
.rounded-fieldset {
padding:1em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded-box { .rounded-box {
font-size: 0.9em; font-size: 0.9em;
padding:1.5em; padding:1.5em;