YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Responsive design #7

Merged
Patrick_Pluto merged 4 commits from React-Group/interstellar_ai:main into main 2024-09-19 15:07:03 +02:00
Conversation 0 Commits 4 Files changed 2 +59 -66
2 changed files with 59 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/styles/output.css
View file

@ -62,6 +62,7 @@
background-color: var(--button-background-color); background-color: var(--button-background-color);
border-radius: 50%; border-radius: 50%;
padding: 10px; padding: 10px;
padding-top: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }

106
app/styles/responsive.css
View file

@ -1,76 +1,68 @@
/* responsive.css */
/* Responsive behavior - applies only on smaller screens */ /* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) { @media (max-width: 1200px) {
/* Left panel as an overlay */
.left-panel {
margin: 0 auto;
min-width: 100vw;
max-width: 100vw;
padding: 1em;
}
.left-panel.hidden {
width: 0;
/* Set width to 0 when hidden */
visibility: hidden;
/* Fully hide the panel */
margin: 0;
padding: 0;
overflow: hidden;
}
header {
height: 125px;
}
header li{ header li{
flex-direction: column;
display: block; display: block;
padding: 2px;
} }
body { .container {
margin-top: 100px; display: flex;
justify-content: center; /* Centers horizontally */
width: 90vw;
margin-top: 10vh;
} }
.conversation-container.expanded { .left-panel {
display: none; /* Initially hidden */
width: 0; min-width: 90%; /* Takes full width when shown */
/* Set width to 0 when hidden */
visibility: hidden;
/* Fully hide the panel */
margin: 0; margin: 0;
padding: 0; }
overflow: hidden;
.conversation-container {
width: 90%;
}
.left-panel.visible {
display: block;
} }
.conversation-container.collapsed { .conversation-container.collapsed {
display: none;
}
.conversation-container.expanded {
width: 100%;
}
.grid {
grid-template-columns: 1fr; /* One item per line */
}
.model-box {
max-width: none; /* Remove max-width constraint */
margin: 0 auto; /* Center each model-box */
}
.input {
grid-column: 1 / -1;
flex-direction: row;
gap: 10px;
padding: 0.5em;
margin: 0 auto; margin: 0 auto;
min-width: 100vw; align-items: center;
max-width: 100vw; width: 90%;
padding: 1em;
margin-left: 0;
}
} }
/* Responsive design adjustments */ .input input {
@media (max-width: 768px) { font-size: 1em; /* Adjust font size */
.title { max-width: 65%;
font-size: 1.5rem; margin-right: 0;
} }
.subtitle { .input button {
font-size: 1.25rem; height: 40px; /* Adjust button height */
} width: 40px; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */
.subsection-title { margin: auto;
font-size: 1rem;
}
.paragraph {
font-size: 0.9rem;
} }
} }