Live races ui/regatta overview - Fixed flag sizing

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/raceListLive/RacesListLive.gss

@@ -199,3 +199,15 @@
 .raceslistlive h3 {
   font-size: 1.466666666666667em;
 }
+.racesListIcon {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.racesListIcon > div:BEFORE {
+  height: 100%;
+  display: inline-block;
+}
+.racesListIcon > div {
+  vertical-align: middle;	
+  display: inline-block;
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/raceListLive/RacesListLiveResources.java

@@ -47,5 +47,7 @@ public interface RacesListLiveResources extends ClientBundle {
         String raceslist_head_itemright();
         String raceslist_head_itembutton();
         String raceslistlive();
+
+        String racesListIcon();
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/racelist/AbstractRaceList.java

@@ -311,7 +311,7 @@ public abstract class AbstractRaceList<T extends RaceMetadataDTO> extends Compos
         @Override
         public void render(Context context, FlagStateDTO value, SafeHtmlBuilder sb) {
             if (value != null) {
-                sb.append(SailingFlagsBuilder.render(value, 0.363636, FlagsMeaningExplanator.getFlagsMeaning(I18N,
+                sb.append(SailingFlagsBuilder.render(value, 0.55, FlagsMeaningExplanator.getFlagsMeaning(I18N,
                         value.getLastUpperFlag(), value.getLastLowerFlag(), value.isLastFlagsAreDisplayed())));
             }
         }
@@ -323,9 +323,7 @@ public abstract class AbstractRaceList<T extends RaceMetadataDTO> extends Compos
             if (value != null) {
                 SafeStylesBuilder safeStyles = new SafeStylesBuilder();
                 safeStyles.trustedNameAndValue("transform", "rotate(" + value.getTrueWindFromDeg() + "deg)");
-                safeStyles.width(2.5, Unit.EM);
-                safeStyles.height(2.5, Unit.EM);
-                safeStyles.trustedNameAndValue("margin", "-0.75em auto");
+                safeStyles.width(2.75, Unit.EM).height(2.75, Unit.EM);
                 sb.append(TEMPLATE.windDirection(safeStyles.toSafeStyles()));
             }
         }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/racelist/RaceList.java

@@ -58,7 +58,7 @@ public class RaceList extends AbstractRaceList<LiveRaceDTO> {
 
         @Override
         public String getColumnStyle() {
-            return CSS.race_item();
+            return getStyleNamesString(CSS.race_item(), CSS.racesListIcon());
         }
 
         @Override
@@ -104,7 +104,7 @@ public class RaceList extends AbstractRaceList<LiveRaceDTO> {
 
         @Override
         public String getColumnStyle() {
-            return getStyleNamesString(CSS.race_item(), MEDIA_CSS.hideonsmall());
+            return getStyleNamesString(CSS.race_item(), CSS.racesListIcon(), MEDIA_CSS.hideonsmall());
         }
 
         @Override

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/regattaoverview/SailingFlagsBuilder.java

@@ -28,48 +28,46 @@ public class SailingFlagsBuilder {
     }
     
     public static SafeHtml render(Flags upperFlag, Flags lowerFlag, boolean isDisplayed, boolean displayStateChanged, String tooltip) {
-        return render(upperFlag, lowerFlag, isDisplayed, displayStateChanged, 1, tooltip);
+        return render(upperFlag, lowerFlag, isDisplayed, displayStateChanged, 0.75, tooltip);
     }
 
     public static SafeHtml render(Flags upperFlag, Flags lowerFlag, boolean isDisplayed, boolean isDisplayedChanged,
             double scale, String tooltip) {
-        int multiplier = getFlagScaleMultiplier(upperFlag, lowerFlag);
+        Scales scales = new Scales(scale, upperFlag, lowerFlag);
         SafeHtmlBuilder contentBuilder = new SafeHtmlBuilder();
         SafeHtmlBuilder flagsBuilder = new SafeHtmlBuilder();
-        flagsBuilder.append(getFlagBackgroundImage(upperFlag, isDisplayed, isDisplayedChanged, scale * multiplier));
-        flagsBuilder.append(getFlagBackgroundImage(lowerFlag, isDisplayed, isDisplayedChanged, scale * multiplier));
+        flagsBuilder.append(getFlagBackgroundImage(upperFlag, isDisplayed, isDisplayedChanged, scales));
+        flagsBuilder.append(getFlagBackgroundImage(lowerFlag, isDisplayed, isDisplayedChanged, scales));
 
         SafeStylesBuilder flagStyleBuilder = new SafeStylesBuilder();
         flagStyleBuilder.display(Display.INLINE_BLOCK);
         flagStyleBuilder.verticalAlign(VerticalAlign.TOP);
-        flagStyleBuilder.paddingRight(10 * scale, Unit.PX);
+        flagStyleBuilder.paddingRight(10 * scales.defaultScale, Unit.PX);
         contentBuilder.append(imageTemplate.cell(flagStyleBuilder.toSafeStyles(), flagsBuilder.toSafeHtml()));
 
-        contentBuilder.append(getArrowBackgroundImage(isDisplayed, isDisplayedChanged, scale));
+        contentBuilder.append(getArrowBackgroundImage(isDisplayed, isDisplayedChanged, scales));
         return imageTemplate.cell(tooltip, contentBuilder.toSafeHtml());
     }
 
-    private static int getFlagScaleMultiplier(Flags upperFlag, Flags lowerFlag) {
-        return (upperFlag == null || upperFlag == Flags.NONE || lowerFlag == null || lowerFlag == Flags.NONE) ? 2 : 1;
-    }
-
     public static SafeHtml render(FlagStateDTO flagState, double scale, String tooltip) {
         return render(flagState.getLastUpperFlag(), flagState.getLastLowerFlag(), flagState.isLastFlagsAreDisplayed(),
                 flagState.isLastFlagsDisplayedStateChanged(), scale, tooltip);
         // return render(Flags.AP, Flags.ALPHA, true, true, scale, tooltip);
     }
 
-    private static SafeHtml getFlagBackgroundImage(Flags flag, boolean displayed, boolean displayedChanged, double scale) {
+    private static SafeHtml getFlagBackgroundImage(Flags flag, boolean displayed, boolean displayedChanged,
+            Scales scales) {
         ImageResource flagImage = flagImageResolver.resolveFlagToImage(flag, displayed, displayedChanged);
-        return getBackgroundImage(flagImage, scale, new SafeStylesBuilder());
+        return getBackgroundImage(flagImage, scales.flagsScale, new SafeStylesBuilder());
     }
 
-    private static SafeHtml getArrowBackgroundImage(boolean displayed, boolean displayedChanged, double scale) {
+    private static SafeHtml getArrowBackgroundImage(boolean displayed, boolean displayedChanged, Scales scales) {
         ImageResource flagImage = flagImageResolver.resolveFlagDirectionToImage(displayed, displayedChanged);
         SafeStylesBuilder arrowStyleBuilder = new SafeStylesBuilder();
         arrowStyleBuilder.display(Display.INLINE_BLOCK);
         arrowStyleBuilder.verticalAlign(VerticalAlign.TOP);
-        return getBackgroundImage(flagImage, scale * 2, arrowStyleBuilder);
+        arrowStyleBuilder.marginTop(flagImage.getHeight() * scales.arrowPadding, Unit.PX);
+        return getBackgroundImage(flagImage, scales.arrowScale, arrowStyleBuilder);
     }
 
     private static SafeHtml getBackgroundImage(ImageResource imageResource, double scale,
@@ -85,4 +83,21 @@ public class SailingFlagsBuilder {
         return SafeHtmlUtils.EMPTY_SAFE_HTML;
     }
 
+    private static class Scales {
+        private final double arrowScale, arrowPadding, flagsScale, defaultScale;
+
+        private Scales(double defaultScale, Flags upperFlag, Flags lowerFlag) {
+            this.defaultScale = defaultScale;
+            boolean singleFlag = isSingleFlag(defaultScale, upperFlag, lowerFlag);
+            this.arrowScale = defaultScale * (singleFlag ? 1.5 : 1.5);
+            this.arrowPadding = defaultScale * (singleFlag ? 0 : 0.25);
+            this.flagsScale = defaultScale * (singleFlag ? 1.5 : 1);
+        }
+
+        private boolean isSingleFlag(double defaultScale, Flags upperFlag, Flags lowerFlag) {
+            return (upperFlag == null || upperFlag == Flags.NONE || lowerFlag == null || lowerFlag == Flags.NONE);
+        }
+
+    }
+
 }