mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #784 from sharelatex/jel-portals
Add styling and mixins for portals
This commit is contained in:
Jessica Lawshe
GitHub
commit
cf532b93d8
7 changed files with 303 additions and 4 deletions
75
services/web/app/views/_mixins_links.pug
Normal file
75
services/web/app/views/_mixins_links.pug
Normal file
|
|
@ -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'}
|
||||
161
services/web/public/stylesheets/app/portals.less
Normal file
161
services/web/public/stylesheets/app/portals.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
9
services/web/public/stylesheets/components/icons.less
Normal file
9
services/web/public/stylesheets/components/icons.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// Colors
|
||||
.icon-accent {
|
||||
color: @accent-color-secondary;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.icon-lg {
|
||||
font-size: @font-size-h1;
|
||||
}
|
||||
|
|
@ -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-sm: 10px;
|
||||
@margin-md: 20px;
|
||||
@margin-lg: 30px;
|
||||
@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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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/cms-page.less";
|
||||
@import "app/portals.less";
|
||||
Loading…
Reference in a new issue