Commit 5aed497e authored by Matija Obreza's avatar Matija Obreza

Look-and-Feel guide

parent ac602a26
/*
* Copyright 2016 Global Crop Diversity Trust
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.genesys2.server.servlet.controller;
import org.genesys2.server.service.ContentService;
import org.genesys2.server.service.CropService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* Controller to render the Look-and-Feel pages for GUI designers
*/
@Controller
public class LookAndFeelController extends BaseController {
@Autowired
private CropService cropService;
@Autowired
private ContentService contentService;
@Value("${captcha.siteKey}")
private String captchaSiteKey;
@Value("${captcha.privateKey}")
private String captchaPrivateKey;
@RequestMapping("/look-and-feel")
public String index(ModelMap model) {
model.addAttribute("cropList", cropService.list(getLocale()));
model.addAttribute("lastNews", contentService.lastNews());
model.addAttribute("welcomeBlurp", contentService.getGlobalArticle("about", getLocale()));
model.addAttribute("captchaSiteKey", captchaSiteKey);
return "/lookandfeel";
}
}
<!DOCTYPE html>
<%@include file="init.jsp"%>
<html>
<head>
<title><spring:message code="page.home.title" /></title>
<style type="text/css">
.mcboatface {
margin: 1em 0 2em 2em;
background-color: #f0f0f0;
color: Black;
padding: 0.5em;
}
.mcboatface pre {
margin: 1em;
}
hr.boaty {
height: 10px;
border-style: dotted;
border-color: Black;
}
</style>
</head>
<body>
<%@include file="lookandfeel/headers.jspf"%>
<hr class="boaty" />
<%@include file="lookandfeel/alerts.jspf"%>
<hr class="boaty" />
<%@include file="lookandfeel/freetext.jspf"%>
<hr class="boaty" />
<%@include file="lookandfeel/forms.jspf"%>
<hr class="boaty" />
<content tag="javascript">
</content>
</body>
</html>
\ No newline at end of file
<%@include file="/WEB-INF/jsp/init.jsp"%>
<!-- Alerts -->
<div class="alert alert-info">
This accession is in the Multilateral System of the ITPGRFA.
</div>
<div class="mcboatface">Different types of alerts are used: <code>alert-info</code>, <code>alert-warning</code>,
<code>alert-error</code> (Coming from Bootstrap).
<pre>&lt;div class="alert alert-info"&gt;Contents here&lt;/div&gt;</pre>
</div>
<div class="alert alert-warning">
This accession is in the Multilateral System of the ITPGRFA.
</div>
<div class="alert alert-error">
This is an error.
</div>
<%@include file="/WEB-INF/jsp/init.jsp"%>
<!-- Forms -->
<%@include file="/WEB-INF/jsp/init.jsp"%>
<!-- Freetext -->
<div class="free-text">
<h1>HTML text</h1>
<p>This is used all over the place to render user-provided HTML contents.
It will generally contains paragraphs, lists, tables, etc.</p>
<p>This, for example, is a normal <code>&lt;p&gt;</code> with a <a href="#">link</a>
to some other content.</p>
<h2>H2</h2>
<p>
Content <b>bold</b> and so on
</p>
<h3>H3</h3>
<h3>Unordered list</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered lists</h3>
<ol>
<li>Item 1</li>
<li><a href="#">Item with a link</a> and no link</li>
<li>Item with <a href="#">some link</a></li>
</ol>
<h2>Tables</h2>
<table>
<thead>
<tr>
<td>Heading</td>
<td>Heading</td>
<td>Heading</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="mcboatface">Dynamic (user-provided) HTML content always uses a <code>&lt;div class="free-text" ...&gt;</code>
</div>
<%@include file="/WEB-INF/jsp/init.jsp"%>
<h1>
<spring:message code="page.home.title" />
</h1>
<div class="mcboatface">The first <code>&lt;h1&gt;</code> in the content section of every page
is nicely formatted without needing additional CSS class declaration.
</div>
<!-- cms:informative -->
<cms:informative-h1 title="page.home.title" fancy="true" info="page.home.title" />
<div class="mcboatface">A similar heading can be generated using <code>&lt;cms:informative-h1 /&gt;</code>
tag. This can be positioned anywhere in the content section.
<pre>&lt;cms:informative-h1 title="page.home.title" fancy="true" info="page.home.title" /&gt;</pre>
The <code>fancy</code> attribute determines whether or not the text provided in the <code>info</code> is
rendered or not.
</div>
<!-- cms:informative -->
<cms:informative-h1 title="accession.page.data.title" fancy="false" />
<div class="mcboatface">See, here it is again!</div>
......@@ -25,7 +25,11 @@
</div>
</c:if>
<c:if test="${fancy eq null or not fancy or info eq null}">
<h1>
<spring:message code="${title}" />
</h1>
<div class="informative-h1 green-bg row">
<div class="col-md-12 col-sm-12">
<h1>
<spring:message code="${title}" />
</h1>
</div>
</div>
</c:if>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment