Skip to content

Commit

Permalink
Merge branch 'feature/simple-redesign'
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanpierce
seanpierce committed Feb 8, 2024
2 parents 777ddaf + 9dc214d commit f3f624a
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 116 deletions.
6 changes: 3 additions & 3 deletions app/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<div id="container">
<router-view />

<!-- <Chat /> -->
<Chat />
</div>
</div>
</template>

<script>
// import Chat from '@/components/Chat/Chat.vue';
import Chat from '@/components/Chat/Chat.vue';
export default {
components: {
// Chat
Chat
},
computed: {
Expand Down
22 changes: 15 additions & 7 deletions app/src/components/Chat/Chat.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<div class="new-user-form">
Please enter a username
<input
placeholder="Chester"
type="text"
autofocus
minlength="4"
Expand All @@ -23,7 +24,7 @@
</div>
</div>

<div v-else id="chat-wrapper">
<div v-else>
<div id="messages">
<Message
v-for="(message, index) in chat.messages" :key="index"
Expand All @@ -32,17 +33,17 @@
</div>

<div id="message-input">
<span></span>

<input
type="text"
maxlength="140"
@keyup.enter="submit()"
v-model="message"
placeholder="Say something">

<button @click="submit()">Submit</button>
<button class="submit" @click="submit()">Submit</button>
</div>

<div id="logout" @click="logout()">Logout</div>
</div>
</div>
</template>
Expand Down Expand Up @@ -133,19 +134,26 @@ export default {
setTimeout(() => {
this.scrollToBottom()
}, 500)
}, 1000)
},
scrollToBottom() {
let elem = document.getElementById('chat')
let elem = document.getElementById('messages')
if (!elem) return
let options = {
left: 0,
top: elem.scrollHeight,
top: elem.scrollHeight + 100,
behavior: 'smooth'
}
elem.scrollTo(options)
},
logout() {
this.$store.dispatch('setUsername', null)
localStorage.setItem('ITR_USER', null)
}
},
Expand Down
229 changes: 124 additions & 105 deletions app/src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,123 +76,142 @@
min-height: 50vh;
width: 100%;

#chat-wrapper {
.new-user {
padding: 2em;
width: 100%;
max-width: 500px;
position: absolute;
height: 800px;
overflow-y: scroll;
}
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

.new-user-form {
font-size: 2em;
text-align: center;

.new-user {
padding: 2em;
width: 100%;
max-width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

.new-user-form {
font-size: 2em;
text-align: center;

input {
font-size: 1em;
margin: 1em auto;
padding: 0.5em;
background: none;
border: none;
border-bottom: solid 2px white;
width: 100%;
outline: none;
}

button {
font-size: 1em;
width: 100%;
background: none;
border: none;
padding: 0.25em;
border: solid 2px white;
border-radius: 0;
cursor: pointer;
}

.helper {
font-size: 16px;
margin-top: 16px;
}
input {
font-size: 1em;
margin: 1em auto;
padding: 0.25em;
background: none;
border: none;
border-bottom: solid 2px #333;
width: 100%;
outline: none;
}

button {
font-size: 1em;
width: 100%;
background: none;
color: #333;
border: solid 2px #333;
padding: 0.25em;
border-radius: 0;
cursor: pointer;
}

.helper {
font-size: 16px;
margin-top: 16px;
}
}

#messages {
width: 100%;
padding: 1em;
padding-bottom: 100px;

.message {
margin-bottom: 8px;

&.itr {
}

#messages {
width: 100%;
height: 800px;
padding: 1em;
padding-bottom: 100px;
overflow-y: scroll;

.message {
margin-bottom: 8px;

&.itr {
color: $color-cta !important;

* {
color: $color-cta !important;

* {
color: $color-cta !important;
}

.message-content {
font-style: italic;
}
}

.time-stamp {
font-size: 0.74em;
margin-right: 12px;
}
.username.me {
color: $color-accent;

.message-content {
font-style: italic;
}
}

.time-stamp {
font-size: 0.74em;
margin-right: 12px;
}

.username.me {
color: $color-accent;
}
}

#message-input {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
right: 0;
}

#logout {
position: absolute;
top: 20px;
right: 20px;
padding: 6px 8px;
background: white;
border: solid 2px red;
color: red;
cursor: pointer;
}

#message-input {
position: absolute;
z-index: 100;
bottom: 0;
left: 0;
right: 0;
background: orange;
height: 4em;

@media (max-width: 900px) {
height: 3em;
}

input {
width: calc(100% - 120px);
height: 100%;
font-size: 2em;
padding: 1em 0.5em;
border: none;
outline: none;
color: #333;
background: orange;
height: 4em;

input {
width: calc(100% - 120px);
height: 100%;
font-size: 2em;
padding: 1em 0.5em;
border: none;
outline: none;
color: #333;
background: orange;
}

button {
position: absolute;
font-size: 20px;
right: 0;
width: 160px;
height: 100%;
vertical-align: bottom;
background: #333;
color: white;
border: none;
cursor: pointer;
border-radius: 0;

@media (max-width: 900px) {
font-size: 1em;
}
}

.error {
color: $color-accent;
font-size: 16px;

button.submit {
position: absolute;
font-size: 20px;
right: 0px;
width: 160px;
height: 100%;
vertical-align: bottom;
background: #333;
color: white;
border: none;
cursor: pointer;
border-radius: 0;

@media (max-width: 900px) {
font-size: 16px;
width: 90px;
}
}
}

.error {
color: $color-accent;
font-size: 16px;
}
}
2 changes: 1 addition & 1 deletion app/src/views/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div id="info">
<a href="mailto:hello@introtorhythm.com">hello@introtorhythm.com</a><br>
<a href="tel:9718018007">971-801-8007</a><br>
<!-- <a href="/#chat">Chat</a> -->
<a href="/#chat">Chat</a>
</div>

<Marquee v-if="loaded" :text="marqueeText" />
Expand Down

0 comments on commit f3f624a

Please sign in to comment.