chookspace/chookchat-old
Archived
1
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Add eggs

Browse Source
This commit is contained in:
Maxwell Jeffress
2024-12-06 13:27:22 +11:00
parent 7ff5447388
commit e463d3dd2b
3 changed files with 219 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
client-web/index.css
View File

@@ -42,68 +42,17 @@ p {
border: 0px;
padding: 20px;
margin: 10px 10px;
flex-grow: 1; /* This makes it take up remaining space */
}
.section h2 {
margin: 20px;
}
.box p {
margin: 10px;
}
.box h3 {
margin: 10px;
}
.box img {
margin: 10px;
}
.box button {
margin: 10px;
flex-grow: 1;
}
.bluebutton {
color: white;
font-size: 12pt;
background: rgba(0, 0, 255, 0.3);
font-family: inter;
border-radius: 10px;
border: none;
padding: 8px 12px; /* Increased padding for better text containment */
max-width: none; /* Remove max-width restriction */
width: auto; /* Allow button to size to content */
margin: 5px 0; /* Add some vertical spacing */
white-space: normal; /* Allow text to wrap if needed */
word-wrap: break-word; /* Break long words if necessary */
text-align: center; /* Center the text */
cursor: pointer; /* Add pointer cursor for better UX */
}
.greenbutton {
color: white;
font-size: 12pt;
background: rgba(0, 255, 0, 0.3);
font-family: inter;
border-radius: 10px;
border: none;
padding: 5px;
}
.redbutton {
color: white;
font-size: 12pt;
background: rgba(255, 0, 0, 0.3);
font-family: inter;
border-radius: 10px;
border: none;
padding: 5px;
}
.backbutton {
color: white;
font-size: 12pt;
background: rgba(255, 0, 0, 0.3);
font-family: inter;
border-radius: 10px;
border: none;
padding: 5px;
}
.hidden {
display: none;
@@ -128,17 +77,19 @@ body {
align-items: center;
}
/* Update section styles */
.section {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 5px;
width: calc(100vw - 40px);
height: calc(100vh - 40px);
box-sizing: border-box; /* Add this to include padding in width calculation */
box-sizing: border-box;
}
.section h2 {
margin: 20px;
}
/* Update box styles */
.box {
color: white;
background: rgba(0, 0, 0, 0.5);
@@ -153,11 +104,23 @@ body {
align-items: center;
}
/* Special handling for messaging box */
.box p {
margin: 10px;
}
.box h3 {
margin: 10px;
}
.box img {
margin: 10px;
}
.box button {
margin: 10px;
}
#messaging .box {
max-width: none;
height: 100%;
position: relative; /* For absolute positioning of input container */
position: relative;
}
#messagebox {
@@ -170,14 +133,13 @@ body {
box-sizing: border-box;
}
/* Style for individual messages */
.message {
text-align: left;
margin: 5px 0;
width: 100%;
display: flex; /* Use flexbox for better content handling */
flex-direction: column; /* Stack content vertically */
align-items: flex-start; /* Align items to the left */
display: flex;
flex-direction: column;
align-items: flex-start;
}
.file {
@@ -186,12 +148,10 @@ body {
margin: 5px 0;
}
/* Create a container for message input and send button */
.input-container {
display: flex;
width: 100%;
gap: 10px; /* Space between input and button */
/* padding: 10px;*/
gap: 10px;
box-sizing: border-box;
}
@@ -208,21 +168,33 @@ input {
box-sizing: border-box;
}
/* Special style for message input */
#messageInput {
max-width: none;
flex-grow: 1; /* Take up remaining space */
margin: 0; /* Remove default margins */
flex-grow: 1;
margin: 0;
}
/* Update button styles */
.bluebutton, .greenbutton, .redbutton, .backbutton {
.bluebutton, .greenbutton, .redbutton {
max-width: 200px;
width: auto; /* Allow button to size to content */
margin: 0; /* Remove default margins */
white-space: nowrap; /* Prevent button text from wrapping */
width: auto;
margin: 0;
white-space: nowrap;
color: white;
font-size: 12pt;
font-family: inter;
border-radius: 10px;
border: none;
padding: 8px 12px;
max-width: none;
width: auto;
margin: 5px 0;
white-space: normal;
word-wrap: break-word;
text-align: center;
cursor: pointer;
}
.bluebutton:hover {
.bluebutton, .greenbutton, .redbutton:hover {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
}
@@ -246,17 +218,17 @@ input {
padding-left: 10px;
margin-bottom: 5px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.7); /* Makes it slightly subtle */
color: rgba(255, 255, 255, 0.7);
}
#users {
position: relative; /* Allow absolute positioning within */
position: relative;
width: 100%;
}
#meeting {
position: absolute;
right: 10px; /* Matches your box margin */
right: 10px;
top: 0;
cursor: pointer;
padding: 5px 10px;
@@ -278,3 +250,103 @@ input {
width: 80%;
height: 80%;
}
.eggs-panel {
position: absolute;
right: -300px;
top: 0;
width: 300px;
height: 100%;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
transition: right 0.3s ease;
}
.eggs-panel.visible {
right: -310px;
}
.eggs-list {
padding: 10px;
}
.egg-item {
width: 100%;
padding: 10px;
margin: 5px 0;
background: rgba(0, 0, 0, 0.3);
border: none;
border-radius: 5px;
color: white;
font-family: "inter";
cursor: pointer;
}
.egg-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.egg-content {
padding: 10px;
height: calc(100% - 20px);
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
margin: 10px;
}
#messaging {
width: 100%;
height: 100%;
}
.messaging-container {
display: flex;
flex-direction: row;
height: 100%;
position: relative;
}
.box {
flex: 1;
margin-right: 10px;
}
.eggs-panel {
width: 300px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
transition: transform 0.3s ease;
transform: translateX(100%);
height: 100%;
}
.eggs-panel.visible {
transform: translateX(0);
}
.eggs-list {
padding: 10px;
}
.egg-item {
width: 100%;
padding: 10px;
margin: 5px 0;
background: rgba(0, 0, 0, 0.3);
border: none;
border-radius: 5px;
color: white;
font-family: "inter";
cursor: pointer;
}
.egg-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.egg-content {
padding: 10px;
height: calc(100% - 20px);
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
margin: 10px;
}