github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #784 from sharelatex/jel-portals

Browse source 
Add styling and mixins for portals
This commit is contained in:
Jessica Lawshe 2018-08-14 12:00:36 -05:00 committed by GitHub
commit cf532b93d8
7 changed files with 303 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
services/web/app/views/_mixins_links.pug Normal file
View 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
View 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;
}
}
}
}

26
services/web/public/stylesheets/components/embed-responsive.less Normal file
View file

@ -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
View file

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

9
services/web/public/stylesheets/core/_common-variables.less
View file

@ -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;

22
services/web/public/stylesheets/core/ol-variables.less
View file

@ -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;

5
services/web/public/stylesheets/ol-style.less
View file

@ -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";