Mobile UI corrections

pom.xml

@@ -86,6 +86,11 @@
 			<artifactId>numberfield</artifactId>
 			<version>0.2.0</version>
 		</dependency>
+		<dependency>
+			<groupId>org.basilbourque.timecolumnrenderers</groupId>
+			<artifactId>timecolumnrenderers</artifactId>
+			<version>1.0.0</version>
+		</dependency>
 
 		<dependency>
 			<groupId>org.hibernate</groupId>

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/DesktopHeadView.java

@@ -3,9 +3,7 @@ package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
 import java.time.ZonedDateTime;
 import java.util.function.Function;
 
-import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Component;
-import com.vaadin.ui.Label;
 
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent.ClubEventProvider;
@@ -15,21 +13,11 @@ public class DesktopHeadView extends HeadView {
 
 	private static final long serialVersionUID = 1596573215389558000L;
 
-	private Label monthName;
-
 	public DesktopHeadView(ClubNavigator navigator, Function<Component, ZonedDateTime> startTime,
 			Function<Component, ZonedDateTime> endTime, ClubEventProvider dataProvider,
 			SecurityVerifier securityVerifier) {
 		super(navigator, startTime, endTime, dataProvider, securityVerifier);
 
-		monthName = new Label();
-		monthName.setId("calendar.month");
-		monthName.setStyleName("title_caption");
-		monthName.setWidth(null);
-
-		this.addComponent(monthName, 1);
-		setComponentAlignment(monthName, Alignment.MIDDLE_CENTER);
-		setExpandRatio(monthName, 1.0f);
 	}
 
 	public void updateMonthText(ZonedDateTime startDate) {

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java

@@ -27,6 +27,7 @@ import com.vaadin.ui.Button;
 import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
 import com.vaadin.ui.MenuBar.MenuItem;
 import com.vaadin.ui.Notification;
 import com.vaadin.ui.Window;
@@ -49,11 +50,12 @@ public class HeadView extends HorizontalLayout {
 	protected transient final Logger log = LoggerFactory.getLogger(getClass());
 	protected transient DateTimeFormatter dfMonth = DateTimeFormatter.ofPattern("MMMM uuuu");
 
-	private ClubEventProvider dataProvider;
+	private final ClubEventProvider dataProvider;
 
 	private int monthItemId;
 
-	private Button personLabel;
+	private final Button personLabel;
+	protected final Label monthName;
 
 	private final Function<Component, ZonedDateTime> startTime;
 	private final Function<Component, ZonedDateTime> endTime;
@@ -76,15 +78,23 @@ public class HeadView extends HorizontalLayout {
 		popupButton.addClickListener(ev -> openPopupMenu(ev));
 		popupButton.setWidth(null);
 
+		monthName = new Label();
+		monthName.setId("calendar.month");
+		monthName.setStyleName("title_caption");
+		monthName.setWidth("");
+
 		personLabel = new Button(VaadinIcons.USER);
 		personLabel.setId("head.user");
 		personLabel.addClickListener(this::openPopupMenu);
 
-		this.addComponent(popupButton);
-		this.addComponent(personLabel);
+		addComponent(popupButton);
+		addComponent(monthName);
+		addComponent(personLabel);
 
 		setComponentAlignment(popupButton, Alignment.MIDDLE_LEFT);
+		setComponentAlignment(monthName, Alignment.MIDDLE_CENTER);
 		setComponentAlignment(personLabel, Alignment.MIDDLE_RIGHT);
+		setExpandRatio(monthName, 1.0f);
 
 		this.dataProvider = dataProvider;
 	}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewMobile.java

@@ -2,8 +2,12 @@ package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
 
 import java.time.LocalDate;
 import java.time.ZonedDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.FormatStyle;
 import java.util.Optional;
 
+import org.basilbourque.timecolumnrenderers.ZonedDateTimeRenderer;
+
 import com.vaadin.data.provider.ConfigurableFilterDataProvider;
 import com.vaadin.data.provider.DataProvider;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
@@ -52,6 +56,8 @@ public class MainViewMobile extends MainView {
 
 		head = new HeadView(navigator, component -> showDateTimeDialog(component, "Startdatum"),
 				component -> showDateTimeDialog(component, "Endedatum"), new ClubEventProvider(), securityVerifier);
+		head.setWidth("100%");
+		head.updateLoggedinPerson();
 
 		eventGrid = new Grid<>();
 		eventGrid.setCaption("Veranstaltungen");
@@ -66,7 +72,10 @@ public class MainViewMobile extends MainView {
 			return l;
 		}).setSortable(true).setHidable(false);
 		eventGrid.addColumn(ClubEvent::getCaption).setCaption("Name").setSortable(true);
-		eventGrid.addColumn(ClubEvent::getStart).setCaption("Start").setSortable(true).setHidable(true);
+
+		eventGrid.addColumn(ClubEvent::getStart).setCaption("Start")
+				.setRenderer(new ZonedDateTimeRenderer(DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)))
+				.setSortable(true).setHidable(true);
 		ConfigurableFilterDataProvider<ClubEvent, Void, SerializablePredicate<ClubEvent>> eventDataProvider = DataProvider
 				.ofCollection(eventBusiness.loadEvents()).withConfigurableFilter();
 		eventDataProvider.setFilter(this::filter);