Extract URLs into strings and apply specified styling (especially for mobile)

app/views/common/upsale.html.erb

@@ -39,19 +39,19 @@
     </br>
     <%= t('admin.enterprise.upgrade_info') %>
     </p>
-    <%= link_to( "https://www.openproject.org/contact/",
-                 { class: 'button',
-                   aria: {label: t('admin.enterprise.buttons.contact')},
-                   target: '_blank',
-                   title: t('admin.enterprise.buttons.contact')}) do %>
+    <%= link_to(OpenProject::Static::Links.links[:contact_us][:href],
+                { class: 'button',
+                  aria: {label: t('admin.enterprise.buttons.contact')},
+                  target: '_blank',
+                  title: t('admin.enterprise.buttons.contact')}) do %>
       <span class="button--text"><%= t('admin.enterprise.buttons.contact') %></span>
     <% end %>
 
-    <%= link_to( "https://www.openproject.org/pricing/",
-                 { class: 'button -highlight',
-                   aria: {label: t('admin.enterprise.buttons.upgrade')},
-                   target: '_blank',
-                   title: t('admin.enterprise.buttons.upgrade')}) do %>
+    <%= link_to(OpenProject::Static::Links.links[:pricing][:href],
+                { class: 'button -highlight',
+                  aria: {label: t('admin.enterprise.buttons.upgrade')},
+                  target: '_blank',
+                  title: t('admin.enterprise.buttons.upgrade')}) do %>
       <%= op_icon('button--icon icon-medal') %>
       <span class="button--text"><%= t('admin.enterprise.buttons.upgrade') %></span>
     <% end %>

app/views/homescreen/blocks/_upsale.html.erb

@@ -28,7 +28,7 @@
     <%= op_icon('button--icon icon-external-link') %>
   <% end %>
 
-  <%= link_to( "https://www.openproject.org/pricing/",
+  <%= link_to(OpenProject::Static::Links.links[:pricing][:href],
     { class: 'button -highlight',
       aria: {label: t('admin.enterprise.buttons.upgrade')},
       target: '_blank',
@@ -40,4 +40,4 @@
   <% if current_user.admin? %>
     <%= link_to t('js.admin.enterprise.upsale.button_start_trial'), enterprise_path, class: 'button -alt-highlight' %>
   <% end  %>
-</div>
+</div>

frontend/src/app/core/setup/globals/constants.const.ts

@@ -4,3 +4,5 @@ export const contactUrl:{ [locale:string]:string } = {
   en: 'https://www.openproject.org/contact/',
   de: 'https://www.openproject.org/de/kontakt/',
 };
+
+export const pricingUrl = 'https://www.openproject.org/pricing';

frontend/src/app/features/boards/index-page/boards-index-page.component.ts

@@ -13,7 +13,6 @@ import { OpModalService } from 'core-app/shared/components/modal/modal.service';
 import { NewBoardModalComponent } from 'core-app/features/boards/new-board-modal/new-board-modal.component';
 import { LoadingIndicatorService } from 'core-app/core/loading-indicator/loading-indicator.service';
 import { AuthorisationService } from 'core-app/core/model-auth/model-auth.service';
-import { contactUrl } from 'core-app/core/setup/globals/constants.const';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { componentDestroyed } from '@w11k/ngx-componentdestroyed';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';

frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html

@@ -29,9 +29,9 @@
           <op-icon icon-classes="icon icon-external-link"></op-icon>
           {{ moreInfoText }}
         </a>
-    
+
         <a
-          href="https://www.openproject.org/pricing/"
+          [href]="pricingUrl"
           target=”_blank”
           class="button -highlight">
           <op-icon icon-classes="button--icon icon-medal"></op-icon>
@@ -48,4 +48,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts

@@ -12,6 +12,7 @@ import { imagePath } from 'core-app/shared/helpers/images/path-helper';
 import { OpModalService } from '../modal/modal.service';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
+import { pricingUrl } from 'core-app/core/setup/globals/constants.const';
 
 export const enterpriseBannerSelector = 'op-enterprise-banner';
 
@@ -38,6 +39,8 @@ export class EnterpriseBannerComponent implements OnInit {
 
   public link:string;
 
+  pricingUrl = pricingUrl;
+
   public text = {
     enterpriseFeature: this.I18n.t('js.upsale.ee_only'),
     become_hero: this.I18n.t('js.admin.enterprise.upsale.become_hero'),

frontend/src/global_styles/content/_enterprise.sass

@@ -1,31 +1,22 @@
-@import '../../app/spot/styles/sass/variables'
-
 .upsale-notification
   max-width: 50vw
   margin: auto
   padding-top: 20px
   text-align: center
 
-
-  .widget-box--teaser-image
-    width: 90%
+  .widget-box--teaser-image,
+  .widget-box--teaser-video
+    width: 100%
     height: auto
     margin-bottom: 20px
     box-shadow: 4px 4px 10px rgb(0 0 0 / 15%)
     border-radius: 25px
-  
+
   .widget-box--teaser-image_default
     width: 30%
     margin-bottom: 20px
     box-shadow: 4px 4px 10px rgb(0 0 0 / 15%)
     border-radius: 25px
-    
-  .widget-box--teaser-video
-    width: 90%
-    height: auto
-    margin-bottom: 20px
-    box-shadow: 4px 4px 10px rgb(0 0 0 / 15%)
-    border-radius: 25px
 
 .upsale-actions
   display: flex
@@ -57,4 +48,14 @@
 
 .widget-box--blocks--upsale-description
   margin: 10px 0 10px 0
-  display: flex
+  display: flex
+
+
+@media screen and (max-width: 679px)
+  .upsale-notification
+    max-width: none
+
+    .widget-box--teaser-image,
+    .widget-box--teaser-video
+      width: 90%
+      border-radius: 15px

lib/open_project/static/links.rb

@@ -211,6 +211,9 @@ module OpenProject
             },
             contact_us: {
               href: 'https://www.openproject.org/contact/'
+            },
+            pricing: {
+              href: 'https://www.openproject.org/pricing/'
             }
           }
         end