BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added login page;

Browse Source 
- added file upload;
- added faq item edit modal;
This commit is contained in:
Vitalii Kiiko
2024-08-23 16:55:19 +02:00
parent 0a21444ee4
commit 5095ed7365
50 changed files with 1540 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/scss/components/appForm.scss
View File

@@ -7,6 +7,7 @@
display: flex;
flex-direction: column;
gap: 14px;
padding: 5px 0;
label {
font-size: 14px;
@@ -40,14 +41,32 @@
}
}
}
.appForm__fileUploadItem {
display: flex;
justify-content: space-between;
}
.appForm__fileUploadItemName {
}
.appForm__row {
display: flex;
gap: 7px;
align-items: center;
}
.appForm__oneCol {
display: flex;
flex-direction: column;
gap: 7px;
label {
font-weight: 400;
}
}
.appForm__twoCols {
display: flex;
gap: 1rem;
@@ -99,4 +118,12 @@
.appForm__faqTabItem {
display: flex;
gap: 0.5rem;
align-items: center;
.p-togglebutton[data-p-highlight="true"] {
.p-button:not(.p-button-danger) {
background: var(--menuitem-active-background);
border: 1px solid var(--menuitem-active-background);
}
}
}

14
src/assets/scss/components/appPage.scss
View File

@@ -1,6 +1,7 @@
.appPage {
display: flex;
flex-direction: column;
flex-grow: 2;
h1 {
color: var(--primary-color);
@@ -26,6 +27,10 @@
}
}
.appPageSection__table {
width: 100%;
}
.appTableHeader {
display: flex;
justify-content: space-between;
@@ -65,12 +70,5 @@
.appPageSection__actions {
display: flex;
gap: 24px;
margin-bottom: 24px;
}
.mb-2 {
margin-bottom: 4px;
}
.mb-8 {
margin-bottom: 16px;
padding: 24px 0 48px;
}

26
src/assets/scss/components/formBuilder.scss
View File

@@ -32,6 +32,9 @@
.formBuilder__element {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 10px 20px;
border: 1px dashed var(--button-secondary-borderColor);
font-size: 14px;
@@ -61,14 +64,21 @@
list-style: none;
padding: 0;
margin: 0;
}
.formBuilder__elementItem {
display: flex;
padding: 10px 20px;
border: 1px dashed var(--button-secondary-borderColor);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
li {
display: flex;
padding: 10px 20px;
border: 1px dashed var(--button-secondary-borderColor);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
&:hover {
cursor: grab;
}
}
.formBuilder__elementSettings {
width: 40rem;
}

89
src/assets/scss/components/layout.scss Normal file
View File

@@ -0,0 +1,89 @@
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0;
font-family: 'Montserrat';
p, span, input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
font-family: 'Montserrat';
color: var(--global-textColor);
}
}
#root, .wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.inner {
display: flex;
height: 100%;
min-height: 0;
flex-grow: 1;
> aside {
flex: 0 0 320px;
border-right: 1px solid var(--menu-borderColor);
ul {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
li a, li button {
display: flex;
padding: 10.5px 17.5px;
align-items: center;
gap: 7px;
width: 100%;
border: 0;
border-bottom: 1px solid var(--menu-borderColor);
color: var(--menuitem-color);
background-color: transparent;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%;
text-decoration: none;
&:hover {
cursor: pointer;
}
i {
color: var(--text-color-secondary);
}
&.active {
color: var(--menuitem-active-color);
background-color: var(--menuitem-active-background);
i {
color: white;
}
span {
color: var(--menuitem-active-color);
}
}
}
}
}
> main {
flex: 1 1 auto;
box-sizing: border-box;
padding: 0 24px 50px;
}
}

14
src/assets/scss/components/login.scss Normal file
View File

@@ -0,0 +1,14 @@
.appPageLogin {
display: flex;
justify-content: center;
align-items: center;
}
.appPageLogin__wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 540px;
padding: 24px;
}

59
src/assets/scss/components/misc.scss Normal file
View File

@@ -0,0 +1,59 @@
.p-steps {
.p-highlight {
span.p-steps-number {
color: var(--menuitem-active-color);
}
}
}
.p-badge {
color: var(--menuitem-active-color);
}
.p-button:not(.p-button-outlined, .p-button-secondary),
.p-button:not(.p-button-outlined, .p-button-secondary) span {
color: var(--menuitem-active-color);
}
.p-fileupload-row {
.p-button-danger {
background-color: #f44336;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
.p-tag {
.p-tag-value {
color: var(--menuitem-active-color);
}
}
.p-paginator-page {
color: var(--menuitem-active-color);
}
.p-datepicker-buttonbar .p-button {
color: var(--global-textColor);
}
.p-message.p-message-error {
background: #ffdbdb;
border-left: 5px solid #C2504D;
svg {
path {
fill: var(--global-textColor);
}
}
}
.mb-2 {
margin-bottom: 4px;
}
.mb-8 {
margin-bottom: 16px;
}
.mr-8 {
margin-right: 16px;
}

1
src/assets/scss/components/statsBigBadges.scss
View File

@@ -5,6 +5,7 @@
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
gap: 24px;
width: 100%;
}
.statsBigBadges__gridItem {

91
src/assets/scss/theme.scss
View File

@@ -12,6 +12,7 @@
--card-borderColor-color: #EEC137;
--button-secondary-borderColor: #C79807;
--button-secondary-background: var(--menu-borderColor);
--global-textColor: #4B5563;
--card-full-background-color-2: #EEC137;
--card-full-background-color-3: #FA8E42;
@@ -19,95 +20,13 @@
--card-full-background-color-1: #3B7C43;
}
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0;
font-family: 'Montserrat';
p, span, input, label, textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
font-family: 'Montserrat';
}
}
#root, .wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.inner {
display: flex;
height: 100%;
min-height: 0;
flex-grow: 1;
> aside {
flex: 0 0 320px;
border-right: 1px solid var(--menu-borderColor);
ul {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
li a, li button {
display: flex;
padding: 10.5px 17.5px;
align-items: center;
gap: 7px;
width: 100%;
border: 0;
border-bottom: 1px solid var(--menu-borderColor);
color: var(--menuitem-color);
background-color: transparent;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%;
text-decoration: none;
&:hover {
cursor: pointer;
}
i {
color: var(--text-color-secondary);
}
&.active {
color: var(--menuitem-active-color);
background-color: var(--menuitem-active-background);
i {
color: white;
}
}
}
}
}
> main {
flex: 1 1 auto;
box-sizing: border-box;
padding: 0 24px 50px;
}
}
@import "./components/layout.scss";
@import "./components/topBar.scss";
@import "./components/appPage.scss";
@import "./components/statsBigBadges.scss";
@import "./components/bandoStatusTag.scss";
@import "./components/appForm.scss";
@import "./components/pageBando.scss";
@import "./components/formBuilder.scss";
@import "./components/formBuilder.scss";
@import "./components/misc.scss";
@import "./components/login.scss";