butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'main' into 133-header-hides-and-gets-stuck

Browse source
This commit is contained in:
Tenzin Passang 2021-11-24 00:30:37 +02:00
commit b8c8f57cd4
15 changed files with 99 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitlab-ci.yml
View file

@ -6,6 +6,7 @@ pages: # the job must be named pages
- echo $CI_COMMIT_TIMESTAMP $CI_COMMIT_SHORT_SHA > src/assets/version.txt
- npm install -g workbox-cli
script:
- export NODE_OPTIONS=--openssl-legacy-provider
- npm ci
- npm run build
- mv public public-vue # GitLab Pages hooks on the public folder

2
public/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" id="favicon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

33
src/App.vue
View file

@ -1,6 +1,6 @@
<template>
<v-app>
<v-main>
<v-main class="main">
<router-view />
<!-- Loading indicator -->
@ -127,6 +127,16 @@ export default {
}
return title;
},
favicon() {
var favicon = undefined;
if (this.$route.meta.includeFavicon) {
if (this.$matrix.currentRoom) {
favicon = this.$matrix.currentRoom.avatar || 'favicon.ico';
}
}
return favicon;
},
},
watch: {
"$i18n.locale": {
@ -149,12 +159,33 @@ export default {
},
immediate: true,
},
favicon: {
handler(favicon) {
document.getElementById("favicon").setAttribute('href', favicon);
},
immediate: true,
},
},
};
</script>
<style lang="scss">
@import '~vuetify/src/styles/settings/_variables.scss';
@import '@/assets/css/variables';
.copyright {
font-size: 10px;
}
#app {
background-color: $app-background;
}
.main {
@media #{map-get($display-breakpoints, 'lg-and-up')} {
margin: 0 auto;
width: $main-desktop-width;;
}
}
</style>

12
src/assets/css/_variables.scss Normal file
View file

@ -0,0 +1,12 @@
$background: #ffffff;
$app-background: #f6f6f6;
$main-desktop-width: 644px;
$dialog-desktop-width: 688px;
$chat-background: $background;
$chat-standard-padding: 32px;
$chat-standard-padding-s: 16px;
$chat-standard-padding-xs: 8px;
$chat-text-size: 1.0px;
$chat-button-height: 50px;

2
src/assets/css/chat.scss
View file

@ -982,6 +982,8 @@ $admin-fg: white;
}
.create-room {
background-color: $background;
.v-avatar {
border: 1px solid #808080 !important;
}

4
src/assets/css/join.scss
View file

@ -62,7 +62,7 @@
/* or 43px */
text-align: center;
letter-spacing: -0.8px;
color: #000000;
overflow-wrap: break-word;
}
@ -118,4 +118,4 @@
background: #9C9CAE;
content: " ";
}
}
}

11
src/assets/css/login.scss
View file

@ -1,14 +1,5 @@
@import "@/assets/css/main.scss";
.login-root {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 80%;
height: 100%;
padding: 0;
margin: 10%;
background-color: $background;
}
}

16
src/assets/css/main.scss
View file

@ -1,4 +1,4 @@
$background: #ffffff;
@import './variables';
@font-face {
font-family: "Inter";
@ -49,14 +49,6 @@ $background: #ffffff;
font-style: normal;
}
$chat-background: $background;
$chat-standard-padding: 32px;
$chat-standard-padding-s: 16px;
$chat-standard-padding-xs: 8px;
$chat-text-size: 1.0px;
$chat-button-height: 50px;
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
@ -142,7 +134,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
text-align: center;
margin-bottom: 20px;
}
.dialog-text {
text-align: left;
word-break: break-word;
@ -150,7 +142,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
color: black;
text-decoration: underline;
}
}
}
}
.build-version {
@ -162,4 +154,4 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
text-align: center;
letter-spacing: 0.4px;
color: rgba(0, 0, 0, 0.6);
}
}

14
src/components/BottomSheet.vue
View file

@ -141,6 +141,9 @@ export default {
</script>
<style lang="scss" scoped>
@import '~vuetify/src/styles/settings/_variables.scss';
@import '@/assets/css/variables';
.bottom-sheet {
position: fixed;
top: 0;
@ -184,6 +187,11 @@ export default {
border-radius: 10px 10px 0px 0px;
background-color: white;
overflow: hidden;
@media #{map-get($display-breakpoints, 'lg-and-up')} {
margin: 0 auto;
width: $dialog-desktop-width;
}
}
.bottom-sheet-content[data-state="small"],
@ -191,4 +199,10 @@ export default {
.bottom-sheet-content[data-state="closed"] {
transition: top 0.3s ease-out;
}
.bottom-sheet-content[data-state="small"] {
@media #{map-get($display-breakpoints, 'lg-and-up')} {
top: 100px !important;
}
}
</style>

2
src/components/ChatHeader.vue
View file

@ -17,7 +17,7 @@
style="overflow: hidden; cursor: pointer"
@click.stop="onHeaderClicked"
>
<div class="d-flex flex-nowrap room-name-inline">
<div class="room-name-inline text-truncate" :title="room.name">
{{ room.name }}
<!--<v-icon>expand_more</v-icon>-->
</div>

2
src/components/CreateRoom.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="create-room">
<div class="create-room fill-height">
<div>
<v-container fluid>
<div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>

2
src/components/Login.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="pa-4">
<div class="pa-4 login-root fill-height">
<div class="chat-header">
<v-container fluid>
<v-row no-gutters>

21
src/components/ProfileInfoPopup.vue
View file

@ -3,7 +3,7 @@
v-model="showDialog"
content-class="profile-info-popup"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '60%' : '95%'"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
>
<v-card flat>
<v-card-text>
@ -135,6 +135,8 @@ export default {
<style lang="scss">
@import "@/assets/css/chat.scss";
@import '~vuetify/src/styles/settings/_variables.scss';
.profile-info-popup {
font-family: "Inter", sans-serif !important;
font-size: 16px;
@ -181,5 +183,22 @@ export default {
font-size: 13 * $chat-text-size !important;
}
}
@media #{map-get($display-breakpoints, 'lg-and-up')} {
overflow: unset;
width: $main-desktop-width;;
position: absolute;
top: 70px;
right: unset;
&::before {
position: absolute;
top: -18px;
right: 40px;
}
.v-card {
border-radius: 20px;
}
}
}
</style>

2
src/components/SelectLanguageDialog.vue
View file

@ -1,9 +1,9 @@
<template>
<v-dialog
class="ma-0 pa-0"
width="80%"
v-bind="{ ...$props, ...$attrs }"
v-on="$listeners"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '80%'"
>
<v-card class="dialog-card">
<v-card-title class="dialog-title"

9
src/router/index.js
View file

@ -22,7 +22,8 @@ const routes = [
name: 'Chat',
component: Chat,
meta: {
includeRoom: true
includeRoom: true,
includeFavicon: true
}
},
{
@ -32,7 +33,8 @@ const routes = [
props: true,
meta: {
title: 'Info',
includeRoom: true
includeRoom: true,
includeFavicon: true
}
},
{
@ -40,7 +42,8 @@ const routes = [
name: 'Profile',
component: Profile,
meta: {
title: 'Profile'
title: 'Profile',
includeFavicon: true
}
},
{