java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/footer/Footer.gss
... ...
@@ -1,9 +1,9 @@
1
-/**
2
- * Website footer styling
3
- */
4 1
@def SITEFOOTER_BACKGROUND_COLOR #333;
5 2
@def SITEFOOTER_TEXT_COLOR #fff;
6 3
4
+/**
5
+ * Mobile footer styling
6
+ */
7 7
.sitefooter {
8 8
font-size: 1rem;
9 9
background: SITEFOOTER_BACKGROUND_COLOR;
... ...
@@ -50,6 +50,74 @@
50 50
}
51 51
@media (min-width: 45em) {
52 52
.sitefooter_language {
53
+ float: right;
53 54
text-align: right;
54 55
}
55 56
}
57
+/**
58
+ * Desktop footer styling
59
+ */
60
+.dfooter {
61
+ background: SITEFOOTER_BACKGROUND_COLOR;
62
+ color: SITEFOOTER_TEXT_COLOR;
63
+ font-size: 1rem;
64
+ border-top: 0.333333333333333em solid SITEFOOTER_BACKGROUND_COLOR;
65
+ padding: 0 1.333333333333333em;
66
+ margin-top: -5.333333333333333em;
67
+ display: block;
68
+ line-height: normal;
69
+ width: 100%;
70
+ position: relative;
71
+ z-index: 1000;
72
+}
73
+.dfooter_row {
74
+ display: flex;
75
+ flex-wrap: wrap;
76
+ align-items: center;
77
+ min-height: 5em;
78
+ row-gap: 0.25em;
79
+ column-gap: 2em;
80
+}
81
+.dfooter_left {
82
+ display: flex;
83
+ flex-wrap: wrap;
84
+ align-items: baseline;
85
+ /*change rem here to configure preferred width before right block drops */
86
+ flex: 1 1 14rem;
87
+ row-gap: 0.25em;
88
+ column-gap: 2em;
89
+ min-width: 0;
90
+}
91
+.dfooter_right {
92
+ display: flex;
93
+ align-items: center;
94
+ margin-left: auto;
95
+ flex: 0 0 auto;
96
+ min-width: 8rem;
97
+}
98
+.dfooter_item,
99
+.dfooter_link,
100
+.dfooter_copyright {
101
+ line-height: 1;
102
+ margin: 0;
103
+ padding: 0;
104
+ display: inline-flex;
105
+ align-items: center;
106
+}
107
+.dfooter_copyright {
108
+ font-weight: 600;
109
+ white-space: nowrap;
110
+ color: SITEFOOTER_TEXT_COLOR;
111
+}
112
+.dfooter_link {
113
+ text-decoration: none;
114
+ color: SITEFOOTER_TEXT_COLOR;
115
+}
116
+.dfooter_link:hover,
117
+.dfooter_link:focus { text-decoration: underline; }
118
+.dfooter_language { text-align: right; white-space: nowrap; }
119
+.dfooter_language select {
120
+ background-color: SITEFOOTER_BACKGROUND_COLOR;
121
+ color: SITEFOOTER_TEXT_COLOR;
122
+ max-width: 100%;
123
+}
java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/footer/Footer.java
... ...
@@ -38,6 +38,7 @@ public class Footer extends Composite {
38 38
@UiField AnchorElement imprintAnchorLink;
39 39
@UiField AnchorElement privacyAnchorLink;
40 40
@UiField AnchorElement mobileUi;
41
+ @UiField AnchorElement sapJobsAnchor;
41 42
@UiField(provided = true)
42 43
final PlaceNavigation<WhatsNewPlace> releaseNotesNavigation;
43 44
... ...
@@ -65,6 +66,7 @@ public class Footer extends Composite {
65 66
whatsNewAnchor.getStyle().setDisplay(Display.NONE);
66 67
imprintAnchorLink.getStyle().setDisplay(Display.NONE);
67 68
privacyAnchorLink.getStyle().setDisplay(Display.NONE);
69
+ sapJobsAnchor.getStyle().setDisplay(Display.NONE);
68 70
}
69 71
copyrightDiv.setAttribute(DebugConstants.DEBUG_ID_ATTRIBUTE, "copyrightDiv");
70 72
supportAnchor.setAttribute(DEBUG_ID_ATTRIBUTE, "supportAnchor");
java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/footer/Footer.ui.xml
... ...
@@ -6,37 +6,36 @@
6 6
<ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
7 7
<ui:with field="local_res" type="com.sap.sailing.gwt.home.desktop.partials.footer.FooterResources" />
8 8
<ui:with field="releaseNotesNavigation" type="com.sap.sailing.gwt.home.shared.app.PlaceNavigation" />
9
- <g:HTMLPanel tag="footer" addStyleNames="{local_res.css.sitefooter}">
9
+ <g:HTMLPanel tag="footer" addStyleNames="{local_res.css.dfooter}">
10 10
<!-- Website footer-->
11
- <div class="{res.mediaCss.grid}">
12
- <div class="{res.mediaCss.small12} {res.mediaCss.medium9} {res.mediaCss.columns}">
13
- <div ui:field="copyrightDiv" class="{local_res.css.sitefooter_copyright}">
11
+ <div class="{res.mediaCss.grid} {local_res.css.dfooter_row}">
12
+ <div class="{local_res.css.dfooter_left}">
13
+ <div ui:field="copyrightDiv" class="{local_res.css.dfooter_item} {local_res.css.dfooter_copyright}">
14 14
<ui:text from='{i18n.footerCopyright}' />
15
- </div>
16
- <div class="{local_res.css.sitefooter_links}">
17
- <a ui:field="imprintAnchorLink" target="_blank" class="{local_res.css.sitefooter_links_link}">
15
+ </div>
16
+ <a ui:field="imprintAnchorLink" target="_blank" class="{local_res.css.dfooter_item} {local_res.css.dfooter_link}">
18 17
<ui:text from='{i18n.footerLegal}' />
19 18
</a>
20
- <a ui:field="privacyAnchorLink" href="https://www.sap.com/about/legal/privacy.html?campaigncode=CRM-XH21-OSP-Sailing" target="_blank" class="{local_res.css.sitefooter_links_link}">
19
+ <a ui:field="privacyAnchorLink" href="https://www.sap.com/about/legal/privacy.html?campaigncode=CRM-XH21-OSP-Sailing" target="_blank" class="{local_res.css.dfooter_item} {local_res.css.dfooter_link}">
21 20
<ui:text from='{i18n.footerPrivacy}' />
22 21
</a>
23
- <a ui:field="sapJobsAnchor" href="https://jobs.sapsailing.com" target="_blank" class="{local_res.css.sitefooter_links_link}">
22
+ <a ui:field="sapJobsAnchor" href="https://jobs.sapsailing.com" target="_blank" class="{local_res.css.dfooter_item} {local_res.css.dfooter_link}">
24 23
<ui:text from='{i18n.footerJobs}'/>
25 24
</a>
26
- <a ui:field="supportAnchor" href="https://support.sapsailing.com" target="_blank" class="{local_res.css.sitefooter_links_link}">
25
+ <a ui:field="supportAnchor" href="https://support.sapsailing.com" target="_blank" class="{local_res.css.dfooter_item} {local_res.css.dfooter_link}">
27 26
<ui:text from='{i18n.footerSupport}' />
28 27
</a>
28
+ <a ui:field="whatsNewAnchor" href="{releaseNotesNavigation.getSafeTargetUrl}" class="{local_res.css.dfooter_item} {local_res.css.dfooter_link}">
29
+ <ui:text from='{i18n.whatsNew}' />
30
+ </a>
29 31
<a ui:field="mobileUi" title="{i18n.mobile}" href=""
30
- class="{local_res.css.sitefooter_links_link} {res.mediaCss.showonsmall} {res.mediaCss.hideonmedium} {res.mediaCss.hideonlarge}">
32
+ class="{local_res.css.dfooter_item} {local_res.css.dfooter_link} {res.mediaCss.showonsmall} {res.mediaCss.hideonmedium} {res.mediaCss.hideonlarge}">
31 33
<ui:text from='{i18n.mobile}' />
32 34
</a>
33
- <a ui:field="whatsNewAnchor" href="{releaseNotesNavigation.getSafeTargetUrl}" class="{local_res.css.sitefooter_links_link}">
34
- <ui:text from='{i18n.whatsNew}' />
35
- </a>
36 35
</div>
36
+ <div class="{local_res.css.dfooter_right}">
37
+ <l:LanguageSelector ui:field="languageSelector" labelText="{i18n.footerLanguage}" addStyleNames="{local_res.css.dfooter_language}" />
37 38
</div>
38
- <l:LanguageSelector ui:field="languageSelector" labelText="{i18n.footerLanguage}" addStyleNames="{res.mediaCss.small12}
39
- {res.mediaCss.medium3} {res.mediaCss.columns} {local_res.css.sitefooter_language}" />
40
- </div>
39
+ </div>
41 40
</g:HTMLPanel>
42 41
</ui:UiBinder>
java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/footer/FooterResources.java
... ...
@@ -16,5 +16,13 @@ public interface FooterResources extends ClientBundle {
16 16
String sitefooter_links();
17 17
String sitefooter_links_link();
18 18
String sitefooter_language();
19
+ String dfooter();
20
+ String dfooter_row();
21
+ String dfooter_left();
22
+ String dfooter_right();
23
+ String dfooter_item();
24
+ String dfooter_copyright();
25
+ String dfooter_link();
26
+ String dfooter_language();
19 27
}
20 28
}
java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/footer/Footer.java
... ...
@@ -5,6 +5,7 @@ import static com.google.gwt.dom.client.Style.Display.NONE;
5 5
import com.google.gwt.core.client.GWT;
6 6
import com.google.gwt.dom.client.AnchorElement;
7 7
import com.google.gwt.dom.client.DivElement;
8
+import com.google.gwt.dom.client.SpanElement;
8 9
import com.google.gwt.dom.client.Style.Display;
9 10
import com.google.gwt.event.dom.client.ClickEvent;
10 11
import com.google.gwt.uibinder.client.UiBinder;
... ...
@@ -38,6 +39,9 @@ public class Footer extends Composite {
38 39
@UiField DivElement copyrightDiv;
39 40
@UiField AnchorElement imprintAnchorLink;
40 41
@UiField AnchorElement desktopUi;
42
+ @UiField AnchorElement sapJobsAnchor;
43
+ @UiField AnchorElement privacyAnchor;
44
+ @UiField SpanElement pipe;
41 45
42 46
private final MobilePlacesNavigator placeNavigator;
43 47
... ...
@@ -62,6 +66,10 @@ public class Footer extends Composite {
62 66
supportAnchor.getStyle().setDisplay(Display.NONE);
63 67
whatsNewLinkUi.getElement().getStyle().setDisplay(Display.NONE);
64 68
imprintAnchorLink.getStyle().setDisplay(Display.NONE);
69
+ sapJobsAnchor.getStyle().setDisplay(Display.NONE);
70
+ privacyAnchor.getStyle().setDisplay(Display.NONE);
71
+ } else {
72
+ pipe.setInnerText("|");
65 73
}
66 74
}
67 75
java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/footer/Footer.ui.xml
... ...
@@ -9,13 +9,14 @@
9 9
<!-- Footer mobile -->
10 10
<footer class="{local_res.css.sitefooter}">
11 11
<div class="{res.mediaCss.grid}">
12
- <l:LanguageSelector ui:field="languageSelector" labelText="{i18n.footerLanguage}"
13
- addStyleNames="{local_res.css.sitefooter_language} {res.mediaCss.small12} {res.mediaCss.columns}"/>
12
+ <div ui:field="copyrightDiv" class="{res.mediaCss.small12} {res.mediaCss.columns} {local_res.css.sitefooter_copyright}">
13
+ <ui:text from='{i18n.footerCopyright}' />
14
+ </div>
14 15
<div class="{local_res.css.sitefooter_links} {res.mediaCss.small12} {res.mediaCss.columns}">
15 16
<a ui:field="imprintAnchorLink">
16 17
<ui:text from='{i18n.footerLegal}' />
17 18
</a>
18
- <a href="https://www.sap.com/about/legal/privacy.html?campaigncode=CRM-XH21-OSP-Sailing"
19
+ <a ui:field="privacyAnchor" href="https://www.sap.com/about/legal/privacy.html?campaigncode=CRM-XH21-OSP-Sailing"
19 20
title="{i18n.footerPrivacy}">
20 21
<ui:text from='{i18n.footerPrivacy}' />
21 22
</a>
... ...
@@ -27,18 +28,16 @@
27 28
title="{i18n.footerSupport}">
28 29
<ui:text from='{i18n.footerSupport}' />
29 30
</a>
30
- |
31
- <a ui:field="desktopUi" title="{i18n.desktop}" href="">
32
- <ui:text from='{i18n.desktop}' />
33
- </a>
34
- <br></br>
35 31
<g:Anchor title="{i18n.whatsNew}" ui:field="whatsNewLinkUi">
36 32
<ui:text from='{i18n.whatsNew}' />
37 33
</g:Anchor>
34
+ <span ui:field="pipe"></span>
35
+ <a ui:field="desktopUi" title="{i18n.desktop}" href="">
36
+ <ui:text from='{i18n.desktop}' />
37
+ </a>
38 38
</div>
39
- <div ui:field="copyrightDiv" class="{res.mediaCss.small12} {res.mediaCss.columns} {local_res.css.sitefooter_copyright}">
40
- <ui:text from='{i18n.footerCopyright}' />
41
- </div>
39
+ <l:LanguageSelector ui:field="languageSelector" labelText="{i18n.footerLanguage}"
40
+ addStyleNames="{local_res.css.sitefooter_language} {res.mediaCss.small12} {res.mediaCss.columns}"/>
42 41
</div>
43 42
</footer>
44 43
</g:HTMLPanel>