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

Responsive design update

Browse source
This commit is contained in:
sageTheDM 2024-09-19 16:27:24 +02:00
parent e7f4e7a052
commit 06b92492ae
2 changed files with 82 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Header.tsx
View file

@ -14,7 +14,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
<header> <header>
<ul> <ul>
<li> <li>
<button onClick={() => onViewChange('AI')} className="header-button"> <button onClick={() => onViewChange('AI')} className="header-button header-logo">
<img src="/img/logo.png" alt="logo" className="header-logo" /> <img src="/img/logo.png" alt="logo" className="header-logo" />
</button> </button>
</li> </li>

106
app/styles/responsive.css
View file

@ -1,51 +1,93 @@
/* Responsive behavior - applies only on smaller screens */ /* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) { @media (max-width: 1200px) {
header li{ *{
display: block; margin: 0;
padding: 0;
} }
/* Header styles */
header {
flex-direction: column;
align-items: center;
position: relative;
top: 0;
left: 0;
margin-top: 5px;
padding-top: 0;
width: 100%;
}
/* Container styles */
.container { .container {
display: flex; display: flex;
justify-content: center; /* Centers horizontally */ flex-direction: column;
width: 90vw; align-items: center;
margin-top: 10vh; width: 100vw;
overflow: hidden;
margin: 0;
padding: 0;
} }
.left-panel { header li{
display: none; /* Initially hidden */ display: flex;
min-width: 90%; /* Takes full width when shown */ flex-direction: column;
justify-content: center;
margin: 0; margin: 0;
} }
header li button {
.conversation-container { margin: 2px;
width: 90%; margin-bottom: 0;
} }
.left-panel.visible { header li img {
display: block; height: 1.5em;
vertical-align: middle;
margin-top: 10px;
} }
.conversation-container.collapsed { /* Left panel styles */
display: none; .left-panel {
display: none; /* Initially hidden */
min-width: 90%; /* Takes full width when visible */
margin: 0;
} }
.conversation-container.expanded { .left-panel.visible {
width: 100%; display: block;
} }
.grid { /* Conversation container styles */
.conversation-container {
width: 90%;
height: 90%;
}
.conversation-container.collapsed {
width: 0;
padding: 0;
border: none;
overflow: hidden;
}
.conversation-container.expanded {
width: 100%;
}
/* Grid styles */
.grid {
grid-template-columns: 1fr; /* One item per line */ grid-template-columns: 1fr; /* One item per line */
} }
.model-box { /* Model box styles */
max-width: none; /* Remove max-width constraint */ .model-box {
margin: 0 auto; /* Center each model-box */ max-width: none; /* Remove max-width */
margin: 0 auto; /* Center each model-box */
} }
.input { /* Input styles */
.input {
grid-column: 1 / -1; grid-column: 1 / -1;
flex-direction: row;
gap: 10px; gap: 10px;
padding: 0.5em; padding: 0.5em;
margin: 0 auto; margin: 0 auto;
@ -53,16 +95,16 @@
width: 90%; width: 90%;
} }
.input input { .input input {
font-size: 1em; /* Adjust font size */ font-size: 1em; /* Adjust font size */
max-width: 65%; max-width: 65%;
margin-right: 0; margin-right: 0;
} }
.input button { .input button {
height: 40px; /* Adjust button height */ height: 40px; /* Adjust button height */
width: 40px; /* Adjust button width */ width: 40px; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */ font-size: 1.2em; /* Adjust button font size */
margin: auto; margin: auto;
} }
} }