Merge branch 'design2015' of ssh://sapsailing.com/home/trac/git into design2015

# By Steffen Schaefer
# Via Steffen Schaefer
* 'design2015' of ssh://sapsailing.com/home/trac/git:
  Adaption of new EventsOverview styles / Fixed alternating background / Fixed widget hierarchy
  Adaption of new EventsOverview styles
  Header icons are now taken from the war file instead of local resources
  Adaption of new Footer styles
This commit is contained in:
Papick Garcia Taboada committed 2015-02-05 13:17:42 +01:00
commit 939d56fad6
12 files changed
+160 -199

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

@@ -1,76 +1,34 @@
.eventteasercontainer {
font-size: 15px;
/* @alternate */ font-size: 1rem;
text-align: center;
width: 100%;
height: 24em;
}
.eventteaser {
font-size: 15px;
/* @alternate */ font-size: 1rem;
display: inline-block;
margin-bottom: 3em;
text-align: left;
max-width: 100%;
}
.eventteaser:hover {
text-decoration: none;
}
.eventteaser:hover .eventteaser_name {
text-decoration: underline;
}
.eventteaser:hover .eventteaser_image {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
}
.eventteaser_image {
position: relative;
display: inline-block;
max-width: 100%;
}
.eventteaser_series {
position: absolute;
bottom: 0;
right: 0;
}
.eventteaser_name {
font-size: 1.466666666666667em;
font-weight: bold;
color: #008fcc;
margin-top: 0.333333333333333em;
}
.eventteaser_location {
color: #222;
}
/**
* The overview over recent events
*/
.eventsoverviewnavigation {
font-size: 15px;
/* @alternate */ font-size: 1rem;
font-size: 1rem;
}
.eventsoverviewnavigation .gridalternator {
overflow: visible;
}
.eventsoverviewrecent {
font-size: 15px;
/* @alternate */ font-size: 1rem;
font-size: 1rem;
padding-top: 2em;
}
.eventsoverviewrecent_year {
border-bottom: 1px solid #ccc;
transiton: opacity 0.1s;
border-bottom: 1px solid #eee;
-webkit-transition: opacity 0.1s;
-moz-transition: opacity 0.1s;
transition: opacity 0.1s;
}
.eventsoverviewrecent_year:nth-child(even) {
background: #f8f8f8;
background: #f2f2f2;
}
.eventsoverviewrecent_year:nth-child(even) .eventsoverviewrecent_year_header:hover,
.eventsoverviewrecent_year:nth-child(even) .eventsoverviewrecent_year_header:focus {
background-color: #f3f3f3;
background-color: #fbfbfb;
}
.eventsoverviewrecent_yearcollapsed .eventsoverviewrecent_year_header_info_arrow_image {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.eventsoverviewrecent_year_header {
padding: 0.666666666666667em;
@@ -78,7 +36,7 @@
}
.eventsoverviewrecent_year_header:hover,
.eventsoverviewrecent_year_header:focus {
background-color: #fcfcfc;
background-color: #fefefe;
}
.eventsoverviewrecent_year_header:hover .eventsoverviewrecent_year_header_title,
.eventsoverviewrecent_year_header:focus .eventsoverviewrecent_year_header_title {
@@ -95,14 +53,15 @@
}
.eventsoverviewrecent_year_header_info_arrow_image {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
transiton: transform 0.4s;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.eventsoverviewrecent_year_header_info_item {
border-right: 1px solid #ccc;
border-right: 1px solid #eee;
padding: 0.466666666666667em 1.133333333333333em;
}
.eventsoverviewrecent_year_header_info_item_value {
@@ -11,12 +11,6 @@ public interface EventsOverviewRecentResources extends ClientBundle {
LocalCss css();
public interface LocalCss extends CssResource {
String eventteasercontainer();
String eventteaser();
String eventteaser_name();
String eventteaser_image();
String eventteaser_series();
String eventteaser_location();
String eventsoverviewnavigation();
String gridalternator();
String eventsoverviewrecent();
@@ -5,12 +5,14 @@ import java.util.List;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.SpanElement;
import com.google.gwt.dom.client.Style.Display;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.HasOneWidget;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.gwt.home.client.app.HomePlacesNavigator;
import com.sap.sailing.gwt.home.client.shared.recentevent.RecentEvent;
@@ -28,8 +30,8 @@ public class EventsOverviewRecentYear extends Composite {
// @UiField SpanElement countriesCount;
// @UiField SpanElement sailorsCount;
// @UiField SpanElement trackedRacesCount;
@UiField DivElement recentEventsTeaserPanel;
@UiField HTMLPanel contentDiv;
@UiField HasOneWidget recentEventsTeaserPanel;
@UiField DivElement contentDiv;
@UiField HTMLPanel headerDiv;
private boolean isContentVisible;
@@ -44,7 +46,7 @@ public class EventsOverviewRecentYear extends Composite {
// this.trackedRacesCount.setInnerText("tbd.");
for (EventBaseDTO eventDTO : events) {
RecentEvent recentEvent = new RecentEvent(navigator, eventDTO);
recentEventsTeaserPanel.appendChild(recentEvent.getElement());
recentEventsTeaserPanel.setWidget(recentEvent);
}
isContentVisible = true;
headerDiv.addDomHandler(new ClickHandler() {
@@ -71,10 +73,11 @@ public class EventsOverviewRecentYear extends Composite {
}
private void updateContentVisibility() {
contentDiv.setVisible(isContentVisible);
if(isContentVisible) {
contentDiv.getStyle().clearDisplay();
headerDiv.getElement().removeClassName(EventsOverviewRecentResources.INSTANCE.css().eventsoverviewrecent_yearcollapsed());
} else {
contentDiv.getStyle().setDisplay(Display.NONE);
headerDiv.getElement().addClassName(EventsOverviewRecentResources.INSTANCE.css().eventsoverviewrecent_yearcollapsed());
}
}
@@ -1,46 +1,74 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
<ui:with field="i18n" type="com.sap.sailing.gwt.common.client.i18n.TextMessages"/>
<ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.place.events.recent.EventsOverviewRecentResources" />
<g:HTMLPanel>
<div class="{local_res.css.eventsoverviewrecent_year}">
<g:HTMLPanel ui:field="headerDiv" styleName="{local_res.css.eventsoverviewrecent_year_header}">
<div class="{res.mediaCss.grid}">
<div class="{res.mediaCss.small12} {res.mediaCss.medium2} {res.mediaCss.columns}">
<h3 class="{local_res.css.eventsoverviewrecent_year_header_title}"><span ui:field="year" /></h3>
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
<ui:with field="i18n" type="com.sap.sailing.gwt.common.client.i18n.TextMessages"/>
<ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.place.events.recent.EventsOverviewRecentResources" />
<g:HTMLPanel addStyleNames="{local_res.css.eventsoverviewrecent_year}">
<g:HTMLPanel ui:field="headerDiv" styleName="{local_res.css.eventsoverviewrecent_year_header}">
<div class="{res.mediaCss.grid}">
<div class="{res.mediaCss.small12} {res.mediaCss.medium2} {res.mediaCss.columns}">
<h3 class="{local_res.css.eventsoverviewrecent_year_header_title}">
<!-- year.title -->
<span ui:field="year" />
</h3>
</div>
<div class="{res.mediaCss.small12} {res.mediaCss.medium10} {res.mediaCss.columns}">
<table class="{local_res.css.eventsoverviewrecent_year_header_info}">
<tr>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}">
<span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}">
<!-- year.eventsCount -->
<span ui:field="eventsCount" />
<ui:text from='{i18n.eventsOverviewRecentEvents}' />
</span>
</div>
</td>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}">
<span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}">
<!-- year.countriesCount -->
<span ui:field="countriesCount" />
<ui:text from='{i18n.eventsOverviewRecentCountries}' />
</span>
</div>
</td>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}">
<span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}">
<!-- year.sailorsCount -->
<span ui:field="sailorsCount" />
<ui:text from='{i18n.eventsOverviewRecentSailors}' />
</span>
</div>
</td>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}">
<span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}">
<!-- year.trackedRacesCount -->
<span ui:field="trackedRacesCount" />
<ui:text from='{i18n.eventsOverviewRecentTrackedRaces}' />
</span>
</div>
</td>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_arrow}">
<img src="images/home/arrow-down-yellow.png" class="{local_res.css.eventsoverviewrecent_year_header_info_arrow_image}"></img>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="{res.mediaCss.small12} {res.mediaCss.medium10} {res.mediaCss.columns}">
<table class="{local_res.css.eventsoverviewrecent_year_header_info}">
<tr>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}"><span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}"><span ui:field="eventsCount" /></span><ui:text from='{i18n.eventsOverviewRecentEvents}'/></div>
</td>
<!--
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}"><span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}"><span ui:field="countriesCount" /></span><ui:text from='{i18n.eventsOverviewRecentCountries}'/></div>
</td>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}"><span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}"><span ui:field="sailorsCount" /></span><ui:text from='{i18n.eventsOverviewRecentSailors}'/></div>
</td>
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_item}"><span class="{local_res.css.eventsoverviewrecent_year_header_info_item_value}"><span ui:field="trackedRacesCount" /></span><ui:text from='{i18n.eventsOverviewRecentTrackedRaces}'/></div>
</td>
-->
<td>
<div class="{local_res.css.eventsoverviewrecent_year_header_info_arrow}"><img src="images/home/arrow-down-yellow.png" class="{local_res.css.eventsoverviewrecent_year_header_info_arrow_image}"></img></div>
</td>
</tr>
</table>
</div>
</div>
</g:HTMLPanel>
<g:HTMLPanel ui:field="contentDiv" styleName="{local_res.css.eventsoverviewrecent_year_content}">
<div ui:field="recentEventsTeaserPanel" class="{res.mediaCss.grid}">
</div>
</g:HTMLPanel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
<div ui:field="contentDiv" class="{local_res.css.eventsoverviewrecent_year_content}">
<g:SimplePanel ui:field="recentEventsTeaserPanel" styleName="{res.mediaCss.grid}">
<!-- EACH event in year.events -->
<!-- <s:eventsOverviewRecent.RecentEventTeaser ui:field='event'></s> -->
<!-- EACHEND -->
</g:SimplePanel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
@@ -1,16 +1,24 @@
/**
* Website footer styling
*/
.sitefooter {
font-size: 15px;
/* @alternate */ font-size: 1rem;
font-size: 1rem;
background: #333;
border-top: 5px solid #fff;
color: #fff;
line-height: 3em;
line-height: 5em;
width: 100%;
padding: 0 1.333333333333333em;
}
.sitefooter_copyright {
font-weight: 600;
margin-right: 2em;
}
@media (min-width: 45em) {
.sitefooter_copyright {
float: left;
}
}
.sitefooter_links {
text-align: left;
font-size: 1em;
@@ -26,26 +34,22 @@
.sitefooter_links_link:last-child {
margin-right: 0;
}
@media (min-width: 45em) {
.sitefooter_links_link {
display: inline-block;
}
}
.sitefooter_language {
text-align: left;
}
@media (min-width: 45em) {
.sitefooter_language {
text-align: right;
}
}
.sitefooter_language_link {
color: #f0ab00;
display: inline-block;
cursor: pointer;
margin-left: 0.666666666666667em;
}
@media (min-width: 25em) {
.sitefooter {
line-height: 4.666666666666667em;
}
.sitefooter_copyright {
float: left;
}
.sitefooter_links_link {
display: inline-block;
}
.sitefooter_language {
text-align: right;
}
}
@@ -13,13 +13,11 @@ import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.Window.Location;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.impl.HyperlinkImpl;
import com.sap.sailing.gwt.home.client.app.HomePlacesNavigator;
import com.sap.sailing.gwt.home.client.app.PlaceNavigation;
import com.sap.sailing.gwt.home.client.place.whatsnew.WhatsNewPlace;
@@ -32,40 +30,27 @@ public class Footer extends Composite {
}
@UiField Anchor changeLanguageLink;
@UiField Anchor releaseNotesLink;
@UiField DivElement languageSelectionDiv;
private final Map<String, String> localeAndLanguages;
private final PlaceNavigation<WhatsNewPlace> releaseNotesNavigation;
private final HomePlacesNavigator navigator;
/** set-configuration-property name='locale.searchorder' value='queryparam,cookie,useragent' /> */
private static final HyperlinkImpl HYPERLINK_IMPL = GWT.create(HyperlinkImpl.class);
@UiField(provided = true)
final PlaceNavigation<WhatsNewPlace> releaseNotesNavigation;
public Footer(final HomePlacesNavigator navigator) {
this.navigator = navigator;
localeAndLanguages = new HashMap<String, String>();
localeAndLanguages.put("default", "English");
localeAndLanguages.put("de", "Deutsch");
FooterResources.INSTANCE.css().ensureInjected();
releaseNotesNavigation = navigator.getWhatsNewNavigation(WhatsNewNavigationTabs.SailingAnalytics);
initWidget(uiBinder.createAndBindUi(this));
releaseNotesNavigation = navigator.getWhatsNewNavigation(WhatsNewNavigationTabs.SailingAnalytics);
releaseNotesLink.setHref(releaseNotesNavigation.getTargetUrl());
languageSelectionDiv.getStyle().setDisplay(Display.NONE);
updateUI();
}
@UiHandler("releaseNotesLink")
public void goToReleaseNotes(ClickEvent e) {
handleClickEvent(e, releaseNotesNavigation);
}
@UiHandler("changeLanguageLink")
public void changeLanguage(ClickEvent e) {
String selectedLanguage = changeLanguageLink.getText();
@@ -90,11 +75,4 @@ public class Footer extends Composite {
changeLanguageLink.setText(languagesToSelectFrom.values().iterator().next());
}
}
private void handleClickEvent(ClickEvent e, PlaceNavigation<?> placeNavigation) {
if (HYPERLINK_IMPL.handleAsClick((Event) e.getNativeEvent())) {
navigator.goToPlace(placeNavigation);
e.preventDefault();
}
}
}
@@ -1,34 +1,38 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
<ui:with field="i18n" type="com.sap.sailing.gwt.common.client.i18n.TextMessages" />
<ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.footer.FooterResources" />
<g:HTMLPanel>
<footer class="{local_res.css.sitefooter}">
<div class="{res.mediaCss.grid}">
<div class="{res.mediaCss.small12} {res.mediaCss.medium8} {res.mediaCss.columns}">
<div class="{local_res.css.sitefooter_copyright}"><ui:text from='{i18n.footerCopyright}'/></div>
<div class="{local_res.css.sitefooter_links}">
<a href="http://www.sap.com/about/legal/impressum.html" target="_blank" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.footerLegal}'/>
</a>
<a href="http://www.sap.com/about/legal/privacy.html" target="_blank" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.footerPrivacy}'/>
</a>
<a href="mailto:sailing_analytics%40sap.com?subject=[SAP Sailing] Feedback" target="_blank" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.footerFeedback}'/>
</a>
<g:Anchor ui:field="releaseNotesLink" styleName="{local_res.css.sitefooter_links_link}" text="{i18n.whatsNew}" />
</div>
</div>
<div class="{res.mediaCss.small12} {res.mediaCss.medium4} {res.mediaCss.columns} {local_res.css.sitefooter_language}">
<div ui:field="languageSelectionDiv">
<ui:text from='{i18n.footerLanguage}'/>:<g:Anchor ui:field="changeLanguageLink" styleName="{local_res.css.sitefooter_language_link}" />
</div>
</div>
</div>
</footer>
</g:HTMLPanel>
</ui:UiBinder>
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
<ui:with field="i18n" type="com.sap.sailing.gwt.common.client.i18n.TextMessages" />
<ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.footer.FooterResources" />
<ui:with field="releaseNotesNavigation" type="com.sap.sailing.gwt.home.client.app.PlaceNavigation" />
<g:HTMLPanel>
<!-- Website footer-->
<footer class="{local_res.css.sitefooter}">
<div class="{res.mediaCss.grid}">
<div class="{res.mediaCss.small12} {res.mediaCss.medium8} {res.mediaCss.columns}">
<div class="{local_res.css.sitefooter_copyright}">
<ui:text from='{i18n.footerCopyright}' />
</div>
<div class="{local_res.css.sitefooter_links}">
<a href="http://www.sap.com/about/legal/impressum.html" target="_blank" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.footerLegal}' />
</a>
<a href="http://www.sap.com/about/legal/privacy.html" target="_blank" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.footerPrivacy}' />
</a>
<a href="mailto:sailing_analytics%40sap.com?subject=[SAP Sailing] Feedback" target="_blank" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.footerFeedback}' />
</a>
<a href="{releaseNotesNavigation.getTargetUrl}" class="{local_res.css.sitefooter_links_link}">
<ui:text from='{i18n.whatsNew}' />
</a>
</div>
</div>
<div ui:field="languageSelectionDiv" class="{res.mediaCss.small12} {res.mediaCss.medium4} {res.mediaCss.columns} {local_res.css.sitefooter_language}">
<span><ui:text from='{i18n.footerLanguage}' />:</span>
<g:Anchor ui:field="changeLanguageLink" styleName="{local_res.css.sitefooter_language_link}" />
</div>
</div>
</footer>
</g:HTMLPanel>
</ui:UiBinder>
@@ -3,7 +3,6 @@ package com.sap.sailing.gwt.home.client.shared.footer;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.CssResource.Shared;
public interface FooterResources extends ClientBundle {
public static final FooterResources INSTANCE = GWT.create(FooterResources.class);
@@ -11,7 +10,6 @@ public interface FooterResources extends ClientBundle {
@Source("com/sap/sailing/gwt/home/client/shared/footer/Footer.gss")
LocalCss css();
@Shared
public interface LocalCss extends CssResource {
String sitefooter();
String sitefooter_copyright();
@@ -11,7 +11,7 @@
<div class="{res.mediaCss.grid}">
<div class="{local_res.css.siteheader_logo} {res.mediaCss.small2} {res.mediaCss.medium2} {res.mediaCss.large3} {res.mediaCss.columns}">
<a href="http://sapsponsorships.com">
<img src="{local_res.logo.getSafeUri}" alt="{i18n.headerLogo}" class="{local_res.css.siteheader_logo_image}"></img>
<img src="images/home/logo-small@2x.png" alt="{i18n.headerLogo}" class="{local_res.css.siteheader_logo_image}"></img>
<p class="{local_res.css.siteheader_logo_title}">
<ui:text from='{i18n.headerLogo}' />
</p>
@@ -3,7 +3,6 @@ package com.sap.sailing.gwt.home.client.shared.header;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.ImageResource;
public interface HeaderResources extends ClientBundle {
public static final HeaderResources INSTANCE = GWT.create(HeaderResources.class);
@@ -25,10 +24,4 @@ public interface HeaderResources extends ClientBundle {
String search_button();
String submit();
}
@Source("com/sap/sailing/gwt/home/images/logo-small@2x.png")
ImageResource logo();
@Source("com/sap/sailing/gwt/home/images/search-icon.png")
ImageResource searchIcon();
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB