First stage css fixes

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/LiveStageTeaserBand.java

@@ -1,6 +1,5 @@
 package com.sap.sailing.gwt.home.mobile.partials.stage;
 
-import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.sap.sailing.gwt.common.client.i18n.TextMessages;
 import com.sap.sailing.gwt.home.client.shared.EventDatesFormatterUtil;
@@ -20,7 +19,6 @@ public class LiveStageTeaserBand extends StageTeaserBand {
         bandTitle.setInnerText(event.getDisplayName());
         bandSubtitle.setInnerText(EventDatesFormatterUtil.formatDateRangeWithYear(event.getStartDate(), event.getEndDate()));
 
-        isLiveDiv.getStyle().setDisplay(Display.INLINE_BLOCK);
         actionLink.setVisible(true);
         actionLink.setText(TextMessages.INSTANCE.watchNow());
         actionLink.setHref(getEventNavigation().getTargetUrl());

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/Stage.gss

@@ -1,22 +1,19 @@
+@external slick-dots, slick-active;
+
 .swipercontainer {
   margin: 0 auto;
   position: relative;
   overflow: hidden;
   -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  -o-backface-visibility: hidden;
   backface-visibility: hidden;
   z-index: 1;
 }
 .swiperslide {
-  font-size: 15px;
-  /* @alternate */ font-size: 1rem;
+  font-size: 1rem;
   float: left;
 }
 .countdown {
-  font-size: 15px;
-  /* @alternate */ font-size: 1rem;
+ 	font-size: 1rem;
 }
 .countdown_pane {
   border: 0.266666666666667em solid #fff;
@@ -27,12 +24,10 @@
   margin: 0.333333333333333em;
   margin-top: 2em;
   padding: 0.666666666666667em;
-  -webkit-border-radius: 0.666666666666667em;
   border-radius: 0.666666666666667em;
   width: 4.666666666666667em;
   height: 4.666666666666667em;
   text-shadow: none;
-  -webkit-box-shadow: 0 0 18px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.25);
   box-shadow: 0 0 18px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.25);
 }
 .countdown_pane_count {
@@ -44,14 +39,13 @@
   font-size: 1.2em;
 }
 .stageteaser {
-  font-size: 15px;
-  /* @alternate */ font-size: 1rem;
+  font-size: 1rem;
   position: relative;
   width: 100%;
   cursor: pointer;
 }
 .stageteaser_background {
-  height: 38.666666666666664em;
+  height: 225px;
   overflow: hidden;
 }
 .stageteaser_background_image {
@@ -79,23 +73,16 @@
 .stageteaser_content_header {
   position: absolute;
   width: 100%;
-  padding: 5.2em;
+  padding: 3.333333333333333em 4em 5.2em 4em;
   line-height: 0.9;
   text-shadow: 0 0 18px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.25);
   text-align: center;
   opacity: 1;
-  -ms-filter: none;
   filter: none;
-  -webkit-transition: opacity 1s ease;
-  -moz-transition: opacity 1s ease;
-  -o-transition: opacity 1s ease;
-  -ms-transition: opacity 1s ease;
   transition: opacity 1s ease;
 }
 .stageteaser_content_headerhidden {
   opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
 }
 .stageteaser_content_header_subtitle {
   font-size: 2em;
@@ -104,16 +91,14 @@
   margin: 0 0 0.533333333333333em;
 }
 .stageteaser_content_header_title {
-  font-size: 4.8em;
+  font-size: 1.466666666666667em;
   font-weight: 700;
   color: #fff;
   margin: 0;  
-  height: 200px;
-  
+ 
 }
 .stageteaser_content_header_countdown {
-  font-size: 15px;
-  /* @alternate */ font-size: 1rem;
+  font-size: 1rem;
 }
 .stageteaser_content_band {
   position: absolute;
@@ -121,67 +106,42 @@
   left: 0;
   right: 0;
   background-color: rgba(51,51,51,0.6);
-  padding: 1.4em 1.666666666666667em;
+  padding: 0px;
   cursor:auto;
 }
 .stageteaser_content_band_item {
-  padding: 0 2em;
-}
-.stageteaser_content_band[data-bandcount="2"] .stageteaser_content_band_item {
-  width: 50%;
-  float: left;
-}
-.stageteaser_content_band[data-bandcount="2"] .stageteaser_content_band_item:first-child {
-  border-right: solid 1px #82868b;
+  padding: 0 0em;
+  position: relative;
 }
 .stageteaser_content_band_text {
-  display: inline-block;
+  display: block;
+  position: relative;
+  min-height: 3em;
 }
 .stageteaser_content_band_text_headline {
   color: #f0ab00;
-  font-size: 1.2em;
+  font-size: 1em;
   font-weight: 700;
   text-shadow: 0 0 0.666666666666667em rgba(51,51,51,0.45);
   text-transform: uppercase;
-  margin: 0.466666666666667em 0 0.2em;
+  margin: 0.5em 0.5em 0em;
+  display: block;
+  
 }
 .stageteaser_content_band_text_name {
   color: #fff;
-  font-size: 1.066666666666667em;
+  font-size: 1em;
+  margin: 0.5em;
   text-shadow: 0 0 0.666666666666667em rgba(51,51,51,0.45);
 }
 .stageteaser_content_band_action {
   float: right;
-  font-size: 1.2em;
+  font-size: 1em;
   padding: 0.4em 0.933333333333333em;
-  margin: 0.7em 0 0.5em;
-}
-.stageteaser_content_band_item[data-bandcount="1"] {
-  text-align: center;
-  padding: 0.7em 0.7em 0.55em;
-}
-.stageteaser_content_band_item[data-bandcount="1"] .stageteaser_content_band_text {
-  font-size: 18px;
-  /* @alternate */ font-size: 1.2rem;
-}
-.stageteaser_content_band_item[data-bandcount="1"] .stageteaser_content_band_text_headline {
-  display: inline-block;
-  margin: 5px 0 0;
-}
-.stageteaser_content_band_item[data-bandcount="1"] .stageteaser_content_band_text_headline:after {
-  content: "–";
-  margin: 0 0.333333333333333em 0 0.666666666666667em;
-}
-.stageteaser_content_band_item[data-bandcount="1"] .stageteaser_content_band_text_name {
-  display: inline-block;
-}
-.stageteaser_content_band_item[data-bandcount="1"] .stageteaser_content_band_action {
-  float: none;
-  margin: 0 0 0 1em;
+  margin: 0.5em;
 }
 .stage {
-  font-size: 15px;
-  /* @alternate */ font-size: 1rem;
+  font-size: 1rem;
   height: 38.666666666666664em;
   position: relative;
   clear: both;
@@ -204,9 +164,48 @@
   background-color: #f0ab00;
   height: 0.333333333333333em;
   width: 0%;
-  -webkit-transition: width 0.1s linear;
-  -moz-transition: width 0.1s linear;
-  -o-transition: width 0.1s linear;
-  -ms-transition: width 0.1s linear;
   transition: width 0.1s linear;
 }
+
+
+.stage .slick-dots {
+  position: absolute;
+  list-style: none;
+  display: block;
+  text-align: center;
+  padding: 0px;
+  margin: 13px 0;
+  width: 100%;
+}
+.stage .slick-dots li {
+  position: relative;
+  display: inline-block;
+  height: 7px;
+  width: 7px;
+  margin: 0px 4px;
+  padding: 0px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.stage .slick-dots li button {
+  border: 0;
+  display: block;
+  height: 7px;
+  width: 7px;
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  background: #dedede;
+  border-radius: 50%;
+}
+.stage .slick-dots li button:focus {
+  outline: none;
+}
+.stage .slick-dots li.slick-active button {
+  background: #333;
+}
+
+

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/Stage.java

@@ -33,7 +33,7 @@ public class Stage extends Composite {
 
         StageResources.INSTANCE.css().ensureInjected();
         initWidget(uiBinder.createAndBindUi(this));
-
+        widgetCarousel.setShowArrows(false);
         stageTeaserComposites = new ArrayList<StageTeaser>();
     }
 

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/Stage.ui.xml

@@ -6,9 +6,9 @@
 	
 	>
 	<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="res" type="com.sap.sailing.gwt.home.mobile.resources.SharedResources" />
 	<ui:with field="media_res" type="com.sap.sailing.gwt.home.client.shared.mainmedia.MainMediaResources" />
-	<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.stage.StageResources" />
+	<ui:with field="local_res" type="com.sap.sailing.gwt.home.mobile.partials.stage.StageResources" />
 	<g:HTMLPanel>
 		<!-- The main stage -->
 <div class="{local_res.css.stage}">

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/StageResources.java

@@ -8,7 +8,7 @@ import com.google.gwt.resources.client.ImageResource;
 public interface StageResources extends ClientBundle {
     public static final StageResources INSTANCE = GWT.create(StageResources.class);
 
-    @Source("com/sap/sailing/gwt/home/client/shared/stage/Stage.gss")
+    @Source("com/sap/sailing/gwt/home/mobile/partials/stage/Stage.gss")
     LocalCss css();
 
     public interface LocalCss extends CssResource {

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/StageTeaser.ui.xml

@@ -2,8 +2,8 @@
 <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.stage.StageResources" />
+	<ui:with field="res" type="com.sap.sailing.gwt.home.mobile.resources.SharedResources" />
+	<ui:with field="local_res" type="com.sap.sailing.gwt.home.mobile.partials.stage.StageResources" />
 	
 	<g:HTMLPanel styleName="{local_res.css.stageteaser} {local_res.css.swiperslide}">
 		<div class="{local_res.css.stageteaser_background}">

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/StageTeaserBand.java

@@ -2,8 +2,6 @@ package com.sap.sailing.gwt.home.mobile.partials.stage;
 
 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.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
@@ -24,10 +22,11 @@ public abstract class StageTeaserBand extends Composite {
     
     private static StageTeaserBandUiBinder uiBinder = GWT.create(StageTeaserBandUiBinder.class);
 
-    @UiField SpanElement bandTitle;
-    @UiField SpanElement bandSubtitle;
+    @UiField
+    DivElement bandTitle;
+    @UiField
+    DivElement bandSubtitle;
     @UiField Anchor actionLink;
-    @UiField DivElement isLiveDiv;
 
     private final MobilePlacesNavigator placeNavigator;
     private final EventStageDTO event;
@@ -39,8 +38,6 @@ public abstract class StageTeaserBand extends Composite {
         
         StageResources.INSTANCE.css().ensureInjected();
         initWidget(uiBinder.createAndBindUi(this));
-        
-        isLiveDiv.getStyle().setDisplay(Display.NONE);
 
         eventNavigation = placeNavigator.getEventNavigation(event.getId().toString(), event.getBaseURL(), event.isOnRemoteServer());
     }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/stage/StageTeaserBand.ui.xml

@@ -1,18 +1,51 @@
 <!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.stage.StageResources" />
-	<g:HTMLPanel styleName="{local_res.css.stageteaser_content_band_item} {res.mediaCss.columns}">
-	  <g:Anchor ui:field="actionLink" styleName="{res.mainCss.button} {local_res.css.stageteaser_content_band_action}" />
-	  <div class="{local_res.css.stageteaser_content_band_text}">
-	    <div class="{local_res.css.stageteaser_content_band_text_headline}"><span ui:field="bandTitle" /></div>
-	    <div class="{local_res.css.stageteaser_content_band_text_name}">
-	        <span ui:field="bandSubtitle" />&nbsp;&nbsp;&nbsp;
-	        <div ui:field="isLiveDiv" data-labeltype="live" class="{res.mainCss.label}"><ui:text from='{i18n.live}'/></div>
-	    </div>
-	  </div>
+	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.home.mobile.resources.SharedResources" />
+	<ui:with field="local_res"
+		type="com.sap.sailing.gwt.home.mobile.partials.stage.StageResources" />
+		
+	<ui:style>
+		.left {
+			display: inline;
+			position: absolute;
+			top: 0px;
+			left: 0px;
+			width: 50%;
+			vertical-align: middle;
+		}
+		.right {
+			display: inline;
+			position: absolute;
+			top: 0px;
+			left: 50%;
+			right: 0px;
+			text-align: right;
+			vertical-align: middle;
+		}
+		.ellipsis {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellispsis;
+				
+		}
+	</ui:style>
+	<g:HTMLPanel
+		styleName="{local_res.css.stageteaser_content_band_item} {res.mediaCss.columns}">
+		<div class="{local_res.css.stageteaser_content_band_text_headline}">
+			<div ui:field="bandTitle" class="{style.ellipsis}" />
+		</div>
+		<div class="{local_res.css.stageteaser_content_band_text}" >
+			<div class="{local_res.css.stageteaser_content_band_text_name} {style.left}" >
+				<div ui:field="bandSubtitle" />
+			</div>
+			<div class="{style.right}">
+				<g:Anchor ui:field="actionLink"
+					styleName="{res.mainCss.button} {local_res.css.stageteaser_content_band_action}" />
+			</div>
+		</div>
 	</g:HTMLPanel>
 </ui:UiBinder>

java/com.sap.sse.gwt/src/com/sap/sse/gwt/client/controls/carousel/WidgetCarousel.java

@@ -63,6 +63,7 @@ public class WidgetCarousel extends Composite {
     private boolean infiniteScrolling = true;
 
     private final String uniqueId;
+    private boolean showArrows = true;
 
     private LinkedList<Widget> items = new LinkedList<Widget>();
 
@@ -141,7 +142,7 @@ public class WidgetCarousel extends Composite {
 			    infinite : (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::infiniteScrolling),
 			    swipeToSlide : false,
 			    responsive : false,
-			    arrows : true,
+			    arrows : sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::showArrows,
 			    prevArrow : "<div class='slick-prev'/>",
 			    nextArrow : "<div class='slick-next'/>"
 
@@ -174,6 +175,15 @@ public class WidgetCarousel extends Composite {
         this.infiniteScrolling = infiniteScrolling;
     }
 
+    /**
+     * Disable/ enable left/right arrows
+     * 
+     * @param showArrows
+     */
+    public void setShowArrows(boolean showArrows) {
+        this.showArrows = showArrows;
+    }
+
     /**
      * Enable dot indicators
      *