Hi!
I’m seeking advises to make a web application more fit to mobile screens.
I have the classical issue that the images are to large. I have implemented an AppLayout and it works fine. But the bar image and the rest of the content images are to large.
The reason why I change the sizes is because they need to fit desktop web browsers as well. But then it won’t fit mobile web browsers.
Do you know any solutions so pictures, Iframes etc can be fit for both web browsers and mobile web browsers too?
@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@PWA(name = "Hemsida", shortName = "Hem")
@Route("")
@CssImport("./CSS/MainView.css")
public class MainView extends AppLayout {
private static final long serialVersionUID = 1L;
public MainView() {
// Navigation bar
Image barImage = new Image("img/cropped-logo_liggande_rod.png", "Spektrakon Logo");
barImage.setClassName("barImage");
DrawerToggle drawerToggle = new DrawerToggle();
drawerToggle.clickInClient(); // Start with closed tabs
drawerToggle.setClassName("drawerToggle");
addToNavbar(barImage, drawerToggle);
// Tabs
Tabs tabs = new Tabs(new Tab("Hem"), new Tab("Produktutveckling"), new Tab("Industriell Design"), new Tab("System"), new Tab("Kvalitet"), new Tab("Om oss"), new Tab("Intrenet"));
tabs.setOrientation(Tabs.Orientation.VERTICAL);
addToDrawer(tabs);
// Content
VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setClassName("verticalLayout");
// For Youtube and slogan
VerticalLayout youtube_teknik_framtid = new VerticalLayout();
IFrame youtube = new IFrame("https://www.youtube.com/embed/z-zaosARJKU");
youtube.setHeight("315px");
youtube.setWidth("560px");
youtube.setAllow("accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture");
youtube.getElement().setAttribute("allowfullscreen", true);
youtube.getElement().setAttribute("frameborder", "0");
youtube.setClassName("youtube");
Image slogan = new Image("img/Slogan_Hemsida.png", "Slogan Logo");
slogan.setClassName("slogan");
youtube_teknik_framtid.add(youtube, slogan);
youtube_teknik_framtid.setClassName("spektrakonBakgrund");
verticalLayout.add(youtube_teknik_framtid);
// Implement subjects
String content_text = "Funderar ni på att starta eget? Är ni ett etablerat företag och\n behöver hjälp med ett kommande projekt? Våra medarbetare\n hjälper er att förverkliga era idéer och visioner.";
createSubject(true, verticalLayout, "subject_horizontal_red", "mekanik_16_9.jpg", "Produktutveckling", "titel_subject_text_white", content_text, "content_subject_text_white", "button_subject_white", "bild_in_subject_right");
content_text = "Behöver ni en tredimensionell visualisering eller animering så\n kan vi hjälpa er att formge och förmedla ert budskap till\n kunder och investerare.";
createSubject(false, verticalLayout, "subject_horizontal_white", "beowulf_16_9.png", "Industriell design", "titel_subject_text_red", content_text, "content_subject_text_black", "button_subject_red", "bild_in_subject_left");
content_text = "För att en produktion ska kunna fungera optimalt så behövs ett\n system som kan effektivisera tillverkning och underlätta\n arbetet för de anställda. Vi anpassar och tar fram ett åt er.";
createSubject(true, verticalLayout, "subject_horizontal_red", "bild2_16_9.png", "System", "titel_subject_text_white", content_text, "content_subject_text_white", "button_subject_white", "bild_in_subject_right");
content_text = "Vill ni utöka er marknad och stärka era produkters kvalitet? Vi\n tar fram teknisk dokumentation och CE-märker era produkter.";
createSubject(false, verticalLayout, "subject_horizontal_white", "teknikinfo_16_9.jpg", "Kvalitet", "titel_subject_text_red", content_text, "content_subject_text_black", "button_subject_red", "bild_in_subject_left");
setContent(verticalLayout);
}
private void createSubject(boolean pictureRightSide, VerticalLayout verticalLayout, String subjectClassName, String bildName, String titel_text, String title_text_css_class, String content_text, String content_text_css_class, String button_text_css_class, String bild_in_subject_css_class) {
HorizontalLayout subject_horizontal = new HorizontalLayout();
subject_horizontal.setClassName(subjectClassName);
VerticalLayout subject_bild = new VerticalLayout();
Image bild_in_subject = new Image("img/" + bildName, "Picture");
subject_bild.add(bild_in_subject);
bild_in_subject.setClassName(bild_in_subject_css_class);
VerticalLayout text_subject = new VerticalLayout();
Label titel_subject = new Label(titel_text);
titel_subject.setClassName(title_text_css_class);
Label content_subject = new Label(content_text);
content_subject.setClassName(content_text_css_class);
Button button_subject = new Button("Läs mer");
button_subject.setClassName(button_text_css_class);
text_subject.add(titel_subject, content_subject, button_subject);
if(pictureRightSide == true) {
subject_horizontal.add(text_subject, subject_bild);
}else {
subject_horizontal.add(subject_bild, text_subject);
}
verticalLayout.add(subject_horizontal);
}
}
