Skip to content

Commit

Permalink
Merge pull request #11 from Metal079/develop
Browse files Browse the repository at this point in the history 
add lora filtering options + nsfw filter
  • Loading branch information
@Metal079
Metal079 authored Dec 5, 2024
2 parents 9375e1c + 4a2e24a commit 5b82bce
Show file tree
Hide file tree
Showing 6 changed files with 285 additions and 134 deletions.
8 changes: 8 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ import { DialogService } from 'primeng/dynamicdialog';
import { PanelModule } from 'primeng/panel';
import { ChipModule } from 'primeng/chip';
import { DialogModule } from 'primeng/dialog';
import { InputSwitchModule } from 'primeng/inputswitch';
import { SelectButtonModule } from 'primeng/selectbutton';
import { ChipsModule } from 'primeng/chips';
import { MultiSelectModule } from 'primeng/multiselect';


const routes: Routes = [
Expand Down Expand Up @@ -56,6 +60,10 @@ const routes: Routes = [
ChipModule,
ButtonModule,
DialogModule,
InputSwitchModule,
SelectButtonModule,
ChipsModule,
MultiSelectModule,
FileUploadModule,
AccordionModule,
ImageModule,
Expand Down
168 changes: 118 additions & 50 deletions src/app/home/options/options.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@
flex-wrap: wrap;
align-items: center;
justify-content: start;
gap: 10px; /* Space between items */
gap: 10px;
/* Space between items */
}

/* Includes prompt input box and generate button */
#prompt-input-box {
padding-left: 10px;
padding-bottom: 10px;
flex-grow: 1; /* Allow the input box to grow and take available space */
flex-grow: 1;
/* Allow the input box to grow and take available space */
}

/* The input box itself where text is */
Expand Down Expand Up @@ -44,7 +46,8 @@

.search-bar {
width: 100%;
margin-bottom: 15px; /* Add space below the search bar */
margin-bottom: 10px;
/* Add space below the search bar */
}

.search-bar input {
Expand All @@ -54,12 +57,16 @@

.history-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Enforce 2 columns */
grid-template-columns: repeat(2, 1fr);
/* Enforce 2 columns */
grid-gap: 10px;
margin-top: 10px;
max-width: 400px; /* Set a maximum width for the grid container */
margin-left: auto; /* Center the grid horizontally */
margin-right: auto; /* Center the grid horizontally */
max-width: 400px;
/* Set a maximum width for the grid container */
margin-left: auto;
/* Center the grid horizontally */
margin-right: auto;
/* Center the grid horizontally */
}

.history-item {
Expand All @@ -69,9 +76,12 @@
.history-item img {
width: 100%;
height: auto;
border-radius: 6px; /* Slightly larger border radius for a smoother look */
aspect-ratio: 1 / 1; /* This will make the image container square */
object-fit: cover; /* Ensure the image covers its container */
border-radius: 6px;
/* Slightly larger border radius for a smoother look */
aspect-ratio: 1 / 1;
/* This will make the image container square */
object-fit: cover;
/* Ensure the image covers its container */
}

.history-details {
Expand Down Expand Up @@ -105,46 +115,63 @@
}

.card-body {
min-height: 75vh; /* Start with 50% of the viewport height */
max-height: fit-content ;
overflow-y: auto; /* Allow scrolling if content exceeds max-height */
min-height: 75vh;
/* Start with 50% of the viewport height */
max-height: fit-content;
overflow-y: auto;
/* Allow scrolling if content exceeds max-height */
transition: height 0.5s ease-in-out;
max-width: 600px;
overflow: hidden
}

.pagination {
display: flex;
justify-content: space-between; /* Space buttons evenly */
justify-content: space-between;
/* Space buttons evenly */
margin-top: 20px;
}

.pagination .btn {
width: 48%; /* Make pagination buttons larger */
padding: 10px 0; /* Increase padding for easier tapping */
width: 48%;
/* Make pagination buttons larger */
padding: 10px 0;
/* Increase padding for easier tapping */
}

/* loras */
.lora-filters {
display: flex;
flex-wrap: wrap;
}

.loras-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
overflow-y: auto; /* Enable scrolling if the content exceeds the height */
display: flex;
flex-wrap: wrap;
gap: 15px;
/* Space between items */
overflow-y: auto;
/* Enable scrolling if the content exceeds the height */
overflow-x: hidden;
/* Hide horizontal scrollbar */
}

.lora-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: visible;
min-height: 190px; /* Set a minimum height to prevent layout shifts */
max-width: 600px; /* Enforce a consistent card width */
min-height: 190px;
/* Set a minimum height to prevent layout shifts */
max-width: 600px;
/* Enforce a consistent card width */
}

.lora-image {
width: 100%;
height: 100px;
height: 150px;
object-fit: cover;
object-position: center top; /* Align the image towards the top */
object-position: center top;
/* Align the image towards the top */
}

.lora-info {
Expand All @@ -167,7 +194,8 @@
}

.selected-lora-item-container {
max-height: 150px; /* Adjust this value as needed */
max-height: 150px;
/* Adjust this value as needed */
overflow-y: auto;
padding: 10px;
}
Expand All @@ -178,7 +206,8 @@
align-items: center;
margin-bottom: 10px;
/* flex-wrap: nowrap; Prevent wrapping */
max-width: 30%; /* Ensure it doesn't exceed the container width */
max-width: 30%;
/* Ensure it doesn't exceed the container width */
}

.selected-lora-image {
Expand All @@ -192,24 +221,26 @@
margin-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* Prevent wrapping */
max-width: 100%; /* Adjust based on image and button width */
white-space: nowrap;
/* Prevent wrapping */
max-width: 100%;
/* Adjust based on image and button width */
}

/* Menu dropdowns */
#collapseExample{
#collapseExample {
margin-left: 20px;
}

#historyCollapse{
#historyCollapse {
margin-left: 20px;
}

#lorasCollapse{
#lorasCollapse {
margin-left: 20px;
}

#lorasDropdown{
#lorasDropdown {
max-height: 75vh;
}

Expand All @@ -218,13 +249,16 @@
}

.history-item img:hover {
transform: scale(1.05); /* Slight zoom */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
transform: scale(1.05);
/* Slight zoom */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
/* Add a shadow on hover */
}

/* Increase spacing between images */
.history-grid {
grid-gap: 20px; /* Increase space between items */
grid-gap: 20px;
/* Increase space between items */
}

.image-container {
Expand Down Expand Up @@ -252,6 +286,16 @@
border-radius: 50%;
}

.lora-card {
width: calc(33% - 15px);
border: 1px solid #ddd;
box-sizing: border-box;
}

.btn.btn-primary.lora-request-btn {
width: 100%;
}

@media (max-width: 768px) {
.button-group {
flex-direction: row;
Expand All @@ -261,8 +305,8 @@
.button-group .btn {
width: 95%;
margin-bottom: 10px;
padding: 12px 0;
font-size: 16px;
padding: 12px 0;
font-size: 16px;
margin-left: 0;
}

Expand Down Expand Up @@ -307,21 +351,26 @@

#advanced-options {
width: 97vw;
padding-left: 20px; /* Increased padding for consistent spacing */
padding-left: 20px;
/* Increased padding for consistent spacing */
}

.p-inputtext {
padding-right: 0px;
}

.history-grid {
grid-template-columns: repeat(2, 1fr); /* Ensure a 2x2 grid on mobile */
grid-template-columns: repeat(2, 1fr);
/* Ensure a 2x2 grid on mobile */
}

.card-body {
min-height: 70vh; /* Start with 50% of the viewport height */
max-height: 80vh; /* Don't exceed 80% of the viewport height */
overflow-y: auto; /* Allow scrolling if content exceeds max-height */
min-height: 70vh;
/* Start with 50% of the viewport height */
max-height: 80vh;
/* Don't exceed 80% of the viewport height */
overflow-y: auto;
/* Allow scrolling if content exceeds max-height */
transition: height 0.5s ease-in-out;
}

Expand All @@ -332,25 +381,44 @@
}

.pagination .btn {
width: 48%; /* Ensure pagination buttons are easy to tap */
width: 48%;
/* Ensure pagination buttons are easy to tap */
padding: 10px 0;
}

/* Menu dropdowns */
#collapseExample{
#collapseExample {
margin-left: 0;
}
#historyCollapse{

#historyCollapse {
margin-left: 0;
}
#lorasCollapse{

#lorasCollapse {
margin-left: 0;
}

#lorasDropdown{
#lorasDropdown {
min-height: 60vh;
max-height: 70vh;
}
}

.lora-card {
width: calc(50% - 15px);
}

p {
font-size: 0.9rem; /* Slightly smaller text */
margin-bottom: 5px;
}

.d-flex.justify-content-between.mb-3 {
flex-direction: column;
align-items: stretch; /* Make them full width */
}

.d-flex.justify-content-between.mb-3 input {
margin-bottom: 0px;
}
}
Loading

0 comments on commit 5b82bce

Please sign in to comment.