e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of UI tweaks

Browse Source
This commit is contained in:
Colin Dawson 2026-01-31 23:27:01 +00:00
parent 7ad4f58801
commit c95d7b469c
8 changed files with 219 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Sass/_ckEditor.scss
View File

@ -1,16 +1,13 @@
@import './_esuiteVariables.scss';
@import "./_esuiteVariables.scss";
.form-editor {
min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
width: 100%;
}
.mailTemplate-editor {
min-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
max-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
width: calc(100% - ($gridGap + $mailtemplateNameListWidth));
}
@media print {
body {
margin: 0 !important;
@ -19,14 +16,14 @@
.ck-main-container {
// --ckeditor5-preview-height: 700px;
font-family: 'Lato';
font-family: "Lato";
width: fit-content;
margin-left: auto;
margin-right: auto;
.ck {
.ck-dropdown__panel {
.ck-list{
.ck-list {
max-height: 30vh;
overflow-y: auto;
}
@ -35,7 +32,7 @@
}
.ck-content {
font-family: 'Lato';
font-family: "Lato";
line-height: 1.6;
word-break: break-word;
@ -69,7 +66,9 @@
border-right: 0;
}
.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar {
.editor-container_document-editor
.editor-container__menu-bar
> .ck.ck-menu-bar {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top: 0;
@ -90,7 +89,9 @@
// height: 100%;
// }
.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable {
.editor-container_document-editor
.editor-container__editor
.ck.ck-editor__editable {
box-sizing: border-box;
//min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2)));
//max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2)));
@ -111,7 +112,6 @@
// margin-right: 72px;
}
.ck-toolbar {
background: hsl(0, 0%, 100%);
color: black;

1
src/Sass/_esuiteVariables.scss
View File

@ -24,7 +24,6 @@ $frameWorkAreaPadding: 16px;
$mailtemplateNameListWidth: 245px;
//Left Menu
$leftMenuWidth: 70px;
$leftMenu-background: #2c2c2e;
$leftMenu-color: #ddd;
$leftMenu-HoverColour: $blue;

46
src/Sass/_leftMenu.scss
View File

@ -9,15 +9,22 @@
color: $leftMenu-submenu-open !important;
}
.leftMenu {
.leftMenuContainer {
position: relative;
height: 100%;
width: $leftMenuWidth;
background-color: $leftMenu-background;
color: $leftMenu-color;
padding-top: 5px;
}
.LeftMenuItem{
.leftMenu {
height: 100%;
width: fit-content;
min-width: 70px;
max-width: 200px;
background-color: $leftMenu-background;
color: $leftMenu-color;
padding: 5px 8px;
}
.LeftMenuItem {
width: 100%;
height: 72px;
padding-top: 10px;
@ -36,7 +43,7 @@
.leftMenuItemIcon {
margin: 0;
position: absolute;
left:50%;
left: 50%;
transform: translatex(-50%);
height: 50%;
@ -48,9 +55,13 @@
line-height: 100%;
}
.leftMenuItemLabel{
.leftMenuItemLabel {
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
}
.leftMenuSubMenu {
@ -64,12 +75,14 @@
.subbar {
background-color: $leftMenu-background;
height: 100%;
left: $leftMenuWidth;
position: fixed;
top: $headerHeight;
left: 100%;
position: absolute;
top: 0;
width: 235px;
z-index: 1000;
border-left: 1px inset #999;
transform-origin: left;
animation: slideOut 0.3s ease-in-out;
.header {
color: $leftMenu-color;
@ -97,3 +110,14 @@
}
}
}
@keyframes slideOut {
from {
transform: scaleX(0);
opacity: 0;
}
to {
transform: scaleX(1);
opacity: 1;
}
}

21
src/Sass/horizionalTabs.scss
View File

@ -1,7 +1,16 @@
.horizionalTabs {
.tab-list {
border-bottom: 1px solid #ccc;
padding-left: 0;
display: flex;
align-items: bottom;
&::after {
content: "";
flex: 1;
margin-bottom: -1px;
border-bottom: 1px solid;
background-color: inherit;
}
}
.tab-list-item {
@ -12,8 +21,14 @@
}
.tab-list-active {
background-color: white;
border: solid #ccc;
border: solid;
border-width: 1px 1px 0 1px;
background-color: inherit;
}
.tab-list-inactive {
border: solid;
border-width: 0 0 1px 0;
background-color: inherit;
}
}

1
src/Sass/vars.scss
View File

@ -2,7 +2,6 @@
$frameWorkAreaPadding: 16px;
//Left Menu
$leftMenuWidth: 70px;
$leftMenu-background: #2c2c2e;
$leftMenu-color: #ddd;
$leftMenu-HoverColour: $blue;

3
src/components/common/HorizionalTabs.tsx
View File

@ -36,7 +36,6 @@ const HorizontalTabs: React.FC<HorizontalTabsProps> = ({
return (
<div className="horizionalTabs">
<div>
<ul className="tab-list">
{children.map((child) => {
const { label } = child.props;
@ -50,8 +49,6 @@ const HorizontalTabs: React.FC<HorizontalTabsProps> = ({
);
})}
</ul>
</div>
<div>{activeTabChildren}</div>
</div>
);

2
src/components/common/TabHeader.tsx
View File

@ -15,7 +15,7 @@ export default function TabHeader({
const className = isActive
? "tab-list-item tab-list-active"
: "tab-list-item";
: "tab-list-item tab-list-inactive";
return (
<li className={className} onClick={handleClick}>

4
src/modules/frame/components/LeftMenu.tsx
View File

@ -62,7 +62,7 @@ const LeftMenu: React.FC = () => {
const viewSupport = viewAuditLog || viewBlockedIPAddresses || viewErrorLogs;
return (
<>
<div className="leftMenuContainer">
<div className="leftMenu">
<LeftMenuItem to="/" icon={faHome} label={t("Home")} />
@ -124,7 +124,7 @@ const LeftMenu: React.FC = () => {
</div>
{openMenuItem && <div className="subbar">{openMenuItem.children}</div>}
</>
</div>
);
};