From 220b1de01e8b3126190996b889f7afbb6d5bb60b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 14 Nov 2020 14:08:36 +0100
Subject: [PATCH] Remove duplicate text in table of contents

We were using different divs to show the same text in different
positions, but we can use the same one and rotate it when appropriate.
---
 .../stylesheets/legislation_process.scss      | 75 ++++++++-----------
 .../draft_versions/_comments_panel.html.erb   |  7 +-
 .../legislation/draft_versions/show.html.erb  |  8 +-
 3 files changed, 33 insertions(+), 57 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 0d54f87ab..fd945788a 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -326,6 +326,33 @@
   position: relative;
   padding: rem-calc(32) 0;
 
+  %calc-collapsed {
+    .draft-panel {
+      @include breakpoint(medium) {
+        line-height: 1;
+        display: block;
+        font-size: $small-font-size;
+        text-transform: uppercase;
+        font-weight: 700;
+        color: #696969;
+        padding: 0;
+        text-align: center;
+
+        .icon-banner::before,
+        .icon-comments::before {
+          display: block;
+          margin: rem-calc(24) auto rem-calc(36);
+        }
+
+        .panel-title {
+          display: block;
+          transform: rotate(-90deg);
+          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+        }
+      }
+    }
+  }
+
   .draft-chooser {
 
     h3 {
@@ -388,10 +415,6 @@
       .draft-panel {
         cursor: pointer;
       }
-
-      .draft-index-rotated {
-        display: none;
-      }
     }
 
     @media screen and (min-width: 40em) {
@@ -445,7 +468,6 @@
         line-height: 0;
         color: $text-medium;
         vertical-align: sub;
-        margin-right: rem-calc(4);
       }
     }
 
@@ -536,58 +558,27 @@
       }
     }
 
-    .calc-comments {
+    &:not(.comments-on) .calc-comments {
+      @extend %calc-collapsed;
       position: relative;
 
       .comment-box {
         display: none;
       }
-
-      .draft-comments-rotated {
-        @include breakpoint(medium) {
-          font-size: $small-font-size;
-          text-transform: uppercase;
-          font-weight: 700;
-          color: #696969;
-          margin-top: rem-calc(64);
-          transform: rotate(-90deg);
-          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-        }
-      }
     }
   }
 
   .comments-on {
     .calc-index {
+      @extend %calc-collapsed;
+
       width: rem-calc(50);
       background: #f2f2f2;
       cursor: pointer;
 
-      .panel-title {
-        display: none;
-      }
-
       .draft-index {
         display: none;
       }
-
-      .draft-index-rotated {
-        @include breakpoint(medium) {
-          line-height: 1;
-          display: block;
-          font-size: $small-font-size;
-          text-transform: uppercase;
-          font-weight: 700;
-          color: #696969;
-          margin-top: $line-height;
-          transform: rotate(-90deg);
-          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-
-          .panel-title {
-            display: block;
-          }
-        }
-      }
     }
 
     .calc-text {
@@ -617,10 +608,6 @@
         cursor: pointer;
       }
 
-      .draft-comments-rotated {
-        display: none;
-      }
-
       .comments-box-container {
         position: absolute;
         top: rem-calc(230);
diff --git a/app/views/legislation/draft_versions/_comments_panel.html.erb b/app/views/legislation/draft_versions/_comments_panel.html.erb
index 41d26c80f..853ae6f49 100644
--- a/app/views/legislation/draft_versions/_comments_panel.html.erb
+++ b/app/views/legislation/draft_versions/_comments_panel.html.erb
@@ -1,11 +1,6 @@
 <div class="small-12 calc-comments end column js-toggle-allegations">
   <div class="draft-panel">
-    <div>
-      <span class="icon-comments" aria-hidden="true"></span> <span class="panel-title"><%= t("legislation.draft_versions.show.text_comments") %></span>
-    </div>
-  </div>
-
-  <div class="draft-comments-rotated text-center">
+    <span class="icon-comments" aria-hidden="true"></span>
     <span class="panel-title"><%= t("legislation.draft_versions.show.text_comments") %></span>
   </div>
 
diff --git a/app/views/legislation/draft_versions/show.html.erb b/app/views/legislation/draft_versions/show.html.erb
index 2123fa61b..90e3da79f 100644
--- a/app/views/legislation/draft_versions/show.html.erb
+++ b/app/views/legislation/draft_versions/show.html.erb
@@ -45,13 +45,7 @@
     <div class="row draft-allegation medium-collapse comments-on">
       <div class="small-12 calc-index column <%= "js-toggle-allegations" unless @draft_version.final_version? %>">
         <div class="draft-panel">
-          <div>
-            <span class="icon-banner" aria-hidden="true"></span>
-            <span class="panel-title"><%= t("legislation.draft_versions.show.text_toc") %></span>
-          </div>
-        </div>
-
-        <div class="draft-index-rotated text-center">
+          <span class="icon-banner" aria-hidden="true"></span>
           <span class="panel-title"><%= t("legislation.draft_versions.show.text_toc") %></span>
         </div>