Move styling into CSS

frontend/src/mathjax-proof-tree.ts

@@ -48,6 +48,7 @@ class MathjaxProofTree extends MathjaxAdapter {
         const stepSelector = 'g[typicalc="step"]';
         // space between inference premises
         const padding = 300;
+        console.log("calculating steps..");
 
         if (this.shadowRoot !== null) {
             console.time('stepCalculation');

frontend/styles/view/control-panel.css

@@ -0,0 +1,7 @@
+#share {
+    margin-left: auto;
+}
+
+#last-step {
+    margin-right: auto;
+}

frontend/styles/view/start-page.css

@@ -32,6 +32,7 @@
 	justify-content: center;
 	align-items: center;
 	width: 100%;
+	height: 100%;
 }
 
 #slideShow {
@@ -39,9 +40,14 @@
 	width: 100%;
 }
 
-#startpage-footer {
+#startPage #content {
-	position: sticky;
-	bottom: 1em;
-	background-color: white;
 	width: 100%;
+	height: 100%;
+	align-items: center;
+}
+
+footer {
+	width: 100%;
+	padding-bottom: 1em;
+	background-color: white;
 }

frontend/styles/view/type-inference.css

@@ -1,7 +1,7 @@
 #type-inference-view {
 	width: 100%;
 	height: 100%;
-    padding: 0 0 1em;
+	padding: 0;
 	align-items: center;
 }
 
@@ -9,17 +9,14 @@
 	margin: 0 !important;
 }
 
-#scroller {
+#type-inference-view #content {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-}
-#content {
 	display: flex;
 	flex-direction: column;
+	width: 100%;
 	height: 100%;
 	padding: 10px;
 	box-sizing: border-box;
+	margin-top: 0;
 }
 
 tc-proof-tree {

src/main/java/edu/kit/typicalc/view/content/ControlPanel.java

@@ -1,6 +1,7 @@
 package edu.kit.typicalc.view.content;
 
 import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
@@ -10,6 +11,7 @@ import com.vaadin.flow.i18n.LocaleChangeObserver;
 /**
  * Provides a GUI in form of buttons for the user to navigate through steps.
  */
+@CssImport("./styles/view/control-panel.css")
 public class ControlPanel extends HorizontalLayout implements LocaleChangeObserver {
 
     private static final String ATTRIBUTE_TITLE = "title";
@@ -25,6 +27,7 @@ public class ControlPanel extends HorizontalLayout implements LocaleChangeObserv
     private final Button previousStep;
     private static final String PREVIOUS_STEP_ID = "previous-step";
     private final Button share;
+    private static final String SHARE_ID = "share";
 
     /**
      * Sets up buttons with click-listeners that call the corresponding method in the view.
@@ -42,8 +45,7 @@ public class ControlPanel extends HorizontalLayout implements LocaleChangeObserv
         previousStep = new Button(new Icon(VaadinIcon.ANGLE_LEFT), evt -> view.previousStepButton());
         previousStep.setId(PREVIOUS_STEP_ID);
         share = new Button(new Icon(VaadinIcon.CONNECT), evt -> view.shareButton());
-        share.getStyle().set("margin-left", "auto");
+        share.setId(SHARE_ID);
-        lastStep.getStyle().set("margin-right", "auto");
 
         add(share, firstStep, previousStep, nextStep, lastStep);
     }

src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java

@@ -27,6 +27,7 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
 
     private static final long serialVersionUID = 2502750919087936406L;
 
+    private static final String CONTENT_ID = "content";
     private static final String HEADING_ID = "startPage-Heading";
     private static final String H_LINE_ID = "horizontalLine";
     private static final String TEXT_CONTAINER_ID = "textContainer";
@@ -49,7 +50,10 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
      * Fills the view with content.
      */
     public StartPageView() {
+        setId(START_PAGE_ID);
+
         VerticalLayout content = new VerticalLayout();
+        content.setId(CONTENT_ID);
         ControlPanel controlPanel = new ControlPanel(this);
         controlPanel.setId(CONTROL_PANEL_ID);
         controlPanel.setEnabledShareButton(false);
@@ -73,13 +77,9 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
         slideProgress = new ProgressBar(slideShow.getStartPosition(), slideShow.getSlides().length - 1);
         slideProgress.setId(SLIDE_PROGRESS_ID);
 
-        content.setAlignItems(Alignment.CENTER);
         content.add(heading, line1, textContainer, slideProgress, slideShow, line2);
-        setId(START_PAGE_ID);
 
         Footer footer = new Footer(controlPanel);
-        footer.setId(FOOTER_ID);
-        content.setWidthFull();
         add(content, footer);
     }
 

src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java

@@ -69,10 +69,6 @@ public class TypeInferenceView extends VerticalLayout
         controlPanel.setEnabledPreviousStep(false);
 
         Footer footer = new Footer(controlPanel);
-        footer.getStyle().set("position", "sticky");
-        footer.getStyle().set("bottom", "1em");
-        content.getStyle().set("overflow", "auto");
-        content.setWidthFull();
         add(content, footer);
     }