From bf36413491e13ba6f45e082d066c2a478bddf5e3 Mon Sep 17 00:00:00 2001 From: James Allen Date: Thu, 18 Feb 2016 14:51:55 +0000 Subject: [PATCH] Improve styling of upgrade messages --- .../web/app/views/project/editor/pdf.jade | 36 +++++----- .../web/app/views/project/editor/share.jade | 51 +++++++------- .../views/project/editor/track-changes.jade | 70 ++++--------------- .../stylesheets/app/editor/track-changes.less | 6 +- 4 files changed, 61 insertions(+), 102 deletions(-) diff --git a/services/web/app/views/project/editor/pdf.jade b/services/web/app/views/project/editor/pdf.jade index aee8c9b152..5d58f64e13 100644 --- a/services/web/app/views/project/editor/pdf.jade +++ b/services/web/app/views/project/editor/pdf.jade @@ -112,41 +112,43 @@ div.full-size.pdf(ng-controller="PdfController") | #{translate("learn_how_to_make_documents_compile_quickly")} .alert.alert-success(ng-show="pdf.timedout && !hasPremiumCompile") - p - strong #{translate("upgrade_for_faster_compiles")} - h5 #{translate("free_accounts_have_timeout_upgrade_to_increase")} - h4 Plus: - h4 + p + strong #{translate("upgrade_for_faster_compiles")} + p #{translate("free_accounts_have_timeout_upgrade_to_increase")} + p Plus: + p + ul.list-unstyled + li i.fa.fa-check   | #{translate("unlimited_projects")} - h4 + li i.fa.fa-check   | #{translate("collabs_per_proj", {collabcount:'Multiple'})} - h4 + li i.fa.fa-check   | #{translate("full_doc_history")} - h4 + li i.fa.fa-check   | #{translate("sync_to_dropbox")} - h4 + li i.fa.fa-check   | #{translate("sync_to_github")} - h4 + li i.fa.fa-check   |#{translate("compile_larger_projects")} - p(ng-controller="FreeTrialModalController") - a.btn.btn-success( - href - ng-class="buttonClass" - sixpack-convert="track_changes_feature_info" - ng-click="startFreeTrial('compile-timeout')" - ) #{translate("start_free_trial")} + p(ng-controller="FreeTrialModalController") + a.btn.btn-success.row-spaced-small( + href + ng-class="buttonClass" + sixpack-convert="track_changes_feature_info" + ng-click="startFreeTrial('compile-timeout')" + ) #{translate("start_free_trial")} .pdf-errors(ng-show="pdf.projectTooLarge") .alert.alert-danger diff --git a/services/web/app/views/project/editor/share.jade b/services/web/app/views/project/editor/share.jade index 06aa611725..32bac2628e 100644 --- a/services/web/app/views/project/editor/share.jade +++ b/services/web/app/views/project/editor/share.jade @@ -79,33 +79,36 @@ script(type='text/ng-template', id='shareProjectModalTemplate') type="submit" ng-mousedown="addMembers()" ) #{translate("share")} - div.text-center(ng-hide="canAddCollaborators") - p #{translate("need_to_upgrade_for_more_collabs")}. - h4 - i.fa.fa-check   - | #{translate("unlimited_projects")} - - h4 - i.fa.fa-check   - | #{translate("collabs_per_proj", {collabcount:'Multiple'})} - - h4 - i.fa.fa-check   - | #{translate("full_doc_history")} - - h4 - i.fa.fa-check   - | #{translate("sync_to_dropbox")} + div(ng-hide="canAddCollaborators") + p.text-center #{translate("need_to_upgrade_for_more_collabs")}. Also: + .row + .col-md-8.col-md-offset-2 + ul.list-unstyled + li + i.fa.fa-check   + | #{translate("unlimited_projects")} + + li + i.fa.fa-check   + | #{translate("collabs_per_proj", {collabcount:'Multiple'})} + + li + i.fa.fa-check   + | #{translate("full_doc_history")} + + li + i.fa.fa-check   + | #{translate("sync_to_dropbox")} - h4 - i.fa.fa-check   - | #{translate("sync_to_github")} + li + i.fa.fa-check   + | #{translate("sync_to_github")} - h4 - i.fa.fa-check   - |#{translate("compile_larger_projects")} + li + i.fa.fa-check   + |#{translate("compile_larger_projects")} - p(ng-controller="FreeTrialModalController") + p.text-center.row-spaced-thin(ng-controller="FreeTrialModalController") a.btn.btn-success( href ng-class="buttonClass" diff --git a/services/web/app/views/project/editor/track-changes.jade b/services/web/app/views/project/editor/track-changes.jade index 3f0bd539b0..dc7ce38708 100644 --- a/services/web/app/views/project/editor/track-changes.jade +++ b/services/web/app/views/project/editor/track-changes.jade @@ -1,83 +1,39 @@ div#trackChanges(ng-show="ui.view == 'track-changes'") span(ng-controller="TrackChangesPremiumPopup") - span(ng-if="versioningPopupType == 'default'") - .upgrade-prompt(ng-show="!project.features.versioning") - .message(ng-show="project.owner._id == user.id") - - p #{translate("upgrade_to_get_feature", {feature:"Entire Doc History"})} - p.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")} - h4 + .upgrade-prompt(ng-show="!project.features.versioning") + .message(ng-show="project.owner._id == user.id") + p.text-center: strong #{translate("upgrade_to_get_feature", {feature:"full Project History"})} + p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")} + ul.list-unstyled + li i.fa.fa-check   | #{translate("unlimited_projects")} - h4 + li i.fa.fa-check   | #{translate("collabs_per_proj", {collabcount:'Multiple'})} - h4 + li i.fa.fa-check   | #{translate("full_doc_history")} - h4 + li i.fa.fa-check   | #{translate("sync_to_dropbox")} - h4 + li i.fa.fa-check   | #{translate("sync_to_github")} - h4 + li i.fa.fa-check   |#{translate("compile_larger_projects")} - p(ng-controller="FreeTrialModalController") - a.btn.btn-success( - href - ng-class="buttonClass" - ng-click="startFreeTrial('track-changes')" - ) #{translate("start_free_trial")} - - - - .message(ng-show="project.owner._id != user.id") - p #{translate("ask_proj_owner_to_upgrade_for_history")} - p - a.small(href, ng-click="toggleTrackChanges()") #{translate("cancel")} - - .upgrade-prompt(ng-show="!project.features.versioning", ng-if="versioningPopupType == 'discount'") - .message(ng-show="project.owner._id == user.id") - - p #{translate("upgrade_to_get_feature", {feature:"Entire Doc History"})} - h2(style="color:#a93529;") 20% Off First 6 Months! - p.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")} - h4 - i.fa.fa-check   - | #{translate("unlimited_projects")} - - h4 - i.fa.fa-check   - | #{translate("collabs_per_proj", {collabcount:'Multiple'})} - - h4 - i.fa.fa-check   - | #{translate("full_doc_history")} - - h4 - i.fa.fa-check   - | #{translate("sync_to_dropbox")} - - h4 - i.fa.fa-check   - | #{translate("sync_to_github")} - - h4 - i.fa.fa-check   - |#{translate("compile_larger_projects")} - p(ng-controller="FreeTrialModalController") + p.text-center(ng-controller="FreeTrialModalController") a.btn.btn-success( href ng-class="buttonClass" - ng-click="startFreeTrial('track-changes', 'cf3yutfzu7ztxz')" + ng-click="startFreeTrial('track-changes')" ) #{translate("start_free_trial")} diff --git a/services/web/public/stylesheets/app/editor/track-changes.less b/services/web/public/stylesheets/app/editor/track-changes.less index 6723d5bbfc..b57e71ede0 100644 --- a/services/web/public/stylesheets/app/editor/track-changes.less +++ b/services/web/public/stylesheets/app/editor/track-changes.less @@ -20,10 +20,8 @@ .message { margin: auto; margin-top: 100px; - padding: 10px 10px 14px 10px; - width: 500px; - font-weight: bold; - text-align: center; + padding: (@line-height-computed / 2) @line-height-computed; + width: 400px; background-color: white; border-radius: 8px; }