altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 3 Packages Projects Releases Wiki Activity

fix: improve RH panel behavior at small viewport sizes (#3801)

Browse source 
* fix: align nav links to top of RH panel
* fix: allow timezone picker to wrap
* fix: improve RH panel behavior at small viewport sizes
  * drop card styling
  * use `btn-group-sm` for compact timezone picker
  * limit overall height of #righthand-panel
  * remove redundant CSS merge artifact
This commit is contained in:
Jennifer Richards 2022-04-08 14:52:55 -03:00 committed by GitHub
parent 3619d3bfbf
commit 2247a368dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ietf/static/css/ietf.scss
View file

@ -165,6 +165,10 @@ table tbody.meta {
}
// Style the righthand navigation panel
#righthand-panel {
max-height: 80vh;
}
#righthand-nav {
height: 70vh;
width: inherit;
@ -993,8 +997,3 @@ td.position-empty {
#current-time {
display: inline-block;
}
// righthand nav panel styling
#righthand-nav {
width: inherit;
}

6
ietf/static/js/ietf.js
View file

@ -184,8 +184,8 @@ $(function () {
.attr("tabindex", 0)
.after($(`
<div class="col-xl-2 ps-0 small">
<div id="righthand-card" class="position-fixed card d-flex flex-column justify-content-start align-items-start">
<nav id="righthand-nav" class="card-body navbar navbar-light bg-light overflow-auto"></nav>
<div id="righthand-panel" class="position-fixed d-flex flex-column justify-content-between align-items-start">
<nav id="righthand-nav" class="navbar navbar-light bg-light overflow-auto align-items-start flex-fill"></nav>
</div></div>
</div>
`));
@ -236,7 +236,7 @@ $(function () {
});
if (haveExtraNav) {
$('#righthand-card').append('<div id="righthand-extra" class="card-body"></div>');
$('#righthand-panel').append('<div id="righthand-extra" class="py-3"></div>');
extraNav.children().appendTo('#righthand-extra');
extraNav.remove();
}

2
ietf/templates/meeting/agenda.html
View file

@ -32,7 +32,7 @@
<div class="px-3">
Showing <span class="current-tz">{{ timezone }}</span> time
</div>
<div class="px-3 w-100">
<div class="align-self-center">
{% include 'meeting/tz-display.html' with id_suffix="-rh" meeting_timezone=timezone minimal=True only %}
</div>
</div>

2
ietf/templates/meeting/tz-display.html
View file

@ -12,7 +12,7 @@ As long as id_suffix is different, should allow for as many copies of the widget
{% load origin %}
{% origin %}
{% firstof id_suffix "" as suffix %}
<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3">
<div class="tz-display {% if minimal %}btn-group btn-group-sm my-2{% else %}input-group my-3{% endif %} flex-wrap">
{% if not minimal %}<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>{% endif %}
{% if meeting_timezone is not None %}
<input type="radio"