From e68b367f3f26bc03a38e94a389dc7e70e446ed73 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 25 Sep 2017 11:48:42 +0100 Subject: [PATCH 01/53] Common variables; refactor some Bootstrap hard-coded stuff into new variables. --- .../public/stylesheets/components/card.less | 12 ++--- .../stylesheets/core/_common-variables.less | 2 + .../public/stylesheets/core/ol-variables.less | 47 +++++++++++++++---- .../public/stylesheets/core/scaffolding.less | 2 +- 4 files changed, 48 insertions(+), 15 deletions(-) diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less index 2619686b0a..f906d68daf 100644 --- a/services/web/public/stylesheets/components/card.less +++ b/services/web/public/stylesheets/components/card.less @@ -1,6 +1,6 @@ .card { background-color: white; - border-radius: @border-radius-base; + border-radius: @card-border-radius-base; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.15); padding: @line-height-computed; @@ -39,16 +39,16 @@ z-index: 1; // Make it taller and card like margin-top: 0; - border-radius: @border-radius-base; + border-radius: @card-border-radius-base; } &.card-first { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; + border-top-left-radius: @card-border-radius-base; + border-bottom-left-radius: @card-border-radius-base; } &.card-last { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; + border-top-right-radius: @card-border-radius-base; + border-bottom-right-radius: @card-border-radius-base; } } } \ No newline at end of file diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 6274b265f9..0481b4ae5e 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -86,6 +86,7 @@ @border-radius-large: 5px; @border-radius-small: 2px; +@card-border-radius-base: @border-radius-base; //** Global color for active items (e.g., navs or dropdowns). @component-active-color: #fff; //** Global background color for active items (e.g., navs or dropdowns). @@ -793,6 +794,7 @@ @content-margin-top: @line-height-computed; // Custom +@content-alt-bg-color: lighten(@gray-lightest, 2.5%); @left-menu-width: 260px; @left-menu-animation-duration: 0.35s; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 23151bd9c4..45c18b5d65 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -1,11 +1,45 @@ -@ol-green: #4A9F48; -@ol-dark-green: #1C5B26; +@import "./_common-variables.less"; + +// Styleguide colors +@ol-blue-gray-1 : #E4E8EE; +@ol-blue-gray-2 : #9DA7B7; +@ol-blue-gray-3 : #5D6879; +@ol-blue-gray-4 : #485973; +@ol-blue-gray-5 : #2C3645; +@ol-blue-gray-6 : #1E2530; + +@ol-green : #4F9C45; +@ol-dark-green : #1C5B26; +@ol-blue : #4B7FD1; +@ol-dark-blue : #2857A1; +@ol-red : #C9453E; +@ol-dark-red : #A6312B; + +@ol-type-color : @ol-blue-gray-3; + +// Navbar customization +@navbar-default-color : #FFF; +@navbar-default-bg : @ol-blue-gray-6; +@navbar-default-border : transparent; +@navbar-brand-image-url : url(/img/ol-brand/logo-horizontal.png); + +// Backgrounds +@body-bg : @ol-blue-gray-1; +@content-alt-bg-color : @ol-blue-gray-1; + +// Typography +@text-color : @ol-type-color; + +// Border radius (used for components, e.g. buttons) +@border-radius-base : 999px; // Large enough value to be fully rounded everywhere +@border-radius-large : 999px; // As above +@border-radius-small : 999px; // As above + +@card-border-radius-base: 3px; //== Colors // //## Gray and brand colors for use across Bootstrap. - - @gray-darker: #252525; @gray-dark: #505050; @gray: #7a7a7a; @@ -28,10 +62,7 @@ @brand-warning: @orange; @brand-danger: #E03A06; -@navbar-brand-image-url: url(/img/ol-brand/logo-horizontal.png); @editor-loading-logo-padding-top: 115.44%; @editor-loading-logo-background-url: url(/img/ol-brand/overleaf-o-grey.svg); -@editor-loading-logo-foreground-url: url(/img/ol-brand/overleaf-o.svg); - -@import "./_common-variables.less"; +@editor-loading-logo-foreground-url: url(/img/ol-brand/overleaf-o.svg); \ No newline at end of file diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index b6dc68363d..0d433739db 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -142,7 +142,7 @@ hr { } .content-alt { - background-color: lighten(@gray-lightest, 2.5%); + background-color: @content-alt-bg-color; } .row-spaced { From 66654e4a1471d31d39a951ddbcc256f8628d56a8 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 25 Sep 2017 15:40:44 +0100 Subject: [PATCH 02/53] Customize buttons; make button borders configurable. --- services/web/app/views/project/list.pug | 101 +++++++++--------- .../stylesheets/components/buttons.less | 4 +- .../stylesheets/core/_common-variables.less | 3 + .../public/stylesheets/core/ol-variables.less | 43 ++++++++ 4 files changed, 98 insertions(+), 53 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index ddf80a0b5f..06efb1b11d 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -15,59 +15,58 @@ block content } }; - .content.content-alt.project-list-page(ng-controller="ProjectPageController") - .container - .announcements( - ng-controller="AnnouncementsController" - ng-class="{ 'announcements-open': ui.isOpen }" - ng-cloak + .container-fluid.content.content-alt.project-list-page(ng-controller="ProjectPageController") + .announcements( + ng-controller="AnnouncementsController" + ng-class="{ 'announcements-open': ui.isOpen }" + ng-cloak + ) + .announcements-backdrop( + ng-if="ui.isOpen" + ng-click="toggleAnnouncementsUI();" ) - .announcements-backdrop( - ng-if="ui.isOpen" - ng-click="toggleAnnouncementsUI();" - ) - a.announcements-btn( - href - ng-if="announcements.length" - ng-click="toggleAnnouncementsUI();" - ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }" - ) - span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }} - .announcements-body( - ng-if="ui.isOpen" - ) - .announcements-scroller - .announcement( - ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id" - ) - h2.announcement-header {{ announcement.title }} - p.announcement-description(ng-bind-html="announcement.excerpt") - .announcement-meta - p.announcement-date {{ announcement.date | date:"longDate" }} - a.announcement-link( - ng-href="{{ announcement.url }}" - ng-click="logAnnouncementClick()", - target="_blank" - ) Read more - div.text-center( - ng-if="ui.newItems > 0 && ui.newItems < announcements.length" - ) - a.btn.btn-default.btn-sm( - href - ng-click="showAll();" - ) Show all + a.announcements-btn( + href + ng-if="announcements.length" + ng-click="toggleAnnouncementsUI();" + ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }" + ) + span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }} + .announcements-body( + ng-if="ui.isOpen" + ) + .announcements-scroller + .announcement( + ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id" + ) + h2.announcement-header {{ announcement.title }} + p.announcement-description(ng-bind-html="announcement.excerpt") + .announcement-meta + p.announcement-date {{ announcement.date | date:"longDate" }} + a.announcement-link( + ng-href="{{ announcement.url }}" + ng-click="logAnnouncementClick()", + target="_blank" + ) Read more + div.text-center( + ng-if="ui.newItems > 0 && ui.newItems < announcements.length" + ) + a.btn.btn-default.btn-sm( + href + ng-click="showAll();" + ) Show all - .row(ng-cloak) - span(ng-if="projects.length > 0") - aside.col-md-2.col-xs-3 - include ./list/side-bar + .row(ng-cloak) + span(ng-if="projects.length > 0") + aside.col-md-2.col-xs-3 + include ./list/side-bar - .col-md-10.col-xs-9 - include ./list/notifications - include ./list/project-list - - span(ng-if="projects.length === 0") - .col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8 - include ./list/empty-project-list + .col-md-10.col-xs-9 + include ./list/notifications + include ./list/project-list + + span(ng-if="projects.length === 0") + .col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8 + include ./list/empty-project-list include ./list/modals diff --git a/services/web/public/stylesheets/components/buttons.less b/services/web/public/stylesheets/components/buttons.less index 6e77fd2b7f..277bd2240b 100755 --- a/services/web/public/stylesheets/components/buttons.less +++ b/services/web/public/stylesheets/components/buttons.less @@ -14,8 +14,8 @@ vertical-align: middle; cursor: pointer; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 - border: 1px solid transparent; - border-bottom: 2px solid transparent; + border: @btn-border-width solid transparent; + border-bottom: @btn-border-bottom-width solid transparent; white-space: nowrap; .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); .user-select(none); diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 0481b4ae5e..4bf27cf58d 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -796,6 +796,9 @@ // Custom @content-alt-bg-color: lighten(@gray-lightest, 2.5%); +@btn-border-width: 1px; +@btn-border-bottom-width: 2px; + @left-menu-width: 260px; @left-menu-animation-duration: 0.35s; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 45c18b5d65..0ff08f73a8 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -37,6 +37,49 @@ @card-border-radius-base: 3px; +// Button colors and sizing +@btn-border-width : 0; +@btn-border-bottom-width : 0; + +@btn-default-color : #FFF; +@btn-default-bg : @ol-blue-gray-4; +@btn-default-border : transparent; + +@btn-primary-color : #FFF; +@btn-primary-bg : @ol-green; +@btn-primary-border : transparent; + +@btn-success-color : #FFF; +@btn-success-bg : @ol-green; +@btn-success-border : transparent; + +@btn-info-color : #FFF; +@btn-info-bg : @ol-blue; +@btn-info-border : transparent; + +// TODO Warning color-orange? +@btn-warning-color : #FFF; +@btn-warning-bg : @ol-red; +@btn-warning-border : transparent; + +@btn-danger-color : #FFF; +@btn-danger-bg : @ol-red; +@btn-danger-border : transparent; + + + +.btn-info { + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); +} +// Warning appears as orange +.btn-warning { + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); +} + //== Colors // //## Gray and brand colors for use across Bootstrap. From 08e0865870a1f5deb498be591f88b3ec81d3762c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 25 Sep 2017 16:41:09 +0100 Subject: [PATCH 03/53] Customize dashboard sidebar. --- services/web/app/views/project/list.pug | 4 +-- .../web/app/views/project/list/side-bar.pug | 2 +- .../public/stylesheets/app/project-list.less | 29 +++++++++++++++---- .../stylesheets/core/_common-variables.less | 7 +++++ .../public/stylesheets/core/ol-variables.less | 21 +++++--------- 5 files changed, 40 insertions(+), 23 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 06efb1b11d..dead200279 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -58,10 +58,10 @@ block content .row(ng-cloak) span(ng-if="projects.length > 0") - aside.col-md-2.col-xs-3 + aside.project-list-sidebar.col-md-2.col-xs-3 include ./list/side-bar - .col-md-10.col-xs-9 + .project-list-main.col-md-10.col-xs-9 include ./list/notifications include ./list/project-list diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index 5429045afb..93eeb46125 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -1,5 +1,5 @@ .dropdown(dropdown) - a.btn.btn-primary.dropdown-toggle( + a.btn.btn-primary.btn-block.dropdown-toggle( href="#", data-toggle="dropdown", dropdown-toggle diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 13ca60e181..aabf35b899 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -19,8 +19,21 @@ .project-list-page { position: relative; + padding-top: 0; + padding-bottom: 0; } + .project-list-sidebar { + background-color: @sidebar-bg; + padding-top: @content-margin-top; + padding-bottom: @content-margin-top; + } + + .project-list-main { + padding-top: @content-margin-top; + padding-bottom: @content-margin-top; + } + .project-header { .btn-group > .btn { padding-left: @line-height-base / 2; @@ -76,7 +89,7 @@ } ul.folders-menu { - margin: 0; + margin: 0 -(@grid-gutter-width / 2); .subdued { color: @gray-light; } @@ -85,18 +98,22 @@ ul.folders-menu { line-height: 1.8; position: relative; > a { + display: block; font-size: 0.9rem; - color: #333; - padding: (@line-height-computed / 4); - display: inline-block; + color: @sidebar-link-color; + padding: (@line-height-computed / 4) (@grid-gutter-width / 2); line-height: 1.2; + &:hover { + background-color: @sidebar-hover-bg; + text-decoration: @sidebar-hover-text-decoration; + } } } > li.active { //border-right: 4px solid @red; - background-color: @link-color; - border-radius: @border-radius-small; + border-radius: @sidebar-active-border-radius; > a { + background-color: @sidebar-active-bg; font-weight: 700; color: white; .subdued { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 4bf27cf58d..80ce79e76e 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -796,6 +796,13 @@ // Custom @content-alt-bg-color: lighten(@gray-lightest, 2.5%); +@sidebar-bg: transparent; +@sidebar-link-color: #333; +@sidebar-active-border-radius: @border-radius-small; +@sidebar-active-bg: @link-color; +@sidebar-hover-bg: transparent; +@sidebar-hover-text-decoration: underline; + @btn-border-width: 1px; @btn-border-bottom-width: 2px; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 0ff08f73a8..0090713b09 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -66,20 +66,13 @@ @btn-danger-bg : @ol-red; @btn-danger-border : transparent; - - -.btn-info { - .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); -} -// Warning appears as orange -.btn-warning { - .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); -} -// Danger and error appear as red -.btn-danger { - .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); -} - +// Sidebar +@sidebar-bg : @ol-blue-gray-5; +@sidebar-link-color : #FFF; +@sidebar-active-border-radius : 0; +@sidebar-active-bg : @ol-blue-gray-6; +@sidebar-hover-bg : @ol-blue-gray-4; +@sidebar-hover-text-decoration : none; //== Colors // //## Gray and brand colors for use across Bootstrap. From 465de8701b28d09913a8b5795373c9121cf84583 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 25 Sep 2017 16:56:22 +0100 Subject: [PATCH 04/53] Use a different strategy to achieve rounded buttons (less impact on other elements). --- .../web/public/stylesheets/components/buttons.less | 8 ++++---- services/web/public/stylesheets/components/card.less | 12 ++++++------ .../public/stylesheets/core/_common-variables.less | 7 +++++-- .../web/public/stylesheets/core/ol-variables.less | 11 ++++------- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/services/web/public/stylesheets/components/buttons.less b/services/web/public/stylesheets/components/buttons.less index 277bd2240b..57a29c5353 100755 --- a/services/web/public/stylesheets/components/buttons.less +++ b/services/web/public/stylesheets/components/buttons.less @@ -17,7 +17,7 @@ border: @btn-border-width solid transparent; border-bottom: @btn-border-bottom-width solid transparent; white-space: nowrap; - .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); + .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); .user-select(none); &, @@ -124,14 +124,14 @@ .btn-lg { // line-height: ensure even-numbered height of button next to large input - .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large); } .btn-sm { // line-height: ensure proper height of button next to small input - .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); } .btn-xs { - .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); } diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less index f906d68daf..2619686b0a 100644 --- a/services/web/public/stylesheets/components/card.less +++ b/services/web/public/stylesheets/components/card.less @@ -1,6 +1,6 @@ .card { background-color: white; - border-radius: @card-border-radius-base; + border-radius: @border-radius-base; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.15); padding: @line-height-computed; @@ -39,16 +39,16 @@ z-index: 1; // Make it taller and card like margin-top: 0; - border-radius: @card-border-radius-base; + border-radius: @border-radius-base; } &.card-first { - border-top-left-radius: @card-border-radius-base; - border-bottom-left-radius: @card-border-radius-base; + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; } &.card-last { - border-top-right-radius: @card-border-radius-base; - border-bottom-right-radius: @card-border-radius-base; + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; } } } \ No newline at end of file diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 80ce79e76e..0a2337706e 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -85,8 +85,6 @@ @border-radius-base: 3px; @border-radius-large: 5px; @border-radius-small: 2px; - -@card-border-radius-base: @border-radius-base; //** Global color for active items (e.g., navs or dropdowns). @component-active-color: #fff; //** Global background color for active items (e.g., navs or dropdowns). @@ -796,6 +794,11 @@ // Custom @content-alt-bg-color: lighten(@gray-lightest, 2.5%); +@btn-border-radius-large: @border-radius-large; +@btn-border-radius-base: @border-radius-base; +@btn-border-radius-small: @border-radius-small; + + @sidebar-bg: transparent; @sidebar-link-color: #333; @sidebar-active-border-radius: @border-radius-small; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 0090713b09..7de6fde466 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -30,17 +30,14 @@ // Typography @text-color : @ol-type-color; -// Border radius (used for components, e.g. buttons) -@border-radius-base : 999px; // Large enough value to be fully rounded everywhere -@border-radius-large : 999px; // As above -@border-radius-small : 999px; // As above - -@card-border-radius-base: 3px; - // Button colors and sizing @btn-border-width : 0; @btn-border-bottom-width : 0; +@btn-border-radius-large : 9999px; +@btn-border-radius-base : 9999px; +@btn-border-radius-small : 9999px; + @btn-default-color : #FFF; @btn-default-bg : @ol-blue-gray-4; @btn-default-border : transparent; From f6e236afa67b7a3e5fd2f8c37c4fac56221021e7 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 25 Sep 2017 17:12:31 +0100 Subject: [PATCH 05/53] Link typography. --- .../web/public/stylesheets/app/project-list.less | 2 +- .../web/public/stylesheets/components/card.less | 4 ++-- .../stylesheets/core/_common-variables.less | 3 +++ .../public/stylesheets/core/ol-variables.less | 16 +++++++++++++--- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index aabf35b899..39d7cf9069 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -239,7 +239,7 @@ ul.structured-list { background-color: white; } a { - color: darken(@blue, 10%); + color: @structured-list-link-color; } .header { text-transform: uppercase; diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less index 2619686b0a..1e06fbe3b4 100644 --- a/services/web/public/stylesheets/components/card.less +++ b/services/web/public/stylesheets/components/card.less @@ -1,8 +1,8 @@ .card { background-color: white; border-radius: @border-radius-base; - -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); - box-shadow: 0 2px 4px rgba(0,0,0,0.15); + -webkit-box-shadow: @card-box-shadow; + box-shadow: @card-box-shadow; padding: @line-height-computed; .page-header { margin: 0 0 1.5625rem; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 0a2337706e..49ad90b399 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -798,6 +798,9 @@ @btn-border-radius-base: @border-radius-base; @btn-border-radius-small: @border-radius-small; +@card-box-shadow: 0 2px 4px rgba(0,0,0,0.15); + +@structured-list-link-color: darken(@blue, 10%); @sidebar-bg: transparent; @sidebar-link-color: #333; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 7de6fde466..3befa66283 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -29,6 +29,8 @@ // Typography @text-color : @ol-type-color; +@link-color : @ol-blue; +@link-hover-color : @ol-dark-blue; // Button colors and sizing @btn-border-width : 0; @@ -59,9 +61,12 @@ @btn-warning-bg : @ol-red; @btn-warning-border : transparent; -@btn-danger-color : #FFF; -@btn-danger-bg : @ol-red; -@btn-danger-border : transparent; +@btn-danger-color : #FFF; +@btn-danger-bg : @ol-red; +@btn-danger-border : transparent; + +// Cards +@card-box-shadow : none; // Sidebar @sidebar-bg : @ol-blue-gray-5; @@ -70,6 +75,11 @@ @sidebar-active-bg : @ol-blue-gray-6; @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; + + +// Project table +@structured-list-link-color : @ol-blue; + //== Colors // //## Gray and brand colors for use across Bootstrap. From 1b6829eed68d7c4d80d4e4fafa00e22ae1f20aad Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 26 Sep 2017 13:49:46 +0100 Subject: [PATCH 06/53] Style the project list table. --- .../public/stylesheets/app/project-list.less | 58 +++++++++++-------- .../stylesheets/core/_common-variables.less | 3 + .../public/stylesheets/core/ol-variables.less | 3 + 3 files changed, 40 insertions(+), 24 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 39d7cf9069..b210b93477 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -222,38 +222,42 @@ ul.structured-list { overflow: hidden; overflow-y: auto; li { - border-bottom: 1px solid @gray-lightest; + border-bottom: 1px solid @structured-list-border-color; padding: (@line-height-computed / 4) 0; - &:first-child { - .header { - font-size: 1rem; - } - } + // &:first-child { + // .header { + // font-size: 1rem; + // } + // } &:last-child { border-bottom: 0 none; } &:hover { - background-color: @gray-lightest; + background-color: @structured-list-hover-color; } - &:first-child:hover { - background-color: white; + &:first-child { + border-bottom-color: @structured-header-border-color; + &:hover { + background-color: transparent; + } } a { color: @structured-list-link-color; } .header { - text-transform: uppercase; + font-weight: 600; } .select-item, .select-all { display: inline-block; + margin: 0 (@line-height-computed / 4); } - .select-item, .select-all { - position: absolute; - left: @line-height-computed; - } + // .select-item, .select-all { + // position: absolute; + // left: @line-height-computed; + // } .select-item + span, .select-all + span { display: inline-block; - padding-left: @line-height-computed * 1.5; + padding-left: (@line-height-computed / 4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -262,17 +266,23 @@ ul.structured-list { } } +.project-list-card { + padding: 0 (@line-height-computed / 4); +} + ul.project-list { li { - .last-modified, .owner { - font-size: .8rem; - } - .owner { - margin-right: 0; - } - .projectName { - margin-right: @line-height-computed / 4; - } + line-height: 3; + padding: 0; + // .last-modified, .owner { + // font-size: .8rem; + // } + // .owner { + // margin-right: 0; + // } + // .projectName { + // margin-right: @line-height-computed / 4; + // } .tag-label { margin-left: @line-height-computed / 4; position: relative; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 49ad90b399..80454ce594 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -801,6 +801,9 @@ @card-box-shadow: 0 2px 4px rgba(0,0,0,0.15); @structured-list-link-color: darken(@blue, 10%); +@structured-header-border-color: @gray-lightest; +@structured-list-border-color: @gray-lightest; +@structured-list-hover-color: @gray-lightest; @sidebar-bg: transparent; @sidebar-link-color: #333; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 3befa66283..b6fcf39eed 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -79,6 +79,9 @@ // Project table @structured-list-link-color : @ol-blue; +@structured-header-border-color : shade(@ol-blue-gray-1, 5%); +@structured-list-border-color : @ol-blue-gray-1; +@structured-list-hover-color : lighten(@ol-blue-gray-1, 5%); //== Colors // From af6b722dfb3bb07475405184bf92a4c749a48c15 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 28 Sep 2017 12:12:04 +0100 Subject: [PATCH 07/53] Add Overleaf SVG assets. --- services/web/public/img/ol-brand/overleaf-white.svg | 1 + services/web/public/img/ol-brand/overleaf.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 services/web/public/img/ol-brand/overleaf-white.svg create mode 100644 services/web/public/img/ol-brand/overleaf.svg diff --git a/services/web/public/img/ol-brand/overleaf-white.svg b/services/web/public/img/ol-brand/overleaf-white.svg new file mode 100644 index 0000000000..2ced81aa46 --- /dev/null +++ b/services/web/public/img/ol-brand/overleaf-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/services/web/public/img/ol-brand/overleaf.svg b/services/web/public/img/ol-brand/overleaf.svg new file mode 100644 index 0000000000..73d2a9b4e0 --- /dev/null +++ b/services/web/public/img/ol-brand/overleaf.svg @@ -0,0 +1 @@ + \ No newline at end of file From 589d4521a5a9f558b83e3002f9c7ae1604d13479 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 28 Sep 2017 12:12:22 +0100 Subject: [PATCH 08/53] Add source map to less files. --- services/web/Gruntfile.coffee | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index 0845b435c2..6e986edb61 100644 --- a/services/web/Gruntfile.coffee +++ b/services/web/Gruntfile.coffee @@ -137,9 +137,13 @@ module.exports = (grunt) -> less: app: + options: + sourceMap: true files: "public/stylesheets/style.css": "public/stylesheets/style.less" ol: + options: + sourceMap: true files: "public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less" From e68b166309edb8d29880972f153a18ffbdda5877 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 28 Sep 2017 12:12:33 +0100 Subject: [PATCH 09/53] Style the navbar. --- .../public/stylesheets/components/navbar.less | 26 +++++++++---------- .../stylesheets/core/_common-variables.less | 13 ++++++++++ .../public/stylesheets/core/ol-variables.less | 21 ++++++++++++--- 3 files changed, 44 insertions(+), 16 deletions(-) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 52a4a10029..12c8f552f7 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -378,7 +378,7 @@ .navbar-default { background-color: @navbar-default-bg; border-color: @navbar-default-border; - padding: 1rem 2rem; + padding: @navbar-default-padding; .navbar-brand { position: absolute; @@ -400,11 +400,11 @@ > li > a { color: @navbar-default-link-color; border: 2px solid transparent; - border-radius: @border-radius-base; - font-size: @font-size-base * .8; - font-weight: 700; - line-height: 1; - padding: 10px 10px 11px; + border-radius: @navbar-btn-border-radius; + font-size: @navbar-btn-font-size; + font-weight: @navbar-btn-font-weight; + line-height: @navbar-btn-line-height; + padding: @navbar-btn-padding; &:hover, &:focus { @@ -432,15 +432,15 @@ > li.subdued > a { border: 0; - color: @gray; - padding: 12px 12px 13px; + color: @navbar-subdued-color; + padding: @navbar-subdued-padding; margin-left: 0; &:hover { - color: @gray-dark; - background-color: @gray-lightest; + color: @navbar-subdued-hover-color; + background-color: @navbar-subdued-hover-bg; } &:focus { - color: @gray; + color: @navbar-subdued-color; background-color: transparent; } } @@ -485,8 +485,8 @@ &, &:hover, &:focus { - color: @gray-dark; - background-color: @gray-lightest; + color: @navbar-subdued-hover-color; + background-color: @navbar-subdued-hover-bg; } } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 80454ce594..83fa3e3e55 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -794,6 +794,19 @@ // Custom @content-alt-bg-color: lighten(@gray-lightest, 2.5%); +@navbar-default-padding: 1rem 2rem; + +@navbar-btn-font-size: @font-size-base * 0.8; +@navbar-btn-border-radius: @border-radius-base; +@navbar-btn-font-weight: 700; +@navbar-btn-padding: 10px 10px 11px; +@navbar-btn-line-height: 1; + +@navbar-subdued-padding: 12px 12px 13px; +@navbar-subdued-color: @gray; +@navbar-subdued-hover-bg: @gray-lightest; +@navbar-subdued-hover-color: @gray-dark; + @btn-border-radius-large: @border-radius-large; @btn-border-radius-base: @border-radius-base; @btn-border-radius-small: @border-radius-small; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index b6fcf39eed..484e851179 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -21,7 +21,7 @@ @navbar-default-color : #FFF; @navbar-default-bg : @ol-blue-gray-6; @navbar-default-border : transparent; -@navbar-brand-image-url : url(/img/ol-brand/logo-horizontal.png); +@navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); // Backgrounds @body-bg : @ol-blue-gray-1; @@ -56,6 +56,23 @@ @btn-info-bg : @ol-blue; @btn-info-border : transparent; +// Navbar +@navbar-default-padding : (@grid-gutter-width / 2) 0; +@navbar-default-link-color : #FFF; +@navbar-default-link-hover-bg : @ol-green; +@navbar-default-link-active-bg : @ol-green; +@navbar-default-link-hover-color : @ol-green; +@navbar-btn-font-size : @font-size-base; +@navbar-btn-border-radius : @btn-border-radius-base; +@navbar-btn-font-weight : 400; +@navbar-btn-padding : (@padding-base-vertical - 1) @padding-base-horizontal @padding-base-vertical; +@navbar-btn-line-height : @line-height-base; + +@navbar-subdued-color : #FFF; +@navbar-subdued-padding : (@padding-base-vertical + 1) (@padding-base-horizontal + 1) (@padding-base-vertical + 2); +@navbar-subdued-hover-bg : #FFF; +@navbar-subdued-hover-color : @ol-green; + // TODO Warning color-orange? @btn-warning-color : #FFF; @btn-warning-bg : @ol-red; @@ -76,7 +93,6 @@ @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; - // Project table @structured-list-link-color : @ol-blue; @structured-header-border-color : shade(@ol-blue-gray-1, 5%); @@ -108,7 +124,6 @@ @brand-warning: @orange; @brand-danger: #E03A06; - @editor-loading-logo-padding-top: 115.44%; @editor-loading-logo-background-url: url(/img/ol-brand/overleaf-o-grey.svg); @editor-loading-logo-foreground-url: url(/img/ol-brand/overleaf-o.svg); \ No newline at end of file From 17ea9d9799b4eff6c40bb9e205576bf305ee3f7f Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 2 Oct 2017 17:01:51 +0100 Subject: [PATCH 10/53] Style project list tags. --- services/web/public/stylesheets/app/project-list.less | 6 ++++++ services/web/public/stylesheets/core/_common-variables.less | 4 ++++ services/web/public/stylesheets/core/ol-variables.less | 5 +++++ 3 files changed, 15 insertions(+) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index b210b93477..e5f4a9caff 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -294,6 +294,12 @@ ul.project-list { display: inline-block; padding-top: 0.3em; color: #FFF; + border-radius: @tag-border-radius; + background-color: @tag-bg-color; + &:hover, + &:focus { + background-color: @tag-bg-hover-color; + } } .tag-label-name { padding-right: 0.3em; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 83fa3e3e55..75a57c5e7f 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -828,6 +828,10 @@ @btn-border-width: 1px; @btn-border-bottom-width: 2px; +@tag-border-radius: 0.25em; +@tag-bg-color: inherit; +@tag-bg-hover-color: inherit; + @left-menu-width: 260px; @left-menu-animation-duration: 0.35s; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 484e851179..26c975b277 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -56,6 +56,11 @@ @btn-info-bg : @ol-blue; @btn-info-border : transparent; +// Tags +@tag-border-radius : 999px; +@tag-bg-color : @ol-green; +@tag-bg-hover-color : @ol-dark-green; + // Navbar @navbar-default-padding : (@grid-gutter-width / 2) 0; @navbar-default-link-color : #FFF; From 166a0605a3b9ada2125d4452bceaa3934fb97950 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Oct 2017 10:49:56 +0100 Subject: [PATCH 11/53] Make form elements consistent with button sizes. --- services/web/public/stylesheets/core/ol-variables.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 26c975b277..6946a697f3 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -78,6 +78,9 @@ @navbar-subdued-hover-bg : #FFF; @navbar-subdued-hover-color : @ol-green; +// Forms +@input-border-radius : unit(@line-height-base, em); +@input-height-base : @line-height-computed + (@padding-base-vertical * 2); // TODO Warning color-orange? @btn-warning-color : #FFF; @btn-warning-bg : @ol-red; From 8b98455674ce0099c7837a70b8d1c24e31278c66 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Oct 2017 15:26:49 +0100 Subject: [PATCH 12/53] Adjustments to the folders menu. --- .../web/app/views/project/list/side-bar.pug | 2 +- .../public/stylesheets/app/project-list.less | 49 +++++++++++-------- .../stylesheets/core/_common-variables.less | 22 +++++++++ .../public/stylesheets/core/ol-variables.less | 37 +++++++++++--- 4 files changed, 80 insertions(+), 30 deletions(-) diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index 93eeb46125..570372001f 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -45,7 +45,7 @@ a(href) #{translate("shared_with_you")} li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") a(href) #{translate("deleted_projects")} - li + li.separator h2 #{translate("folders")} li.tag( ng-repeat="tag in tags | orderBy:'name'", diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index e5f4a9caff..3dd793a167 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -95,19 +95,21 @@ ul.folders-menu { } > li { cursor: pointer; - line-height: 1.8; position: relative; > a { + line-height: @folders-menu-line-height; display: block; - font-size: 0.9rem; color: @sidebar-link-color; - padding: (@line-height-computed / 4) (@grid-gutter-width / 2); - line-height: 1.2; + padding: @folders-menu-item-v-padding (@grid-gutter-width / 2); + border-bottom: solid 1px transparent; &:hover { background-color: @sidebar-hover-bg; text-decoration: @sidebar-hover-text-decoration; } } + &.separator { + cursor: auto; + } } > li.active { //border-right: 4px solid @red; @@ -125,10 +127,14 @@ ul.folders-menu { color: @gray; } h2 { - margin-top: @line-height-computed / 2; - margin-bottom: @line-height-computed / 4; - font-size: @font-size-base; - font-weight: 500; + margin-top: @folders-title-margin-top; + margin-bottom: @folders-title-margin-bottom; + font-size: @folders-title-font-size; + color: @folders-title-color; + line-height: @folders-title-line-height; + text-transform: @folders-title-text-transform; + padding: @folders-menu-item-v-padding (@grid-gutter-width / 2); + font-weight: @folders-title-font-weight; font-family: @font-family-sans-serif; } > li.tag { @@ -137,7 +143,7 @@ ul.folders-menu { color: white; border-color: white; &:hover { - background-color: darken(@brand-primary, 10%); + background-color: @folders-tag-menu-active-hover; } } } @@ -145,7 +151,7 @@ ul.folders-menu { font-style: italic; margin-bottom: @line-height-computed / 4; a { - line-height: 1.7; + line-height: @folders-untagged-line-height; &:hover, &:focus { text-decoration: none; @@ -157,7 +163,7 @@ ul.folders-menu { } &:hover { &:not(.active) { - background-color: darken(@gray-lightest, 2%); + background-color: @folders-tag-hover; } .tag-menu { display: block @@ -165,30 +171,30 @@ ul.folders-menu { } &:not(.active) { .tag-menu > a:hover { - background-color: @gray-light; + background-color: @folders-tag-menu-hover; } } a.tag-name { - padding: 2px (@line-height-computed / 4); - margin-right: 18px; - display: inline-block; + padding: @folders-tag-padding; + margin-right: @folders-tag-margin-right; + display: @folders-tag-display; position: relative; i { - position: absolute; + position: @folders-tag-icon-position; top: 5px; left: 6px; } span.name { display: inline-block; - padding-left: 22px; + padding-left: @folders-tag-spacing; line-height: 1.4; } } .tag-menu { > a { - border: 1px solid @gray; + border: 1px solid @folders-tag-border-color; border-radius: @border-radius-small; - color: @text-color; + color: @folders-tag-menu-color; display: block; width: 16px; height: 16px; @@ -201,7 +207,8 @@ ul.folders-menu { } display: none; position: absolute; - top: 6px; + top: 50%; + margin-top: -8px; // Half the element height. right: 4px; &.open { display: block; @@ -272,7 +279,7 @@ ul.structured-list { ul.project-list { li { - line-height: 3; + line-height: @structured-list-line-height; padding: 0; // .last-modified, .owner { // font-size: .8rem; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 75a57c5e7f..723c7d4145 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -825,6 +825,28 @@ @sidebar-hover-bg: transparent; @sidebar-hover-text-decoration: underline; +@structured-list-line-height: inherit; +@folders-menu-line-height: 1.8; +@folders-menu-item-v-padding: (@line-height-computed / 4); +@folders-title-margin-top: @line-height-computed / 2; +@folders-title-margin-bottom: @line-height-computed / 4; +@folders-title-font-size: @font-size-base; +@folders-title-font-weight: 500; +@folders-title-line-height: @headings-line-height; +@folders-title-color: inherit; +@folders-title-text-transform: none; +@folders-tag-icon-position: absolute; +@folders-tag-padding: 2px (@line-height-computed / 4); +@folders-tag-spacing: 22px; +@folders-tag-display: inline-block; +@folders-tag-margin-right: 18px; +@folders-tag-menu-color: @gray; +@folders-tag-hover: darken(@gray-lightest, 2%); +@folders-tag-border-color: @text-color; +@folders-tag-menu-active-hover: darken(@brand-primary, 10%); +@folders-tag-menu-hover: @gray-light; +@folders-untagged-line-height: 1.7; + @btn-border-width: 1px; @btn-border-bottom-width: 2px; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 6946a697f3..a788e51998 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -80,18 +80,18 @@ // Forms @input-border-radius : unit(@line-height-base, em); -@input-height-base : @line-height-computed + (@padding-base-vertical * 2); +@input-height-base : @line-height-computed + (@padding-base-vertical * 2) - 1; // TODO Warning color-orange? -@btn-warning-color : #FFF; -@btn-warning-bg : @ol-red; -@btn-warning-border : transparent; +@btn-warning-color : #FFF; +@btn-warning-bg : @ol-red; +@btn-warning-border : transparent; -@btn-danger-color : #FFF; -@btn-danger-bg : @ol-red; -@btn-danger-border : transparent; +@btn-danger-color : #FFF; +@btn-danger-bg : @ol-red; +@btn-danger-border : transparent; // Cards -@card-box-shadow : none; +@card-box-shadow : none; // Sidebar @sidebar-bg : @ol-blue-gray-5; @@ -107,6 +107,27 @@ @structured-list-border-color : @ol-blue-gray-1; @structured-list-hover-color : lighten(@ol-blue-gray-1, 5%); +@structured-list-line-height : 2.5; +@folders-menu-line-height : @structured-list-line-height; +@folders-menu-item-v-padding : 0; +@folders-title-margin-top : 0; +@folders-title-margin-bottom : 0; +@folders-title-font-weight : normal; +@folders-title-font-size : @font-size-small; +@folders-title-line-height : unit((@font-size-base / @font-size-small) * @folders-menu-line-height); +@folders-title-color : @ol-blue-gray-3; +@folders-title-text-transform : uppercase; +@folders-tag-display : block; +@folders-tag-margin-right : 0; +@folders-tag-icon-position : static; +@folders-tag-padding : @folders-menu-item-v-padding (@grid-gutter-width / 2); +@folders-tag-spacing : 0.5em; +@folders-tag-menu-color : #FFF; +@folders-tag-hover : @sidebar-hover-bg; +@folders-tag-border-color : @folders-tag-menu-color; +@folders-tag-menu-hover : rgba(0, 0, 0, .1); +@folders-tag-menu-active-hover : rgba(0, 0, 0, .1); +@folders-untagged-line-height : @folders-menu-line-height; //== Colors // //## Gray and brand colors for use across Bootstrap. From 3c662f6d054ebbcb1720b8155bfa9f1488f2785b Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Oct 2017 16:35:27 +0100 Subject: [PATCH 13/53] Basic footer colors. --- services/web/public/stylesheets/components/footer.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index e4e4f82da1..c86c773aee 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -1,4 +1,5 @@ footer.site-footer { + background-color: @footer-bg-color; border-top: 1px solid @gray-lighter; padding: 2em; font-size: 0.9rem; @@ -22,6 +23,14 @@ footer.site-footer { vertical-align: text-bottom; } } + + a { + color: @footer-link-color; + &:hover, + &:focus { + color: @footer-link-hover-color; + } + } } .sprite-icon-lang { From 15eb23da54fcabbd83d8c5c2c3278c4acc8fe6cf Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Oct 2017 16:35:53 +0100 Subject: [PATCH 14/53] Overall project list page layout; flex-based, i.e. needs lots of testing --- services/web/app/views/project/list.pug | 6 +-- .../public/stylesheets/app/project-list.less | 37 ++++++++++++++----- .../public/stylesheets/components/navbar.less | 2 +- .../stylesheets/core/_common-variables.less | 6 ++- .../public/stylesheets/core/ol-variables.less | 7 ++++ .../public/stylesheets/core/scaffolding.less | 3 ++ 6 files changed, 47 insertions(+), 14 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index dead200279..17b5d7d1fb 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -56,8 +56,8 @@ block content ng-click="showAll();" ) Show all - .row(ng-cloak) - span(ng-if="projects.length > 0") + .row.project-list-row(ng-cloak) + .project-list-container(ng-if="projects.length > 0") aside.project-list-sidebar.col-md-2.col-xs-3 include ./list/side-bar @@ -65,7 +65,7 @@ block content include ./list/notifications include ./list/project-list - span(ng-if="projects.length === 0") + .project-list-empty(ng-if="projects.length === 0") .col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8 include ./list/empty-project-list diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 3dd793a167..f32e96f2fd 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -18,21 +18,40 @@ } .project-list-page { + display: flex; + flex-direction: column; + flex-grow: 1; position: relative; padding-top: 0; padding-bottom: 0; + width: 100%; } - .project-list-sidebar { - background-color: @sidebar-bg; - padding-top: @content-margin-top; - padding-bottom: @content-margin-top; - } - - .project-list-main { - padding-top: @content-margin-top; - padding-bottom: @content-margin-top; + .project-list-row { + display: flex; + flex-direction: column; + flex-grow: 1; } + .project-list-container { + display: flex; + align-items: stretch; + flex-grow: 1; + } + + .project-list-empty { + + } + + .project-list-sidebar { + background-color: @sidebar-bg; + padding-top: @content-margin-top; + padding-bottom: @content-margin-top; + } + + .project-list-main { + padding-top: @content-margin-top; + padding-bottom: @content-margin-top; + } .project-header { .btn-group > .btn { diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 12c8f552f7..230d62b6b4 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -384,7 +384,7 @@ position: absolute; top: 5px; bottom: 5px; - width: 180px; + width: @navbar-brand-width; padding: 0; background-image: @navbar-brand-image-url; background-size: contain; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 723c7d4145..c813b9448b 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -795,7 +795,7 @@ @content-alt-bg-color: lighten(@gray-lightest, 2.5%); @navbar-default-padding: 1rem 2rem; - +@navbar-brand-width: 180px; @navbar-btn-font-size: @font-size-base * 0.8; @navbar-btn-border-radius: @border-radius-base; @navbar-btn-font-weight: 700; @@ -847,6 +847,10 @@ @folders-tag-menu-hover: @gray-light; @folders-untagged-line-height: 1.7; +@footer-link-color: @link-color; +@footer-link-hover-color: @link-hover-color; +@footer-bg-color: transparent; + @btn-border-width: 1px; @btn-border-bottom-width: 2px; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index a788e51998..ef23d37974 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -18,6 +18,7 @@ @ol-type-color : @ol-blue-gray-3; // Navbar customization +@navbar-brand-width : 130px; @navbar-default-color : #FFF; @navbar-default-bg : @ol-blue-gray-6; @navbar-default-border : transparent; @@ -128,6 +129,12 @@ @folders-tag-menu-hover : rgba(0, 0, 0, .1); @folders-tag-menu-active-hover : rgba(0, 0, 0, .1); @folders-untagged-line-height : @folders-menu-line-height; + +// Footer +@footer-bg-color : #FFF; +@footer-link-color : @ol-green; +@footer-link-hover-color : @ol-dark-green; + //== Colors // //## Gray and brand colors for use across Bootstrap. diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index 0d433739db..30a5fa5f1e 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -29,6 +29,9 @@ body { line-height: @line-height-base; color: @text-color; background-color: @body-bg; + min-height: 100vh; + display: flex; + flex-direction: column; } // Reset fonts for relevant elements From 60a76c45c355bf9283f8b30519be95aefdd321a0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Oct 2017 16:41:11 +0100 Subject: [PATCH 15/53] Some more footer adjustments. --- services/web/app/views/layout/footer.pug | 2 +- services/web/public/stylesheets/components/footer.less | 2 +- services/web/public/stylesheets/core/_common-variables.less | 1 + services/web/public/stylesheets/core/ol-variables.less | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/layout/footer.pug b/services/web/app/views/layout/footer.pug index 62a98ecfaa..009b2085ca 100644 --- a/services/web/app/views/layout/footer.pug +++ b/services/web/app/views/layout/footer.pug @@ -1,7 +1,7 @@ footer.site-footer - .container + .container-fluid .row ul.col-md-9 diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index c86c773aee..dacd257c83 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -1,7 +1,7 @@ footer.site-footer { background-color: @footer-bg-color; border-top: 1px solid @gray-lighter; - padding: 2em; + padding: @footer-padding; font-size: 0.9rem; ul { list-style: none; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index c813b9448b..37e44c6d9f 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -850,6 +850,7 @@ @footer-link-color: @link-color; @footer-link-hover-color: @link-hover-color; @footer-bg-color: transparent; +@footer-padding: 2em; @btn-border-width: 1px; @btn-border-bottom-width: 2px; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index ef23d37974..e9c8955cea 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -134,6 +134,7 @@ @footer-bg-color : #FFF; @footer-link-color : @ol-green; @footer-link-hover-color : @ol-dark-green; +@footer-padding : 2em 0; //== Colors // From 9047e9a365a4bf72c88a4b402734c92df32b7dd8 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Oct 2017 18:16:52 +0100 Subject: [PATCH 16/53] Make SL theme closer to original. --- services/web/app/views/layout/footer.pug | 2 +- services/web/app/views/project/list.pug | 101 +++++++++--------- .../public/stylesheets/app/project-list.less | 45 +++++--- .../public/stylesheets/components/footer.less | 7 ++ .../stylesheets/core/_common-variables.less | 7 +- .../public/stylesheets/core/ol-variables.less | 17 +-- 6 files changed, 107 insertions(+), 72 deletions(-) diff --git a/services/web/app/views/layout/footer.pug b/services/web/app/views/layout/footer.pug index 009b2085ca..a0a05c2d0c 100644 --- a/services/web/app/views/layout/footer.pug +++ b/services/web/app/views/layout/footer.pug @@ -1,7 +1,7 @@ footer.site-footer - .container-fluid + .site-footer-content .row ul.col-md-9 diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 17b5d7d1fb..7cab946d98 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -15,58 +15,59 @@ block content } }; - .container-fluid.content.content-alt.project-list-page(ng-controller="ProjectPageController") - .announcements( - ng-controller="AnnouncementsController" - ng-class="{ 'announcements-open': ui.isOpen }" - ng-cloak - ) - .announcements-backdrop( - ng-if="ui.isOpen" - ng-click="toggleAnnouncementsUI();" + .content.content-alt.project-list-page(ng-controller="ProjectPageController") + .project-list-content + .announcements( + ng-controller="AnnouncementsController" + ng-class="{ 'announcements-open': ui.isOpen }" + ng-cloak ) - a.announcements-btn( - href - ng-if="announcements.length" - ng-click="toggleAnnouncementsUI();" - ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }" - ) - span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }} - .announcements-body( - ng-if="ui.isOpen" - ) - .announcements-scroller - .announcement( - ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id" - ) - h2.announcement-header {{ announcement.title }} - p.announcement-description(ng-bind-html="announcement.excerpt") - .announcement-meta - p.announcement-date {{ announcement.date | date:"longDate" }} - a.announcement-link( - ng-href="{{ announcement.url }}" - ng-click="logAnnouncementClick()", - target="_blank" - ) Read more - div.text-center( - ng-if="ui.newItems > 0 && ui.newItems < announcements.length" - ) - a.btn.btn-default.btn-sm( - href - ng-click="showAll();" - ) Show all + .announcements-backdrop( + ng-if="ui.isOpen" + ng-click="toggleAnnouncementsUI();" + ) + a.announcements-btn( + href + ng-if="announcements.length" + ng-click="toggleAnnouncementsUI();" + ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }" + ) + span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }} + .announcements-body( + ng-if="ui.isOpen" + ) + .announcements-scroller + .announcement( + ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id" + ) + h2.announcement-header {{ announcement.title }} + p.announcement-description(ng-bind-html="announcement.excerpt") + .announcement-meta + p.announcement-date {{ announcement.date | date:"longDate" }} + a.announcement-link( + ng-href="{{ announcement.url }}" + ng-click="logAnnouncementClick()", + target="_blank" + ) Read more + div.text-center( + ng-if="ui.newItems > 0 && ui.newItems < announcements.length" + ) + a.btn.btn-default.btn-sm( + href + ng-click="showAll();" + ) Show all - .row.project-list-row(ng-cloak) - .project-list-container(ng-if="projects.length > 0") - aside.project-list-sidebar.col-md-2.col-xs-3 - include ./list/side-bar + .row.project-list-row(ng-cloak) + .project-list-container(ng-if="projects.length > 0") + aside.project-list-sidebar.col-md-2.col-xs-3 + include ./list/side-bar - .project-list-main.col-md-10.col-xs-9 - include ./list/notifications - include ./list/project-list - - .project-list-empty(ng-if="projects.length === 0") - .col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8 - include ./list/empty-project-list + .project-list-main.col-md-10.col-xs-9 + include ./list/notifications + include ./list/project-list + + .project-list-empty(ng-if="projects.length === 0") + .col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8 + include ./list/empty-project-list include ./list/modals diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index f32e96f2fd..eb7aa6f833 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -27,6 +27,13 @@ width: 100%; } +.project-list-content when (@is-overleaf = true) { + .container-fluid; +} +.project-list-content when (@is-overleaf = false) { + .container; +} + .project-list-row { display: flex; flex-direction: column; @@ -108,7 +115,7 @@ } ul.folders-menu { - margin: 0 -(@grid-gutter-width / 2); + margin: @folders-menu-margin; .subdued { color: @gray-light; } @@ -116,6 +123,7 @@ ul.folders-menu { cursor: pointer; position: relative; > a { + font-size: 0.9rem; line-height: @folders-menu-line-height; display: block; color: @sidebar-link-color; @@ -126,6 +134,9 @@ ul.folders-menu { text-decoration: @sidebar-hover-text-decoration; } } + > a when (@is-overleaf = false) { + font-size: 0.9rem; + } &.separator { cursor: auto; } @@ -270,9 +281,13 @@ ul.structured-list { a { color: @structured-list-link-color; } - .header { + .header when (@is-overleaf = true) { font-weight: 600; } + + .header when (@is-overleaf = false) { + text-transform: uppercase; + } .select-item, .select-all { display: inline-block; margin: 0 (@line-height-computed / 4); @@ -299,16 +314,19 @@ ul.structured-list { ul.project-list { li { line-height: @structured-list-line-height; - padding: 0; - // .last-modified, .owner { - // font-size: .8rem; - // } - // .owner { - // margin-right: 0; - // } - // .projectName { - // margin-right: @line-height-computed / 4; - // } + .last-modified when (@is-overleaf = false) { + font-size: .8rem; + } + .owner when (@is-overleaf = false) { + font-size: .8rem; + } + .owner when (@is-overleaf = false) { + margin-right: 0; + } + .projectName when (@is-overleaf = false) { + margin-right: @line-height-computed / 4; + } + .tag-label { margin-left: @line-height-computed / 4; position: relative; @@ -338,6 +356,9 @@ ul.project-list { border-bottom-left-radius: 0; } } + li when (@is-overleaf = true) { + padding: 0; + } i.tablesort { padding-left: 8px; } diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index dacd257c83..673f46d672 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -33,6 +33,13 @@ footer.site-footer { } } +.site-footer-content when (@is-overleaf = true) { + .container-fluid; +} +.site-footer-content when (@is-overleaf = false) { + .container; +} + .sprite-icon-lang { display: inline-block; vertical-align: middle; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 37e44c6d9f..9d29d7b91c 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -792,6 +792,8 @@ @content-margin-top: @line-height-computed; // Custom +@is-overleaf: false; + @content-alt-bg-color: lighten(@gray-lightest, 2.5%); @navbar-default-padding: 1rem 2rem; @@ -826,7 +828,8 @@ @sidebar-hover-text-decoration: underline; @structured-list-line-height: inherit; -@folders-menu-line-height: 1.8; +@folders-menu-margin: 0; +@folders-menu-line-height: 1.2; @folders-menu-item-v-padding: (@line-height-computed / 4); @folders-title-margin-top: @line-height-computed / 2; @folders-title-margin-bottom: @line-height-computed / 4; @@ -838,7 +841,7 @@ @folders-tag-icon-position: absolute; @folders-tag-padding: 2px (@line-height-computed / 4); @folders-tag-spacing: 22px; -@folders-tag-display: inline-block; +@folders-tag-display: block; @folders-tag-margin-right: 18px; @folders-tag-menu-color: @gray; @folders-tag-hover: darken(@gray-lightest, 2%); diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index e9c8955cea..1a0e4ddde3 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -1,5 +1,7 @@ @import "./_common-variables.less"; +@is-overleaf: true; + // Styleguide colors @ol-blue-gray-1 : #E4E8EE; @ol-blue-gray-2 : #9DA7B7; @@ -102,13 +104,7 @@ @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; -// Project table -@structured-list-link-color : @ol-blue; -@structured-header-border-color : shade(@ol-blue-gray-1, 5%); -@structured-list-border-color : @ol-blue-gray-1; -@structured-list-hover-color : lighten(@ol-blue-gray-1, 5%); - -@structured-list-line-height : 2.5; +@folders-menu-margin : 0 -(@grid-gutter-width / 2);; @folders-menu-line-height : @structured-list-line-height; @folders-menu-item-v-padding : 0; @folders-title-margin-top : 0; @@ -130,6 +126,13 @@ @folders-tag-menu-active-hover : rgba(0, 0, 0, .1); @folders-untagged-line-height : @folders-menu-line-height; +// Project table +@structured-list-line-height : 2.5; +@structured-list-link-color : @ol-blue; +@structured-header-border-color : shade(@ol-blue-gray-1, 5%); +@structured-list-border-color : @ol-blue-gray-1; +@structured-list-hover-color : lighten(@ol-blue-gray-1, 5%); + // Footer @footer-bg-color : #FFF; @footer-link-color : @ol-green; From 045fae7109af4bfcc3f7bdb07530c9c8a56150ae Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 6 Oct 2017 10:50:59 +0100 Subject: [PATCH 17/53] Some more adjustments to make the SL theme closer to original. --- services/web/app/views/project/list/side-bar.pug | 2 +- services/web/public/stylesheets/app/project-list.less | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index 570372001f..fe053f0019 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -1,5 +1,5 @@ .dropdown(dropdown) - a.btn.btn-primary.btn-block.dropdown-toggle( + a.btn.btn-primary.sidebar-new-proj-btn.dropdown-toggle( href="#", data-toggle="dropdown", dropdown-toggle diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index eb7aa6f833..f47374381e 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -34,6 +34,10 @@ .container; } +.sidebar-new-proj-btn when (@is-overleaf) { + .btn-block; +} + .project-list-row { display: flex; flex-direction: column; @@ -307,7 +311,7 @@ ul.structured-list { } } -.project-list-card { +.project-list-card when (@is-overleaf) { padding: 0 (@line-height-computed / 4); } From 1c9d5828b17cda5daaf13700ffb67f80ab696e7c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 6 Oct 2017 12:02:20 +0100 Subject: [PATCH 18/53] Even more adjustments to make the SL theme closer to original. --- .../web/public/stylesheets/app/project-list.less | 15 ++++----------- .../stylesheets/core/_common-variables.less | 12 ++++++------ .../web/public/stylesheets/core/ol-variables.less | 8 ++++---- 3 files changed, 14 insertions(+), 21 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index f47374381e..73c44d68e3 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -131,7 +131,7 @@ ul.folders-menu { line-height: @folders-menu-line-height; display: block; color: @sidebar-link-color; - padding: @folders-menu-item-v-padding (@grid-gutter-width / 2); + padding: @folders-menu-item-v-padding @folders-menu-item-h-padding; border-bottom: solid 1px transparent; &:hover { background-color: @sidebar-hover-bg; @@ -167,7 +167,7 @@ ul.folders-menu { color: @folders-title-color; line-height: @folders-title-line-height; text-transform: @folders-title-text-transform; - padding: @folders-menu-item-v-padding (@grid-gutter-width / 2); + padding: @folders-title-padding; font-weight: @folders-title-font-weight; font-family: @font-family-sans-serif; } @@ -210,18 +210,11 @@ ul.folders-menu { } a.tag-name { padding: @folders-tag-padding; - margin-right: @folders-tag-margin-right; display: @folders-tag-display; position: relative; - i { - position: @folders-tag-icon-position; - top: 5px; - left: 6px; - } span.name { - display: inline-block; - padding-left: @folders-tag-spacing; - line-height: 1.4; + padding-left: 0.5em; + line-height: @folders-tag-line-height; } } .tag-menu { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 9d29d7b91c..0a7c415049 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -831,18 +831,18 @@ @folders-menu-margin: 0; @folders-menu-line-height: 1.2; @folders-menu-item-v-padding: (@line-height-computed / 4); -@folders-title-margin-top: @line-height-computed / 2; -@folders-title-margin-bottom: @line-height-computed / 4; +@folders-menu-item-h-padding: (@line-height-computed / 4); +@folders-title-padding: 0; +@folders-title-margin-top: (@line-height-computed / 2); +@folders-title-margin-bottom: (@line-height-computed / 4); @folders-title-font-size: @font-size-base; @folders-title-font-weight: 500; @folders-title-line-height: @headings-line-height; @folders-title-color: inherit; @folders-title-text-transform: none; -@folders-tag-icon-position: absolute; -@folders-tag-padding: 2px (@line-height-computed / 4); -@folders-tag-spacing: 22px; +@folders-tag-padding: 2px 20px 2px @folders-menu-item-h-padding; +@folders-tag-line-height: 1.8; @folders-tag-display: block; -@folders-tag-margin-right: 18px; @folders-tag-menu-color: @gray; @folders-tag-hover: darken(@gray-lightest, 2%); @folders-tag-border-color: @text-color; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 1a0e4ddde3..c5abf25ffe 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -107,6 +107,8 @@ @folders-menu-margin : 0 -(@grid-gutter-width / 2);; @folders-menu-line-height : @structured-list-line-height; @folders-menu-item-v-padding : 0; +@folders-menu-item-h-padding : (@grid-gutter-width / 2); +@folders-title-padding : @folders-menu-item-v-padding @folders-menu-item-v-padding; @folders-title-margin-top : 0; @folders-title-margin-bottom : 0; @folders-title-font-weight : normal; @@ -115,10 +117,8 @@ @folders-title-color : @ol-blue-gray-3; @folders-title-text-transform : uppercase; @folders-tag-display : block; -@folders-tag-margin-right : 0; -@folders-tag-icon-position : static; -@folders-tag-padding : @folders-menu-item-v-padding (@grid-gutter-width / 2); -@folders-tag-spacing : 0.5em; +@folders-tag-line-height : 1.4; +@folders-tag-padding : @folders-menu-item-v-padding 20px @folders-menu-item-v-padding @folders-menu-item-v-padding; @folders-tag-menu-color : #FFF; @folders-tag-hover : @sidebar-hover-bg; @folders-tag-border-color : @folders-tag-menu-color; From e1775128e45b4e3d482d99ed6c5b00d784676fc6 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 6 Oct 2017 12:18:13 +0100 Subject: [PATCH 19/53] Fixed flexbox based width issues. --- services/web/public/stylesheets/app/project-list.less | 8 ++++++++ services/web/public/stylesheets/core/ol-variables.less | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 73c44d68e3..e0292c09de 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -29,11 +29,19 @@ .project-list-content when (@is-overleaf = true) { .container-fluid; + margin: 0; } + .project-list-content when (@is-overleaf = false) { .container; } +.project-list-content { + display: flex; + flex-direction: column; + flex: 1 0 100%; +} + .sidebar-new-proj-btn when (@is-overleaf) { .btn-block; } diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index c5abf25ffe..9c3a5fcdba 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -118,7 +118,7 @@ @folders-title-text-transform : uppercase; @folders-tag-display : block; @folders-tag-line-height : 1.4; -@folders-tag-padding : @folders-menu-item-v-padding 20px @folders-menu-item-v-padding @folders-menu-item-v-padding; +@folders-tag-padding : @folders-menu-item-v-padding 20px @folders-menu-item-v-padding @folders-menu-item-h-padding; @folders-tag-menu-color : #FFF; @folders-tag-hover : @sidebar-hover-bg; @folders-tag-border-color : @folders-tag-menu-color; From f405dc49b3eb1b07a2363a4dd6225ee5fc5ca20d Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 6 Oct 2017 14:22:06 +0100 Subject: [PATCH 20/53] Implement two different scrolling models for OL and SL. --- .../public/stylesheets/app/project-list.less | 38 ++++++++++--------- .../public/stylesheets/components/footer.less | 4 ++ .../public/stylesheets/components/navbar.less | 5 ++- .../stylesheets/core/_common-variables.less | 2 + .../public/stylesheets/core/ol-variables.less | 2 + .../public/stylesheets/core/scaffolding.less | 5 +-- 6 files changed, 34 insertions(+), 22 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index e0292c09de..91dc87e875 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -18,10 +18,12 @@ } .project-list-page { - display: flex; - flex-direction: column; - flex-grow: 1; - position: relative; + // display: flex; + // flex-direction: column; + // flex-grow: 1; + position: absolute; + top: @header-height; + bottom: @footer-height; padding-top: 0; padding-bottom: 0; width: 100%; @@ -37,9 +39,7 @@ } .project-list-content { - display: flex; - flex-direction: column; - flex: 1 0 100%; + height: 100%; } .sidebar-new-proj-btn when (@is-overleaf) { @@ -47,29 +47,31 @@ } .project-list-row { - display: flex; - flex-direction: column; - flex-grow: 1; + height: 100%; } .project-list-container { - display: flex; - align-items: stretch; - flex-grow: 1; + height: 100%; } - - .project-list-empty { - + .project-list-content when (@is-overleaf = false) { + overflow: scroll; } .project-list-sidebar { background-color: @sidebar-bg; padding-top: @content-margin-top; - padding-bottom: @content-margin-top; + padding-bottom: @content-margin-top; } + .project-list-sidebar when (@is-overleaf) { + height: 100%; + overflow: scroll; + } + .project-list-main { padding-top: @content-margin-top; - padding-bottom: @content-margin-top; + padding-bottom: @content-margin-top; + height: 100%; + overflow: hidden; } .project-header { diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index 673f46d672..d1477a1b95 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -3,6 +3,10 @@ footer.site-footer { border-top: 1px solid @gray-lighter; padding: @footer-padding; font-size: 0.9rem; + position: absolute; + bottom: 0; + width: 100%; + ul { list-style: none; margin: 0px; diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 230d62b6b4..0445ad8c00 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -379,7 +379,10 @@ background-color: @navbar-default-bg; border-color: @navbar-default-border; padding: @navbar-default-padding; - + position: absolute; + top: 0; + width: 100%; + .navbar-brand { position: absolute; top: 5px; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 0a7c415049..1b5873a7dd 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -793,6 +793,8 @@ // Custom @is-overleaf: false; +@header-height: 69px; +@footer-height: 81px; @content-alt-bg-color: lighten(@gray-lightest, 2.5%); diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 9c3a5fcdba..9067d2744f 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -1,6 +1,8 @@ @import "./_common-variables.less"; @is-overleaf: true; +@header-height: 69px; +@footer-height: 81px; // Styleguide colors @ol-blue-gray-1 : #E4E8EE; diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index 30a5fa5f1e..78c919d8bb 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -29,9 +29,8 @@ body { line-height: @line-height-base; color: @text-color; background-color: @body-bg; - min-height: 100vh; - display: flex; - flex-direction: column; + height: 100vh; + position: relative; } // Reset fonts for relevant elements From 9d35ce5fe1c6e9592dbf221b2c6b5eb2147e1101 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 6 Oct 2017 14:26:34 +0100 Subject: [PATCH 21/53] Fix label issues. --- services/web/public/stylesheets/core/_common-variables.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 1b5873a7dd..927663b65d 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -861,8 +861,8 @@ @btn-border-bottom-width: 2px; @tag-border-radius: 0.25em; -@tag-bg-color: inherit; -@tag-bg-hover-color: inherit; +@tag-bg-color: @label-default-bg; +@tag-bg-hover-color: darken(@label-default-bg, 10%); @left-menu-width: 260px; @left-menu-animation-duration: 0.35s; From fd215280a8e8cd22c4691a259476f7840502e8b4 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 6 Oct 2017 15:54:54 +0100 Subject: [PATCH 22/53] Some more scroll fixes. --- .../main/project-list/project-list.coffee | 4 +-- .../public/stylesheets/app/project-list.less | 27 ++++++++++--------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/services/web/public/coffee/main/project-list/project-list.coffee b/services/web/public/coffee/main/project-list/project-list.coffee index cafbd7c81b..62bae9d2db 100644 --- a/services/web/public/coffee/main/project-list/project-list.coffee +++ b/services/web/public/coffee/main/project-list/project-list.coffee @@ -38,8 +38,8 @@ define [ # footer. So we now start to track to the bottom of the window, with a 25px padding # since the footer is hidden below the fold. Don't ever get bigger than the sidebar # though since that's what triggered this happening in the first place. - if height < sideBarHeight - height = Math.min(sideBarHeight, $window.innerHeight - topOffset - 25) + # if height < sideBarHeight + # height = Math.min(sideBarHeight, $window.innerHeight - topOffset - 25) $scope.projectListHeight = height diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 91dc87e875..41e5df7ce2 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -18,44 +18,45 @@ } .project-list-page { - // display: flex; - // flex-direction: column; - // flex-grow: 1; position: absolute; top: @header-height; bottom: @footer-height; padding-top: 0; padding-bottom: 0; width: 100%; + overflow: scroll; } -.project-list-content when (@is-overleaf = true) { +.project-list-content when (@is-overleaf) { .container-fluid; margin: 0; + height: 100%; } .project-list-content when (@is-overleaf = false) { .container; } -.project-list-content { - height: 100%; -} +// .project-list-content when (@is-overleaf) { +// height: 100%; +// } + +// .project-list-content when (@is-overleaf = false) { +// overflow: scroll; +// } + + .sidebar-new-proj-btn when (@is-overleaf) { .btn-block; } - .project-list-row { + .project-list-row when (@is-overleaf) { height: 100%; } - .project-list-container { + .project-list-container when (@is-overleaf) { height: 100%; } - .project-list-content when (@is-overleaf = false) { - overflow: scroll; - } - .project-list-sidebar { background-color: @sidebar-bg; padding-top: @content-margin-top; From 4b246501d22980a8b8a0d78eb938ff18bf34383e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 10:28:03 +0100 Subject: [PATCH 23/53] Fix the footer. --- services/web/public/stylesheets/components/footer.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index d1477a1b95..a5e0719157 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -1,11 +1,12 @@ footer.site-footer { background-color: @footer-bg-color; border-top: 1px solid @gray-lighter; - padding: @footer-padding; font-size: 0.9rem; position: absolute; bottom: 0; width: 100%; + height: @footer-height; + line-height: @footer-height; ul { list-style: none; From 6e6c058d49950f3cbdbe142e8beaa8b8005ff4e2 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 10:28:21 +0100 Subject: [PATCH 24/53] Fix the header. --- services/web/public/stylesheets/components/navbar.less | 1 + 1 file changed, 1 insertion(+) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 0445ad8c00..113d67e7c2 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -382,6 +382,7 @@ position: absolute; top: 0; width: 100%; + height: @header-height; .navbar-brand { position: absolute; From 435a5b6a43bebcae03bf437abfb2a10047b1256e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 10:30:09 +0100 Subject: [PATCH 25/53] Adjust the body to take header and footer into account with padding. --- services/web/public/stylesheets/core/_common-variables.less | 2 +- services/web/public/stylesheets/core/ol-variables.less | 4 ++-- services/web/public/stylesheets/core/scaffolding.less | 4 +++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 927663b65d..039c0c890d 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -794,7 +794,7 @@ // Custom @is-overleaf: false; @header-height: 69px; -@footer-height: 81px; +@footer-height: 50px; @content-alt-bg-color: lighten(@gray-lightest, 2.5%); diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 9067d2744f..0a884fbc3f 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -1,8 +1,8 @@ @import "./_common-variables.less"; @is-overleaf: true; -@header-height: 69px; -@footer-height: 81px; +@header-height: 70px; +@footer-height: 50px; // Styleguide colors @ol-blue-gray-1 : #E4E8EE; diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index 78c919d8bb..3258e36c2c 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -29,8 +29,10 @@ body { line-height: @line-height-base; color: @text-color; background-color: @body-bg; - height: 100vh; + min-height: 100vh; position: relative; + padding-top: @header-height; + padding-bottom: @footer-height; } // Reset fonts for relevant elements From 500dcc5bc2fde67d3d00b2c795563fc48853cfaf Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 11:59:03 +0100 Subject: [PATCH 26/53] Quick accessibility fixes for the dashboard. --- services/web/app/views/layout/footer.pug | 2 +- services/web/app/views/layout/navbar.pug | 6 +++--- services/web/app/views/project/list/project-list.pug | 3 +++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/services/web/app/views/layout/footer.pug b/services/web/app/views/layout/footer.pug index a0a05c2d0c..7bf47b24f7 100644 --- a/services/web/app/views/layout/footer.pug +++ b/services/web/app/views/layout/footer.pug @@ -38,6 +38,6 @@ footer.site-footer each item in nav.right_footer li if item.url - a(href=item.url, class=item.class) !{item.text} + a(href=item.url, class=item.class, aria-label=item.label) !{item.text} else | !{item.text} diff --git a/services/web/app/views/layout/navbar.pug b/services/web/app/views/layout/navbar.pug index 54509d6565..9e242e1f25 100644 --- a/services/web/app/views/layout/navbar.pug +++ b/services/web/app/views/layout/navbar.pug @@ -4,11 +4,11 @@ nav.navbar.navbar-default button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}") i.fa.fa-bars if settings.nav.custom_logo - a(href='/', style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand + a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand else if (nav.title) - a(href='/').navbar-title #{nav.title} + a(href='/', aria-label=settings.appName).navbar-title #{nav.title} else - a(href='/').navbar-brand + a(href='/', aria-label=settings.appName).navbar-brand .navbar-collapse.collapse(collapse="navCollapsed") diff --git a/services/web/app/views/project/list/project-list.pug b/services/web/app/views/project/list/project-list.pug index 629c3dc62d..a4295a1843 100644 --- a/services/web/app/views/project/list/project-list.pug +++ b/services/web/app/views/project/list/project-list.pug @@ -7,6 +7,7 @@ .form-group.has-feedback.has-feedback-left.col-md-7.col-xs-12 input.form-control.col-md-7.col-xs-12( placeholder=translate('search_projects')+"…", + aria-label=translate('search_projects')+"…", autofocus='autofocus', ng-model="searchText.value", focus-on='search:clear', @@ -127,6 +128,7 @@ input.select-all( select-all, type="checkbox" + aria-label="Select all" ) span.header.clickable(ng-click="changePredicate('name')") #{translate("title")} i.tablesort.fa(ng-class="getSortIconClass('name')") @@ -147,6 +149,7 @@ type="checkbox", ng-model="project.selected" stop-propagation="click" + aria-label="Select {{ project.name }}" ) span a.projectName( From 407157e3eb97750d8019b7becac7783b7e29288e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 15:27:01 +0100 Subject: [PATCH 27/53] Minor adjustmnents. --- services/web/public/stylesheets/app/project-list.less | 7 +++++++ .../web/public/stylesheets/core/_common-variables.less | 4 +++- services/web/public/stylesheets/core/ol-variables.less | 9 ++++++--- services/web/public/stylesheets/core/type.less | 2 +- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 41e5df7ce2..b5193ddefd 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -102,6 +102,9 @@ } p { margin-bottom: @line-height-computed / 4; + &.small { + color: @sidebar-color; + } } } @@ -148,11 +151,15 @@ ul.folders-menu { background-color: @sidebar-hover-bg; text-decoration: @sidebar-hover-text-decoration; } + &:focus { + text-decoration: none; + } } > a when (@is-overleaf = false) { font-size: 0.9rem; } &.separator { + padding: @folders-menu-item-v-padding @folders-menu-item-h-padding; cursor: auto; } } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 039c0c890d..576aa6d6d4 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -793,8 +793,9 @@ // Custom @is-overleaf: false; -@header-height: 69px; +@header-height: 68px; @footer-height: 50px; +@text-small-color: @gray; @content-alt-bg-color: lighten(@gray-lightest, 2.5%); @@ -823,6 +824,7 @@ @structured-list-hover-color: @gray-lightest; @sidebar-bg: transparent; +@sidebar-color: @gray; @sidebar-link-color: #333; @sidebar-active-border-radius: @border-radius-small; @sidebar-active-bg: @link-color; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 0a884fbc3f..4598490c4a 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -1,7 +1,7 @@ @import "./_common-variables.less"; @is-overleaf: true; -@header-height: 70px; +@header-height: 68px; @footer-height: 50px; // Styleguide colors @@ -29,10 +29,11 @@ @navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); // Backgrounds -@body-bg : @ol-blue-gray-1; +@body-bg : #FFF; @content-alt-bg-color : @ol-blue-gray-1; // Typography +@text-small-color : @ol-type-color; @text-color : @ol-type-color; @link-color : @ol-blue; @link-hover-color : @ol-dark-blue; @@ -84,6 +85,7 @@ @navbar-subdued-hover-color : @ol-green; // Forms +@input-color : @ol-blue-gray-3; @input-border-radius : unit(@line-height-base, em); @input-height-base : @line-height-computed + (@padding-base-vertical * 2) - 1; // TODO Warning color-orange? @@ -100,6 +102,7 @@ // Sidebar @sidebar-bg : @ol-blue-gray-5; +@sidebar-color : @ol-blue-gray-2; @sidebar-link-color : #FFF; @sidebar-active-border-radius : 0; @sidebar-active-bg : @ol-blue-gray-6; @@ -116,7 +119,7 @@ @folders-title-font-weight : normal; @folders-title-font-size : @font-size-small; @folders-title-line-height : unit((@font-size-base / @font-size-small) * @folders-menu-line-height); -@folders-title-color : @ol-blue-gray-3; +@folders-title-color : @ol-blue-gray-2; @folders-title-text-transform : uppercase; @folders-tag-display : block; @folders-tag-line-height : 1.4; diff --git a/services/web/public/stylesheets/core/type.less b/services/web/public/stylesheets/core/type.less index 56c7d236ea..ac1dcf3765 100755 --- a/services/web/public/stylesheets/core/type.less +++ b/services/web/public/stylesheets/core/type.less @@ -81,7 +81,7 @@ p { // Ex: 14px base font * 85% = about 12px small, -.small { font-size: 90%; color: @gray } +.small { font-size: 90%; color: @text-small-color; } // Undo browser default styling cite { font-style: normal; } From 8a3f104c60613ce6b22609a99fe4b8b0f8dd6e94 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 16:19:02 +0100 Subject: [PATCH 28/53] Fix some issues with longer project names. --- .../public/stylesheets/app/project-list.less | 23 +++++++------------ .../stylesheets/core/_common-variables.less | 2 +- .../public/stylesheets/core/ol-variables.less | 3 +-- 3 files changed, 10 insertions(+), 18 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index b5193ddefd..19a6c18e77 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -141,8 +141,6 @@ ul.folders-menu { cursor: pointer; position: relative; > a { - font-size: 0.9rem; - line-height: @folders-menu-line-height; display: block; color: @sidebar-link-color; padding: @folders-menu-item-v-padding @folders-menu-item-h-padding; @@ -183,7 +181,6 @@ ul.folders-menu { margin-bottom: @folders-title-margin-bottom; font-size: @folders-title-font-size; color: @folders-title-color; - line-height: @folders-title-line-height; text-transform: @folders-title-text-transform; padding: @folders-title-padding; font-weight: @folders-title-font-weight; @@ -303,17 +300,17 @@ ul.structured-list { .header when (@is-overleaf = false) { text-transform: uppercase; } - .select-item, .select-all { - display: inline-block; - margin: 0 (@line-height-computed / 4); - } // .select-item, .select-all { - // position: absolute; - // left: @line-height-computed; + // display: inline-block; + // margin: 0 (@line-height-computed / 4); // } + .select-item, .select-all { + position: absolute; + left: @line-height-computed; + } .select-item + span, .select-all + span { display: inline-block; - padding-left: (@line-height-computed / 4); + padding-left: @line-height-computed * 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -328,7 +325,6 @@ ul.structured-list { ul.project-list { li { - line-height: @structured-list-line-height; .last-modified when (@is-overleaf = false) { font-size: .8rem; } @@ -338,7 +334,7 @@ ul.project-list { .owner when (@is-overleaf = false) { margin-right: 0; } - .projectName when (@is-overleaf = false) { + .projectName { margin-right: @line-height-computed / 4; } @@ -371,9 +367,6 @@ ul.project-list { border-bottom-left-radius: 0; } } - li when (@is-overleaf = true) { - padding: 0; - } i.tablesort { padding-left: 8px; } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 576aa6d6d4..644fe4c88e 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -822,6 +822,7 @@ @structured-header-border-color: @gray-lightest; @structured-list-border-color: @gray-lightest; @structured-list-hover-color: @gray-lightest; +@structured-list-line-height: @line-height-base; @sidebar-bg: transparent; @sidebar-color: @gray; @@ -831,7 +832,6 @@ @sidebar-hover-bg: transparent; @sidebar-hover-text-decoration: underline; -@structured-list-line-height: inherit; @folders-menu-margin: 0; @folders-menu-line-height: 1.2; @folders-menu-item-v-padding: (@line-height-computed / 4); diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 4598490c4a..e8aa2fe22b 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -111,14 +111,13 @@ @folders-menu-margin : 0 -(@grid-gutter-width / 2);; @folders-menu-line-height : @structured-list-line-height; -@folders-menu-item-v-padding : 0; +@folders-menu-item-v-padding : (@line-height-computed / 4); @folders-menu-item-h-padding : (@grid-gutter-width / 2); @folders-title-padding : @folders-menu-item-v-padding @folders-menu-item-v-padding; @folders-title-margin-top : 0; @folders-title-margin-bottom : 0; @folders-title-font-weight : normal; @folders-title-font-size : @font-size-small; -@folders-title-line-height : unit((@font-size-base / @font-size-small) * @folders-menu-line-height); @folders-title-color : @ol-blue-gray-2; @folders-title-text-transform : uppercase; @folders-tag-display : block; From 274be4932a6393ed0145837c703227b36a68894e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 9 Oct 2017 17:29:55 +0100 Subject: [PATCH 29/53] Adjust padding values. --- services/web/public/stylesheets/core/ol-variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index e8aa2fe22b..1595a46ede 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -113,7 +113,7 @@ @folders-menu-line-height : @structured-list-line-height; @folders-menu-item-v-padding : (@line-height-computed / 4); @folders-menu-item-h-padding : (@grid-gutter-width / 2); -@folders-title-padding : @folders-menu-item-v-padding @folders-menu-item-v-padding; +@folders-title-padding : @folders-menu-item-v-padding 0; @folders-title-margin-top : 0; @folders-title-margin-bottom : 0; @folders-title-font-weight : normal; From 2d5426391d54259a6164b2ec063f1418da77cb27 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 12 Oct 2017 11:53:19 +0100 Subject: [PATCH 30/53] Avoid generating unneeded scroll. --- services/web/public/stylesheets/components/footer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index a5e0719157..ca33db8705 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -6,7 +6,7 @@ footer.site-footer { bottom: 0; width: 100%; height: @footer-height; - line-height: @footer-height; + line-height: @footer-height - 1; // Hack — in Chrome, using @line-height would generate vertical scrolling ul { list-style: none; From c488916c69b38d47ee02928986f63dcdc1ed1d42 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 12 Oct 2017 12:18:56 +0100 Subject: [PATCH 31/53] Make content section expand at least to all available height. --- services/web/public/stylesheets/core/scaffolding.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index 3258e36c2c..d13976686b 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -33,6 +33,11 @@ body { position: relative; padding-top: @header-height; padding-bottom: @footer-height; + display: flex; + align-items: stretch; + > .content { + flex-grow: 1; + } } // Reset fonts for relevant elements From f47dac64147e8ceb832294e2ce5e29ac59f4a15f Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 12 Oct 2017 14:19:31 +0100 Subject: [PATCH 32/53] Take potential padding into account when calculating proj list height. --- .../main/project-list/project-list.coffee | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/services/web/public/coffee/main/project-list/project-list.coffee b/services/web/public/coffee/main/project-list/project-list.coffee index 62bae9d2db..d84c348218 100644 --- a/services/web/public/coffee/main/project-list/project-list.coffee +++ b/services/web/public/coffee/main/project-list/project-list.coffee @@ -26,22 +26,12 @@ define [ storedUIOpts = JSON.parse(localStorage("project_list")) recalculateProjectListHeight = () -> - topOffset = $(".project-list-card")?.offset()?.top - bottomOffset = $("footer").outerHeight() + 25 - sideBarHeight = $("aside").height() - 56 - # When footer is visible and page doesn't need to scroll we just make it - # span between header and footer - height = $window.innerHeight - topOffset - bottomOffset - - # When page is small enough that this pushes the project list smaller than - # the side bar, then the window going to have to scroll to take into account the - # footer. So we now start to track to the bottom of the window, with a 25px padding - # since the footer is hidden below the fold. Don't ever get bigger than the sidebar - # though since that's what triggered this happening in the first place. - # if height < sideBarHeight - # height = Math.min(sideBarHeight, $window.innerHeight - topOffset - 25) + $projListCard = $(".project-list-card") + topOffset = $projListCard?.offset()?.top + cardPadding = $projListCard?.outerHeight() - $projListCard?.height() + bottomOffset = $("footer").outerHeight() + height = $window.innerHeight - topOffset - bottomOffset - cardPadding $scope.projectListHeight = height - angular.element($window).bind "resize", () -> recalculateProjectListHeight() From ef9651cc884c63088e129a832c566a6c56f88f2c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 12 Oct 2017 15:44:06 +0100 Subject: [PATCH 33/53] Style progress bars. --- .../stylesheets/components/progress-bars.less | 6 +++--- .../public/stylesheets/core/_common-variables.less | 4 ++++ .../web/public/stylesheets/core/ol-variables.less | 13 ++++++++++++- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/services/web/public/stylesheets/components/progress-bars.less b/services/web/public/stylesheets/components/progress-bars.less index 062ec48df2..df841437c3 100755 --- a/services/web/public/stylesheets/components/progress-bars.less +++ b/services/web/public/stylesheets/components/progress-bars.less @@ -29,8 +29,8 @@ height: @line-height-computed; margin-bottom: @line-height-computed; background-color: @progress-bg; - border-radius: @border-radius-base; - border: 1px solid @progress-border-color; + border-radius: @progress-border-radius; + border: @progress-border-width solid @progress-border-color; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); } @@ -44,7 +44,7 @@ color: @progress-bar-color; text-align: center; background-color: @progress-bar-bg; - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); + .box-shadow(@progress-bar-shadow); .transition(width .6s ease); } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 644fe4c88e..c181bd4b07 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -854,6 +854,10 @@ @folders-tag-menu-hover: @gray-light; @folders-untagged-line-height: 1.7; +@progress-border-radius: @border-radius-base; +@progress-border-width: 1px; +@progress-bar-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + @footer-link-color: @link-color; @footer-link-hover-color: @link-hover-color; @footer-bg-color: transparent; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 1595a46ede..9938b301bc 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -63,7 +63,7 @@ @btn-info-border : transparent; // Tags -@tag-border-radius : 999px; +@tag-border-radius : 9999px; @tag-bg-color : @ol-green; @tag-bg-hover-color : @ol-dark-green; @@ -137,6 +137,17 @@ @structured-list-border-color : @ol-blue-gray-1; @structured-list-hover-color : lighten(@ol-blue-gray-1, 5%); + +// Progress bars +@progress-border-radius : @line-height-computed; +@progress-border-width : 0; +@progress-bar-bg : @ol-blue-gray-4; +@progress-bar-success-bg : @ol-green; +@progress-bar-warning-bg : @brand-warning; +@progress-bar-danger-bg : @ol-red; +@progress-bar-info-bg : @ol-blue; +@progress-bar-shadow : none; + // Footer @footer-bg-color : #FFF; @footer-link-color : @ol-green; From 829f60fec4587a1999ad7cc8bf5f84e99bfa58b0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 16 Oct 2017 14:08:48 +0100 Subject: [PATCH 34/53] Fix scrolling issues in IE11. --- services/web/public/stylesheets/app/project-list.less | 6 ++++-- services/web/public/stylesheets/core/ol-variables.less | 2 +- services/web/public/stylesheets/core/scaffolding.less | 5 ----- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 19a6c18e77..d196ef43cf 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -24,7 +24,8 @@ padding-top: 0; padding-bottom: 0; width: 100%; - overflow: scroll; + overflow-x: hidden; + overflow-y: auto; } .project-list-content when (@is-overleaf) { @@ -65,7 +66,8 @@ .project-list-sidebar when (@is-overleaf) { height: 100%; - overflow: scroll; + overflow-x: hidden; + overflow-y: auto; } .project-list-main { diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 9938b301bc..7b373ae0ca 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -29,7 +29,7 @@ @navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); // Backgrounds -@body-bg : #FFF; +@body-bg : @ol-blue-gray-1; @content-alt-bg-color : @ol-blue-gray-1; // Typography diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index d13976686b..3258e36c2c 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -33,11 +33,6 @@ body { position: relative; padding-top: @header-height; padding-bottom: @footer-height; - display: flex; - align-items: stretch; - > .content { - flex-grow: 1; - } } // Reset fonts for relevant elements From ec4ff902731bdec51d4273f71d1587d44519ce2c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 17 Oct 2017 12:24:47 +0100 Subject: [PATCH 35/53] IE scrollbar adjustments; use calc to set content min-height (IE fails with flex and min-height). --- services/web/public/stylesheets/app/project-list.less | 2 ++ services/web/public/stylesheets/core/ol-variables.less | 2 +- services/web/public/stylesheets/core/scaffolding.less | 3 +++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index d196ef43cf..72c320d388 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -68,6 +68,7 @@ height: 100%; overflow-x: hidden; overflow-y: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; } .project-list-main { @@ -272,6 +273,7 @@ ul.structured-list { margin: 0; overflow: hidden; overflow-y: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; li { border-bottom: 1px solid @structured-list-border-color; padding: (@line-height-computed / 4) 0; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 7b373ae0ca..9938b301bc 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -29,7 +29,7 @@ @navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); // Backgrounds -@body-bg : @ol-blue-gray-1; +@body-bg : #FFF; @content-alt-bg-color : @ol-blue-gray-1; // Typography diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index 3258e36c2c..41c70bb11d 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -33,6 +33,9 @@ body { position: relative; padding-top: @header-height; padding-bottom: @footer-height; + & > .content { + min-height: calc(~"100vh -" (@header-height + @footer-height)); + } } // Reset fonts for relevant elements From 79c77188f38404d8bf1b66cf10817167ef287ea4 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 17 Oct 2017 15:04:43 +0100 Subject: [PATCH 36/53] Disable source maps (to be reenabled later on). --- services/web/Gruntfile.coffee | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index 6e986edb61..c20912e0ae 100644 --- a/services/web/Gruntfile.coffee +++ b/services/web/Gruntfile.coffee @@ -137,13 +137,13 @@ module.exports = (grunt) -> less: app: - options: - sourceMap: true + # options: + # sourceMap: true files: "public/stylesheets/style.css": "public/stylesheets/style.less" ol: - options: - sourceMap: true + # options: + # sourceMap: true files: "public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less" From 8e742785038d3b3146d8b16044e669bd0c96a256 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 17 Oct 2017 15:06:19 +0100 Subject: [PATCH 37/53] Remove test stuff. --- services/web/public/stylesheets/app/project-list.less | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 72c320d388..0aa44d1188 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -38,16 +38,6 @@ .container; } -// .project-list-content when (@is-overleaf) { -// height: 100%; -// } - -// .project-list-content when (@is-overleaf = false) { -// overflow: scroll; -// } - - - .sidebar-new-proj-btn when (@is-overleaf) { .btn-block; } From cf89c22ca50bcb537219ad5be574563b8510353c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 17 Oct 2017 15:06:44 +0100 Subject: [PATCH 38/53] Clarify comments. --- services/web/public/stylesheets/components/footer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index ca33db8705..5b68fd7dde 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -6,7 +6,7 @@ footer.site-footer { bottom: 0; width: 100%; height: @footer-height; - line-height: @footer-height - 1; // Hack — in Chrome, using @line-height would generate vertical scrolling + line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling ul { list-style: none; From db6ca5d1c399d51dd63a9be79de55e7712030ff0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 17 Oct 2017 15:42:37 +0100 Subject: [PATCH 39/53] Reorganize common vars file. --- .../stylesheets/core/_common-variables.less | 167 ++++++++++-------- 1 file changed, 89 insertions(+), 78 deletions(-) diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index c181bd4b07..5135678a0f 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -791,84 +791,6 @@ @content-margin-top: @line-height-computed; @content-margin-top: @line-height-computed; -// Custom -@is-overleaf: false; -@header-height: 68px; -@footer-height: 50px; -@text-small-color: @gray; - -@content-alt-bg-color: lighten(@gray-lightest, 2.5%); - -@navbar-default-padding: 1rem 2rem; -@navbar-brand-width: 180px; -@navbar-btn-font-size: @font-size-base * 0.8; -@navbar-btn-border-radius: @border-radius-base; -@navbar-btn-font-weight: 700; -@navbar-btn-padding: 10px 10px 11px; -@navbar-btn-line-height: 1; - -@navbar-subdued-padding: 12px 12px 13px; -@navbar-subdued-color: @gray; -@navbar-subdued-hover-bg: @gray-lightest; -@navbar-subdued-hover-color: @gray-dark; - -@btn-border-radius-large: @border-radius-large; -@btn-border-radius-base: @border-radius-base; -@btn-border-radius-small: @border-radius-small; - -@card-box-shadow: 0 2px 4px rgba(0,0,0,0.15); - -@structured-list-link-color: darken(@blue, 10%); -@structured-header-border-color: @gray-lightest; -@structured-list-border-color: @gray-lightest; -@structured-list-hover-color: @gray-lightest; -@structured-list-line-height: @line-height-base; - -@sidebar-bg: transparent; -@sidebar-color: @gray; -@sidebar-link-color: #333; -@sidebar-active-border-radius: @border-radius-small; -@sidebar-active-bg: @link-color; -@sidebar-hover-bg: transparent; -@sidebar-hover-text-decoration: underline; - -@folders-menu-margin: 0; -@folders-menu-line-height: 1.2; -@folders-menu-item-v-padding: (@line-height-computed / 4); -@folders-menu-item-h-padding: (@line-height-computed / 4); -@folders-title-padding: 0; -@folders-title-margin-top: (@line-height-computed / 2); -@folders-title-margin-bottom: (@line-height-computed / 4); -@folders-title-font-size: @font-size-base; -@folders-title-font-weight: 500; -@folders-title-line-height: @headings-line-height; -@folders-title-color: inherit; -@folders-title-text-transform: none; -@folders-tag-padding: 2px 20px 2px @folders-menu-item-h-padding; -@folders-tag-line-height: 1.8; -@folders-tag-display: block; -@folders-tag-menu-color: @gray; -@folders-tag-hover: darken(@gray-lightest, 2%); -@folders-tag-border-color: @text-color; -@folders-tag-menu-active-hover: darken(@brand-primary, 10%); -@folders-tag-menu-hover: @gray-light; -@folders-untagged-line-height: 1.7; - -@progress-border-radius: @border-radius-base; -@progress-border-width: 1px; -@progress-bar-shadow: inset 0 -1px 0 rgba(0,0,0,.15); - -@footer-link-color: @link-color; -@footer-link-hover-color: @link-hover-color; -@footer-bg-color: transparent; -@footer-padding: 2em; - -@btn-border-width: 1px; -@btn-border-bottom-width: 2px; - -@tag-border-radius: 0.25em; -@tag-bg-color: @label-default-bg; -@tag-bg-hover-color: darken(@label-default-bg, 10%); @left-menu-width: 260px; @left-menu-animation-duration: 0.35s; @@ -879,3 +801,92 @@ @editor-dark-background-color: #333; @editor-dark-toolbar-border-color: #222; @editor-dark-highlight-color: #FFA03A; + + +// Custom +@is-overleaf : false; +@header-height : 68px; +@footer-height : 50px; + +// Backgrounds +@content-alt-bg-color: lighten(@gray-lightest, 2.5%); + +// Typography +@text-small-color: @gray; + +// Navbar +@navbar-default-padding : 1rem 2rem; +@navbar-brand-width : 180px; +@navbar-btn-font-size : @font-size-base * 0.8; +@navbar-btn-border-radius : @border-radius-base; +@navbar-btn-font-weight : 700; +@navbar-btn-padding : 10px 10px 11px; +@navbar-btn-line-height : 1; +@navbar-subdued-padding : 12px 12px 13px; +@navbar-subdued-color : @gray; +@navbar-subdued-hover-bg : @gray-lightest; +@navbar-subdued-hover-color : @gray-dark; + +// Button colors and sizing +@btn-border-radius-large : @border-radius-large; +@btn-border-radius-base : @border-radius-base; +@btn-border-radius-small : @border-radius-small; +@btn-border-width : 1px; +@btn-border-bottom-width : 2px; + +// Cards +@card-box-shadow: 0 2px 4px rgba(0,0,0,0.15); + +// Project table +@structured-list-link-color : darken(@blue, 10%); +@structured-header-border-color : @gray-lightest; +@structured-list-border-color : @gray-lightest; +@structured-list-hover-color : @gray-lightest; +@structured-list-line-height : @line-height-base; + +// Sidebar +@sidebar-bg : transparent; +@sidebar-color : @gray; +@sidebar-link-color : #333; +@sidebar-active-border-radius : @border-radius-small; +@sidebar-active-bg : @link-color; +@sidebar-hover-bg : transparent; +@sidebar-hover-text-decoration : underline; + +@folders-menu-margin : 0; +@folders-menu-line-height : 1.2; +@folders-menu-item-v-padding : (@line-height-computed / 4); +@folders-menu-item-h-padding : (@line-height-computed / 4); +@folders-title-padding : 0; +@folders-title-margin-top : (@line-height-computed / 2); +@folders-title-margin-bottom : (@line-height-computed / 4); +@folders-title-font-size : @font-size-base; +@folders-title-font-weight : 500; +@folders-title-line-height : @headings-line-height; +@folders-title-color : inherit; +@folders-title-text-transform : none; +@folders-tag-padding : 2px 20px 2px @folders-menu-item-h-padding; +@folders-tag-line-height : 1.8; +@folders-tag-display : block; +@folders-tag-menu-color : @gray; +@folders-tag-hover : darken(@gray-lightest, 2%); +@folders-tag-border-color : @text-color; +@folders-tag-menu-active-hover : darken(@brand-primary, 10%); +@folders-tag-menu-hover : @gray-light; +@folders-untagged-line-height : 1.7; + +// Progress bars +@progress-border-radius : @border-radius-base; +@progress-border-width : 1px; +@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15); + +// Footer +@footer-link-color : @link-color; +@footer-link-hover-color : @link-hover-color; +@footer-bg-color : transparent; +@footer-padding : 2em; + +// Tags +@tag-border-radius : 0.25em; +@tag-bg-color : @label-default-bg; +@tag-bg-hover-color : darken(@label-default-bg, 10%); \ No newline at end of file From cfa0989a031e47aea2e9e193158bc4a4656f72ac Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 18 Oct 2017 10:55:32 +0100 Subject: [PATCH 40/53] Remove extra semicolon. --- services/web/public/stylesheets/core/ol-variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 9938b301bc..6255d44371 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -109,7 +109,7 @@ @sidebar-hover-bg : @ol-blue-gray-4; @sidebar-hover-text-decoration : none; -@folders-menu-margin : 0 -(@grid-gutter-width / 2);; +@folders-menu-margin : 0 -(@grid-gutter-width / 2); @folders-menu-line-height : @structured-list-line-height; @folders-menu-item-v-padding : (@line-height-computed / 4); @folders-menu-item-h-padding : (@grid-gutter-width / 2); From f6ebbc37db0eeed76167ad0b88ce8ed6ffc02a3c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 18 Oct 2017 11:09:55 +0100 Subject: [PATCH 41/53] Fix z-index issue in the resolved comments dropdown. --- services/web/public/stylesheets/app/editor/review-panel.less | 1 + 1 file changed, 1 insertion(+) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 13b8b7e03f..f6896c5753 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -941,6 +941,7 @@ justify-content: center; border-radius: 3px; box-shadow: 0 0 20px 10px rgba(0, 0, 0, .3); + z-index: 1; &::before { content: ''; From 033e3cfcc663def1c260bf1b310bcacca3c01054 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 20 Oct 2017 10:53:08 +0100 Subject: [PATCH 42/53] Add styleguide classes. --- .../stylesheets/app/ol-style-guide.less | 65 +++++++++++++++++++ services/web/public/stylesheets/ol-style.less | 1 + 2 files changed, 66 insertions(+) create mode 100644 services/web/public/stylesheets/app/ol-style-guide.less diff --git a/services/web/public/stylesheets/app/ol-style-guide.less b/services/web/public/stylesheets/app/ol-style-guide.less new file mode 100644 index 0000000000..391bf99a22 --- /dev/null +++ b/services/web/public/stylesheets/app/ol-style-guide.less @@ -0,0 +1,65 @@ +.renderColorSwatchClasses(@colorName) { + @colorVal: @@colorName; + @colorValRed: red(@colorVal); + @colorValGreen: green(@colorVal); + @colorValBlue: blue(@colorVal); + @colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})'; + + &.@{colorName} { + .color-swatch { + background-color: @colorVal; + } + .color-less-var::before { + content: '@@{colorName}'; + } + .color-hex-val::before { + content: '@{colorVal}'; + } + .color-rgb-val::before { + content: '@{colorValAsRGB}'; + } + } +} + +.color-row { + display: flex; + justify-content: space-between; +} + +.color-box { + background: white; + margin: 10px 4px; + flex: 1; + border-radius: 4px; + .renderColorSwatchClasses(ol-blue-gray-1); + .renderColorSwatchClasses(ol-blue-gray-2); + .renderColorSwatchClasses(ol-blue-gray-3); + .renderColorSwatchClasses(ol-blue-gray-4); + .renderColorSwatchClasses(ol-blue-gray-5); + .renderColorSwatchClasses(ol-blue-gray-6); + .renderColorSwatchClasses(ol-green); + .renderColorSwatchClasses(ol-dark-green); + .renderColorSwatchClasses(ol-blue); + .renderColorSwatchClasses(ol-dark-blue); + .renderColorSwatchClasses(ol-red); + .renderColorSwatchClasses(ol-dark-red); +} + +.color-swatch { + height: 100px; + width: 100px; + margin: 10px auto; + border-radius: 4px; +} + +.color-label { + display: flex; + flex-direction: column; + margin: 0 3px 10px; +} + +.color-label pre { + font-size: 12px; + line-height: 1.8em; + margin: 0 auto; +} \ No newline at end of file diff --git a/services/web/public/stylesheets/ol-style.less b/services/web/public/stylesheets/ol-style.less index ec53e5e8c8..1e48b7284d 100644 --- a/services/web/public/stylesheets/ol-style.less +++ b/services/web/public/stylesheets/ol-style.less @@ -1,3 +1,4 @@ // Core variables and mixins @import "core/ol-variables.less"; +@import "app/ol-style-guide.less"; @import "_style_includes.less"; \ No newline at end of file From 525defb92ddd152769a2df37890036aa190e2921 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 20 Oct 2017 10:53:26 +0100 Subject: [PATCH 43/53] Add router entry to the new styleguide (WIP). --- .../web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee b/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee index 07923d48d0..e33cae555a 100644 --- a/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee +++ b/services/web/app/coffee/Features/StaticPages/StaticPagesRouter.coffee @@ -14,6 +14,7 @@ module.exports = webRouter.get '/privacy_policy', HomeController.externalPage("privacy", "Privacy Policy") webRouter.get '/planned_maintenance', HomeController.externalPage("planned_maintenance", "Planned Maintenance") webRouter.get '/style', HomeController.externalPage("style_guide", "Style Guide") + webRouter.get '/ol-style', HomeController.externalPage("ol_style_guide", "Overleaf Style Guide") webRouter.get '/jobs', HomeController.externalPage("jobs", "Jobs") webRouter.get '/track-changes-and-comments-in-latex', HomeController.externalPage("review-features-page", "Review features") From d21137ed730c85addfb092ca2b31bee3e4e43c82 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Fri, 20 Oct 2017 13:27:33 +0100 Subject: [PATCH 44/53] Clean up color box sizes --- services/web/public/stylesheets/app/ol-style-guide.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/ol-style-guide.less b/services/web/public/stylesheets/app/ol-style-guide.less index 391bf99a22..30e4e5045f 100644 --- a/services/web/public/stylesheets/app/ol-style-guide.less +++ b/services/web/public/stylesheets/app/ol-style-guide.less @@ -16,6 +16,7 @@ content: '@{colorVal}'; } .color-rgb-val::before { + font-size: 10px; content: '@{colorValAsRGB}'; } } @@ -29,8 +30,8 @@ .color-box { background: white; margin: 10px 4px; - flex: 1; border-radius: 4px; + width: 16.666%; .renderColorSwatchClasses(ol-blue-gray-1); .renderColorSwatchClasses(ol-blue-gray-2); .renderColorSwatchClasses(ol-blue-gray-3); From ff576c5b9a4068885173bb2b1218f5ba428227c2 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 15:56:52 +0100 Subject: [PATCH 45/53] Make the text-only title customizable; pick nice colours for the OL version. --- .../web/public/stylesheets/components/navbar.less | 4 ++-- .../public/stylesheets/core/_common-variables.less | 2 ++ .../web/public/stylesheets/core/ol-variables.less | 12 +++++++----- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 113d67e7c2..47d76cc1f2 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -174,9 +174,9 @@ font-size: 20px; display: inline-block; margin-top: 2px; - color: #666; + color: @navbar-title-color; &:hover, &:active, &:focus { - color: #333; + color: @navbar-title-color-hover; text-decoration: none; } } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 5135678a0f..817fa858ef 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -815,6 +815,8 @@ @text-small-color: @gray; // Navbar +@navbar-title-color : #666; +@navbar-title-color-hover : #333; @navbar-default-padding : 1rem 2rem; @navbar-brand-width : 180px; @navbar-btn-font-size : @font-size-base * 0.8; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 6255d44371..43646ec542 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -22,11 +22,13 @@ @ol-type-color : @ol-blue-gray-3; // Navbar customization -@navbar-brand-width : 130px; -@navbar-default-color : #FFF; -@navbar-default-bg : @ol-blue-gray-6; -@navbar-default-border : transparent; -@navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); +@navbar-title-color : @ol-blue-gray-1; +@navbar-title-color-hover : @ol-blue-gray-2; +@navbar-brand-width : 130px; +@navbar-default-color : #FFF; +@navbar-default-bg : @ol-blue-gray-6; +@navbar-default-border : transparent; +@navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg); // Backgrounds @body-bg : #FFF; From c105048e8dd633c05bfa4c9383e033ed017c760d Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 16:09:43 +0100 Subject: [PATCH 46/53] Make project selection ARIA attributes translatable. --- services/web/app/views/project/list/project-list.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/project/list/project-list.pug b/services/web/app/views/project/list/project-list.pug index a4295a1843..2233ad7dfd 100644 --- a/services/web/app/views/project/list/project-list.pug +++ b/services/web/app/views/project/list/project-list.pug @@ -128,7 +128,7 @@ input.select-all( select-all, type="checkbox" - aria-label="Select all" + aria-label=translate('select_all_projects') ) span.header.clickable(ng-click="changePredicate('name')") #{translate("title")} i.tablesort.fa(ng-class="getSortIconClass('name')") @@ -149,7 +149,7 @@ type="checkbox", ng-model="project.selected" stop-propagation="click" - aria-label="Select {{ project.name }}" + aria-label=translate('select_project') + " '{{ project.name }}'" ) span a.projectName( From 632e3228e0ed2c116668ae6461dd327f1ca79206 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 16:13:07 +0100 Subject: [PATCH 47/53] Remove unneeded existence checks. --- .../web/public/coffee/main/project-list/project-list.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/coffee/main/project-list/project-list.coffee b/services/web/public/coffee/main/project-list/project-list.coffee index d84c348218..24a65d170b 100644 --- a/services/web/public/coffee/main/project-list/project-list.coffee +++ b/services/web/public/coffee/main/project-list/project-list.coffee @@ -27,8 +27,8 @@ define [ recalculateProjectListHeight = () -> $projListCard = $(".project-list-card") - topOffset = $projListCard?.offset()?.top - cardPadding = $projListCard?.outerHeight() - $projListCard?.height() + topOffset = $projListCard.offset()?.top + cardPadding = $projListCard.outerHeight() - $projListCard.height() bottomOffset = $("footer").outerHeight() height = $window.innerHeight - topOffset - bottomOffset - cardPadding $scope.projectListHeight = height From fb121494e66cdadbf2a7347fe5914be3b6db18ce Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 16:15:30 +0100 Subject: [PATCH 48/53] Remove commented code. --- services/web/public/stylesheets/app/project-list.less | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 0aa44d1188..3a70052aea 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -155,7 +155,6 @@ ul.folders-menu { } } > li.active { - //border-right: 4px solid @red; border-radius: @sidebar-active-border-radius; > a { background-color: @sidebar-active-bg; @@ -267,11 +266,7 @@ ul.structured-list { li { border-bottom: 1px solid @structured-list-border-color; padding: (@line-height-computed / 4) 0; - // &:first-child { - // .header { - // font-size: 1rem; - // } - // } + &:last-child { border-bottom: 0 none; } From 5f5731eca2ee1eca5bb4d571ce874260319e9b41 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 16:18:16 +0100 Subject: [PATCH 49/53] Rename content margin top variable to content margin vertical, as it affects both top and bottom. --- services/web/public/stylesheets/app/project-list.less | 8 ++++---- .../web/public/stylesheets/core/_common-variables.less | 4 +--- services/web/public/stylesheets/core/scaffolding.less | 4 ++-- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 3a70052aea..ebdf667f90 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -50,8 +50,8 @@ } .project-list-sidebar { background-color: @sidebar-bg; - padding-top: @content-margin-top; - padding-bottom: @content-margin-top; + padding-top: @content-margin-vertical; + padding-bottom: @content-margin-vertical; } .project-list-sidebar when (@is-overleaf) { @@ -62,8 +62,8 @@ } .project-list-main { - padding-top: @content-margin-top; - padding-bottom: @content-margin-top; + padding-top: @content-margin-vertical; + padding-bottom: @content-margin-vertical; height: 100%; overflow: hidden; } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 817fa858ef..3d3cc383a8 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -788,9 +788,7 @@ //** Horizontal offset for forms and lists. @component-offset-horizontal: 180px; -@content-margin-top: @line-height-computed; -@content-margin-top: @line-height-computed; - +@content-margin-vertical: @line-height-computed; @left-menu-width: 260px; @left-menu-animation-duration: 0.35s; diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index 41c70bb11d..0b64cb20c4 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/services/web/public/stylesheets/core/scaffolding.less @@ -144,8 +144,8 @@ hr { } .content { - padding-top: @content-margin-top; - padding-bottom: @content-margin-top; + padding-top: @content-margin-vertical; + padding-bottom: @content-margin-vertical; } .content-alt { From b834794ba67bbadb1495dbdbcc1f45aa9565053b Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 16:21:42 +0100 Subject: [PATCH 50/53] Remove more commented-out code. --- services/web/public/stylesheets/app/project-list.less | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index ebdf667f90..eda35e3da5 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -289,10 +289,7 @@ ul.structured-list { .header when (@is-overleaf = false) { text-transform: uppercase; } - // .select-item, .select-all { - // display: inline-block; - // margin: 0 (@line-height-computed / 4); - // } + .select-item, .select-all { position: absolute; left: @line-height-computed; From 83a1b2f5a00067ff2c72efe06b9c4ecf780b73d8 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 23 Oct 2017 16:58:02 +0100 Subject: [PATCH 51/53] Reenable source maps. --- services/web/Gruntfile.coffee | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index c20912e0ae..3daeec1f5a 100644 --- a/services/web/Gruntfile.coffee +++ b/services/web/Gruntfile.coffee @@ -137,13 +137,17 @@ module.exports = (grunt) -> less: app: - # options: - # sourceMap: true + options: + sourceMap: true + sourceMapFilename: "public/stylesheets/style.map" + sourceMapBasepath: "public/stylesheets" files: "public/stylesheets/style.css": "public/stylesheets/style.less" ol: - # options: - # sourceMap: true + options: + sourceMap: true + sourceMapFilename: "public/stylesheets/ol-style.map" + sourceMapBasepath: "public/stylesheets" files: "public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less" From 9b128591b149680e004bf27f9913152d0d722f10 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 24 Oct 2017 16:03:59 +0100 Subject: [PATCH 52/53] Enable sourcemaps on dev and prod environments (both minified and normal). --- services/web/Gruntfile.coffee | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index 3daeec1f5a..1f81d2f89a 100644 --- a/services/web/Gruntfile.coffee +++ b/services/web/Gruntfile.coffee @@ -28,8 +28,10 @@ module.exports = (grunt) -> exec: run: command:"node app.js | ./node_modules/logger-sharelatex/node_modules/bunyan/bin/bunyan --color" - cssmin: - command:"node_modules/clean-css/bin/cleancss --s0 -o public/stylesheets/style.css public/stylesheets/style.css" + cssmin_sl: + command:"node_modules/clean-css/bin/cleancss --s0 --source-map -o public/stylesheets/style.css public/stylesheets/style.css" + cssmin_ol: + command:"node_modules/clean-css/bin/cleancss --s0 --source-map -o public/stylesheets/ol-style.css public/stylesheets/ol-style.css" watch: @@ -139,26 +141,29 @@ module.exports = (grunt) -> app: options: sourceMap: true - sourceMapFilename: "public/stylesheets/style.map" + sourceMapFilename: "public/stylesheets/style.css.map" sourceMapBasepath: "public/stylesheets" files: "public/stylesheets/style.css": "public/stylesheets/style.less" ol: options: sourceMap: true - sourceMapFilename: "public/stylesheets/ol-style.map" + sourceMapFilename: "public/stylesheets/ol-style.css.map" sourceMapBasepath: "public/stylesheets" files: "public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less" postcss: options: - map: true, + map: + prev: "public/stylesheets/" + inline: false + sourcesContent: true processors: [ require('autoprefixer')({browsers: [ 'last 2 versions', 'ie >= 10' ]}) ] dist: - src: 'public/stylesheets/style.css' + src: [ "public/stylesheets/style.css", "public/stylesheets/ol-style.css" ] env: run: @@ -389,7 +394,7 @@ module.exports = (grunt) -> grunt.registerTask 'compile:server', 'Compile the server side coffee script', ['clean:app', 'coffee:app', 'coffee:app_dir', 'compile:modules:server'] grunt.registerTask 'compile:client', 'Compile the client side coffee script', ['coffee:client', 'coffee:sharejs', 'wrap_sharejs', "compile:modules:client", 'compile:modules:inject_clientside_includes'] grunt.registerTask 'compile:css', 'Compile the less files to css', ['less', 'postcss:dist'] - grunt.registerTask 'compile:minify', 'Concat and minify the client side js', ['requirejs', "file_append", "exec:cssmin",] + grunt.registerTask 'compile:minify', 'Concat and minify the client side js and css', ['requirejs', "file_append", "exec:cssmin_sl", "exec:cssmin_ol"] grunt.registerTask 'compile:unit_tests', 'Compile the unit tests', ['clean:unit_tests', 'coffee:unit_tests'] grunt.registerTask 'compile:acceptance_tests', 'Compile the acceptance tests', ['clean:acceptance_tests', 'coffee:acceptance_tests'] grunt.registerTask 'compile:smoke_tests', 'Compile the smoke tests', ['coffee:smoke_tests'] From 7c5f6539ae2ab5706db1ffdbc048ac3dcc09dcf7 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 24 Oct 2017 16:24:27 +0100 Subject: [PATCH 53/53] Remove translations from shrinkwrap. --- services/web/npm-shrinkwrap.json | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/services/web/npm-shrinkwrap.json b/services/web/npm-shrinkwrap.json index 277e022779..6ece76837e 100644 --- a/services/web/npm-shrinkwrap.json +++ b/services/web/npm-shrinkwrap.json @@ -6773,29 +6773,6 @@ } } }, - "translations-sharelatex": { - "version": "git+https://github.com/sharelatex/translations-sharelatex.git#12d5cefc591bcc0b4e54b5ce9acfbd980208b9e1", - "dev": true, - "requires": { - "async": "2.5.0", - "coffee-script": "1.12.4", - "i18next": "1.7.10", - "onesky": "0.1.6", - "sanitize-html": "1.14.1", - "underscore": "1.6.0" - }, - "dependencies": { - "async": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/async/-/async-2.5.0.tgz", - "integrity": "sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==", - "dev": true, - "requires": { - "lodash": "4.17.4" - } - } - } - }, "tsscmp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.5.tgz",