mirror of
https://github.com/eclipse-sailing-analytics/sailing-analytics.git
synced 2026-10-15 08:41:01 +00:00
Implementation of upcomming events changes
This commit is contained in:
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 |
+75
-8
@@ -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;
|
||||
}
|
||||
+5
-4
@@ -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());
|
||||
}
|
||||
|
||||
+27
-12
@@ -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>
|
||||
+3
-3
@@ -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();
|
||||
+3
-5
@@ -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>
|
||||
+5
-1
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user