mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-14 11:05:41 +05:00
Onboarding application grid UI
This commit is contained in:
parent
4c465965af
commit
040c63b533
@ -39,30 +39,39 @@
|
||||
|
||||
.cp-admin-customize-apps-grid, .cp-admin-customize-options-grid {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
.cp-appblock {
|
||||
|
||||
}
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cp-admin-customize-apps-grid {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
.cp-appblock {
|
||||
background-color: fade(@cryptpad_text_col, 10%);
|
||||
padding: 0.3rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: @variables_radius;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.iconColors_main();
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
i.cp-icon {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
.cp-app-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.cp-inactive-app {
|
||||
background-color: transparent;
|
||||
opacity: 0.75;
|
||||
.cp-on-enabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.cp-active-app {
|
||||
background-color: fade(@cryptpad_text_col, 10%);
|
||||
.cp-on-enabled {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -70,7 +79,6 @@
|
||||
}
|
||||
|
||||
.cp-admin-customize-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
|
||||
@ -42,19 +42,6 @@
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.cp-appblock {
|
||||
.iconColors_main();
|
||||
}
|
||||
.cp-inactive-app {
|
||||
.cp-on-enabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.cp-active-app {
|
||||
.cp-on-enabled {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,21 +63,16 @@
|
||||
.cp-onboardscreen-screentitle {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
.cp-onboardscreen-maintitle {
|
||||
float:center;
|
||||
padding:10px;
|
||||
|
||||
h1.cp-onboardscreen-title {
|
||||
font-family: "IBM Plex Mono";
|
||||
color: @cryptpad_color_link;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
margin-bottom: 1rem;
|
||||
h1.cp-onboardscreen-title {
|
||||
font-family: "IBM Plex Mono";
|
||||
color: @cryptpad_color_link;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.cp-instance-form {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2rem;
|
||||
@ -138,6 +120,7 @@ nav.cp-onboardscreen-nav {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -236,9 +236,11 @@ define([
|
||||
allApps.forEach(app => {
|
||||
let name = Messages.type[app] || app;
|
||||
let icon = UI.getNewIcon(app);
|
||||
let appBlock = h('div.cp-appblock', [
|
||||
let appBlock = h('div.cp-appblock',
|
||||
{tabindex:0, role:"button"},
|
||||
[
|
||||
icon,
|
||||
h('span', name),
|
||||
h('span.cp-app-name', name),
|
||||
h('i.fa.fa-check.cp-on-enabled')
|
||||
]);
|
||||
let $app = $(appBlock).appendTo($grid);
|
||||
@ -312,7 +314,7 @@ define([
|
||||
});
|
||||
|
||||
|
||||
let mfaOption = h('div', [
|
||||
let mfaOption = h('div.cp-optionblock', [
|
||||
forceMFA,
|
||||
h('br'),
|
||||
h('span', Messages.admin_onboardingMfa)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user