Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 20:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix/setup (#2495)

Browse Source 
* move enter-click directive to shared

* allow enter click to continue to login in kiosk mode; adjust styling

* cleanup

* add styling to ca wizard

* rebase new changes

* mobile fixes

* cleanup

* cleanup

* update styling

* cleanup import

* minor css changes

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>
This commit is contained in:
Lucy
2023-11-02 19:35:55 -04:00
committed by GitHub
parent 7ba22f1a09
commit 6a399a7250
9 changed files with 243 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/projects/setup-wizard/src/app/pages/success/success.page.html
View File

@@ -8,7 +8,7 @@
<ion-card>
<ion-row class="ion-align-items-center">
<ion-col responsiveCol sizeXs="12" class="ion-text-center">
<div class="inline" style="margin-bottom: 3rem">
<div class="inline mb-12">
<ion-icon
name="checkmark-circle-outline"
color="success"
@@ -16,12 +16,12 @@
<h1>Setup Complete!</h1>
</div>
<ion-button
shape="round"
class="login-button mb-12"
(click)="exitKiosk()"
size="large"
class="login-btn"
>
Continue to Login
<ion-icon slot="end" name="log-in-outline"></ion-icon>
<ion-icon name="log-in-outline" slot="end"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
@@ -32,8 +32,8 @@
<ion-card *ngIf="lanAddress">
<ion-row class="ion-align-items-center">
<ion-col responsiveCol sizeXs="12" class="ion-text-center">
<div style="margin-bottom: 4rem">
<div class="inline">
<div class="mb-12">
<div class="inline-container setup">
<ion-icon
name="checkmark-circle-outline"
color="success"
@@ -50,24 +50,19 @@
<div class="card-container">
<ion-card id="information" (click)="download()">
<ion-card-content>
<ion-card-title>
Download permanent address info
</ion-card-title>
<ion-card-title>Download address info</ion-card-title>
<p>
start.local was for setup purposes only. It will no
longer work.
</p>
</ion-card-content>
<ion-footer>
<div class="container">
<div class="inline">
<p>DOWNLOAD</p>
<ion-icon name="download-outline"></ion-icon>
</div>
<div class="inline-container">
<p class="action-text">Download</p>
<ion-icon slot="end" name="download-outline"></ion-icon>
</div>
</ion-footer>
</ion-card>
<ion-card
id="launch"
[disabled]="disableLogin"
@@ -83,9 +78,9 @@
</ion-card-content>
<ion-footer>
<div class="container">
<div class="inline">
<p>OPEN</p>
<ion-icon name="open-outline"></ion-icon>
<div class="inline-container">
<p class="action-text">Open</p>
<ion-icon slot="end" name="open-outline"></ion-icon>
</div>
</div>
</ion-footer>

125
frontend/projects/setup-wizard/src/app/pages/success/success.page.scss
View File

@@ -18,28 +18,24 @@ ion-content {
ion-grid {
max-width: 760px;
height: 100%;
}
.login-btn {
--background: var(--color-accent);
--border-radius: 44px;
--box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
--padding-start: 36px;
--padding-end: 36px;
height: 76px;
}
.grid-center-wrapper {
height: 100%;
width: 100%;
.inline-container {
display: flex;
justify-content: center;
align-items: center;
}
.card-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
ion-card {
padding: 3rem;
padding: 2.4rem;
h1 {
color: var(--ion-color-success);
@@ -53,14 +49,14 @@ ion-card {
margin-bottom: 2rem;
}
// download info card
ion-card {
max-width: 91%;
min-width: 91%;
min-height: 260px;
width: 80%;
background: #615F5F;
color: var(--ion-text-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 44px;
margin: auto;
text-align: left;
cursor: pointer;
position: relative;
@@ -79,14 +75,6 @@ ion-card {
font-size: 1.3rem;
}
ion-card-content {
padding-bottom: 4rem;
p {
padding: 1rem 0;
}
}
ion-footer {
position: absolute;
bottom: 10px;
@@ -109,42 +97,87 @@ ion-card {
}
}
.container {
display: flex;
justify-content: center;
align-items: center;
.login-button {
--background: var(--color-accent);
--padding-bottom: 2.5rem;
--padding-top: 2.5rem;
--padding-start: 2.5rem;
--padding-end: 2.5rem;
--border-radius: 44px;
font-size: 1.4rem !important;
font-weight: bold;
text-transform: none;
letter-spacing: normal;
transition: all 350ms ease;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
transition-property: transform;
transform: scale(1.05);
transition-delay: 40ms;
}
ion-icon {
font-size: 1.7rem;
}
}
.launch-button {
--background: var(--alt-blue);
}
#information:after {
#information:after, #launch:after {
content: '';
position: absolute;
left: 0;
top: 80%;
top: 79%;
width: 100%;
height: 100%;
background: var(--color-accent);
}
#launch:after {
content: '';
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 100%;
background: var(--alt-blue);
}
}
.card-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
.mb-12 {
margin-bottom: 3rem;
}
.emphasis-warn {
font-weight: 600;
color: var(--ion-color-warning);
.pb-2 {
padding-bottom: 0.5rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.action-text {
font-variant-caps: all-small-caps;
padding-right: 0.5rem;
font-size: 1.5rem !important;
letter-spacing: 0.03rem;
padding-bottom: 0.1rem;
}
@media (max-width: 700px) {
.setup {
flex-direction: column;
}
ion-card {
ion-card {
width: 100%;
padding-bottom: unset;
}
#information:after {
top: 84%;
}
#launch:after {
top: 85%;
}
}
}

2
frontend/projects/setup-wizard/src/styles.scss
View File

@@ -218,7 +218,7 @@ ion-toast {
* {
display: inline-block;
vertical-align: middle;
padding: 0.3rem;
padding-left: 0px 0.3rem;
}
}