Skip to content

Instantly share code, notes, and snippets.

@maitrungduc1410

maitrungduc1410/ChatItem.vue

Last active October 28, 2023 08:20
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save maitrungduc1410/74aadf09c61f5a4d9fb7e743f8dbd533 to your computer and use it in GitHub Desktop.
Save maitrungduc1410/74aadf09c61f5a4d9fb7e743f8dbd533 to your computer and use it in GitHub Desktop.
Download ZIP
ChatLayout and ChatItem, chat.blade.php
Raw
chat.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<style type="text/css">
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(135deg, #044f48, #2a7561);
background-size: cover;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.3;
overflow: hidden;
}
</style>
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<chat-layout></chat-layout>
</div>
</body>
</html>
Raw
ChatItem.vue
<template>
<div class="message">
<div class="message-item user-name">
MTD
</div>
<div class="message-item timestamp">
| 11:21:32:
</div>
<div class="message-item text-message">
Hello how are you
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.message {
display: flex;
color: #00b8ff;
.message-item:not(:last-child) {
margin-right: 5px;
}
}
.message:not(:last-child) {
padding-bottom: 20px;
}
.is-current-user {
color: #a900ff;
}
</style>
Raw
ChatLayout.vue
<template>
<div>
<div class="chat">
<div class="chat-title">
<h1>Chatroom</h1>
</div>
<div class="messages">
<div class="messages-content">
<ChatItem v-for="n in 30" :key="n"></ChatItem>
</div>
</div>
<div class="message-box">
<textarea type="text" class="message-input" placeholder="Type message..."></textarea>
<button type="submit" class="message-submit">Send</button>
</div>
</div>
<div class="bg"></div>
</div>
</template>
<script>
import ChatItem from './ChatItem.vue'
export default {
components: {
ChatItem
}
}
</script>
<style lang="scss" scoped>
.messages {
height: 80%;
overflow-y: scroll;
padding: 0 20px;
}
/*--------------------
Body
--------------------*/
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: url('https://images.unsplash.com/photo-1451186859696-371d9477be93?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat 0 0;
filter: blur(80px);
transform: scale(1.2);
}
/*--------------------
Chat
--------------------*/
.chat {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 80vh;
max-height: 700px;
z-index: 2;
overflow: hidden;
box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, .5);
border-radius: 20px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
/*--------------------
Chat Title
--------------------*/
.chat-title {
flex: 0 1 45px;
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
color: #fff;
text-transform: uppercase;
text-align: left;
padding: 10px 10px 10px 50px;
h1, h2 {
font-weight: normal;
font-size: 16px;
margin: 0;
padding: 0;
}
h2 {
color: rgba(255, 255, 255, .5);
font-size: 8px;
letter-spacing: 1px;
}
.avatar {
position: absolute;
z-index: 1;
top: 8px;
left: 9px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24);
img {
width: 100%;
height: auto;
}
}
}
/*--------------------
Message Box
--------------------*/
.message-box {
flex: 0 1 40px;
width: 100%;
background: rgba(0, 0, 0, 0.3);
padding: 10px;
position: relative;
& .message-input {
background: none;
border: none;
outline: none!important;
resize: none;
color: rgba(255, 255, 255, .7);
font-size: 11px;
height: 17px;
margin: 0;
padding-right: 20px;
width: 265px;
}
textarea:focus:-webkit-placeholder{
color: transparent;
}
& .message-submit {
position: absolute;
z-index: 1;
top: 9px;
right: 10px;
color: #fff;
border: none;
background: #248A52;
font-size: 10px;
text-transform: uppercase;
line-height: 1;
padding: 6px 10px;
border-radius: 10px;
outline: none!important;
transition: background .2s ease;
&:hover {
background: #1D7745;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment