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.

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

RHCS 4.0 Branding #83

Closed
wants to merge 19 commits into from
Closed

RHCS 4.0 Branding #83

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
23c70f4
New Branding for downstream
Jul 3, 2019
8afb689
refactor(dashboard): restyle UI to match PF4 styles
mcoker Aug 12, 2019
2ba0e5a
fix(nav): update mobile utility and navbar brand css
mcoker Aug 16, 2019
4398963
fix(colors): update success, info, warning, error colors
mcoker Aug 19, 2019
67a229a
fix(dashboard): remove dashboard text from nav, update colors
mcoker Aug 23, 2019
1cef481
mgr/dashboard: fix health pipe test and other
epuertat Aug 28, 2019
b8dca15
mgr/dashboard: add red hat favicon
epuertat Aug 28, 2019
235a478
mgr/dashboard: fix right whitespaced by refresh
epuertat Aug 28, 2019
67592a5
mgr/dashboard: add Red Hat font [optional]
epuertat Aug 29, 2019
55899f8
mgr/dashboad: fix spacing in Pool form
epuertat Aug 29, 2019
e565aaf
mgr/dashboard: use PF label for badges
epuertat Aug 29, 2019
e28de55
mgr/dashboard: hide refresh component
epuertat Aug 30, 2019
28f2fa1
mgr/dashboard: remove white area at the bottom
epuertat Aug 30, 2019
7eb1379
mgr/dashboard: Disable translations
epuertat Sep 2, 2019
5953b5d
mgr/dashboard: fix form & landing page titles
epuertat Sep 3, 2019
8907667
mgr/dashboard: improve landing page.
epuertat Sep 6, 2019
10ae9ca
mgr/dashboard: fix Cephfs hang and tests
epuertat Nov 28, 2019
0be092b
mgr/dashboard: use downstream docs link
epuertat Dec 17, 2019
80ae5b1
mgr/dashboard: fix white border in about box
epuertat Dec 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(dashboard): restyle UI to match PF4 styles
  • Loading branch information
@mcoker @epuertat
mcoker authored and epuertat committed Aug 22, 2019
commit 8afb6890ddbe7139be186138078d2e00edfea021
42 changes: 31 additions & 11 deletions src/pybind/mgr/dashboard/frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/pybind/mgr/dashboard/frontend/package.json
View file
Open in desktop
Expand Up @@ -66,7 +66,7 @@
"@angular/router": "7.2.6",
"@auth0/angular-jwt": "2.1.0",
"@ngx-translate/i18n-polyfill": "1.0.0",
"@patternfly/patternfly": "^2.6.16",
"@patternfly/patternfly": "^2.25.2",
"@swimlane/ngx-datatable": "14.0.0",
"awesome-bootstrap-checkbox": "0.3.7",
"bootstrap": "3.4.1",
Expand Down
17 changes: 5 additions & 12 deletions src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
View file
Open in desktop
Expand Up @@ -3,11 +3,10 @@
<div class="pf-c-login__container">
<header class="pf-c-login__header">
<img class="pf-c-brand" src="assets/Logo-Red_Hat-Ceph_Storage-A-Reverse-RGB.png" alt="Red Hat Ceph Storage Dashboard">
<p>Dashboard</p>
</header>
<main class="pf-c-login__main">
<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-xl">
<h1 class="pf-c-title pf-m-3xl">
Welcome to Red Hat Ceph Storage Dashboard
</h1>
</header>
Expand All @@ -22,7 +21,8 @@ <h1 class="pf-c-title pf-m-xl">
</p>
<div class="pf-c-form__group">
<label class="pf-c-form__label" for="login-demo-form-username">
Username <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
<span class="pf-c-form__label-text">Username</span>
<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
</label>
<input name="username"
[(ngModel)]="model.username"
Expand All @@ -36,14 +36,11 @@ <h1 class="pf-c-title pf-m-xl">
*ngIf="(loginForm.submitted || username.dirty) && username.invalid"
i18n>Username is required
</div>
<div class="help-block"
*ngIf="!((loginForm.submitted || username.dirty) && username.invalid)"
i18n><br>
</div>
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label" for="login-demo-form-password">
Password <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
<span class="pf-c-form__label-text">Password</span>
<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
</label>
<input id="password"
name="password"
Expand All @@ -56,10 +53,6 @@ <h1 class="pf-c-title pf-m-xl">
*ngIf="(loginForm.submitted || password.dirty) && password.invalid"
i18n>Password is required
</div>
<div class="help-block"
*ngIf="!((loginForm.submitted || password.dirty) && password.invalid)"
i18n><br>
</div>
</div>
<div class="pf-c-form__group pf-m-action">
<button class="pf-c-button pf-m-primary pf-m-block"
Expand Down
49 changes: 11 additions & 38 deletions src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
View file
Open in desktop
@@ -1,51 +1,24 @@
@import '../../../../defaults';

::ng-deep .login {
.pf-c-login__main-header {
text-align: center;
}
.pf-c-login {
::ng-deep {

.login {
background-image: url('../../../../assets/redhat_new_background.svg');
background-size: cover;
}

header.pf-c-login__header {
margin-bottom: 50px;
p {
padding-left: 26% !important;
font-size: 3.5vw;
font-weight: 500;
}

img {
margin-bottom: 0 !important;
}
}
background-position: center;

@media only screen and (max-width: 1199px) {
header.pf-c-login__header p {
font-size: 4em !important;
font-weight: 600;
@media (min-width: $pf-global--breakpoint--xl) {
background-position-x: 30%;
}
}

@media only screen and (max-width: 500px) and (min-width: 1199px) {
header.pf-c-login__header p {
font-size: 4vw !important;
font-weight: 600;
@media only screen and (min-width: $pf-global--breakpoint--xl) {
.pf-c-login__footer {
padding-left: 26%;
}
}

footer {
padding-left: 26% !important;
}

h1 {
margin-top: 0;
margin-bottom: 30px;
}

.pf-m-action {
margin-top: 0;
.pf-c-login__container {
min-width: 0;
}
}
50 changes: 19 additions & 31 deletions src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
View file
Open in desktop
Expand Up @@ -21,37 +21,25 @@ <h2 class="pf-c-title pf-m-4xl" id="about-modal-title">
</div>
<div class="pf-c-about-modal-box__content">
<div class="pf-c-about-modal-box__body">
<ul class="list-unstyled">
<li class="row">
<strong class="col-xs-5 col-sm-5">Version</strong>
<span class="col-xs-7 col-sm-7">{{ projectConstants.version }}</span>
</li>
<li class="row">
<strong class="col-xs-5 col-sm-5">Ceph Manager</strong>
<span class="col-xs-7 col-sm-7">{{ hostAddr }}</span>
</li>
<li class="row">
<strong class="col-xs-5 col-sm-5">User</strong>
<span class="col-xs-7 col-sm-7">{{ modalVariables.user }}</span>
</li>
<li class="row">
<strong class="col-xs-5 col-sm-5">User Role</strong>
<span class="col-xs-7 col-sm-7">{{ modalVariables.role }}</span>
</li>
<li class="row">
<strong class="col-xs-5 col-sm-5">Browser</strong>
<span class="col-xs-7 col-sm-7">{{ modalVariables.browserName }}</span>
</li>
<li class="row">
<strong class="col-xs-5 col-sm-5">Browser Version</strong>
<span class="col-xs-7 col-sm-7">{{ modalVariables.browserVersion }}</span>
</li>
<li class="row">
<strong class="col-xs-5 col-sm-5">Browser OS</strong>
<span class="col-xs-7 col-sm-7">{{ modalVariables.browserOS }}</span>
</li>
</ul>
</div>
<div class="pf-c-content">
<dl>
<dt>Version</dt>
<dd>{{ projectConstants.version }}</dd>
<dt>Ceph Manager</dt>
<dd>{{ hostAddr }}</dd>
<dt>User</dt>
<dd>{{ modalVariables.user }}</dd>
<dt>User Role</dt>
<dd>{{ modalVariables.role }}</dd>
<dt>Browser</dt>
<dd>{{ modalVariables.browserName }}</dd>
<dt>Browser Version</dt>
<dd>{{ modalVariables.browserVersion }}</dd>
<dt>Browser OS</dt>
<dd>{{ modalVariables.browserOS }}</dd>
</dl>
</div>
</div>
<p class="pf-c-about-modal-box__strapline">
{{ copyright }}
<br>
Expand Down