Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive fixes #391

Merged
merged 4 commits into from
Aug 20, 2021
Merged

Responsive fixes #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d7f163
add polyfill package to render on edge, update layering on time range…
JayWebz Aug 20, 2021
631f46a
update shadows on report images, add spaces in italics on help page
JayWebz Aug 20, 2021
436a570
fix dashboard asn tab url loading, added spaces around italic words i…
JayWebz Aug 20, 2021
40e62fe
remove spacing, console logs
JayWebz Aug 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/css/ioda/sass/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,10 @@ $breakpoint Argument Choices:
box-shadow: $box-shadow;
}

& .img-container div {
filter: drop-shadow(0 1px 2px #9F9D9D);
}

& h2 {
font-size: 1.9rem;
margin-bottom: 1.5rem;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/ioda/sass/components/controlPanel/_controlPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@

&__dropdown {
display: none;
z-index: 10000;
z-index: 1000;
position: absolute;
left: 0;
top: 12rem;
Expand Down
4 changes: 2 additions & 2 deletions assets/css/ioda/sass/pages/_entity.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
height: 2.3rem;

&__modal {
top: 0;
@include mobileTooltip();
}
}
Expand All @@ -96,8 +97,6 @@
margin-bottom: 1rem;
}
}


}

&__xy-wrapper {
Expand Down Expand Up @@ -345,6 +344,7 @@
height: 2.6rem;

&__modal {
top: 0;
@include mobileTooltip();
}
}
Expand Down
100 changes: 57 additions & 43 deletions assets/css/style.comp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,7 @@ body {
font-size: 1.2rem; }
.control-panel .range__dropdown {
display: none;
z-index: 10000;
z-index: 1000;
position: absolute;
left: 0;
top: 12rem;
Expand Down Expand Up @@ -2657,6 +2657,8 @@ body {
margin: 1.5rem auto;
display: block;
box-shadow: 0 1px 2px #9F9D9D; }
.acknowledgements .img-container div {
filter: drop-shadow(0 1px 2px #9F9D9D); }
.acknowledgements h2 {
font-size: 1.9rem;
margin-bottom: 1.5rem;
Expand Down Expand Up @@ -2764,6 +2766,8 @@ body {
margin: 1.5rem auto;
display: block;
box-shadow: 0 1px 2px #9F9D9D; }
.helpPage .img-container div {
filter: drop-shadow(0 1px 2px #9F9D9D); }
.helpPage h2 {
font-size: 1.9rem;
margin-bottom: 1.5rem;
Expand Down Expand Up @@ -3086,6 +3090,8 @@ button[class*="searchButton"] {
margin: 1.5rem auto;
display: block;
box-shadow: 0 1px 2px #9F9D9D; }
.home .methodology .img-container div {
filter: drop-shadow(0 1px 2px #9F9D9D); }
.home .methodology h2 {
font-size: 1.9rem;
margin-bottom: 1.5rem;
Expand Down Expand Up @@ -3443,28 +3449,30 @@ button[class*="searchButton"] {
margin-right: 0.5rem; }
.entity .overview__config-heading .help {
height: 2.3rem; }
@media only screen and (max-width: 64em) {
.entity .overview__config-heading .help__modal {
top: 4rem;
left: -21rem; } }
.entity .overview__config-heading .help__modal-content:before {
top: 1.3rem;
background: #f7f7f7; }
@media only screen and (max-width: 64em) {
.entity .overview__config-heading .help__modal-content:before {
top: 0;
left: 20.5rem; } }
.entity .overview__config-heading .help__modal-content:after {
top: 0;
background: #f7f7f7;
transform: translateY(0); }
.entity .overview__config-heading .help__modal {
top: 0; }
@media only screen and (max-width: 64em) {
.entity .overview__config-heading .help__modal-content:after {
height: 4.25rem;
width: 1.5em;
left: 20.5rem;
top: -1.2rem;
transform: translateY(0) rotate(90deg); } }
.entity .overview__config-heading .help__modal {
top: 4rem;
left: -21rem; } }
.entity .overview__config-heading .help__modal-content:before {
top: 1.3rem;
background: #f7f7f7; }
@media only screen and (max-width: 64em) {
.entity .overview__config-heading .help__modal-content:before {
top: 0;
left: 20.5rem; } }
.entity .overview__config-heading .help__modal-content:after {
top: 0;
background: #f7f7f7;
transform: translateY(0); }
@media only screen and (max-width: 64em) {
.entity .overview__config-heading .help__modal-content:after {
height: 4.25rem;
width: 1.5em;
left: 20.5rem;
top: -1.2rem;
transform: translateY(0) rotate(90deg); } }
.entity .overview__config-button {
background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
height: 3.5rem;
Expand Down Expand Up @@ -3708,28 +3716,30 @@ button[class*="searchButton"] {
margin-right: 0.5rem; }
.entity .related__heading-title .help {
height: 2.6rem; }
@media only screen and (max-width: 64em) {
.entity .related__heading-title .help__modal {
top: 4rem;
left: -21rem; } }
.entity .related__heading-title .help__modal-content:before {
top: 1.3rem;
background: #f7f7f7; }
.entity .related__heading-title .help__modal {
top: 0; }
@media only screen and (max-width: 64em) {
.entity .related__heading-title .help__modal-content:before {
top: 0;
left: 20.5rem; } }
.entity .related__heading-title .help__modal-content:after {
top: 0;
background: #f7f7f7;
transform: translateY(0); }
@media only screen and (max-width: 64em) {
.entity .related__heading-title .help__modal-content:after {
height: 4.25rem;
width: 1.5em;
left: 20.5rem;
top: -1.2rem;
transform: translateY(0) rotate(90deg); } }
.entity .related__heading-title .help__modal {
top: 4rem;
left: -21rem; } }
.entity .related__heading-title .help__modal-content:before {
top: 1.3rem;
background: #f7f7f7; }
@media only screen and (max-width: 64em) {
.entity .related__heading-title .help__modal-content:before {
top: 0;
left: 20.5rem; } }
.entity .related__heading-title .help__modal-content:after {
top: 0;
background: #f7f7f7;
transform: translateY(0); }
@media only screen and (max-width: 64em) {
.entity .related__heading-title .help__modal-content:after {
height: 4.25rem;
width: 1.5em;
left: 20.5rem;
top: -1.2rem;
transform: translateY(0) rotate(90deg); } }
.entity .related__no-outages {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -3831,6 +3841,8 @@ button[class*="searchButton"] {
margin: 1.5rem auto;
display: block;
box-shadow: 0 1px 2px #9F9D9D; }
.reports .img-container div {
filter: drop-shadow(0 1px 2px #9F9D9D); }
.reports h2 {
font-size: 1.9rem;
margin-bottom: 1.5rem;
Expand Down Expand Up @@ -3914,6 +3926,8 @@ button[class*="searchButton"] {
margin: 1.5rem auto;
display: block;
box-shadow: 0 1px 2px #9F9D9D; }
.report .img-container div {
filter: drop-shadow(0 1px 2px #9F9D9D); }
.report h2 {
font-size: 1.9rem;
margin-bottom: 1.5rem;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

102 changes: 58 additions & 44 deletions assets/css/style.prefix.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion assets/js/Ioda/components/timeStamp/TimeStamp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ class TimeStamp extends Component {

resize() {
let screenBelow1024 = (window.innerWidth <= 1024);
console.log(screenBelow1024);
if (screenBelow1024 !== this.state.screenBelow1024) {
this.setState({
screenBelow1024: screenBelow1024
Expand Down
2 changes: 2 additions & 0 deletions assets/js/Ioda/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ import Help from './pages/help/Help';
import IranReport2020 from './pages/reports/IranReport2020';
import TestAPI from "./pages/tests/TestAPI";
import Acknowledgements from "./pages/acknowledgements/Acknowledgements";
// to render in Edge/IE
import 'react-app-polyfill/stable';



Expand Down
2 changes: 1 addition & 1 deletion assets/js/Ioda/pages/dashboard/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ class Dashboard extends Component {
tab: typeof window.location.pathname.split("/")[2] !== 'undefined' && window.location.pathname.split("/")[2].split("?")[0] === "region" ? T.translate("dashboard.regionTabTitle") :
typeof window.location.pathname.split("/")[2] !== 'undefined' && window.location.pathname.split("/")[2].split("?")[0] === "asn" ? T.translate("dashboard.asnTabTitle") : T.translate("dashboard.countryTabTitle"),
//Tab View Changer Button
tabCurrentView: typeof window.location.pathname.split("/")[2] !== 'undefined' && window.location.pathname.split("/").length === 2 && window.location.pathname.split("/")[2].split("?")[0] === asn.type ? 'timeSeries' : "map",
tabCurrentView: typeof window.location.pathname.split("/")[2] !== 'undefined' && window.location.pathname.split("/").length === 3 && window.location.pathname.split("/")[2].split("?")[0] === asn.type ? 'timeSeries' : "map",
// Search Bar
suggestedSearchResults: null,
searchTerm: null,
Expand Down
14 changes: 12 additions & 2 deletions assets/js/Ioda/pages/dashboard/DashboardTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@ class DashboardTab extends Component {
this.config = React.createRef();
}

componentDidUpdate(prevProps) {
if (this.props.eventDataProcessed !== prevProps.eventDataProcessed) {
this.genChart();
}

if (this.config.current) {
this.genChart();
}
}

genMap() {
return <TopoMap topoData={this.props.topoData} scores={this.props.topoScores} handleEntityShapeClick={(entity) => this.props.handleEntityShapeClick(entity)}/>;
}
Expand All @@ -37,7 +47,7 @@ class DashboardTab extends Component {
.useUtc(true)
.use24h(false)
// Will need to detect column width to populate height
.width(this.config && this.config.current && this.config.current.offsetWidth)
.width(this.config.current.offsetWidth)
.height(570)
.enableZoom(false)
.showRuler(true)
Expand Down Expand Up @@ -125,7 +135,7 @@ class DashboardTab extends Component {
}
<div id="horizon-chart" style={this.props.tabCurrentView === 'timeSeries' || this.props.type === 'asn' ? {display: 'block'} : {display: 'none'}}>
{
this.config.current && this.props.eventDataProcessed
this.config.current && this.props.eventDataProcessed.length > 0
? this.genChart()
: null
}
Expand Down
10 changes: 3 additions & 7 deletions assets/js/Ioda/pages/help/Help.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,7 @@ class Help extends PureComponent {
20 probers located at SDSC.
</li>
<li>
The trinocular measurement and inference technique labels a /24 block as <em>up</em>,
<em>down</em>, or <em>unknown</em>.
The trinocular measurement and inference technique labels a /24 block as <em>up</em>, <em>down</em>, or <em>unknown</em>.
In addition, we then aggregate <em>up</em> /24s into country, region and ASN
statistics.
</li>
Expand Down Expand Up @@ -132,17 +131,14 @@ class Help extends PureComponent {
<li>
Detection is performed by comparing the <em>current</em> value for
each datasource/aggregation (e.g. the number of /24 networks visible
on <em>BGP</em> and geolocated to <em>Italy</em>) to an
<em>historical</em> value that is computed by finding the
<em>median</em> of a sliding window of recent values (the length of
on <em>BGP</em> and geolocated to <em>Italy</em>) to an <em>historical</em> value that is computed by finding the <em>median</em> of a sliding window of recent values (the length of
the window varies between data sources and is listed below).
</li>
<li>
If the <em>current</em> value is lower than a given fraction of the
<em>history</em> value, an alert is generated. Each data source is
configured with two <em>history-fraction</em> thresholds; one that
triggers a <em>warning</em> alert, and one that triggers a
<em>critical</em> alert. The warning and critical thresholds for each
triggers a <em>warning</em> alert, and one that triggers a <em>critical</em> alert. The warning and critical thresholds for each
data source are listed below. These values are experimental and are based on empirical observations of the signal to noise ratio for each data source.
</li>
</ul>
Expand Down
Loading