lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: improved UI by adding CSS files

Browse source
This commit is contained in:
Lukian 2025-04-06 17:47:51 +02:00
parent 1656e95557
commit 42e6acd9ca
19 changed files with 543 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

35
front/src/styles/ChannelPage.css Normal file
View file

@ -0,0 +1,35 @@
.channel-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
.channel {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}
.message-form {
margin: 16px 0;
}
.login-prompt {
margin: 16px 0;
display: flex;
flex-direction: row;
gap: 10px;
}
.messages-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
}

15
front/src/styles/ChannelsPage.css Normal file
View file

@ -0,0 +1,15 @@
.channels-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
.channels-page-channels {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}

14
front/src/styles/CreateChannel.css Normal file
View file

@ -0,0 +1,14 @@
.create-channel-page {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
gap: 20px;
}
.create-channel {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}

71
front/src/styles/Home.css Normal file
View file

@ -0,0 +1,71 @@
.home {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
.main-content {
display: flex;
justify-content: space-around;
align-items: top;
width: 100%;
min-height: 100%;
}
.home-header {
width: 97%;
border: 1px solid #270722;
display: flex;
justify-content: space-between;
align-items: top;
padding: 10px;
}
.home-messages {
width: 60%;
border: 1px solid #270722;
padding: 10px;
}
.messages-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.channels {
width: 34%;
border: 1px solid #270722;
min-height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
}
@media (max-width: 800px) {
.home-header {
flex-direction: column;
align-items: center;
}
.main-content {
flex-direction: column;
align-items: center;
gap: 20px;
}
.home-messages {
width: 97%;
}
.channels {
width: 97%;
}
}

14
front/src/styles/Login.css Normal file
View file

@ -0,0 +1,14 @@
.login-page {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
gap: 20px;
}
.login {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}

5
front/src/styles/MessageComponent.css Normal file
View file

@ -0,0 +1,5 @@
.message {
width: 95%;
border: 1px solid #270722;
padding: 10px;
}

14
front/src/styles/Register.css Normal file
View file

@ -0,0 +1,14 @@
.register-page {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
gap: 20px;
}
.register {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}

39
front/src/styles/TopBar.css Normal file
View file

@ -0,0 +1,39 @@
.topbar {
width: 97%;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #270722;
padding: 10px;
}
.topbar-left {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.topbar-right {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
@media (max-width: 560px) {
.topbar {
flex-direction: column;
align-items: center;
}
.topbar-left {
flex-direction: column;
align-items: center;
}
.topbar-right {
flex-direction: column;
align-items: center;
}
}

30
front/src/styles/UserPage.css Normal file
View file

@ -0,0 +1,30 @@
.user-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
.user {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}
.user-messages {
width: 97%;
border: 1px solid #270722;
padding: 10px;
}
.messages-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
}