From 51a4ca98ad1104c3c54bab762d16099322b15203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 10 Jan 2019 10:32:15 +0100
Subject: [PATCH 1/5] Move milestone styles to their own sheet

---
 app/assets/stylesheets/application.scss   |   1 +
 app/assets/stylesheets/milestones.scss    | 111 +++++++++++++++++++++
 app/assets/stylesheets/participation.scss | 112 ----------------------
 3 files changed, 112 insertions(+), 112 deletions(-)
 create mode 100644 app/assets/stylesheets/milestones.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 3f93ffa6b..5e993d5d6 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -6,6 +6,7 @@
 @import 'admin';
 @import 'layout';
 @import 'participation';
+@import 'milestones';
 @import 'pages';
 @import 'legislation';
 @import 'legislation_process';
diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
new file mode 100644
index 000000000..41cf2a175
--- /dev/null
+++ b/app/assets/stylesheets/milestones.scss
@@ -0,0 +1,111 @@
+.tab-milestones ul {
+  margin-top: rem-calc(40);
+  position: relative;
+
+  li {
+    margin: 0 auto;
+    position: relative;
+    width: 0;
+  }
+
+  li::before {
+    background: $budget;
+    border-radius: rem-calc(20);
+    content: '';
+    height: rem-calc(20);
+    position: absolute;
+    top: 5px;
+    transform: translateX(-50%);
+    width: rem-calc(20);
+    z-index: 2;
+  }
+
+  li::after {
+    background: $light-gray;
+    bottom: 100%;
+    content: '';
+    height: 100%;
+    position: absolute;
+    top: 25px;
+    width: 1px;
+    z-index: 1;
+  }
+}
+
+.tab-milestones ul .milestone-content {
+  padding: $line-height / 6 $line-height / 2;
+  position: relative;
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  .milestone-date {
+    color: $text-medium;
+    font-size: $small-font-size;
+  }
+}
+
+.tab-milestones .timeline ul li:nth-child(odd),
+.tab-milestones .timeline ul li:nth-child(even) {
+
+  .milestone-content {
+
+    @include breakpoint(medium) {
+      width: rem-calc(300);
+    }
+
+    @include breakpoint(large) {
+      width: rem-calc(450);
+    }
+  }
+}
+
+.tab-milestones .timeline ul li:nth-child(odd) {
+
+  .milestone-content {
+    text-align: right;
+
+    @include breakpoint(medium) {
+      margin-left: rem-calc(-315);
+    }
+
+    @include breakpoint(large) {
+      margin-left: rem-calc(-465);
+    }
+  }
+}
+
+.tab-milestones .timeline ul li:nth-child(even) {
+
+  .milestone-content {
+    left: 15px;
+  }
+}
+
+.tab-milestones {
+  @include breakpoint(small only) {
+
+    .timeline ul li {
+      width: 100%;
+
+      &:nth-child(odd),
+      &:nth-child(even) {
+
+        .milestone-content {
+          left: 15px;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+.milestone-status {
+  background: $budget;
+  border-radius: rem-calc(4);
+  color: #fff;
+  display: inline-block;
+  margin-top: $line-height / 6;
+  padding: $line-height / 4 $line-height / 2;
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 023686b6e..ba02e18ad 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -523,118 +523,6 @@
   }
 }
 
-.tab-milestones ul {
-  margin-top: rem-calc(40);
-  position: relative;
-
-  li {
-    margin: 0 auto;
-    position: relative;
-    width: 0;
-  }
-
-  li::before {
-    background: $budget;
-    border-radius: rem-calc(20);
-    content: '';
-    height: rem-calc(20);
-    position: absolute;
-    top: 5px;
-    transform: translateX(-50%);
-    width: rem-calc(20);
-    z-index: 2;
-  }
-
-  li::after {
-    background: $light-gray;
-    bottom: 100%;
-    content: '';
-    height: 100%;
-    position: absolute;
-    top: 25px;
-    width: 1px;
-    z-index: 1;
-  }
-}
-
-.tab-milestones ul .milestone-content {
-  padding: $line-height / 6 $line-height / 2;
-  position: relative;
-
-  h3 {
-    margin-bottom: 0;
-  }
-
-  .milestone-date {
-    color: $text-medium;
-    font-size: $small-font-size;
-  }
-}
-
-.tab-milestones .timeline ul li:nth-child(odd),
-.tab-milestones .timeline ul li:nth-child(even) {
-
-  .milestone-content {
-
-    @include breakpoint(medium) {
-      width: rem-calc(300);
-    }
-
-    @include breakpoint(large) {
-      width: rem-calc(450);
-    }
-  }
-}
-
-.tab-milestones .timeline ul li:nth-child(odd) {
-
-  .milestone-content {
-    text-align: right;
-
-    @include breakpoint(medium) {
-      margin-left: rem-calc(-315);
-    }
-
-    @include breakpoint(large) {
-      margin-left: rem-calc(-465);
-    }
-  }
-}
-
-.tab-milestones .timeline ul li:nth-child(even) {
-
-  .milestone-content {
-    left: 15px;
-  }
-}
-
-.tab-milestones {
-  @include breakpoint(small only) {
-
-    .timeline ul li {
-      width: 100%;
-
-      &:nth-child(odd),
-      &:nth-child(even) {
-
-        .milestone-content {
-          left: 15px;
-          text-align: left;
-        }
-      }
-    }
-  }
-}
-
-.milestone-status {
-  background: $budget;
-  border-radius: rem-calc(4);
-  color: #fff;
-  display: inline-block;
-  margin-top: $line-height / 6;
-  padding: $line-height / 4 $line-height / 2;
-}
-
 .show-actions-menu {
 
   [class^="icon-"] {

From cb92d29ddccb71ce39f98315b8668a3ad5bf9661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 10 Jan 2019 10:35:16 +0100
Subject: [PATCH 2/5] Simplify nth-child selectors

Using `nth-child(odd), nth-child(even)` is the same as selecting all
the elements.
---
 app/assets/stylesheets/milestones.scss | 29 +++++++++++++-------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index 41cf2a175..b740163af 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -46,8 +46,7 @@
   }
 }
 
-.tab-milestones .timeline ul li:nth-child(odd),
-.tab-milestones .timeline ul li:nth-child(even) {
+.tab-milestones .timeline ul li {
 
   .milestone-content {
 
@@ -59,27 +58,27 @@
       width: rem-calc(450);
     }
   }
-}
 
-.tab-milestones .timeline ul li:nth-child(odd) {
+  &:nth-child(odd) {
 
-  .milestone-content {
-    text-align: right;
+    .milestone-content {
+      text-align: right;
 
-    @include breakpoint(medium) {
-      margin-left: rem-calc(-315);
-    }
+      @include breakpoint(medium) {
+        margin-left: rem-calc(-315);
+      }
 
-    @include breakpoint(large) {
-      margin-left: rem-calc(-465);
+      @include breakpoint(large) {
+        margin-left: rem-calc(-465);
+      }
     }
   }
-}
 
-.tab-milestones .timeline ul li:nth-child(even) {
+  &:nth-child(even) {
 
-  .milestone-content {
-    left: 15px;
+    .milestone-content {
+      left: 15px;
+    }
   }
 }
 

From 39c8d431f87b24bdf4c4ef3c2f13bfe89730f534 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 10 Jan 2019 10:38:18 +0100
Subject: [PATCH 3/5] Group milestones timeline `li` CSS rules together

---
 app/assets/stylesheets/milestones.scss | 55 ++++++++++++--------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index b740163af..c9a9cda9b 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -1,35 +1,6 @@
 .tab-milestones ul {
   margin-top: rem-calc(40);
   position: relative;
-
-  li {
-    margin: 0 auto;
-    position: relative;
-    width: 0;
-  }
-
-  li::before {
-    background: $budget;
-    border-radius: rem-calc(20);
-    content: '';
-    height: rem-calc(20);
-    position: absolute;
-    top: 5px;
-    transform: translateX(-50%);
-    width: rem-calc(20);
-    z-index: 2;
-  }
-
-  li::after {
-    background: $light-gray;
-    bottom: 100%;
-    content: '';
-    height: 100%;
-    position: absolute;
-    top: 25px;
-    width: 1px;
-    z-index: 1;
-  }
 }
 
 .tab-milestones ul .milestone-content {
@@ -47,6 +18,32 @@
 }
 
 .tab-milestones .timeline ul li {
+  margin: 0 auto;
+  position: relative;
+  width: 0;
+
+  &::before {
+    background: $budget;
+    border-radius: rem-calc(20);
+    content: '';
+    height: rem-calc(20);
+    position: absolute;
+    top: 5px;
+    transform: translateX(-50%);
+    width: rem-calc(20);
+    z-index: 2;
+  }
+
+  &::after {
+    background: $light-gray;
+    bottom: 100%;
+    content: '';
+    height: 100%;
+    position: absolute;
+    top: 25px;
+    width: 1px;
+    z-index: 1;
+  }
 
   .milestone-content {
 

From 46296b702eec2a9bd4c0cab40ee0722bdb2143b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 10 Jan 2019 10:39:52 +0100
Subject: [PATCH 4/5] Group milestone content CSS rules together

---
 app/assets/stylesheets/milestones.scss | 27 ++++++++++++--------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index c9a9cda9b..0df9cf465 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -3,21 +3,7 @@
   position: relative;
 }
 
-.tab-milestones ul .milestone-content {
-  padding: $line-height / 6 $line-height / 2;
-  position: relative;
-
-  h3 {
-    margin-bottom: 0;
-  }
-
-  .milestone-date {
-    color: $text-medium;
-    font-size: $small-font-size;
-  }
-}
-
-.tab-milestones .timeline ul li {
+.tab-milestones .timeline li {
   margin: 0 auto;
   position: relative;
   width: 0;
@@ -46,6 +32,8 @@
   }
 
   .milestone-content {
+    padding: $line-height / 6 $line-height / 2;
+    position: relative;
 
     @include breakpoint(medium) {
       width: rem-calc(300);
@@ -54,6 +42,15 @@
     @include breakpoint(large) {
       width: rem-calc(450);
     }
+
+    h3 {
+      margin-bottom: 0;
+    }
+
+    .milestone-date {
+      color: $text-medium;
+      font-size: $small-font-size;
+    }
   }
 
   &:nth-child(odd) {

From fb72fc48fdc1d728bccf8f9e76dcda421b66a4c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 10 Jan 2019 10:45:51 +0100
Subject: [PATCH 5/5] Simplify milestones styles for small devices

The selector `nth-child(even)` didn't need specific rules, and it's
easier to understand the code for the selector `nth-child(odd)` if all
breakpoints are grouped together.
---
 app/assets/stylesheets/milestones.scss | 27 +++++++++-----------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index 0df9cf465..bc4515665 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -8,6 +8,10 @@
   position: relative;
   width: 0;
 
+  @include breakpoint(small only) {
+    width: 100%;
+  }
+
   &::before {
     background: $budget;
     border-radius: rem-calc(20);
@@ -65,6 +69,11 @@
       @include breakpoint(large) {
         margin-left: rem-calc(-465);
       }
+
+      @include breakpoint(small only) {
+        left: 15px;
+        text-align: left;
+      }
     }
   }
 
@@ -76,24 +85,6 @@
   }
 }
 
-.tab-milestones {
-  @include breakpoint(small only) {
-
-    .timeline ul li {
-      width: 100%;
-
-      &:nth-child(odd),
-      &:nth-child(even) {
-
-        .milestone-content {
-          left: 15px;
-          text-align: left;
-        }
-      }
-    }
-  }
-}
-
 .milestone-status {
   background: $budget;
   border-radius: rem-calc(4);