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

fix: Fix document display on very narrow screens (#5080)

Browse source 
Issue by @martinthomson
This commit is contained in:
Lars Eggert 2023-02-15 00:05:40 +02:00 committed by GitHub
parent eaa7a7ed96
commit 1e3c826810
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
ietf/static/css/document_html.scss
View file

@ -13,6 +13,58 @@ $tooltip-margin: inherit !default;
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
// from https://gist.github.com/Jakobud/a0ac11e80a1de453cd86f0d3fc0a1410?permalink_comment_id=2327765#gistcomment-2327765
@function map-sort-by-values($map) {
// Transform map to zipped list
$keys: ();
$values: ();
@each $key,
$val in $map {
$keys: append($keys, $key);
$values: append($values, $val);
}
$list: zip($keys, $values);
$sortedMap: ();
@while length($list)>0 {
// Find smallest pair
$smallestPair: nth($list, 1);
@each $pair in $list {
$value: nth($pair, 2);
$smallestValue: nth($smallestPair, 2);
@if $value < $smallestValue {
$smallestPair: $pair;
}
}
// Add smallest pair to sorted map
$key: nth($smallestPair, 1);
$value: nth($smallestPair, 2);
$sortedMap: map-merge($sortedMap, ($key: $value));
// Remove from list smallest pair
$smallestPairIndex: index($list, $smallestPair);
$newList: ();
@for $i from 1 through length($list) {
@if $i !=$smallestPairIndex {
$newList: append($newList, nth($list, $i), "space");
}
}
$list: $newList;
}
@return $sortedMap;
}
// add an xxs breakpoint for narrow devices
$grid-breakpoints: map-sort-by-values(map.merge($grid-breakpoints, (xxs: 0, xs: 400px)));
// Layout & components
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@ -108,7 +160,11 @@ $tooltip-margin: inherit !default;
}
@media screen {
@include media-breakpoint-only(xs) {
@include media-breakpoint-only(xxs) {
font-size: min(6pt, var(--doc-ptsize-max));
}
@include media-breakpoint-up(xs) {
font-size: min(7pt, var(--doc-ptsize-max));
}