From 8508be74d2063bb86e39d1cc8667e8adb9dfe63e Mon Sep 17 00:00:00 2001
From: Kjel Delaey <kjel_delaey@hotmail.com>
Date: Wed, 4 Nov 2015 15:55:19 +0100
Subject: Style inline event items with titles containing long words properly..

On a tablet in portrait mode with a width of 768px the event-title isn't
aligned properly when the title contains a long string. This also
happens when resizing your browser viewport on a desktop.

Example string:
Administrator pushed new branch feature-branch-with-a-very-long-name at
Gitlab Org / Gitlab Test

In the UI it would look like the example below:

----------
|        |
| AVATAR |                                                                          less than a minute ago
|        |
----------
           Administrator pushed new branch feature-branch-with-a-very-long-name at...
---
 app/assets/stylesheets/pages/events.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index dfb901652bf..d2ca106cc8d 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -11,9 +11,12 @@
   color: #7f8fa4;
 
   &.event-inline {
+    padding-left: $gl-padding + $gl-avatar-size;
+
     .avatar {
       position: relative;
       top: -2px;
+      margin-left: -$gl-avatar-size;
     }
 
     .event-title {
@@ -155,6 +158,10 @@
 
 @media (max-width: $screen-xs-max) {
   .event-item {
+    &.event-inline {
+      padding-left: $gl-padding;
+    }
+
     .event-title {
       white-space: normal;
       overflow: visible;
-- 
cgit v1.2.1


From 8b0906c86d10ff02865e99400f2c0e3bdd1ac6fe Mon Sep 17 00:00:00 2001
From: Kjel Delaey <kjel_delaey@hotmail.com>
Date: Wed, 4 Nov 2015 16:22:27 +0100
Subject: Apply the same rules to block event items..

Try to avoid alignment issues as well.
---
 app/assets/stylesheets/pages/events.scss | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index d2ca106cc8d..02401c7c73a 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -4,19 +4,16 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding;
+  padding: $gl-padding $gl-padding $gl-padding ($gl-padding + $gl-avatar-size);
   margin-left: -$gl-padding;
   margin-right: -$gl-padding;
   border-bottom: 1px solid $table-border-color;
   color: #7f8fa4;
 
   &.event-inline {
-    padding-left: $gl-padding + $gl-avatar-size;
-
     .avatar {
       position: relative;
       top: -2px;
-      margin-left: -$gl-avatar-size;
     }
 
     .event-title {
@@ -33,6 +30,7 @@
   }
 
   .avatar {
+    margin-left: -$gl-avatar-size;
     margin-right: 15px;
   }
 
@@ -46,9 +44,6 @@
   }
 
   .event-body {
-    margin-left: 63px;
-    margin-right: 80px;
-
     .event-note {
       margin-top: 5px;
       word-wrap: break-word;
@@ -158,9 +153,7 @@
 
 @media (max-width: $screen-xs-max) {
   .event-item {
-    &.event-inline {
-      padding-left: $gl-padding;
-    }
+    padding-left: $gl-padding;
 
     .event-title {
       white-space: normal;
-- 
cgit v1.2.1


From 3f2955de3bf08ef1ec378d323fb2360547a4ca16 Mon Sep 17 00:00:00 2001
From: Kjel Delaey <kjel_delaey@hotmail.com>
Date: Wed, 4 Nov 2015 16:23:39 +0100
Subject: Combine selectors because the same style is being applied

---
 app/assets/stylesheets/pages/events.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 02401c7c73a..f8d1afda73e 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -16,10 +16,7 @@
       top: -2px;
     }
 
-    .event-title {
-      line-height: 44px;
-    }
-
+    .event-title,
     .event-item-timestamp {
       line-height: 44px;
     }
-- 
cgit v1.2.1


From 530c9519d4d0760848daf5026f93fbcbff348656 Mon Sep 17 00:00:00 2001
From: Kjel Delaey <kjel_delaey@hotmail.com>
Date: Wed, 4 Nov 2015 16:40:22 +0100
Subject: Make sure that multi-commit rows inside event bodies are aligned
 properly..

Prevent the second, third, ... rows from having a different indentation
than the first commit row.

Adding the extra "15px padding" to the event item prevents this.
Having a 15px margin on the avatar only doesn't prevent this from
happening.
---
 app/assets/stylesheets/pages/events.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index f8d1afda73e..c150b4ac19f 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -4,7 +4,7 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding $gl-padding $gl-padding ($gl-padding + $gl-avatar-size);
+  padding: $gl-padding $gl-padding $gl-padding ($gl-padding + $gl-avatar-size + 15px);
   margin-left: -$gl-padding;
   margin-right: -$gl-padding;
   border-bottom: 1px solid $table-border-color;
@@ -27,8 +27,7 @@
   }
 
   .avatar {
-    margin-left: -$gl-avatar-size;
-    margin-right: 15px;
+    margin-left: -($gl-avatar-size + 15px);
   }
 
   .event-title {
-- 
cgit v1.2.1


From b6f89c3490f8c31607073c9761de3ebb30ae244e Mon Sep 17 00:00:00 2001
From: Kjel Delaey <kjel_delaey@hotmail.com>
Date: Thu, 5 Nov 2015 09:56:51 +0100
Subject: Add right margin to event-body..

Otherwise text will flow under the "timeago" element.
The original value was 80px (see commit 8b0906c8), but a value of 174px
makes more sense. (see event-title `calc` function).
---
 app/assets/stylesheets/pages/events.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index c150b4ac19f..282aaf2219b 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -40,6 +40,8 @@
   }
 
   .event-body {
+    margin-right: 174px;
+
     .event-note {
       margin-top: 5px;
       word-wrap: break-word;
-- 
cgit v1.2.1