Implementation of upcomming events changes

This commit is contained in:
Steffen Schaefer committed 2015-03-13 16:16:29 +01:00
1 parent 64e3eba991
commit b779cbd2be
7 files changed
+118 -33

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 623 B

@@ -12,6 +12,9 @@
}
.eventsoverviewupcoming {
font-size: 1rem;
margin-top: 1.333333333333333em;
border: 1px solid #dedede;
border-radius: 0.333333333333333em;
}
.eventsoverviewupcoming.accordioncollapsed .eventsoverviewupcoming_header_info_arrow_image {
-webkit-transform: rotate(0deg);
@@ -19,18 +22,58 @@
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.eventsoverviewupcoming.accordioncollapsed .eventsoverviewupcoming_header {
border-bottom: none;
}
.eventsoverviewupcoming_header {
padding-top: 0.333333333333333em;
padding-bottom: 0.666666666666667em;
cursor: pointer;
border-bottom: 1px solid #dedede;
padding: 0.666666666666667em 1em;
background: #f2f2f2;
color: #333;
}
.eventsoverviewupcoming_header_icon {
width: 2em;
margin-top: -0.266666666666667em;
vertical-align: middle;
}
.eventsoverviewupcoming_header_title {
margin: 0;
padding-top: 0.266666666666667em;
display: inline-block;
margin-left: 0.666666666666667em;
}
.eventsoverviewupcoming_header a {
color: #333;
text-decoration: none;
}
.eventsoverviewupcoming_header_ticker {
margin-left: 0.333333333333333em;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
width: 66%;
}
@media (min-width: 61em) {
.eventsoverviewupcoming_header_ticker {
width: 77%;
}
}
.eventsoverviewupcoming_header_tickerhide {
display: none;
}
.eventsoverviewupcoming_header_info {
float: right;
white-space: nowrap;
}
.eventsoverviewupcoming_header_info_arrow {
padding: 0.466666666666667em 1.133333333333333em;
}
.eventsoverviewupcoming_header_info_arrow_image {
width: 1.333333333333333em;
min-width: 1.333333333333333em;
vertical-align: middle;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
@@ -55,17 +98,25 @@
}
.eventsoverviewupcoming_content_event {
height: 3.333333333333333em;
padding-left: 1em;
padding-right: 1em;
line-height: 3.333333333333333em;
border-bottom: 1px solid #dedede;
}
.eventsoverviewupcoming_content_event:nth-child(odd) {
background: #f2f2f2;
.eventsoverviewupcoming_content_event:last-child {
border-bottom: none;
}
.eventsoverviewupcoming_content_event_name {
font-size: 1.466666666666667em;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 60%;
}
@media (min-width: 800px) {
.eventsoverviewupcoming_content_event_name {
width: 41.66666%;
}
}
.eventsoverviewupcoming_content_event_name:hover {
text-decoration: underline;
@@ -73,11 +124,27 @@
.eventsoverviewupcoming_content_event_location {
white-space: nowrap;
color: #333;
text-align: right;
width: 40%;
}
.eventsoverviewupcoming_content_event_icon {
text-align: center;
@media (min-width: 800px) {
.eventsoverviewupcoming_content_event_location {
width: 33.33333%;
text-align: left;
}
}
.eventsoverviewupcoming_content_event_icon img {
.eventsoverviewupcoming_content_event_countdown {
color: #333;
white-space: nowrap;
text-align: right;
display: none;
}
@media (min-width: 800px) {
.eventsoverviewupcoming_content_event_countdown {
display: block;
}
}
.eventsoverviewupcoming_content_event_countdown img {
vertical-align: middle;
width: 0.533333333333333em;
}
@@ -11,6 +11,7 @@ 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.FlowPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.gwt.home.client.app.HomePlacesNavigator;
@@ -25,17 +26,17 @@ public class EventsOverviewUpcoming extends Composite {
private final HomePlacesNavigator navigator;
private final List<UpcomingEvent> upcomingEventComposites;
private final List<EventsOverviewUpcomingEvent> upcomingEventComposites;
@UiField HTMLPanel header;
@UiField HTMLPanel eventsPlaceholder;
@UiField FlowPanel eventsPlaceholder;
@UiField SpanElement eventsCount;
private boolean isContentVisible = true;
public EventsOverviewUpcoming(HomePlacesNavigator navigator) {
this.navigator = navigator;
upcomingEventComposites = new ArrayList<UpcomingEvent>();
upcomingEventComposites = new ArrayList<EventsOverviewUpcomingEvent>();
EventsOverviewUpcomingResources.INSTANCE.css().ensureInjected();
initWidget(uiBinder.createAndBindUi(this));
@@ -52,7 +53,7 @@ public class EventsOverviewUpcoming extends Composite {
eventsPlaceholder.clear();
upcomingEventComposites.clear();
for (EventListEventDTO event : arrayList) {
UpcomingEvent upcomingEvent = new UpcomingEvent(event, navigator);
EventsOverviewUpcomingEvent upcomingEvent = new EventsOverviewUpcomingEvent(event, navigator);
upcomingEventComposites.add(upcomingEvent);
eventsPlaceholder.getElement().appendChild(upcomingEvent.getElement());
}
@@ -2,38 +2,53 @@
<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="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
<ui:with field="i18n_ubi" 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.upcoming.EventsOverviewUpcomingResources" />
<g:FlowPanel addStyleNames="{local_res.css.eventsoverviewupcoming} {local_res.css.accordion}">
<g:HTMLPanel ui:field="header" addStyleNames="{local_res.css.eventsoverviewupcoming_header} {local_res.css.accordion_trigger}">
<g:HTMLPanel addStyleNames="{local_res.css.eventsoverviewupcoming} {local_res.css.accordion}">
<!-- IFEND upcomingEvents.events.length > 1 ADD CLASS local_res.css.accordion ELSE ADD CLASS local_res.css.accordioncollapsed -->
<g:HTMLPanel ui:field="header" addStyleNames="{local_res.css.eventsoverviewupcoming_header} {local_res.css.accordion_trigger}">
<div class="{res.mediaCss.grid}">
<div class="{res.mediaCss.small6} {res.mediaCss.columns}">
<h3><ui:text from='{i18n.seriesHeaderUpcoming}'/></h3>
<div class="{res.mediaCss.small9} {res.mediaCss.columns}">
<img src="images/home/upcoming-events-icon.png" class="{local_res.css.eventsoverviewupcoming_header_icon}"></img>
<!-- IF upcomingEvents.events.length < 2 -->
<span>
<h3 class="{local_res.css.eventsoverviewupcoming_header_title}">
<ui:text from="{i18n_ubi.seriesHeaderUpcoming}" />:</h3>
<span class="{local_res.css.eventsoverviewupcoming_header_ticker}">
<!-- upcomingEvents.events[0].name -->,
<!-- upcomingEvents.events[0].venue.name -->,
<!-- upcomingEvents.events[0].date -->
</span>
</span>
<!-- IFEND upcomingEvents.events.length < 2 -->
</div>
<div class="{res.mediaCss.small6} {res.mediaCss.columns}">
<!-- IF upcomingEvents.events.length > 1 -->
<div class="{res.mediaCss.small3} {res.mediaCss.columns}">
<table class="{local_res.css.eventsoverviewupcoming_header_info}">
<tr>
<td>
<div class="{local_res.css.eventsoverviewupcoming_header_info_item}">
<span class="{local_res.css.eventsoverviewupcoming_header_info_item_value}">
<span ui:field="eventsCount"></span>
<span ui:field="eventsCount" />
<ui:text from='{i18n.events}' />
</span>
</div>
</td>
<td>
<div class="{local_res.css.eventsoverviewupcoming_header_info_arrow}">
<img src="images/home/arrow-down-yellow.png" class="{local_res.css.eventsoverviewupcoming_header_info_arrow_image}"></img>
<img src="images/home/arrow-down-grey.png" class="{local_res.css.eventsoverviewupcoming_header_info_arrow_image}"></img>
</div>
</td>
</tr>
</table>
</div>
<!-- IFEND upcomingEvents.events.length > 1 -->
</div>
</g:HTMLPanel>
<g:HTMLPanel ui:field='eventsPlaceholder' addStyleNames="{local_res.css.eventsoverviewupcoming_content} {local_res.css.accordion_content}" >
<!-- the upcoming event widgets will be inserted here -->
</g:HTMLPanel>
</g:FlowPanel>
<!-- IF upcomingEvents.events.length > 1 -->
<g:FlowPanel ui:field="eventsPlaceholder" addStyleNames="{local_res.css.eventsoverviewupcoming_content} {local_res.css.accordion_content}" />
<!-- IFEND upcomingEvents.events.length > 1 -->
</g:HTMLPanel>
</ui:UiBinder>
@@ -16,7 +16,7 @@ import com.sap.sailing.gwt.home.client.place.event2.EventDefaultPlace;
import com.sap.sailing.gwt.home.client.shared.EventDatesFormatterUtil;
import com.sap.sailing.gwt.ui.shared.eventlist.EventListEventDTO;
public class UpcomingEvent extends Composite {
public class EventsOverviewUpcomingEvent extends Composite {
@UiField DivElement eventName;
@UiField SpanElement venueName;
@@ -26,12 +26,12 @@ public class UpcomingEvent extends Composite {
private final HomePlacesNavigator navigator;
private final PlaceNavigation<EventDefaultPlace> eventNavigation;
interface UpcomingEventUiBinder extends UiBinder<Widget, UpcomingEvent> {
interface UpcomingEventUiBinder extends UiBinder<Widget, EventsOverviewUpcomingEvent> {
}
private static UpcomingEventUiBinder uiBinder = GWT.create(UpcomingEventUiBinder.class);
public UpcomingEvent(final EventListEventDTO event, final HomePlacesNavigator navigator) {
public EventsOverviewUpcomingEvent(final EventListEventDTO event, final HomePlacesNavigator navigator) {
this.navigator = navigator;
EventsOverviewUpcomingResources.INSTANCE.css().ensureInjected();
@@ -7,14 +7,12 @@
<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.place.events.upcoming.EventsOverviewUpcomingResources" />
<g:HTMLPanel addStyleNames="{local_res.css.eventsoverviewupcoming_content_event}">
<g:Anchor ui:field="eventOverviewLink" addStyleNames="{res.mediaCss.grid}">
<div ui:field='eventName' class="{res.mediaCss.small6} {res.mediaCss.columns} {local_res.css.eventsoverviewupcoming_content_event_name}"></div>
<div class="{res.mediaCss.small5} {res.mediaCss.columns} {local_res.css.eventsoverviewupcoming_content_event_location}">
<div ui:field='eventName' class="{res.mediaCss.small5} {res.mediaCss.columns} {local_res.css.eventsoverviewupcoming_content_event_name}" />
<div class="{res.mediaCss.small4} {res.mediaCss.columns} {local_res.css.eventsoverviewupcoming_content_event_location}">
<span ui:field='venueName' />,
<span ui:field='eventStartDate' />
</div>
<div class="{res.mediaCss.small1} {res.mediaCss.columns} {local_res.css.eventsoverviewupcoming_content_event_icon}">
<img src="images/home/breadcrumb-arrow.png"></img>
</div>
<div class="{res.mediaCss.small3} {res.mediaCss.columns} {local_res.css.eventsoverviewupcoming_content_event_countdown}">starts in days</div>
</g:Anchor>
</g:HTMLPanel>
</ui:UiBinder>
@@ -18,6 +18,10 @@ public interface EventsOverviewUpcomingResources extends ClientBundle {
String accordioncollapsed();
String eventsoverviewupcoming_header_info_arrow_image();
String eventsoverviewupcoming_header();
String eventsoverviewupcoming_header_icon();
String eventsoverviewupcoming_header_title();
String eventsoverviewupcoming_header_ticker();
String eventsoverviewupcoming_header_tickerhide();
String eventsoverviewupcoming_header_info();
String eventsoverviewupcoming_header_info_arrow();
String eventsoverviewupcoming_header_info_item();
@@ -26,6 +30,6 @@ public interface EventsOverviewUpcomingResources extends ClientBundle {
String eventsoverviewupcoming_content_event();
String eventsoverviewupcoming_content_event_name();
String eventsoverviewupcoming_content_event_location();
String eventsoverviewupcoming_content_event_icon();
String eventsoverviewupcoming_content_event_countdown();
}
}