Skip to content

MATS logo #1351

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

Merged
mollybsmith-noaa merged 8 commits into from
Jan 22, 2026
Merged

MATS logo #1351

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3009466
Removed unused images
mollybsmith-noaa Jan 21, 2026
87d46df
Added MATS logo and resized topnav elements
mollybsmith-noaa Jan 21, 2026
ca6594d
Added METexpress and DTC logos
mollybsmith-noaa Jan 21, 2026
463a105
Removed unnecessary and irritating reset to defaults calls
mollybsmith-noaa Jan 21, 2026
d56dc4e
Linting
mollybsmith-noaa Jan 21, 2026
d8d081c
Added MATS logo to home app
mollybsmith-noaa Jan 22, 2026
16df4dc
New logos
mollybsmith-noaa Jan 22, 2026
b28fb5f
Moved agency icon heights to CSS
mollybsmith-noaa Jan 22, 2026
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
2 changes: 1 addition & 1 deletion MATScommon
Open in desktop
Submodule MATScommon updated 21 files
+14 −10 meteor_packages/mats-common/package.js
+3 −0 meteor_packages/mats-common/public/MATSReleaseNotes.html
+ − meteor_packages/mats-common/public/img/arrow-down.gif
+ − meteor_packages/mats-common/public/img/arrow-left.gif
+ − meteor_packages/mats-common/public/img/arrow-right.gif
+ − meteor_packages/mats-common/public/img/arrow-up.gif
+ − meteor_packages/mats-common/public/img/building_spinner.gif
+ − meteor_packages/mats-common/public/img/drawing_spinner.gif
+ − meteor_packages/mats-common/public/img/dtc_transparent.png
+ − meteor_packages/mats-common/public/img/mats_transparent.png
+ − meteor_packages/mats-common/public/img/metexpress_transparent.png
+ − meteor_packages/mats-common/public/img/noaa_gsl_transparent.png
+ − meteor_packages/mats-common/public/img/[email protected]
+ − meteor_packages/mats-common/public/img/texturetastic_gray.png
+1 −2 meteor_packages/mats-common/templates/changePlotType/changePlotType.js
+0 −2 meteor_packages/mats-common/templates/curves/curve_list.js
+4 −13 meteor_packages/mats-common/templates/customHome.js
+3 −8 meteor_packages/mats-common/templates/home.js
+1 −10 meteor_packages/mats-common/templates/params/param_list.js
+38 −11 meteor_packages/mats-common/templates/topnav/top_nav.html
+55 −2 meteor_packages/mats-common/templates/topnav/top_nav.js
2 changes: 1 addition & 1 deletion METexpress
Open in desktop
Submodule METexpress updated 9 files
+1 −1 MATScommon
+12 −0 apps/met-anomalycor/app.css
+12 −0 apps/met-cyclone-cb/app.css
+12 −0 apps/met-cyclone/app.css
+12 −0 apps/met-ensemble/app.css
+12 −0 apps/met-object/app.css
+12 −0 apps/met-precip/app.css
+12 −0 apps/met-surface/app.css
+12 −0 apps/met-upperair/app.css
12 changes: 12 additions & 0 deletions apps/airQuality/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/cb-metar/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/ceil-vis/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/ceil-vis15/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/ensemble/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/landuse/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/precipAccum/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/precipGauge/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/precipitation1hr/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/ptype/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/radar/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/scorecard/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/surface/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/surfrad/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
12 changes: 12 additions & 0 deletions apps/upperair/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,19 @@ body {
background-color: #000066;
}

.mats-logo-size {
width: 110px;
}

.metexpress-logo-size {
width: 160px;
}

.noaa-logo-size {
width: 170px;
}

.dtc-logo-size {
width: 60px;
}

Expand Down
Binary file added home/static/img/dtc_transparent.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added home/static/img/mats_transparent.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added home/static/img/metexpress_transparent.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added home/static/img/noaa_gsl_transparent.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 30 additions & 7 deletions home/templates/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,24 @@
aria-label="MATS navigation bar"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">
<div class="row">
<div class="col-3">
<a class="navbar-brand w-100 h-100 m-0" href="#">
<div class="row align-items-center">
<div class="col-lg-3 col-6 text-lg-start text-end">
{{ if .Config.IsMETexpress }}
<img
class="text-center h-100"
src="img/noaa-logo-rgb-2022.svg"
alt="NOAA Logo"
style="height: 80px;"
src="img/metexpress_transparent.png"
alt="METexpress Logo"
/>
{{ else }}
<img
style="height: 80px;"
src="img/mats_transparent.png"
alt="MATS Logo"
Comment on lines 75 to 84
Copy link
Collaborator

@ian-noaa ian-noaa Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be possible to use bootstrap's styling classes to specify the image size? The original logo was utilizing class=text-center h-100 to get proper image sizing.

I was trying to avoid having to specify inline CSS style directly on elements in the home app and just use Bootstrap utilities instead. Inline CSS is considered a bit of an antipattern - it's then hard to update styles globally. I was also a bit worried that if we specify CSS style= directly on elements, that we'll end up fighting bootstrap, or that we'll lose bootstrap's responsiveness.

Copy link
Collaborator

@ian-noaa ian-noaa Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Otherwise, the home app does have an external stylesheet we could use - IIRC, then we'd just add another custom class.

https://github.com/NOAA-GSL/MATS/blob/main/home/static/css/home.css

Copy link
Collaborator Author

@mollybsmith-noaa mollybsmith-noaa Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree about using bootstrap where we can! However the bootstrap h and w controls are pretty limited. For example, h-100 will give you 100% of the image's height, which for our four images are too large. I didn't see that the home app had a style sheet, I will gladly mode it there!

Copy link
Collaborator

@ian-noaa ian-noaa Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good! And agreed about bootstrap's size controls being limited. It seems like it's 25%, 50%, 75%, and 100% of the parent's height, which may or may not be appropriate. If we did want that whole parent <div> to be 80px high, we could set the style on that element.

/>
{{ end }}
</div>
<div class="col-9">
<div class="col-lg-6 col-0 d-none d-lg-block text-center">
{{ if .Config.IsMETexpress }}
<span class="fs-6">National Weather Service</span>
{{ else }}
Expand All @@ -94,6 +102,21 @@
{{ else }}
{{ end }}
</div>
<div class="col-lg-3 col-6 text-lg-end text-start">
{{ if .Config.IsMETexpress }}
<img
style="height: 80px;"
src="img/dtc_transparent.png"
alt="DTC Logo"
/>
{{ else }}
<img
style="height: 80px;"
src="img/noaa_gsl_transparent.png"
alt="NOAA Logo"
/>
{{ end }}
</div>
</div>
</a>
</div>
Expand Down
Loading