From ead7c9188b40663517cc0a176620915038278785 Mon Sep 17 00:00:00 2001 From: Dragos Date: Wed, 28 Apr 2021 18:59:19 +0300 Subject: [PATCH] Auto stash before merge of "master" and "origin/master" --- .../instance-info.component.html | 2 +- .../instance-networks.component.html | 2 +- .../instance-networks.component.scss | 5 + .../instance-snapshots.component.html | 2 +- .../instance-snapshots.component.scss | 2 +- .../instance-wizard.component.scss | 1 + .../app/instances/instances.component.html | 156 ++++++++------- .../app/instances/instances.component.scss | 186 +++++++++++------- app/src/app/instances/instances.component.ts | 2 +- app/src/app/shared.module.ts | 6 +- app/src/styles/_buttons.scss | 8 +- app/src/styles/_forms.scss | 4 +- app/src/styles/_modal.scss | 2 +- app/src/styles/styles.scss | 15 +- 14 files changed, 230 insertions(+), 163 deletions(-) diff --git a/app/src/app/instances/instance-info/instance-info.component.html b/app/src/app/instances/instance-info/instance-info.component.html index 622d13b..e81fcbe 100644 --- a/app/src/app/instances/instance-info/instance-info.component.html +++ b/app/src/app/instances/instance-info/instance-info.component.html @@ -31,7 +31,7 @@
  • Deletion protection
    • -
  • +
  • diff --git a/app/src/app/instances/instance-networks/instance-networks.component.html b/app/src/app/instances/instance-networks/instance-networks.component.html index 98027ec..82ab137 100644 --- a/app/src/app/instances/instance-networks/instance-networks.component.html +++ b/app/src/app/instances/instance-networks/instance-networks.component.html @@ -21,7 +21,7 @@
    -
    +
    diff --git a/app/src/app/instances/instance-networks/instance-networks.component.scss b/app/src/app/instances/instance-networks/instance-networks.component.scss index 9050541..8d70264 100644 --- a/app/src/app/instances/instance-networks/instance-networks.component.scss +++ b/app/src/app/instances/instance-networks/instance-networks.component.scss @@ -43,3 +43,8 @@ { font-size: 1rem; } + +.dropdown-menu b +{ + font-weight: 400; +} diff --git a/app/src/app/instances/instance-snapshots/instance-snapshots.component.html b/app/src/app/instances/instance-snapshots/instance-snapshots.component.html index 617bcc4..6a5ff42 100644 --- a/app/src/app/instances/instance-snapshots/instance-snapshots.component.html +++ b/app/src/app/instances/instance-snapshots/instance-snapshots.component.html @@ -33,7 +33,7 @@ *ngIf="snapshot.state === 'created' && !snapshot.working">
    • @@ -90,32 +90,32 @@ + [parentScroll]="scroller.window.document.getElementById('scrollingBlock')" [scrollThrottlingTime]="250">
    + [ngClass]="showMachineDetails ? 'col-12 full-details' : 'col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12'" + [class.col-lg-6]="showMachineDetails && editorForm.get('fullDetailsTwoColumns').value" lazyLoad [lazyLoadDelay]="lazyLoadDelay" + [container]="scroller.element.nativeElement.getElementsByClassName('scrollable-content')[0]" + (canLoad)="instance.loading = false" (unload)="instance.loading = true" + (load)="loadInstanceDetails(instance)">
    + [adaptivePosition]="false"> {{ instance.name }}
    + class="text-truncate small text-info text-faded mb-1" [tooltip]="instance.imageDetails.description" + container="body" placement="top" [adaptivePosition]="false"> {{ instance.imageDetails.name }}, v{{ instance.imageDetails.version }}
    @@ -184,49 +185,49 @@
    + id="{{ instance.id }}-info"> Info
    + (load)="setInstanceInfo(instance, $event)" (processing)="instance.working = true" + (finishedProcessing)="instance.working = false">
    + id="{{ instance.id }}-networks"> Network
    + (load)="setInstanceNetworks(instance, $event)" (processing)="instance.working = true" + (finishedProcessing)="instance.working = false" + (instanceReboot)="watchInstanceState(instance)" + (instanceStateUpdate)="updateInstance(instance, $event)">
    + id="{{ instance.id }}-snapshots" *ngIf="instance.brand !== 'kvm'"> Snapshots
    + (load)="setInstanceSnapshots(instance, $event)" (processing)="instance.working = true" + (finishedProcessing)="instance.working = false" + (instanceStateUpdate)="updateInstance(instance, $event)">
    + id="{{ instance.id }}-migrations"> Migrations @@ -236,16 +237,15 @@
    + id="{{ instance.id }}-volumes" *ngIf="instance.volumes && instance.volumes.length"> Volumes
      -
    • +
    • @@ -275,32 +275,35 @@
      {{ 'dashboard.list.filterByState' | translate }}
      + formControlName="fullDetailsTwoColumns"> @@ -343,40 +347,46 @@ - \ No newline at end of file + diff --git a/app/src/app/instances/instances.component.scss b/app/src/app/instances/instances.component.scss index ecaa84e..50dfa49 100644 --- a/app/src/app/instances/instances.component.scss +++ b/app/src/app/instances/instances.component.scss @@ -1,162 +1,197 @@ -:host { +:host +{ flex-direction: column; - overflow : hidden; + overflow: hidden; } -.ips { - +.ips { - margin-left : .5rem; +.ips +{ + + .ips + { + margin-left: .5rem; padding-left: .5rem; - border-left : 2px solid #2b3540; + border-left: 2px solid #2b3540; } } -.card { - border : 1px solid rgba(0, 0, 0, .5); +.card +{ + border: 1px solid rgba(0, 0, 0, .5); background-color: rgba(16, 21, 39, .5); - box-shadow : 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a; - transition : box-shadow .15s ease-out; + box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a; + transition: box-shadow .15s ease-out; - &:hover { + &:hover + { box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px rgba(18, 203, 240, .4), 0 0 10px 3px #0e162a; } - .card-title { - color : #ff9c07; + .card-title + { + color: #ff9c07; margin-bottom: 0; - font-weight : bold; + font-weight: bold; } - .card-body { + .card-body + { background-color: rgba(16, 21, 39, .5); - max-height : 205px; - overflow : auto; - padding-top : .7rem !important; + max-height: 205px; + overflow: auto; + padding-top: .7rem !important; } - .list-group-item { + .list-group-item + { background: none; - span { + span + { color: #8881ff; } b, - .strong { - color : #ff9c07; + .strong + { + color: #ff9c07; font-weight: bold; } } .btn-info, - .btn-outline-info { - font-size : 1rem; + .btn-outline-info + { + font-size: 1rem; line-height: 1; } } -.card-info { +.card-info +{ background-color: rgba(16, 21, 39, .75); - display : flex; - flex-direction : column; - justify-content : space-between; - padding : .25rem .5rem .5rem; - height : 170px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: .25rem .5rem .5rem; + height: 170px; } -.full-details .card-info { +.full-details .card-info +{ height: 240px; } -@media (max-width: 576px) { - .card-info { +@media (max-width: 576px) +{ + .card-info + { height: auto; } } -.no-overflow-sm { +.no-overflow-sm +{ overflow: hidden; } -@media (max-width: 992px) { - .no-overflow-sm { +@media (max-width: 992px) +{ + .no-overflow-sm + { overflow: visible; } } -.open .dropdown-toggle {} +.open .dropdown-toggle +{ +} -.filters { +.filters +{ width: 240px; } -.form-check-label { +.form-check-label +{ color: inherit; } -.btn-toolbar .btn { - .badge { - padding : 0.1rem 0.35rem 0; - border : 1px solid transparent; - text-shadow: 0 0 3px rgb(255 255 255 / 25%); +.btn-toolbar .btn +{ + .badge + { + padding: .1rem .35rem 0; + border: 1px solid transparent; + font-weight: 400; + font-size: 1.25rem; - &:first-letter { + &:first-letter + { font-size: 1.2rem; } } - &:hover { - .badge { - border-color: #000; + &:hover + { + .badge + { + border-color: rgba(0,0,0,.25); } } } -@keyframes flash { +@keyframes flash +{ - from, - 50%, - to { + from, 50%, to + { opacity: 1; } - 25%, - 75% { + 25%, 75% + { opacity: 0; } } -.flash { - animation-name : flash; - animation-duration : calc(.9s * 1.3); +.flash +{ + animation-name: flash; + animation-duration: calc(.9s * 1.3); animation-timing-function: ease-in-out; } -.btn-state-filter:not(.btn-lg):not(.btn-sm) { +.btn-state-filter:not(.btn-lg):not(.btn-sm) +{ background-color: #11182b; - color : #ff9c07; - padding : .5rem 1rem; + color: #ff9c07; + padding: .5rem 1rem; } -.open.show .btn-state-filter { +.open.show .btn-state-filter +{ border-radius: 1.25rem 1.25rem 0 0; } -.dropdown-menu.dropdown-menu-state-filter { - background : #11182b; - color : #ff9c07; - width : 100%; - padding : 0; +.dropdown-menu.dropdown-menu-state-filter +{ + background: #11182b; + color: #ff9c07; + width: 100%; + padding: 0; border-radius: 0 0 .25rem .25rem; - .dropdown-item { + .dropdown-item + { color: inherit; - &.active { + &.active + { color: #0dcaf0; } - &:hover { + &:hover + { background-color: rgba(11, 172, 204, .2); } } @@ -164,6 +199,17 @@ .form-switch, .form-switch input, -.form-switch label { +.form-switch label +{ cursor: pointer; } + +.dropdown-toggle b +{ + font-weight: 400; +} + +a.badge +{ + text-decoration: none; +} diff --git a/app/src/app/instances/instances.component.ts b/app/src/app/instances/instances.component.ts index 1a1346a..17c927b 100644 --- a/app/src/app/instances/instances.component.ts +++ b/app/src/app/instances/instances.component.ts @@ -774,7 +774,7 @@ export class InstancesComponent implements OnInit, OnDestroy instance.working = false; }); - instance.shouldLoadInfo = this.editorForm.get('showMachineDetails').value; + instance.shouldLoadInfo = true; } // ---------------------------------------------------------------------------------------------------------------- diff --git a/app/src/app/shared.module.ts b/app/src/app/shared.module.ts index 50a550e..a66bb67 100644 --- a/app/src/app/shared.module.ts +++ b/app/src/app/shared.module.ts @@ -32,7 +32,8 @@ import faTimes, faTrash, faUser, faUserTag, faTag, faUserLock, faLock, faPen, faCheckCircle, faPenNib, faPlus, faMinus, faAngleRight, faHandPointer, faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner, faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask, - faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent + faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent, + faUndo } from '@fortawesome/free-solid-svg-icons'; import { faDocker } from '@fortawesome/free-brands-svg-icons'; @@ -147,7 +148,8 @@ export class SharedModule faTimes, faTrash, faUser, faUserTag, faTag, faUserLock, faLock, faPen, faCheckCircle, faPenNib, faPlus, faMinus, faAngleRight, faHandPointer, faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner, faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask, - faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent + faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent, + faUndo ); } } diff --git a/app/src/styles/_buttons.scss b/app/src/styles/_buttons.scss index 908f0ad..940102e 100644 --- a/app/src/styles/_buttons.scss +++ b/app/src/styles/_buttons.scss @@ -2,7 +2,7 @@ { border-radius: 2rem; line-height: 1.2; - font-family: "Mukta", sans-serif; + font-family: "Bebas Neue", sans-serif; text-transform: uppercase; font-weight: 400; @@ -18,7 +18,7 @@ .btn:not(.btn-lg):not(.btn-sm) { - font-size: 1.15rem; + font-size: 1.25rem; padding: .375rem .5rem .3rem; } @@ -34,10 +34,10 @@ .btn.btn-lg { - font-size: 1.15rem; + font-size: 1.5rem; padding-bottom: .35rem; line-height: 1; - font-weight: 600; + font-weight: 400; } .btn-primary diff --git a/app/src/styles/_forms.scss b/app/src/styles/_forms.scss index 31bc9e0..44fac03 100644 --- a/app/src/styles/_forms.scss +++ b/app/src/styles/_forms.scss @@ -2,8 +2,8 @@ { text-transform: uppercase; color: #0dcaf0; - font-family: "Varta", sans-serif; - font-size: 1.2rem; + font-family: "Bebas Neue", sans-serif; + font-size: 1.25rem; vertical-align: middle; } diff --git a/app/src/styles/_modal.scss b/app/src/styles/_modal.scss index f44a862..3aa4b07 100644 --- a/app/src/styles/_modal.scss +++ b/app/src/styles/_modal.scss @@ -29,7 +29,7 @@ h4 { color: #3d5e8e; - font-family: "Varta", sans-serif; + font-family: "Bebas Neue", sans-serif; } } } diff --git a/app/src/styles/styles.scss b/app/src/styles/styles.scss index 70a01bc..3872d0a 100644 --- a/app/src/styles/styles.scss +++ b/app/src/styles/styles.scss @@ -116,7 +116,8 @@ body, div, virtual-scroller background: none; border-radius: 0; border: none; - font-family: "Varta", sans-serif; + font-family: "Bebas Neue", sans-serif; + text-transform: uppercase; text-align: center; color: #0dcaf0; width: 100%; @@ -138,6 +139,7 @@ body, div, virtual-scroller .nav-tabs { border: none; + flex-wrap: nowrap; } .tab-content @@ -266,10 +268,11 @@ accordion .dropdown-menu, .menu-popover, .menu-dropdown { background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%); - font-family: "Varta", sans-serif; - font-size: 1.2rem; + font-family: "Bebas Neue", sans-serif; + font-size: 1.25rem; z-index: 1020; - max-height: 60vh; + max-height: 80vh; + max-width: 600px; overflow: auto; } @@ -472,7 +475,7 @@ accordion { thead { - font-family: "Varta", sans-serif; + font-family: "Bebas Neue", sans-serif; font-size: 1.2rem; color: #A3A4B8; } @@ -537,4 +540,4 @@ accordion .machine-brand b { text-transform: uppercase; -} \ No newline at end of file +}