CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 Re-enabling footer for Boundary Admin UI (#1390)

Browse Source 
* feat: 🎸 Re-enabling footer for Boundary `admin-ui`

Re-enable global footer and fix styling

✅ Closes: ICU-6454

* refactor: 💡 added media-query code

Added media-query code for footer to expand on smaller screens.

* refactor: 💡 refactor footer to exist in sidebar-layout

Improved overall layout of content with footer by moving it to the
sidebar-layout

* refactor: 💡 continuous refactor of admin ui footer

Refactored sidebar layout to include grid footer with layout,

* refactor: 💡 collapse sidebar when absent

* refactor: improve css grid column collapse approach

Co-authored-by: Randall Morey <randall@randallmorey.com>
This commit is contained in:
Devon AndersonandRandall Morey authored and GitHub committed 2022-11-01 19:17:19 -04:00
1 parent cc42de52a2
commit fa9f5476b5
15 files changed
+83 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/footer/index.stories.mdx
+4 -4
View File
@@ -9,24 +9,24 @@ A footer component that allows four distinct sections to be configured: brand, n
```handlebars
<Rose::Footer as |footer|>
<footer.brand @logo='logo' @text='Product Name' />
<footer.text>Text</footer.text>
<footer.nav as |nav|>
<nav.link @route='index'>Section</nav.link>
<nav.link @href='index'>Section</nav.link>
</footer.nav>
<footer.brand @logo='logo' @text='Product Name' />
<footer.text>Text</footer.text>
</Rose::Footer>
```
export const Template = (args) => ({
template: hbs`
<Rose::Footer as |footer|>
<footer.brand @logo="logo" @text={{titleText}} />
<footer.text>{{footerText}}</footer.text>
<footer.nav as |nav|>
<nav.link @route="index">Section</nav.link>
<nav.link @href="index">Section</nav.link>
</footer.nav>
<footer.brand @logo="logo" @text={{titleText}} />
<footer.text>{{footerText}}</footer.text>
</Rose::Footer>`,
context: args,
});
addons/rose/addon/components/rose/layout/sidebar/index.hbs
+1
View File
@@ -5,6 +5,7 @@
sidebar=(component
'rose/anonymous' tagName='aside' class='rose-layout-sidebar-sidebar'
)
footer=(component 'rose/anonymous' class='rose-layout-sidebar-footer')
)
}}
</div>
addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
+5 -1
View File
@@ -6,7 +6,7 @@ import { hbs } from 'ember-cli-htmlbars';
# Layout|Sidebar
A top-level layout/positioning component that allows two distinct sections to
be configured: sidebar and body.
be configured: sidebar, body and footer.
```handlebars
<Rose::Layout::Sidebar as |layout|>
@@ -16,6 +16,9 @@ be configured: sidebar and body.
<layout.body>
body content
</layout.body>
<layout.footer>
footer content
</layout.footer>
</Rose::Layout::Sidebar>
```
@@ -26,6 +29,7 @@ be configured: sidebar and body.
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar style="background: var(--brand-gray-7);">Body</layout.sidebar>
<layout.body style="background: var(--brand-gray-5);">Sidebar</layout.body>
<layout.footer style="background: var(--brand-gray-7);">Sidebar</layout.footer>
</Rose::Layout::Sidebar>
`,
}}
addons/rose/app/styles/rose/components/footer/_brand.scss
+1 -1
View File
@@ -4,7 +4,7 @@
display: flex;
align-items: center;
color: var(--ui-gray-starker-1);
margin: sizing.rems(xs);
margin-left: sizing.rems(m);
svg {
$logoSize: sizing.rems(m);
addons/rose/app/styles/rose/components/footer/_index.scss
+1 -1
View File
@@ -11,7 +11,7 @@
@include type.type(xs);
display: flex;
justify-content: center;
justify-content: right;
color: var(--ui-gray-starker-1);
height: sizing.rems(xxl) + sizing.rems(xxs);
}
addons/rose/app/styles/rose/components/footer/_text.scss
+2 -1
View File
@@ -3,5 +3,6 @@
.rose-footer-text {
display: inline-flex;
align-items: center;
margin: 0 sizing.rems(xs);
margin-left: sizing.rems(xxs);
margin-right: sizing.rems(m);
}
addons/rose/app/styles/rose/components/layout/_global.scss
-4
View File
@@ -7,8 +7,4 @@
flex: 1;
display: flex;
}
.rose-layout-global-footer {
display: none;
}
}
addons/rose/app/styles/rose/components/layout/_sidebar.scss
+26 -14
View File
@@ -3,26 +3,38 @@
.rose-layout-sidebar {
--sidebar-width: #{sizing.rems(m) * 16};
display: flex;
flex-grow: 1;
.rose-layout-sidebar-body {
flex: 1;
}
display: grid;
grid-template-columns: repeat(auto-fit, var(--sidebar-width)) repeat(
1,
minmax(min-content, 100%)
);
grid-template-rows: 1fr auto;
grid-template-areas:
'sidebar content'
'sidebar footer';
.rose-layout-sidebar-sidebar {
width: var(--sidebar-width);
grid-area: sidebar;
background-color: #{color(ui-gray, 950)};
border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
}
}
.rose-layout-sidebar-body {
grid-area: content;
}
@media (max-width: media.width(small)) {
.rose-layout-sidebar {
flex-direction: column;
.rose-layout-sidebar-sidebar {
width: auto;
}
.rose-layout-sidebar-footer {
grid-area: footer;
}
}
@media (max-width: media.width(medium)) {
.rose-layout-sidebar {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'sidebar'
'content'
'footer';
}
}
addons/rose/tests/dummy/app/templates/playground.hbs
+4
View File
@@ -97,6 +97,10 @@
</layout.body>
<layout.footer>
footer content
</layout.footer>
</Rose::Layout::Sidebar>
</layout.body>
addons/rose/tests/integration/components/rose/layout/sidebar-test.js
+3 -1
View File
@@ -7,15 +7,17 @@ module('Integration | Component | rose/layout/sidebar', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
assert.expect(3);
assert.expect(4);
await render(hbs`
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar />
<layout.body />
<layout.footer/>
</Rose::Layout::Sidebar>
`);
assert.ok(find('.rose-layout-sidebar'));
assert.ok(find('.rose-layout-sidebar-body'));
assert.ok(find('aside.rose-layout-sidebar-sidebar'));
assert.ok(find('.rose-layout-sidebar-footer'));
});
});
ui/admin/app/styles/app.scss
-6
View File
@@ -4,12 +4,6 @@
@import 'rose';
@import 'notify';
.rose-layout-global {
.rose-layout-global-body {
justify-content: center;
}
}
.rose-layout-centered {
> .rose-layout-page {
width: sizing.rems(l) * 18;
ui/admin/app/templates/account/change-password.hbs
+12
View File
@@ -22,4 +22,16 @@
</Rose::Layout::Centered>
</main>
</sidebarLayout.body>
<sidebarLayout.footer>
<Rose::Footer as |footer|>
<footer.text>{{app-name}}</footer.text>
<footer.nav as |nav|>
<nav.link @href={{(doc-url)}}>
{{t 'titles.documentation'}}
</nav.link>
</footer.nav>
<footer.brand @logo='logo-company' @text={{(company-name)}} />
<footer.text>{{company-copyright}}</footer.text>
</Rose::Footer>
</sidebarLayout.footer>
</Rose::Layout::Sidebar>
ui/admin/app/templates/application.hbs
-13
View File
@@ -67,19 +67,6 @@
{{outlet}}
</layout.body>
<layout.footer>
<Rose::Footer as |footer|>
<footer.brand @logo='logo-company' @text={{(company-name)}} />
<footer.text>{{company-copyright}}</footer.text>
<footer.text>{{app-name}}</footer.text>
<footer.nav as |nav|>
<nav.link @href={{(doc-url)}}>
{{t 'titles.documentation'}}
</nav.link>
</footer.nav>
</Rose::Footer>
</layout.footer>
</Rose::Layout::Global>
{{#if this.flashMessages.queue}}
ui/admin/app/templates/scopes/index.hbs
+12 -1
View File
@@ -18,6 +18,17 @@
</Rose::Layout::Centered>
</main>
</sidebarLayout.body>
<sidebarLayout.footer>
<Rose::Footer as |footer|>
<footer.text>{{company-copyright}}</footer.text>
<footer.text>{{app-name}}</footer.text>
<footer.nav as |nav|>
<nav.link @href={{(doc-url)}}>
{{t 'titles.documentation'}}
</nav.link>
</footer.nav>
<footer.brand @logo='logo-company' @text={{(company-name)}} />
</Rose::Footer>
</sidebarLayout.footer>
</Rose::Layout::Sidebar>
{{/unless}}
ui/admin/app/templates/scopes/scope.hbs
+12 -1
View File
@@ -191,5 +191,16 @@
{{outlet}}
</main>
</sidebarLayout.body>
<sidebarLayout.footer>
<Rose::Footer as |footer|>
<footer.text>{{app-name}}</footer.text>
<footer.nav as |nav|>
<nav.link @href={{(doc-url)}}>
{{t 'titles.documentation'}}
</nav.link>
</footer.nav>
<footer.brand @logo='logo-company' @text={{(company-name)}} />
<footer.text>{{company-copyright}}</footer.text>
</Rose::Footer>
</sidebarLayout.footer>
</Rose::Layout::Sidebar>