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;