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

Make draft version content use the empty space

Browse Source 
Now that comments and TOC can be closed at the same time, we use a flex
layout so the main content uses the available width.

We're also making the comments work better on medium-sized screens,
since previously they had a fixed width and now the width is adapted to
the size of the screen.

Since now the comment box element has a relative position instead of an
absolute one, we need to consider the draft panel height when
calculating the comment box position.
This commit is contained in:
Javi Martín
2020-11-14 19:26:59 +01:00
parent 41e5ddbcdf
commit 48daf22f31
4 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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()) {

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

@@ -380,17 +380,26 @@
@include breakpoint(medium) {
display: flex;
padding-left: rem-calc(15);
padding-right: rem-calc(15);
}
@media screen and (min-width: 40em) {
.calc-index {
width: calc(35% - 25px);
max-width: calc(35% - 25px);
> * {
padding-right: rem-calc(20);
}
}
.calc-text {
width: calc(65% - 25px);
flex: 1;
}
.calc-comments {
min-width: 15rem;
width: calc(35% - 25px);
> * {
padding-left: rem-calc(20);
}
}
}
@@ -467,6 +476,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);
}
@@ -533,6 +544,7 @@
}
@include breakpoint(medium) {
min-width: auto;
width: rem-calc(50);
.draft-panel {
@@ -561,7 +573,6 @@
}
.calc-text {
width: calc(65% - 25px);
border-right: 0;
.show-comments {
@@ -581,7 +592,6 @@
.calc-comments {
background: #fff;
cursor: auto;
width: calc(35% - 25px);
@include breakpoint(small only) {
summary {
@@ -594,12 +604,11 @@
}
.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;

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

@@ -1,4 +1,4 @@
<details open=open class="small-12 calc-comments end column">
<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>

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

@@ -42,8 +42,8 @@
<%= render "legislation/processes/help_gif" %>
<div class="row draft-allegation medium-collapse">
<details class="small-12 calc-index column">
<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>
@@ -53,7 +53,7 @@
<%= AdminLegislationSanitizer.new.sanitize(@draft_version.toc_html) %>
</div>
</details>
<div class="small-12 calc-text column border-right border-left">
<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>
@@ -72,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 %>