github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-23 01:23:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

Overall project list page layout; flex-based, i.e. needs lots of testing

Browse source
This commit is contained in:
Paulo Reis 2017-10-05 16:35:53 +01:00
parent 3c662f6d05
commit 15eb23da54
6 changed files with 47 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
services/web/app/views/project/list.pug
View file

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

37
services/web/public/stylesheets/app/project-list.less
View file

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

2
services/web/public/stylesheets/components/navbar.less
View file

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

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

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

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

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

3
services/web/public/stylesheets/core/scaffolding.less
View file

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