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

Merge pull request #4255 from consul/legislation_toc

Browse Source 
Fix legislation draft version TOC width
This commit is contained in:
Javi Martín
2020-11-17 15:31:26 +01:00
committed by GitHub
parent 724a3f802b 0961cf464c
commit b5eed8c3ab
6 changed files with 71 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/application.js
View File

@@ -139,7 +139,6 @@ var initialize_modules = function() {
App.MarkdownEditor.initialize();
App.HTMLEditor.initialize();
App.LegislationAdmin.initialize();
App.LegislationAllegations.initialize();
App.Legislation.initialize();
if ($(".legislation-annotatable").length) {
App.LegislationAnnotatable.initialize();

28
app/assets/javascripts/legislation_allegations.js
View File

@@ -1,36 +1,10 @@
(function() {
"use strict";
App.LegislationAllegations = {
toggle_comments: function() {
if (!App.LegislationAnnotatable.isMobile()) {
$(".draft-allegation").toggleClass("comments-on");
$("#comments-box").html("").hide();
}
},
show_comments: function() {
if (!App.LegislationAnnotatable.isMobile()) {
$(".draft-allegation").addClass("comments-on");
document.querySelector(".draft-allegation details.calc-comments").open = true;
}
},
initialize: function() {
$(".js-toggle-allegations .draft-panel").on({
click: function(e) {
e.preventDefault();
e.stopPropagation();
if (!App.LegislationAnnotatable.isMobile()) {
App.LegislationAllegations.toggle_comments();
}
}
});
$(".js-toggle-allegations").on({
click: function() {
if (!App.LegislationAnnotatable.isMobile()) {
if ($(this).find(".draft-panel .panel-title:visible").length === 0) {
App.LegislationAllegations.toggle_comments();
}
}
}
});
}
};
}).call(this);

4
app/assets/javascripts/legislation_annotatable.js
View File

@@ -40,8 +40,10 @@
},
renderAnnotationComments: function(event) {
if (event.offset) {
var default_top = $(".calc-comments").offset().top + $(".calc-comments .draft-panel").outerHeight();
$("#comments-box").css({
top: event.offset - $(".calc-comments").offset().top
top: event.offset - default_top
});
}
if (App.LegislationAnnotatable.isMobile()) {

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

@@ -380,39 +380,34 @@
@include breakpoint(medium) {
display: flex;
padding-left: rem-calc(15);
padding-right: rem-calc(15);
}
.calc-index {
.draft-panel {
cursor: pointer;
}
.draft-index-rotated {
display: none;
}
}
@media screen and (min-width: 40em) {
.calc-index {
width: calc(35% - 25px);
max-width: calc(35% - 25px);
.draft-index {
@supports (position: sticky) {
max-height: 100vh;
overflow-y: auto;
position: sticky;
top: $line-height;
}
}
> * {
padding-right: rem-calc(20);
}
}
.calc-text {
width: calc(65% - 25px);
flex: 1;
}
.calc-comments {
cursor: pointer;
background: #f2f2f2;
width: rem-calc(50);
min-width: 15rem;
width: calc(35% - 25px);
.draft-panel {
.panel-title {
display: none;
}
> * {
padding-left: rem-calc(20);
}
}
}
@@ -445,7 +440,6 @@
line-height: 0;
color: $text-medium;
vertical-align: sub;
margin-right: rem-calc(4);
}
}
@@ -491,6 +485,8 @@
padding: rem-calc(16);
@include breakpoint(medium) {
margin: 0 auto;
max-width: 3 * $grid-row-width / 4;
padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
}
@@ -538,60 +534,54 @@
.calc-comments {
position: relative;
}
.comment-box {
summary {
cursor: pointer;
list-style: none;
&::-webkit-details-marker {
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 {
width: rem-calc(50);
details:not([open]) {
background: #f2f2f2;
cursor: pointer;
.panel-title {
display: none;
@include breakpoint(small only) {
border-bottom: 1px solid #d4d4d4;
}
.draft-index {
display: none;
}
@include breakpoint(medium) {
min-width: auto;
width: rem-calc(50);
.draft-index-rotated {
@include breakpoint(medium) {
.draft-panel {
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);
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);
}
}
}
}
.calc-text {
width: calc(65% - 25px);
border-right: 0;
.show-comments {
@@ -611,23 +601,23 @@
.calc-comments {
background: #fff;
cursor: auto;
width: calc(35% - 25px);
.draft-panel {
cursor: pointer;
@include breakpoint(small only) {
summary {
display: none;
}
}
.draft-comments-rotated {
display: none;
&:not([open]) {
border-left: 1px solid #d4d4d4;
}
.comments-box-container {
position: absolute;
top: rem-calc(230);
position: relative;
top: rem-calc(180);
}
.comment-box {
width: rem-calc(375);
padding: rem-calc(4);
background: #f9f9f9;
border: 1px solid $border;
@@ -803,15 +793,6 @@
}
}
}
.draft-panel {
background: #e5e5e5;
border-left: 1px solid #d4d4d4;
.panel-title {
display: inline-block;
}
}
}
}
}

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

@@ -1,13 +1,8 @@
<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">
<details open=open class="calc-comments">
<summary class="draft-panel">
<span class="icon-comments" aria-hidden="true"></span>
<span class="panel-title"><%= t("legislation.draft_versions.show.text_comments") %></span>
</div>
</summary>
<div id="comments-box" class="comments-box-container" style="display: none;">
<div class="comment-box">
@@ -17,4 +12,4 @@
</div>
</div>
</div>
</div>
</details>

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

@@ -42,26 +42,18 @@
<%= render "legislation/processes/help_gif" %>
<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">
<div class="draft-allegation">
<details class="calc-index">
<summary class="draft-panel">
<span class="icon-banner" aria-hidden="true"></span>
<span class="panel-title"><%= t("legislation.draft_versions.show.text_toc") %></span>
</div>
</summary>
<div data-sticky-container>
<div data-sticky data-anchor="sticky-panel" class="draft-index sticky" data-tree-navigator>
<%= AdminLegislationSanitizer.new.sanitize(@draft_version.toc_html) %>
</div>
<div class="draft-index" data-tree-navigator>
<%= AdminLegislationSanitizer.new.sanitize(@draft_version.toc_html) %>
</div>
</div>
<div class="small-12 calc-text column border-right border-left">
</details>
<div class="calc-text border-right border-left">
<div class="draft-panel">
<div><span class="panel-title"><%= t("legislation.draft_versions.show.text_body") %></span></div>
</div>
@@ -80,7 +72,7 @@
</div>
<% if @draft_version.final_version? %>
<div class="small-12 calc-comments end column"></div>
<div class="calc-comments"></div>
<% else %>
<%= render "comments_panel", draft_version: @draft_version %>
<% end %>