YasinOnm08/interstellar_ai
0
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
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>

68
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 {
margin: 2px;
margin-bottom: 0;
}
.conversation-container { header li img {
width: 90%; height: 1.5em;
vertical-align: middle;
margin-top: 10px;
}
/* Left panel styles */
.left-panel {
display: none; /* Initially hidden */
min-width: 90%; /* Takes full width when visible */
margin: 0;
} }
.left-panel.visible { .left-panel.visible {
display: block; display: block;
} }
/* Conversation container styles */
.conversation-container {
width: 90%;
height: 90%;
}
.conversation-container.collapsed { .conversation-container.collapsed {
display: none; width: 0;
padding: 0;
border: none;
overflow: hidden;
} }
.conversation-container.expanded { .conversation-container.expanded {
width: 100%; width: 100%;
} }
/* Grid styles */
.grid { .grid {
grid-template-columns: 1fr; /* One item per line */ grid-template-columns: 1fr; /* One item per line */
} }
/* Model box styles */
.model-box { .model-box {
max-width: none; /* Remove max-width constraint */ max-width: none; /* Remove max-width */
margin: 0 auto; /* Center each model-box */ margin: 0 auto; /* Center each model-box */
} }
/* Input styles */
.input { .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;