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

Initial attempt at migrating from bootstrap 4 to 5 #4

Draft
wants to merge 5 commits into
base: development
Choose a base branch
from
Draft

Initial attempt at migrating from bootstrap 4 to 5 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
725cafa
Initial attempt at migrating from bootstrap 4 to 5
ian-noaa Aug 31, 2021
3628cdf
Merge branch 'development' into 629-upgrade-bootstrap-5
mollybsmith-noaa Sep 30, 2021
049b615
Some improvement in moving to bootstrap 5.
mollybsmith-noaa Sep 30, 2021
bc81bf6
Moved daterangepicker import
mollybsmith-noaa Sep 30, 2021
0b4a222
Switch the header & footer to bootstrap 5
ian-noaa Oct 1, 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
8 changes: 8 additions & 0 deletions meteor_packages/mats-common/client/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,11 @@

import '../imports/startup/client';
import '../imports/startup/both';
import '@popperjs/core';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-grid.css';
import 'bootstrap/dist/css/bootstrap-reboot.css';
import 'bootstrap/dist/css/bootstrap-utilities.css';
import 'jquery';
import 'daterangepicker';
14 changes: 9 additions & 5 deletions meteor_packages/mats-common/package.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,19 @@ Package.describe({
});

Package.onUse(function (api) {
api.versionsFrom('1.4.1.1');
api.versionsFrom('2.3.5');
Npm.depends({
'fs-extra': '7.0.0',
"@babel/runtime": "7.10.4",
"meteor-node-stubs": "0.4.1",
"url": "0.11.0",
"jquery-ui": "1.12.1",
"csv-stringify": "4.3.1",
"node-file-cache" : "1.0.2",
"python-shell": "1.0.8"
"python-shell": "1.0.8",
"daterangepicker": "3.1.0",
"@popperjs/core": "2.9.3",
"bootstrap": "5.1.0",
"jquery": "3.6.0"
});
api.mainModule("server/main.js", "server");
api.mainModule("client/main.js", "client");
Expand All @@ -40,11 +43,11 @@ Package.onUse(function (api) {
api.use("accounts-ui", 'client');
api.use("service-configuration", 'server');
api.use("yasinuslu:json-view", "client");
api.use("dangrossman:bootstrap-daterangepicker");
// api.use("dangrossman:bootstrap-daterangepicker"); // This needs to be an npm dependency
api.use("mdg:validated-method");
api.use('session');
api.imply('session');
api.use("twbs:bootstrap");
// api.use("twbs:bootstrap");
api.use("fortawesome:fontawesome");
api.use("msavin:mongol");
api.use("differential:event-hooks");
Expand Down Expand Up @@ -79,6 +82,7 @@ Package.onUse(function (api) {
api.export("regression", ['client', 'server']);
api.export("matsCache", ['server']);


// add imports
//both
api.addFiles('imports/startup/both/index.js');
Expand Down
64 changes: 37 additions & 27 deletions meteor_packages/mats-common/templates/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,39 @@
<template name="footer" xmlns="http://www.w3.org/1999/html">
<nav id="footnav" class="navbar navbar-default" style="display: block;">
<div class="container-fluid" style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="row" style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
<span class="col-md-2">{{>version}}</span>
<span><a href="http://www.noaa.gov/privacy.html" class="navbar-link">NOAA Privacy Statement</a> - </span>
<span><a href="http://esrl.noaa.gov/gsd/accessibility.html" class="navbar-link">Web Accessibility Statement</a> - </span>
<span><a href="http://www.noaa.gov/disclaimer.html" class="navbar-link">Disclaimer for External Links</a> - </span>
<span><a href="http://www.noaa.gov/" class="navbar-link">NOAA</a> - </span>
{{#if isMetexpress}}
<span><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a></span>
{{else}}
<span><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a> - </span>
<span><a href="http://research.noaa.gov/" class="navbar-link">NOAA Research</a></span>
{{/if}}
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav id="footnav" class="navbar navbar-expand-xl " style="display: block;">
<div class="container-fluid"
style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse"
data-bs-target="#navbar-collapse-3" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="row"
style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
<span class="col-md-2">{{>version}}</span>
<span class="col"><a href="http://www.noaa.gov/privacy.html" class="navbar-link">NOAA Privacy
Statement</a> -
</span>
<span class="col"><a href="http://esrl.noaa.gov/gsd/accessibility.html" class="navbar-link">Web
Accessibility
Statement</a> - </span>
<span class="col"><a href="http://www.noaa.gov/disclaimer.html" class="navbar-link">Disclaimer for
External
Links</a> - </span>
<span class="col"><a href="http://www.noaa.gov/" class="navbar-link">NOAA</a> - </span>
{{#if isMetexpress}}
<span class="col"><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a>
</span>
{{else}}
<span class="col"><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a>
- </span>
<span class="col"><a href="http://research.noaa.gov/" class="navbar-link">NOAA Research</a></span>
{{/if}}
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</template>

57 changes: 31 additions & 26 deletions meteor_packages/mats-common/templates/topnav/top_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
<template name="topNav">

<div id="navbar" style="display:block;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:0;">
<nav id="topnav" class="navbar navbar-default"
style="color:white; background: #006699;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:0;">
<nav id="topnav" class="navbar navbar-expand-sm "
style="color:white; background: #006699;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:0;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-collapse-1" aria-expanded="false">
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse"
data-bs-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{productLink}}"> <i style="color:cyan" class="fa fa-home fa-3x" aria-hidden="true"></i></a>
<a href="{{productLink}}"> <i style="color:cyan" class="fa fa-home fa-3x"
aria-hidden="true"></i></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="http://www.doc.gov/"><span
style="color:white">U.S. Department of Commerce</span></a></li>
<li><a href="http://www.noaa.gov/"><span style="color:white">National Oceanic and Atmospheric Administration</span></a>
<li class="nav-item"><a href="http://www.doc.gov/"><span style="color:white">U.S. Department of
Commerce</span></a></li>
<li class="nav-item"><a href="http://www.noaa.gov/"><span style="color:white">National Oceanic and Atmospheric
Administration</span></a>
</li>
{{#unless isMetexpress}}
<li><a href="http://www.research.noaa.gov/"><span style="color:white">NOAA Research</span></a>
<li class="nav-item"><a href="http://www.research.noaa.gov/"><span style="color:white">NOAA Research</span></a>
</li>
{{/unless}}
</ul>
Expand All @@ -31,50 +33,53 @@
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav id="topnav1" class="navbar navbar-default"
style="color:white; background: #000066;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:1.5%;">
<nav id="topnav1" class="navbar navbar-expand-sm "
style="color:white; background: #000066;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:1.5%;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-collapse-2" aria-expanded="false">
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse"
data-bs-target="#navbar-collapse-2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="margin-bottom:0;margin-top:0;padding: 0;" class="navbar-brand" href="https://www.noaa.gov"><img
<a style="margin-bottom:0;margin-top:0;padding: 0;" class="navbar-brand"
href="https://www.noaa.gov"><img
style="height:100%;margin-bottom:0;margin-top:0;padding-left:1em;padding-right:1em;padding-bottom:0;padding-top:0;"
src = "{{transparentGif}}" alt="NOAA"></a>
src="{{transparentGif}}" alt="NOAA"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li>
<li class="nav-item">
<div>
<a href="{{agencyLink}}"><span style="color:white;font-size: small;">{{agencyText}}</span></a><br>
<a href="{{productLink}}"><span style="color:white;font-size: x-large;">{{productText}}</span></a><br>
<a href="{{agencyLink}}"><span
style="color:white;font-size: small;">{{agencyText}}</span></a><br>
<a href="{{productLink}}"><span
style="color:white;font-size: x-large;">{{productText}}</span></a><br>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{bugsLink}}" target="_blank"><span
style="color:white;font-size: medium;">{{bugsText}}</span></a></li>
<li><a href="{{productLink}}"> <span style="color:white;font-size: medium;">Home</span></a></li>
<li><a href="" class="about"><span style="color:white;font-size: medium;">About</span></a></li>
<li><a style="font-size: medium" href="mailto:[email protected]?Subject=Feedback from {{emailText}}"><span
style="color:white">Contact Us</span></a></li>
<li class="nav-item"><a href="{{bugsLink}}" target="_blank"><span
style="color:white;font-size: medium;">{{bugsText}}</span></a></li>
<li class="nav-item"><a href="{{productLink}}"> <span style="color:white;font-size: medium;">Home</span></a></li>
<li class="nav-item"><a href="" class="about"><span style="color:white;font-size: medium;">About</span></a></li>
<li class="nav-item"><a style="font-size: medium"
href="mailto:[email protected]?Subject=Feedback from {{emailText}}"><span
style="color:white">Contact Us</span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{{#unless isMetexpress}}
<div style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-left:1em;padding-right: 0"
class="container-fluid">
class="container-fluid">
<a style="font-size:large;font-weight: bold" href="http://esrl.noaa.gov/gsd/mdb">GSL Modeling</a>
</div>
{{/unless}}
</div>
</template>