consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove duplicate text in table of contents

Browse Source 
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.
This commit is contained in:
Javi Martín
2020-11-14 14:08:36 +01:00
parent 724a3f802b
commit 220b1de01e
3 changed files with 33 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/assets/stylesheets/legislation_process.scss
View File

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

7
app/views/legislation/draft_versions/_comments_panel.html.erb
View File

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

8
app/views/legislation/draft_versions/show.html.erb
View File

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