Merge pull request #240 from sharelatex/pr-v2-styling-fixes

v2 styling fixes

services/web/app/coffee/infrastructure/ExpressLocals.coffee

@@ -307,4 +307,5 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 			chatMessageBorderLightness : if isOl then "40%" else "70%"
 			chatMessageBgSaturation    : if isOl then "85%" else "60%"
 			chatMessageBgLightness     : if isOl then "40%" else "97%"
+			renderAnnouncements        : !isOl
 		next()

services/web/app/views/project/editor.pug

@@ -28,7 +28,7 @@ block content
 			.alert.alert-warning.small(ng-if="connection.reconnection_countdown")
 				strong #{translate("lost_connection")}.
 				| #{translate("reconnecting_in_x_secs", {seconds:"{{ connection.reconnection_countdown }}"})}.
-				a#try-reconnect-now-button.pull-right(href, ng-click="tryReconnectNow()") #{translate("try_now")}
+				a#try-reconnect-now-button.alert-link-as-btn.pull-right(href, ng-click="tryReconnectNow()") #{translate("try_now")}
 
 			.alert.alert-warning.small(ng-if="connection.reconnecting")
 				strong #{translate("reconnecting")}...

services/web/app/views/project/list.pug

@@ -16,45 +16,46 @@ block content
 			}
 		};
 
-	.announcements(
-		ng-controller="AnnouncementsController"
-		ng-class="{ 'announcements-open': ui.isOpen }"
-		ng-cloak
-	)
-		.announcements-backdrop(
-			ng-if="ui.isOpen"
-			ng-click="toggleAnnouncementsUI();"
+	if uiConfig.renderAnnouncements
+		.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
 	.content.content-alt.project-list-page(ng-controller="ProjectPageController")
 		.project-list-content
 

services/web/app/views/project/list/empty-project-list.pug

@@ -1,6 +1,6 @@
 .row.row-spaced
 	.col-xs-12
-		.card.card-thin.project-list-card
+		.card.card-thin
 			div.welcome.text-centered(ng-cloak)
 				h2 #{translate("welcome_to_sl")}
 				p #{translate("new_to_latex_look_at")} 

services/web/public/stylesheets/app/editor.less

@@ -60,7 +60,7 @@
 		display: inline-block;
 		text-align: left;
 		min-width: 400px;
-		padding: (@line-height-computed / 4);
+		padding: @global-alerts-padding;
 		font-size: 14px;
 		margin-bottom: (@line-height-computed / 4);
 		position: relative;
@@ -161,7 +161,7 @@
 		text-overflow: ellipsis;
 		vertical-align: top;
 		padding: 6px;
-		color: @gray;
+		color: @project-name-color;
 		font-weight: 700;
 		white-space: nowrap;
 	}
@@ -175,12 +175,12 @@
 	a.rename {
 		visibility: hidden;
 		display: inline-block;
-		color: @gray-light;
+		color: @project-rename-link-color;
 		padding: 5px;
 		border-radius: @border-radius-small;
 		&:hover {
 			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-			color: @gray-dark;
+			color: @project-rename-link-color-hover;
 			text-decoration: none;
 		}
 	}

services/web/public/stylesheets/app/project-list.less

@@ -23,11 +23,15 @@
 	position: absolute;
 	top: @header-height;
 	bottom: @footer-height;
-	padding-top: 0;
 	padding-bottom: 0;
 	width: 100%;
 	overflow-x: hidden;
 	overflow-y: auto;
+	// Specificity needed to override default `body > .content` values
+	body > .content& {
+		min-height: calc(~"100vh -" (@header-height + @footer-height));
+		padding-top: 0;
+	}
 }
 
 .project-list-content when (@is-overleaf) {
@@ -341,9 +345,9 @@ ul.project-list {
 		.tag-label {
 			margin-left: @line-height-computed / 4;
 			position: relative;
-			top: -2px;
 			display: inline-block;
 			white-space: nowrap;
+			top: @tag-top-adjustment;
 		}
 			.tag-label-name,
 			.tag-label-remove {

services/web/public/stylesheets/components/dropdowns.less

@@ -61,7 +61,7 @@
   // Links and other items within the dropdown menu
   > li > a,div {
     display: block;
-    padding: 3px 20px;
+    padding: @dropdown-item-padding;
     clear: both;
     font-weight: normal;
     line-height: @line-height-base;

services/web/public/stylesheets/components/labels.less

@@ -5,7 +5,7 @@
 .label {
   display: inline;
   padding: .2em .6em .3em;
-  font-size: 75%;
+  font-size: @labels-font-size;
   font-weight: bold;
   line-height: 1;
   color: @label-color;

services/web/public/stylesheets/core/_common-variables.less

@@ -824,6 +824,10 @@
 @navbar-subdued-hover-bg    : @gray-lightest;
 @navbar-subdued-hover-color : @gray-dark;
 
+@dropdown-divider-margin    :((@line-height-computed / 2) - 1) 0;
+@dropdown-item-padding      : 3px 20px;
+
+
 // Button colors and sizing
 @btn-border-radius-large : @border-radius-large;
 @btn-border-radius-base  : @border-radius-base;
@@ -884,24 +888,28 @@
 @footer-padding                : 2em;
 
 // Editor header
-@toolbar-header-bg-color        : transparent;
-@toolbar-header-shadow          : 0 0 2px #ccc;
-@toolbar-btn-color              : @link-color;
-@toolbar-btn-hover-color        : @link-hover-color;
-@toolbar-btn-hover-bg-color     : darken(white, 10%);
-@toolbar-btn-hover-text-shadow  : 0 1px 0 rgba(0, 0, 0, 0.15);
-@toolbar-btn-active-color       : white;
-@toolbar-btn-active-bg-color    : @link-color;
-@toolbar-btn-active-shadow      : inset 0 3px 5px rgba(0, 0, 0, 0.225);
-@toolbar-font-size              : 12px;
-@toolbar-alt-bg-color           : #fafafa;
-@toolbar-icon-btn-color         : @gray-light;
-@toolbar-icon-btn-hover-color   : @gray-dark;
-@toolbar-icon-btn-hover-shadow  : 0 1px 0 rgba(0, 0, 0, 0.25);
-@toolbar-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
-@toolbar-border-bottom            : 1px solid @toolbar-border-color;
-@toolbar-small-height             : 32px;
-@toolbar-tall-height              : 58px;
+@toolbar-header-bg-color         : transparent;
+@toolbar-header-shadow           : 0 0 2px #ccc;
+@toolbar-btn-color               : @link-color;
+@toolbar-btn-hover-color         : @link-hover-color;
+@toolbar-btn-hover-bg-color      : darken(white, 10%);
+@toolbar-btn-hover-text-shadow   : 0 1px 0 rgba(0, 0, 0, 0.15);
+@toolbar-btn-active-color        : white;
+@toolbar-btn-active-bg-color     : @link-color;
+@toolbar-btn-active-shadow       : inset 0 3px 5px rgba(0, 0, 0, 0.225);
+@toolbar-font-size               : 12px;
+@toolbar-alt-bg-color            : #fafafa;
+@toolbar-icon-btn-color          : @gray-light;
+@toolbar-icon-btn-hover-color    : @gray-dark;
+@toolbar-icon-btn-hover-shadow   : 0 1px 0 rgba(0, 0, 0, 0.25);
+@toolbar-icon-btn-hover-boxshadow: inset 0 3px 5px rgba(0, 0, 0, 0.225);
+@toolbar-border-bottom           : 1px solid @toolbar-border-color;
+@toolbar-small-height            : 32px;
+@toolbar-tall-height             : 58px;
+@project-name-color              : @gray;
+@project-rename-link-color       : @gray-light;
+@project-rename-link-color-hover : @gray-dark;
+@global-alerts-padding           : (@line-height-computed / 4);
 
 // Editor file-tree
 @file-tree-bg                    : transparent;
@@ -949,4 +957,6 @@
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
 @tag-max-width      : 150px;
-@tag-bg-hover-color : darken(@label-default-bg, 10%);
+@tag-bg-hover-color : darken(@label-default-bg, 10%);
+@tag-top-adjustment : -2px;
+@labels-font-size   : 75%;

services/web/public/stylesheets/core/mixins.less

@@ -395,7 +395,7 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@color: #e5e5e5) {
   height: 1px;
-  margin: ((@line-height-computed / 2) - 1) 0;
+  margin: @dropdown-divider-margin;
   overflow: hidden;
   background-color: @color;
 }
@@ -434,6 +434,16 @@
   .alert-link {
     color: darken(@text-color, 10%);
   }
+
+  .alert-link-as-btn when (@is-overleaf = true) {
+    display: inline-block;
+    font-weight: bold;
+    .button-variant(#FFF, shade(@background, 20%), transparent);
+    .button-size(@padding-xs-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 // Tables

services/web/public/stylesheets/core/ol-variables.less

@@ -93,6 +93,8 @@
 @tag-border-radius       : 9999px;
 @tag-bg-color            : @ol-green;
 @tag-bg-hover-color      : @ol-dark-green;
+@tag-top-adjustment      : 2px;
+@labels-font-size        : 85%;
 
 // Navbar
 @navbar-default-padding           : (@grid-gutter-width / 2) 0;
@@ -111,6 +113,9 @@
 @navbar-subdued-hover-bg          : #FFF;
 @navbar-subdued-hover-color       : @ol-green;
 
+@dropdown-divider-margin          : 6px;
+@dropdown-item-padding            : 4px 20px;
+
 // Forms
 @input-color                      : @ol-blue-gray-3;
 @input-border-radius              : unit(@line-height-base, em);
@@ -203,6 +208,10 @@
 @toolbar-border-bottom            : 1px solid @toolbar-border-color;
 @toolbar-icon-btn-hover-boxshadow : none;
 @toolbar-font-size                : 13px;
+@project-name-color               : @ol-blue-gray-2;
+@project-rename-link-color        : @ol-blue-gray-2;
+@project-rename-link-color-hover  : @ol-blue-gray-1;
+@global-alerts-padding            : 7px;
 
 // Editor file-tree
 @file-tree-bg                   : @ol-blue-gray-4;

services/web/public/stylesheets/core/scaffolding.less

@@ -32,10 +32,10 @@ body {
   background-color: @body-bg;
   min-height: 100%;
   position: relative;
-  padding-top: @header-height;
   padding-bottom: @footer-height;
   & > .content {
-    min-height: calc(~"100vh -" (@header-height + @footer-height));
+    min-height: calc(~"100vh -" @footer-height);
+    padding-top: @header-height + @content-margin-vertical;
   }
 }