Skip to content

Commit 9c527d5

Browse files
jakapozunjakapozun
committed
step elements positioning
1 parent fb0653b commit 9c527d5

File tree

5 files changed

+44
-43
lines changed

5 files changed

+44
-43
lines changed

‎Spixi/Resources/Raw/html/css/spixiui-dark.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5144,6 +5144,10 @@ img.emoji {
51445144
gap: 24px;
51455145
}
51465146

5147+
.onboarding-section.restore{
5148+
gap: 64px;
5149+
}
5150+
51475151
.onboarding-stepper-footer {
51485152
display: flex;
51495153
align-items: center;
@@ -5221,13 +5225,12 @@ img.emoji {
52215225
display: flex;
52225226
flex-direction: column;
52235227
align-items: center;
5224-
justify-content: space-between;
5228+
justify-content: center;
52255229
height: 100%;
52265230
margin: 0 auto;
5227-
gap: 8px;
5231+
gap: 64px;
52285232

52295233
.details {
5230-
margin-top: 64px;
52315234
display: flex;
52325235
flex-direction: column;
52335236
gap: 8px;
@@ -5238,40 +5241,38 @@ img.emoji {
52385241
img {
52395242
margin-top: 8px;
52405243
max-width: 264px;
5241-
margin-bottom: calc(64px - 8px)
52425244
}
52435245
}
52445246
}
52455247

5248+
.intro-new-start-logo{
5249+
padding-top: 32px;
5250+
}
5251+
52465252
.create-account-start-actions {
52475253
display: flex;
52485254
flex-direction: column;
52495255
gap: 16px;
52505256
width: 100%;
52515257
max-width: 342px;
52525258
align-items: center;
5253-
padding-bottom: 64px;
52545259

52555260
div:first-child {
52565261
margin-bottom: 8px;
52575262
}
52585263
}
52595264

52605265
.create-account-stepper-header {
5261-
height: 100%;
52625266
display: flex;
5263-
flex-direction: column;
52645267
gap: 24px;
5265-
justify-content: space-between;
5266-
padding-top: 54px;
52675268
align-items: center;
5269+
}
52685270

5269-
.step-number {
5270-
background: var(--colors-surface-05);
5271-
padding: 4px 12px;
5272-
border-radius: 8px;
5273-
color: var(--colors-text-01);
5274-
}
5271+
.step-number {
5272+
background: var(--colors-surface-05);
5273+
padding: 4px 12px;
5274+
border-radius: 8px;
5275+
color: var(--colors-text-01);
52755276
}
52765277

52775278
.upload-img-container {
@@ -5295,7 +5296,6 @@ img.emoji {
52955296
.create-step {
52965297
max-width: 350px;
52975298
gap: 8px;
5298-
margin-bottom: 120px;
52995299
}
53005300

53015301
.create-account-username {

‎Spixi/Resources/Raw/html/css/spixiui-light.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5122,6 +5122,10 @@ img.emoji {
51225122
gap: 24px;
51235123
}
51245124

5125+
.onboarding-section.restore{
5126+
gap: 64px;
5127+
}
5128+
51255129
.onboarding-stepper-footer {
51265130
display: flex;
51275131
align-items: center;
@@ -5199,13 +5203,12 @@ img.emoji {
51995203
display: flex;
52005204
flex-direction: column;
52015205
align-items: center;
5202-
justify-content: space-between;
5206+
justify-content: center;
52035207
height: 100%;
52045208
margin: 0 auto;
5205-
gap: 8px;
5209+
gap: 64px;
52065210

52075211
.details {
5208-
margin-top: 64px;
52095212
display: flex;
52105213
flex-direction: column;
52115214
gap: 8px;
@@ -5216,40 +5219,38 @@ img.emoji {
52165219
img {
52175220
margin-top: 8px;
52185221
max-width: 264px;
5219-
margin-bottom: calc(64px - 8px)
52205222
}
52215223
}
52225224
}
52235225

5226+
.intro-new-start-logo{
5227+
padding-top: 32px;
5228+
}
5229+
52245230
.create-account-start-actions {
52255231
display: flex;
52265232
flex-direction: column;
52275233
gap: 16px;
52285234
width: 100%;
52295235
max-width: 342px;
52305236
align-items: center;
5231-
padding-bottom: 64px;
52325237

52335238
div:first-child {
52345239
margin-bottom: 8px;
52355240
}
52365241
}
52375242

52385243
.create-account-stepper-header {
5239-
height: 100%;
52405244
display: flex;
5241-
flex-direction: column;
52425245
gap: 24px;
5243-
justify-content: space-between;
5244-
padding-top: 54px;
52455246
align-items: center;
5247+
}
52465248

5247-
.step-number {
5248-
background: var(--colors-surface-05);
5249-
padding: 4px 12px;
5250-
border-radius: 8px;
5251-
color: var(--colors-text-01);
5252-
}
5249+
.step-number {
5250+
background: var(--colors-surface-05);
5251+
padding: 4px 12px;
5252+
border-radius: 8px;
5253+
color: var(--colors-text-01);
52535254
}
52545255

52555256
.upload-img-container {
@@ -5273,7 +5274,6 @@ img.emoji {
52735274
.create-step {
52745275
max-width: 350px;
52755276
gap: 8px;
5276-
margin-bottom: 120px;
52775277
}
52785278

52795279
.create-account-username {

‎Spixi/Resources/Raw/html/intro_new.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no">
77
<title>Create Account</title>
88
<link rel="stylesheet" type="text/css" href="css/normalize.css">
9-
<!-- TODO: change later-->
109
<link rel="stylesheet" type="text/css" href="css/*SL{SpixiThemeMode}">
1110
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
1211

@@ -16,8 +15,8 @@
1615
<body onload="onload()">
1716
<div id="wrap" class="onboarding-container">
1817
<section class="create-account-start-section" id="createAccountStart">
18+
<img src="" data-theme-src="img/spixi-logo-full.svg" alt="spixi logo full" class="intro-new-start-logo"/>
1919
<div class="details">
20-
<img src="" data-theme-src="img/spixi-logo-full.svg" alt="spixi logo full"/>
2120
<span class="heading-xs">*SL{create-account-title}</span>
2221
<div class="body-sm">*SL{create-account-description}</div>
2322
<img src="" data-theme-src="img/create-account/create-start.svg" alt="create-start"/>
@@ -38,11 +37,12 @@
3837
</div>
3938
<div class="create-account-stepper-header">
4039
<img src="" data-theme-src="img/spixi-logo-full.svg" alt="spixi logo full"/>
41-
<div class="step-number label-sm">*SL{create-account-step} <span id="stepNumberSpan">1</span>
42-
*SL{create-account-step-of} <span
43-
id="stepTotalSpan">2</span></div>
40+
4441
</div>
4542
<div id="step1" class="single-step create-step active">
43+
<div class="step-number label-sm">*SL{create-account-step} <span class="stepNumberSpan">1</span>
44+
*SL{create-account-step-of} <span
45+
class="stepTotalSpan">2</span></div>
4646
<span class="label-lg">*SL{create-account-step-1-title}</span>
4747
<div class="body-md">*SL{create-account-step-1-subtitle}</div>
4848
<div class="upload-img-container" onclick="location='ixian:avatar'">
@@ -54,6 +54,9 @@
5454
placeholder="*SL{create-account-step-1-nickname-placeholder}"/>
5555
</div>
5656
<div id="step2" class="single-step create-step">
57+
<div class="step-number label-sm">*SL{create-account-step} <span class="stepNumberSpan">1</span>
58+
*SL{create-account-step-of} <span
59+
class="stepTotalSpan">2</span></div>
5760
<span class="label-lg">*SL{create-account-step-2-title}</span>
5861
<div class="body-md">*SL{create-account-step-2-subtitle}</div>
5962
<div class="password-inputs">
@@ -118,13 +121,13 @@
118121
document.getElementById("version").innerHTML = version;
119122
}
120123

121-
document.getElementById("stepTotalSpan").innerText = steps.length.toString();
122-
document.getElementById("stepNumberSpan").innerText = currentStep.toString();
124+
document.getElementsByName("stepTotalSpan").innerText = steps.length.toString();
125+
document.getElementsByName("stepNumberSpan").innerText = currentStep.toString();
123126

124127
function toggleStep() {
125128
steps.forEach(el => el.classList.remove('active'));
126129
document.getElementById(`step${currentStep}`).classList.add('active');
127-
document.getElementById("stepNumberSpan").innerText = currentStep.toString();
130+
document.getElementsByName("stepNumberSpan").innerText = currentStep.toString();
128131
if (currentStep === steps.length) {
129132
document.getElementById("stepperNext").style.display = "none";
130133
document.getElementById("finishSetup").style.display = "flex";

‎Spixi/Resources/Raw/html/intro_restore.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no">
77
<title>Restore Account</title>
88
<link rel="stylesheet" type="text/css" href="css/normalize.css">
9-
<!-- TODO: change later-->
109
<link rel="stylesheet" type="text/css" href="css/*SL{SpixiThemeMode}">
1110
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
1211

‎Spixi/Resources/Raw/html/onboarding.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<title>Join Community</title>
66
<meta content="width=device-width, initial-scale=1" name="viewport">
77
<link rel="stylesheet" type="text/css" href="css/normalize.css">
8-
<!-- TODO: change later-->
9-
<link rel="stylesheet" type="text/css" href="css/*SL{SpixiThemeMode}">
8+
<link rel="stylesheet" type="text/css" href="css/*SL{SpixiThemeMode}">
109
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
1110

1211
<link rel="stylesheet" type="text/css" href="libs/fontawesome/css/fontawesome.min.css">

0 commit comments

Comments
 (0)