protected Component buildLoginForm() {

        final VerticalLayout loginPanel = new VerticalLayout();
        loginPanel.setSizeUndefined();
        loginPanel.setSpacing(true);
        loginPanel.addStyleName("login-panel");
        Responsive.makeResponsive(loginPanel);
        loginPanel.addComponent(buildFields());
        if (isDemo) {
            loginPanel.addComponent(buildDisclaimer());
        }
        loginPanel.addComponent(buildLinks());

        checkBrowserSupport(loginPanel);

        return loginPanel;
    }
 

/**
 * Creates the row component.
 *
 * @param row         the row
 * @param component   the component
 * @param description the description
 */
public static void createRowComponent(final ResponsiveRow row, final Component component,
		final String description) {
	final CssLayout layout = new CssLayout();
	layout.addStyleName(".v-layout-content-pagemode-panel-level2");
	Responsive.makeResponsive(layout);
	layout.setSizeUndefined();

	final Label descriptionLabel = new Label(description);
	descriptionLabel.addStyleName(ITEMBOX);
	Responsive.makeResponsive(descriptionLabel);
	descriptionLabel.setWidth(100, Unit.PERCENTAGE);
	layout.addComponent(descriptionLabel);

	component.addStyleName(ITEMBOX);
	component.addStyleName(TITLE);
	Responsive.makeResponsive(component);
	component.setWidth(100, Unit.PERCENTAGE);
	layout.addComponent(component);

	row.addColumn().withDisplayRules(DISPLAY_SIZE_XS_DEVICE, DISPLAYS_SIZE_XM_DEVICE, DISPLAY_SIZE_MD_DEVICE,
			DISPLAY_SIZE_LG_DEVICE).withComponent(layout);
}
 

/**
 * Creates the row item.
 *
 * @param row         the row
 * @param button      the button
 * @param description the description
 */
public static void createRowItem(final ResponsiveRow row, final Button button, final String description) {
	final CssLayout layout = new CssLayout();
	layout.addStyleName("v-layout-content-overview-panel-level2");
	Responsive.makeResponsive(layout);
	layout.setSizeUndefined();

	button.addStyleName(ITEMBOX);
	button.addStyleName(TITLE);
	Responsive.makeResponsive(button);
	button.setWidth(100, Unit.PERCENTAGE);
	layout.addComponent(button);

	final Label descriptionLabel = new Label(description);
	descriptionLabel.addStyleName(ITEMBOX);
	Responsive.makeResponsive(descriptionLabel);
	descriptionLabel.setWidth(100, Unit.PERCENTAGE);
	layout.addComponent(descriptionLabel);

	row.addColumn().withDisplayRules(DISPLAY_SIZE_XS_DEVICE, DISPLAYS_SIZE_XM_DEVICE, DISPLAY_SIZE_MD_DEVICE,
			DISPLAY_SIZE_LG_DEVICE).withComponent(layout);
}
 

protected void workaroundForFirefoxIssue(boolean initial) {
    if (initial && Page.getCurrent().getWebBrowser().getBrowserApplication().
            contains("Firefox")) {
        // Responsive, FF, cross site is currently broken :-(
        Extension r = null;
        for (Extension ext : getExtensions()) {
            if (ext instanceof Responsive) {
                r = ext;
            }
        }
        removeExtension(r);
    }
}
 

/**
 * Creates the button link.
 *
 * @param row
 *            the panel content
 * @param linkText
 *            the link text
 * @param icon
 *            the icon
 * @param command
 *            the command
 * @param description
 *            the description
 */
protected final void createButtonLink(final ResponsiveRow row,final String linkText,final Resource icon, final ClickListener command, final String description) {
	final CssLayout layout = new CssLayout();
	layout.addStyleName("v-layout-content-overview-panel-level2");
	Responsive.makeResponsive(layout);
	layout.setSizeUndefined();


	final Button button = new Button(linkText);
	Responsive.makeResponsive(button);
	button.setStyleName(LINK_STYLE_NAME);
	button.addStyleName("title");
	button.addClickListener(command);
	button.setIcon(icon);
	button.setWidth(100, Unit.PERCENTAGE);


	layout.addComponent(button);

	final Label descriptionLabel = new Label(description);
	descriptionLabel.addStyleName("itembox");
	Responsive.makeResponsive(descriptionLabel);
	descriptionLabel.setWidth(100, Unit.PERCENTAGE);
	layout.addComponent(descriptionLabel);

	row.addColumn().withDisplayRules(DISPLAY_SIZE_XS_DEVICE,DISPLAYS_SIZE_XM_DEVICE,DISPLAY_SIZE_MD_DEVICE,DISPLAY_SIZE_LG_DEVICE).withComponent(layout);
}
 

/**
 * Creates the grid layout.
 *
 * @param panelContent the panel content
 * @return the responsive row
 */
public static ResponsiveRow createGridLayout(final AbstractOrderedLayout panelContent) {
	final ResponsiveLayout layout = new ResponsiveLayout();
	Responsive.makeResponsive(layout);
	layout.addStyleName("v-layout-content-overview-panel-level1");
	layout.setWidth(100, Unit.PERCENTAGE);
	layout.setHeight(100, Unit.PERCENTAGE);
	panelContent.addComponent(layout);
	panelContent.setExpandRatio(layout, ContentRatio.LARGE);
	return layout.addRow();
}
 

/**
* Constructor for creating a SideMenu component. This method sets up all
* the components and styles needed for the side menu.
   */
  public SideMenu() {
      super();
      setSpacing(false);
      addStyleName(ValoTheme.UI_WITH_MENU);
      Responsive.makeResponsive(this);
      setSizeFull();

      menuArea.setPrimaryStyleName("valo-menu");
      menuArea.addStyleName("sidebar");
      menuArea.addStyleName(ValoTheme.MENU_PART);
      menuArea.addStyleName("no-vertical-drag-hints");
      menuArea.addStyleName("no-horizontal-drag-hints");
      menuArea.setWidth(null);
      menuArea.setHeight("100%");

      logoWrapper = new HorizontalLayout();
      logoWrapper.addStyleName("valo-menu-title");
      menuArea.addComponent(logoWrapper);

      userMenu.addStyleName("user-menu");
      userItem = userMenu.addItem("", null);

      menuArea.addComponent(userMenu);

      Button valoMenuToggleButton = new Button("Menu", event -> {
          if (menuArea.getStyleName().contains(STYLE_VISIBLE)) {
              menuArea.removeStyleName(STYLE_VISIBLE);
          } else {
              menuArea.addStyleName(STYLE_VISIBLE);
          }
      });
      valoMenuToggleButton.setIcon(VaadinIcons.LIST);
      valoMenuToggleButton.addStyleName("valo-menu-toggle");
      valoMenuToggleButton.addStyleName(ValoTheme.BUTTON_BORDERLESS);
      valoMenuToggleButton.addStyleName(ValoTheme.BUTTON_SMALL);
      menuArea.addComponent(valoMenuToggleButton);

menuItemsLayout.addStyleName("valo-menuitems");

      treeMenu.setTreeData(treeMenuData);
      treeMenu.asSingleSelect().addValueChangeListener(event -> {
              if ( !event.isUserOriginated()) {
                  return;
              }
              if (null == event.getValue()) {
                  // Workaround to disable deselect
                  treeMenu.select(event.getOldValue());
              } else {
                  Optional.ofNullable(treeMenuItemToClick.get(event.getValue())).ifPresent(MenuClickHandler::click);
              }
          });
      menuArea.addComponent(menuItemsLayout);

      contentArea.setPrimaryStyleName("valo-content");
      contentArea.addStyleName("v-scrollable");
      contentArea.setSizeFull();

      // Remove default margins and spacings
      contentArea.setMargin(false);
      contentArea.setSpacing(false);

      super.addComponent(menuArea);
      super.addComponent(contentArea);
      setExpandRatio(contentArea, 1);
  }
 

@Override
public void enter(ViewChangeEvent event) {
    logger.debug("Entering {} view ", QuestionnaireView.NAME);
    addStyleName(Reindeer.LAYOUT_BLUE);
    addStyleName("questionnaires");

    WebBrowser webBrowser = Page.getCurrent().getWebBrowser();
    Integer screenWidth = webBrowser.getScreenWidth();
    Integer heightWidth = webBrowser.getScreenHeight();

    logger.debug("Browser screen settings  {} x {}", screenWidth, heightWidth);

    if (heightWidth <= 480) {
        renderingMode = RenderingMode.QUESTION_BY_QUESTION;
    }

    // centralLayout.addStyleName("questionnaires");
    // new Responsive(centralLayout);

    RespondentAccount respondent = (RespondentAccount) VaadinServletService.getCurrentServletRequest()
            .getUserPrincipal();
    if (respondent.hasPreferredLanguage()) {
        preferredLanguage =  Language.fromString(respondent.getPreferredLanguage());
    } else {
        preferredLanguage = Language.fromLocale(webBrowser.getLocale());
    }
    questionnaireId = respondent.getGrantedquestionnaireIds().iterator().next();
    logger.debug("Trying to fetch questionnair identified with id  = {} ", questionnaireId);
    QuestionnaireDefinitionDTO definition = questionnaireResource.getDefinition(questionnaireId);
    sectionInfoVisible = definition.isSectionInfoVisible();
    QuestionnairePageDTO page = questionnaireResource.getPage(questionnaireId, renderingMode, preferredLanguage,
            NavigationAction.ENTERING);

    logger.debug("Displaying page {}/{} with {} questions", page.getMetadata().getNumber(), page.getMetadata()
            .getCount(), page.getQuestions().size());
    questionsLayout = new VerticalLayout();
    update(page);

    Label questionnaireTitle = new Label(definition.getLanguageSettings().getTitle());
    questionnaireTitle.addStyleName(Reindeer.LABEL_H1);

    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setSizeFull();
    mainLayout.setMargin(true);
    mainLayout.addComponent(questionnaireTitle);
    mainLayout.addComponent(questionsLayout);
    // Add the responsive capabilities to the components

    Panel centralLayout = new Panel();
    centralLayout.setContent(mainLayout);
    centralLayout.setSizeFull();
    centralLayout.getContent().setSizeUndefined();

    Responsive.makeResponsive(questionnaireTitle);
    setCompositionRoot(centralLayout);
    setSizeFull();
}