Merge pull request #784 from sharelatex/jel-portals

Add styling and mixins for portals

services/web/app/views/_mixins_links.pug

@@ -0,0 +1,75 @@
+mixin linkAdvisors(linkText, linkClass, tracked)
+	//- To Do: verify path
+	//- To Do: track
+	a(href="/advisors" 
+		class=linkClass ? linkClass : ''
+		eventTrackingGa=track ? 'advisors' : null
+	)
+		| #{linkText ? linkText : 'advisor programme'}
+
+mixin linkBenefits(linkText, linkClass)
+	//- To Do: verify path
+	a(href="/benefits" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'benefits'}
+		
+mixin linkBlog(linkText, linkClass, slug)
+	if slug
+		a(href="/blog/#{slug}" class=linkClass ? linkClass : '')
+			| #{linkText ? linkText : 'blog'}
+
+mixin linkContact(linkText, linkClass)
+	a(href="/contact" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'contact'}
+
+mixin linkEducation(linkText, linkClass)
+	//- To Do: verify path
+	a(href="/plans" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'teaching toolkit'}
+
+mixin linkEmail(linkText, linkClass, email)
+	//- To Do: env var?
+	- var emailDomain = 'overleaf.com'
+	a(href="mailto:#{email ? email : 'contact'}@#{emailDomain}" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'email'}
+
+mixin linkInvite(linkText, linkClass)
+	a(href="/user/bonus" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'invite your friends'}
+
+mixin linkPlansAndPricing(linkText, linkClass)
+	//- To Do: verify path
+	a(href="/plans" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'plans and pricing'}
+
+mixin linkPrintNewTab(linkText, linkClass, icon, track)
+	//- To Do: track
+	a(href='?media=print'
+		class=linkClass ? linkClass : ''
+		eventTrackingGa=track ? 'print' : null
+		target="_BLANK"
+	)
+		if icon
+			i(class="fa fa-print")
+			|  
+		| #{linkText ? linkText : 'print'}
+
+mixin linkSignIn(linkText, linkClass)
+	a(href="/login" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'sign in'}
+
+mixin linkSignUp(linkText, linkClass)
+	a(href="/register" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'sign up'}
+
+mixin linkTweet(linkText, linkClass, tweetText, track)
+	//- twitter-share-button is required by twitter
+	//- To Do: track
+	a(class="twitter-share-button " + linkClass
+		href="https://twitter.com/intent/tweet?text=" + tweetText
+		target="_BLANK"
+	) #{linkText ? linkText : 'tweet'}
+
+mixin linkUniversities(linkText, linkClass)
+	//- To Do: verify path
+	a(href="/universities" class=linkClass ? linkClass : '')
+		| #{linkText ? linkText : 'universities'}

services/web/public/stylesheets/app/portals.less

@@ -0,0 +1,161 @@
+.content-portal {
+  padding-top: @navbar-height!important;
+
+  /*
+    Begin Header
+  */
+  .banner-image {
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    height: 375px;
+  }
+
+  .image-fill {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  .institution-logo {
+    left: 50%;
+    margin-left: -100px;
+    padding: 0;
+    position: absolute;
+    div {
+      background-color: @white;
+      box-shadow: 1px 11px 22px -9px @black-alpha-strong;
+      display: inline-block;
+      height: 125px;
+      overflow: hidden;
+      position: absolute;
+      text-align: center;
+      top: -110px;
+      white-space: nowrap;
+      width: @btn-portal-width;
+    }
+    img {
+      max-height: 75px;
+      max-width: 150px;
+      vertical-align: middle;
+    }
+  }
+
+  .portal-name {
+    background-color: @ol-blue-gray-0;
+    padding-bottom: @line-height-computed; //- center header when no tabs
+    padding-top: @padding-md;
+    text-align: center;
+    width: 100%;
+  }
+  // End Header
+
+  /*
+    Begin Layout
+  */
+  .button-pull,
+  .content-pull {
+    float: left;
+  }
+
+  .button-pull {
+    text-align: right;
+    > a.btn {
+      white-space: normal;
+      width: @btn-portal-width;
+      text-align: center;
+    }
+  }
+  .content-pull {
+    padding-right: @padding-sm;
+    width: calc(~"100% - "@btn-portal-width);
+  }
+  // End Layout
+
+  /*
+    Begin Card
+  */
+  .card {
+    margin-bottom: @margin-md;
+  }
+  // End Card
+
+  /*
+    Begin Actions
+  */
+  .portal-actions {
+    i {
+      margin-bottom: @margin-sm;
+    }
+  }
+  // End Actions
+
+  /*
+    Begin Print
+  */
+  .print {
+    .hidden-print {
+      display: none;
+    }
+  }
+  // End Print
+
+  /*
+    Begin Tabs
+  */
+  .nav-tabs {
+    // Overrides for nav.less
+    background-color: @ol-blue-gray-0;
+    border: 0!important;
+    margin-bottom: @margin-md;
+    margin-top: -@line-height-computed; //- adjusted for portal-name
+    padding: @padding-lg 0 @padding-md;
+    text-align: center;
+
+    a {
+      color: @link-color;
+      &:hover {
+        background-color: transparent!important;
+        border: 0!important;
+        color: @link-hover-color!important;
+      }
+    }
+
+    li {
+      display: inline-block;
+      float: none;
+      a {
+        border: 0;
+      }
+    }
+
+    li.active > a {
+      background-color: transparent!important;
+      border: 0;
+      border-bottom: 1px solid @accent-color-secondary!important;
+      color: @accent-color-secondary;
+      &:hover {
+        color: @accent-color-secondary!important;
+      }
+    }
+  }
+
+  .tab-content:extend(.container) {
+    background-color: transparent!important;
+    border: none!important;
+  }
+  // End Tabs
+
+  @media (max-width: @screen-size-sm-max) {
+    .content-pull {
+      padding: 0;
+      width: auto;
+    }
+
+    .button-pull {
+      > a.btn {
+        width: auto;
+      }
+    }
+  }
+}

services/web/public/stylesheets/components/embed-responsive.less

@@ -0,0 +1,26 @@
+.embed-responsive {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object,
+.embed-responsive video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.embed-responsive-16by9 {
+  padding-bottom: 56.25% !important;
+}
+.embed-responsive-4by3 {
+  padding-bottom: 75% !important;
+}

services/web/public/stylesheets/components/icons.less

@@ -0,0 +1,9 @@
+// Colors
+.icon-accent {
+  color: @accent-color-secondary;
+}
+
+// Sizes
+.icon-lg {
+  font-size: @font-size-h1;
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -62,9 +62,12 @@
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
+@margin-xs:                  5px;
 @margin-sm:                 10px;
 @margin-md:                 20px;
 @margin-lg:                 30px;
+@margin-xl:                 40px;
+@margin-xxl:                50px;
 
 @padding-base-vertical:     5px;
 @padding-base-horizontal:   16px;

services/web/public/stylesheets/core/ol-variables.less

@@ -6,6 +6,7 @@
 @footer-height: 50px;
 
 // Styleguide colors
+@ol-blue-gray-0 : #f4f5f8;
 @ol-blue-gray-1 : #E4E8EE;
 @ol-blue-gray-2 : #9DA7B7;
 @ol-blue-gray-3 : #5D6879;
@@ -21,6 +22,8 @@
 @ol-dark-red    : #A6312B;
 
 @ol-type-color  : @ol-blue-gray-3;
+@accent-color-primary: @ol-green; 
+@accent-color-secondary: @ol-dark-green;
 
 // Navbar customization
 @navbar-title-color       : @ol-blue-gray-1;
@@ -65,8 +68,14 @@
 @btn-info-bg             : @ol-blue;
 @btn-info-border         : transparent;
 
+// Padding
 @padding-xs-horizontal   : 8px;
 
+@padding-sm: 10px;
+@padding-md: 20px;
+@padding-lg: 30px;
+@padding-xl: 40px;
+
 // Alerts
 @alert-padding : 15px;
 @alert-border-radius : @border-radius-base;
@@ -167,6 +176,9 @@
 @folders-tag-menu-hover         : rgba(0, 0, 0, .1);
 @folders-tag-menu-active-hover  : rgba(0, 0, 0, .1);
 
+// Portal
+@btn-portal-width               : 200px;
+
 // Project table
 @structured-list-line-height    : 2.5;
 @structured-list-link-color     : @ol-blue;
@@ -273,6 +285,9 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+// Portals
+@black-alpha-strong             : rgba(0,0,0,0.8);
+
 
 // v2 History
 @history-base-font-size               : @font-size-small;
@@ -288,6 +303,12 @@
 @history-toolbar-bg-color             : @editor-toolbar-bg;
 @history-toolbar-color                : #FFF;
 
+// Screens
+// added -size to not conflict with common_variables
+@screen-size-sm-max                   : 767px;
+@screen-size-md-min                   : 768px;
+@screen-size-md-max                   : 991px;
+
 // System messages
 @sys-msg-background             : @ol-blue;
 @sys-msg-color                  : #FFF;
@@ -304,6 +325,7 @@
 @gray-light:            #a4a4a4;
 @gray-lighter:          #cfcfcf;
 @gray-lightest:         #f0f0f0;
+@white:                 #ffffff;
 
 @blue:                  #405ebf;
 @blueDark:              #040D2D;

services/web/public/stylesheets/ol-style.less

@@ -6,8 +6,11 @@
 @import "app/ol-style-guide.less";
 @import "_style_includes.less";
 @import "_ol_style_includes.less";
+@import "components/embed-responsive.less";
+@import "components/icons.less";
 
 // Pages
 @import "app/about.less";
 @import "app/blog-posts.less";
 @import "app/cms-page.less";
+@import "app/portals.less";