diff --git a/home.md b/home.md index 493d0428293..b1dd63f0189 100644 --- a/home.md +++ b/home.md @@ -91,6 +91,8 @@ SAP is at the center of today’s technology revolution, developing innovations * [[Prionet related information|wiki/info/misc/prionet-related-information]] * [[TracTrac Workshop 2013|wiki/info/misc/tractracworkshop2013]] +* [[Subscriptions|wiki/info/misc/subscriptions]] + ## HowTo * [[Onboarding|wiki/howto/onboarding]] diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.gss b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.gss index 27c669485b3..58ac592d9f4 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.gss +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.gss @@ -1,154 +1,246 @@ +.content { + padding: 0 6px; +} + .feature:before { - content: ""; - position: absolute; - background-image: resourceUrl("greenCheck"); - background-repeat: no-repeat; - background-size: contain; - background-position: top left; - margin-left: -25px; - height: 20px; - width: 20px; + content: ""; + position: absolute; + background-image: resourceUrl("greenCheck"); + background-repeat: no-repeat; + background-size: contain; + background-position: top left; + margin-left: -25px; + height: 20px; + width: 20px; } + .feature { - padding-left: 25px; - margin-bottom: 1em; + padding-left: 25px; + margin-bottom: 1em; } + .features { - margin: 30px; - text-align: left; + margin: 30px; + text-align: left; } + .highlight { + } + .owned { + } + .free { + } + .subscription { - order: 20; - text-align: center; - width: 390px; - margin-bottom: 30px; + order: 20; + text-align: center; + width: 390px; + margin-bottom: 30px; } /* Small screens */ -@media (max-width: 400px) { - .subscription { - width: 100%; - margin-right: 5px; - margin-left: 5px; - } +@media ( max-width: 400px) { + .subscription { + width: 100%; + margin-right: 5px; + margin-left: 5px; + } } + .subscription.individual { - order: 999; + order: 999; } + .subscription.highlight { - order: 1; + order: 1; } + .subscription.owned { - order: 100; + order: 100; } + .subscriptionBody { - border: solid; - border-width: 1px; - border-color: #ddd; - border-radius: .333333333333333em; - margin-bottom: -50px; - height: 100%; + border: solid; + border-width: 1px; + border-color: #ddd; + border-radius: .333333333333333em; + margin-bottom: -50px; + height: 100%; } + .highlight .subscriptionBody { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: .333333333333333em; - border-bottom-right-radius: .333333333333333em; - border-color: #8ab54e; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: .333333333333333em; + border-bottom-right-radius: .333333333333333em; + border-color: #8ab54e; } + .owned .subscriptionBody { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: .333333333333333em; - border-bottom-right-radius: .333333333333333em; - border-color: #ddd; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: .333333333333333em; + border-bottom-right-radius: .333333333333333em; + border-color: #ddd; } + .subscriptionFooter { + } + .highlightHeader { - visibility: hidden; - border: solid; - border-width: 1px; - border-top-left-radius: .333333333333333em; - border-top-right-radius: .333333333333333em; - height: 30px; - padding: 5px; - color: #fff; - font-size: 1em; - font-weight: bold; + visibility: hidden; + border: solid; + border-width: 1px; + border-top-left-radius: .333333333333333em; + border-top-right-radius: .333333333333333em; + height: 30px; + padding: 5px; + color: #fff; + font-size: 1em; + font-weight: bold; } + .highlight .highlightHeader { - visibility: visible; - border-color: #8ab54e; - background-color: #8ab54e; + visibility: visible; + border-color: #8ab54e; + background-color: #8ab54e; } + .owned .highlightHeader { - visibility: visible; - border-color: #ddd; - background-color: #ddd; + visibility: visible; + border-color: #ddd; + background-color: #ddd; } + .title { - background-color: #f2f2f2; - margin: 0; - border-bottom-color: #ddd; - min-height: 3em; - display: flex; - align-items: center; - justify-content: center; + background-color: #f2f2f2; + margin: 0; + border-bottom-color: #ddd; + min-height: 3em; + display: flex; + align-items: center; + justify-content: center; } + .description { - margin: 20px; + margin: 20px; } + +.info { + +} + .price { - width: 100%; - border: solid; - border-width: 1px; - border-radius: .333333333333333em; - border-color: #ddd; - padding: 0.5em; - margin-bottom: 0.5em; - font-size: 24px; - font-weight: 700; + width: 100%; + border: solid; + border-width: 1px; + border-radius: .333333333333333em; + border-color: #ddd; + padding: 0.5em; + margin-bottom: 0.5em; + font-size: 24px; + font-weight: 700; } + .price:hover { - border-color: #d79900; - background-color: #8ab54e; - color: #fff; + border-color: #d79900; + background-color: #8ab54e; + color: #fff; } + .free .price, .individual .price { - border-color: #f0ab00; - background-color: #f0ab00; - color: #fff; + border-color: #f0ab00; + background-color: #f0ab00; + color: #fff; } + .price.selected { - background-color: #f0ab00; - color: #fff; + background-color: #f0ab00; + color: #fff; } + .free .price:hover, .individual .price:hover { - border-color: #d79900; + border-color: #d79900; } + .price.selected:hover { - border-color: #d79900; + border-color: #d79900; } + .prices { - padding: 1em; - width: 100%; + padding: 1em; + width: 100%; } + .subscribe { - margin-left: auto; - margin-right: auto; - margin-bottom: 30px; - display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 30px; + display: block; } + .container { - display: flex; - flex-flow: row wrap; - gap: 1em; - margin-bottom: 1em; - justify-content: center; + display: flex; + flex-flow: row wrap; + gap: 1em; + margin-bottom: 1em; + justify-content: center; +} + +.popupContent { + background: rgba(255, 255, 255, 0.95); + border-radius: 4px; + border: 1px solid #c9caca; + margin-top: 5px; + max-width: 800px; + padding: 10px; +} + +.popupGlass { + background-color: rgba(0, 0, 0, 0.5); +} + +.subscriptionHeader { + width: 100%; + display: block; + position: relative; + padding: 4px; +} + +.hint { + position: absolute; + color: #333; + font-size: 12px; + width: 100%; + top: 3px; + text-align: right; +} + +.hint button { + background: none; + border: 1px solid transparent; + border-radius: 4px; + color: #333 +} + +.hint button:hover { + background: #0081b8; + color: #fff; +} + +.featureList dt { + font-size: 1.2em; + font-weight: bold; + margin-top: 1em; + margin-bottom: 0.5em; +} + +.featureList dd { + font-size: 1em; + font-weight: 600; } \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.java index a5276129698..5ab2f82fd65 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.java @@ -56,6 +56,8 @@ public class SubscriptionCard extends Composite { @UiField HeadingElement description; @UiField + HeadingElement info; + @UiField FlowPanel prices; @UiField FlowPanel features; @@ -165,6 +167,7 @@ public class SubscriptionCard extends Composite { final SailingSubscriptionStringConstants subscriptionStringConstants = SailingSubscriptionStringConstants.INSTANCE; title.setInnerText(subscriptionStringConstants.getString(subscriptionPlanDTO.getNameMessageKey())); description.setInnerText(subscriptionStringConstants.getString(subscriptionPlanDTO.getDescMessageKey())); + info.setInnerText(subscriptionStringConstants.getString(subscriptionPlanDTO.getInfoMessageKey())); final String[] featureStrings = subscriptionStringConstants.getStringArray(subscriptionPlanDTO.getFeatureMessageKey()); for (String featureString : featureStrings) { if(featureString != "") { diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.ui.xml b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.ui.xml index 27dd14ea381..9f292473dd8 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.ui.xml +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/partials/subscription/SubscriptionCard.ui.xml @@ -13,6 +13,7 @@