mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-14 20:11:10 +00:00
redesigns and bug fixes
This commit is contained in:
supertiger1234
parent
ffa527bab3
commit
7160a1fd88
10 changed files with 101 additions and 54 deletions
|
|
@ -47,12 +47,10 @@ export default {
|
|||
.edit-panel {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
background: rgba(23, 112, 255, 0.877);
|
||||
background: #0f272a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index:1;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.top{
|
||||
|
|
@ -63,16 +61,15 @@ export default {
|
|||
}
|
||||
.close-button {
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.199);
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
background: #304548;
|
||||
padding: 4px;
|
||||
align-self: flex-end;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close-button:hover {
|
||||
background: rgba(0, 0, 0, 0.431);
|
||||
background: #485b5d;
|
||||
}
|
||||
.message {
|
||||
color: rgb(214, 214, 214);
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
class="tab"
|
||||
:class="{notifyAnimation: friendRequestExists, selected: currentTab === 0}"
|
||||
@click="currentTab = 0"
|
||||
>Friends</div>
|
||||
><div class="material-icons">group</div>Friends</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{notifyAnimation: DMNotification, selected: currentTab === 1 }"
|
||||
@click="currentTab = 1"
|
||||
>Recents</div>
|
||||
><div class="material-icons">access_time</div>Recents</div>
|
||||
</div>
|
||||
<div v-if="currentTab === 0" class="list">
|
||||
<pending-friends />
|
||||
|
|
@ -136,15 +136,41 @@ export default {
|
|||
height: 50px;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: #097279;
|
||||
}
|
||||
|
||||
.tab.selected {
|
||||
background: #075e64;
|
||||
position: relative;
|
||||
}
|
||||
.tab .material-icons {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.tab:hover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgb(177, 177, 177);
|
||||
}
|
||||
.tab::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.tab.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* ------- SCROLL BAR -------*/
|
||||
/* width */
|
||||
.list::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -816,16 +816,15 @@ export default {
|
|||
|
||||
.back-to-bottom-button {
|
||||
&:hover {
|
||||
background: rgb(23, 124, 255);
|
||||
background: #748b8e;
|
||||
box-shadow: 0px 0px 15px 0px #0000008a;
|
||||
}
|
||||
transition: 0.2s;
|
||||
background: rgba(23, 124, 255, 0.818);
|
||||
background: #516e72;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 25px;
|
||||
border-radius: 10px;
|
||||
height: 50px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="date">{{ getDate }}</div>
|
||||
</div>
|
||||
<SimpleMarkdown class="content-message" :message="message" />
|
||||
<div class="file-content" v-if="getFile">
|
||||
<div class="file-content" v-if="getFile && !getFile.fileName.endsWith('.mp3')">
|
||||
<div class="icon">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
</div>
|
||||
|
|
@ -33,6 +33,12 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="getFile && getFile.fileName.endsWith('.mp3')" class="file-content music">
|
||||
<div class="info">{{ getFile.fileName }}</div>
|
||||
<audio controls>
|
||||
<source :src="getFile.url" type="audio/mp3">
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
<div class="image-content" ref="image" v-if="getImage">
|
||||
<img :src="getImage" @click="imageClicked" />
|
||||
|
|
@ -320,13 +326,12 @@ export default {
|
|||
}
|
||||
|
||||
.ownMessageLeft .triangle-inner {
|
||||
border-left: 8px solid rgba(184, 184, 184, 0.219);
|
||||
border-left: 8px solid #3a585c;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.ownMessageLeft .avatar {
|
||||
margin-right: 0px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.ownMessageLeft .sending-status {
|
||||
margin-left: auto !important;
|
||||
|
|
@ -335,14 +340,16 @@ export default {
|
|||
|
||||
.message {
|
||||
margin: 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ownMessage .triangle-inner {
|
||||
border-right: 8px solid rgba(184, 184, 184, 0.219);
|
||||
border-right: 8px solid #3a585c;
|
||||
}
|
||||
.ownMessage .content {
|
||||
background: rgba(184, 184, 184, 0.219);
|
||||
background: #3a585c;
|
||||
}
|
||||
|
||||
.ownMessage .date {
|
||||
|
|
@ -351,24 +358,31 @@ export default {
|
|||
|
||||
.file-content {
|
||||
display: flex;
|
||||
background: #0a1a1c;
|
||||
background: #5b7377;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
&.music {
|
||||
.info {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.file-content .material-icons {
|
||||
font-size: 40px;
|
||||
}
|
||||
.file-content .download-button {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, 0.158);
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-top: 3px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
.file-content .download-button:hover {
|
||||
|
|
@ -387,7 +401,7 @@ export default {
|
|||
}
|
||||
|
||||
.avatar {
|
||||
margin: auto 5px 0 0;
|
||||
margin: auto 0 0 0;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
|
|
@ -411,20 +425,18 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
// border-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
color: rgb(231, 231, 231);
|
||||
margin: auto 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ownMessageLeft .content {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.image-content {
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #1d2c2e;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -24,13 +24,14 @@
|
|||
margin: auto;
|
||||
height: 230px;
|
||||
width: 300px;
|
||||
background: rgba(0, 0, 0, 0.466);
|
||||
border: solid 1px white;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.material-icons{
|
||||
font-size: 80px;
|
||||
|
|
|
|||
|
|
@ -24,14 +24,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
Add a message
|
||||
</div>
|
||||
<div class="message-area">
|
||||
<textarea
|
||||
v-model="message"
|
||||
class="chat-input"
|
||||
placeholder
|
||||
placeholder="Add a message"
|
||||
ref="messageInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="bottom-panel">
|
||||
|
|
@ -93,6 +91,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs['messageInput'].focus();
|
||||
(this.name = this.popouts.fileToUpload.name),
|
||||
(this.size = filesize(this.popouts.fileToUpload.size)),
|
||||
this.loadFileInfo(this.popouts.fileToUpload);
|
||||
|
|
@ -209,12 +208,15 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
.inner {
|
||||
background: rgba(47, 47, 47, 0.938);
|
||||
display: flex;
|
||||
margin: auto;
|
||||
width: 500px;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
|
|
@ -223,7 +225,7 @@ export default {
|
|||
margin-bottom: 40px;
|
||||
}
|
||||
.size {
|
||||
color: grey;
|
||||
color: rgb(221, 221, 221);
|
||||
margin-top: 5px;
|
||||
}
|
||||
.data {
|
||||
|
|
@ -271,15 +273,14 @@ export default {
|
|||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.267);
|
||||
background: #05353b;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgba(0, 0, 0, 0.445);
|
||||
background: #0f292c;
|
||||
}
|
||||
.button .text {
|
||||
margin-left: 5px;
|
||||
|
|
@ -299,7 +300,7 @@ export default {
|
|||
}
|
||||
.chat-input {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: rgb(26, 26, 26);
|
||||
background: #45939e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
|
@ -311,6 +312,9 @@ export default {
|
|||
outline: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.chat-input::placeholder {
|
||||
color: rgb(221, 221, 221);
|
||||
}
|
||||
@media (max-width: 518px) {
|
||||
.inner {
|
||||
align-content: center;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
.codeblock {
|
||||
background-color: rgba(0, 0, 0, 0.397);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
|
|
@ -106,7 +106,6 @@ export default {
|
|||
<style scoped>
|
||||
.embed {
|
||||
background: #1d2b2d;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
max-width: 500px;
|
||||
|
|
@ -169,14 +168,12 @@ export default {
|
|||
.image img {
|
||||
width: auto;
|
||||
height: 100px;
|
||||
border-radius: 5px;
|
||||
align-self: center;
|
||||
}
|
||||
.image {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
align-self: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,11 @@ export default {
|
|||
}
|
||||
.upload {
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.513);
|
||||
background: #3a585c;
|
||||
margin: 10px;
|
||||
margin-left: 70px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.icon .material-icons {
|
||||
font-size: 40px;
|
||||
|
|
@ -62,7 +61,7 @@ export default {
|
|||
}
|
||||
.size {
|
||||
font-size: 15px;
|
||||
color: grey;
|
||||
color: rgb(207, 207, 207);
|
||||
}
|
||||
.progress {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,25 @@ const prototype = {
|
|||
};
|
||||
|
||||
const config = [
|
||||
{
|
||||
version: 8.4,
|
||||
title: "Redesigns and built in mp3 player!",
|
||||
shortTitle: "",
|
||||
date: "17/11/2019",
|
||||
headColor: "#0c7b7f",
|
||||
new: [
|
||||
"You can now play mp3 files within nertivia! (mp4 coming soon)",
|
||||
"Redesigned some components such as file upload, edit messages and more.",
|
||||
],
|
||||
fix: [
|
||||
"Some bugs have been fixed."
|
||||
]
|
||||
},
|
||||
{
|
||||
version: 8.3,
|
||||
title: "Better formatter + better performance.",
|
||||
shortTitle: "",
|
||||
date: "15/11/2019",
|
||||
headColor: "#0c7b7f",
|
||||
new: [
|
||||
"Made design more consistent throughout the app"
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in a new issue