The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

Start onboarding screen UI

Browse Source 
- Main screen window
- Title
- Some navigation
This commit is contained in:
David Benque 2024-06-19 15:38:58 +01:00
parent c1193b45c3
commit 5b7095a4a8
2 changed files with 54 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
www/install/onboarding.less
View File

@ -12,37 +12,46 @@
#AFFDC2,
#C9FFFE,
#C8D6FF,
#E4CAFF;
#E4CAFF;
.configscreen {
width: 70%;
height: 75%;
background-color: #424242 !important;
//width: 70%;
//height: 75%;
background-color: @cp_loading-progress-bg;
border-radius: @variables_radius_L;
box-shadow: 0px 0px 10px 0px @cp_shadow-color;
padding: 80px 110px 20px 110px;
}
.cp-onboardscreen-form {
padding:10px;
position:relative;
height: 90%;
}
.cp-onboardscreen-maintitle {
float:center;
padding:10px;
}
// .cp-onboardscreen-form {
// // padding:10px;
// // position:relative;
// // height: 90%;
// }
.cp-onboardscreen-screentitle {
margin:auto;
padding:10px;
text-align:center;
float:center;
text-align: center;
.cp-onboardscreen-maintitle {
float:center;
padding:10px;
h1.cp-onboardscreen-title {
font-family: "IBM Plex Mono";
color: @cryptpad_color_brand;
font-size: 1.5rem;
font-weight: 500;
}
}
}
.cp-onboardscreen-title {
font-family: "IBM Plex Mono";
font-weight: 500;
nav.cp-onboardscreen-nav {
width: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.cp-onboardscreen-name {
width:70%;
float:right;
@ -116,26 +125,26 @@
padding-left:50%
}
.cp-onboardscreen-color {
width:200%;
height:20%;
margin-left: -65%;
margin-bottom: -10%;
}
// .cp-onboardscreen-color {
// width:200%;
// height:20%;
// margin-left: -65%;
// margin-bottom: -10%;
// }
.cp-onboardscreen-checkmark {
text-align:right !important;
color: white !important;
}
.cp-onboardscreen-nav {
padding-left:90%;
margin-right: -2px !important;
margin-top: 300px;
position:absolute;
width:100%;
display:float;
}
// .cp-onboardscreen-nav {
// padding-left:90%;
// margin-right: -2px !important;
// margin-top: 300px;
// position:absolute;
// width:100%;
// display:float;
// }
.cp-onboardscreen-prev {
margin-left: 20px;
@ -143,11 +152,11 @@
position: absolute;
}
.cp-onboardscreen-save {
right: 0;
position: absolute;
margin-right: 40px
}
// .cp-onboardscreen-save {
// right: 0;
// position: absolute;
// margin-right: 40px
// }
.cp-admin-customize-apps-grid {
padding: 10px;

8
www/install/onboardscreen.js
View File

@ -239,9 +239,9 @@ define([
var colorInput = h('div.cp-onboardscreen-color', colorBlock());
var screenTitle = h('div.cp-onboardscreen-screentitle');
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingNameTitle), h('br'), h('span', Messages.install_onboardingNameHint)));
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingNameTitle), h('span', Messages.install_onboardingNameHint)));
var nav = blocks.nav([button]);
$(button).addClass('cp-onboardscreen-save');
$(button).addClass('cp-onboardscreen-title-save');
$(nav).addClass('cp-onboardscreen-nav')
@ -313,7 +313,7 @@ define([
});
var screenTitle = h('div.cp-onboardscreen-screentitle');
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingAppsTitle), h('br'), h('span', Messages.install_onboardingAppsHint)))
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingAppsTitle), h('span', Messages.install_onboardingAppsHint)))
$(save).addClass('cp-onboardscreen-save');
$(prev).addClass('cp-onboardscreen-prev');
var nav = blocks.nav([prev, save])
@ -395,7 +395,7 @@ define([
});
var screenTitle = h('div.cp-onboardscreen-screentitle');
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingRegistrationTitle), h('br'), h('span', Messages.install_onboardingRegistrationHint)));
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingRegistrationTitle), h('span', Messages.install_onboardingRegistrationHint)));
$(save).addClass('cp-onboardscreen-save');
$(prev).addClass('cp-onboardscreen-prev');
var nav = blocks.nav([prev, save])