butter/keanu-weblite
5
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 - echo $CI_COMMIT_TIMESTAMP $CI_COMMIT_SHORT_SHA > src/assets/version.txt
- npm install -g workbox-cli - npm install -g workbox-cli
script: script:
- export NODE_OPTIONS=--openssl-legacy-provider
- npm ci - npm ci
- npm run build - npm run build
- mv public public-vue # GitLab Pages hooks on the public folder - 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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

33
src/App.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<v-app> <v-app>
<v-main> <v-main class="main">
<router-view /> <router-view />
<!-- Loading indicator --> <!-- Loading indicator -->
@ -127,6 +127,16 @@ export default {
} }
return title; 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: { watch: {
"$i18n.locale": { "$i18n.locale": {
@ -149,12 +159,33 @@ export default {
}, },
immediate: true, immediate: true,
}, },
favicon: {
handler(favicon) {
document.getElementById("favicon").setAttribute('href', favicon);
},
immediate: true,
},
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~vuetify/src/styles/settings/_variables.scss';
@import '@/assets/css/variables';
.copyright { .copyright {
font-size: 10px; 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> </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 { .create-room {
background-color: $background;
.v-avatar { .v-avatar {
border: 1px solid #808080 !important; border: 1px solid #808080 !important;
} }

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

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

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

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

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

@ -1,4 +1,4 @@
$background: #ffffff; @import './variables';
@font-face { @font-face {
font-family: "Inter"; font-family: "Inter";
@ -49,14 +49,6 @@ $background: #ffffff;
font-style: normal; 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%; } html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; } 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; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.dialog-text { .dialog-text {
text-align: left; text-align: left;
word-break: break-word; word-break: break-word;
@ -150,7 +142,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
color: black; color: black;
text-decoration: underline; text-decoration: underline;
} }
} }
} }
.build-version { .build-version {
@ -162,4 +154,4 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
text-align: center; text-align: center;
letter-spacing: 0.4px; letter-spacing: 0.4px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }

14
src/components/BottomSheet.vue
View file

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

2
src/components/ChatHeader.vue
View file

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

2
src/components/CreateRoom.vue
View file

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

2
src/components/Login.vue
View file

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

21
src/components/ProfileInfoPopup.vue
View file

@ -3,7 +3,7 @@
v-model="showDialog" v-model="showDialog"
content-class="profile-info-popup" content-class="profile-info-popup"
class="ma-0 pa-0" class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '60%' : '95%'" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
> >
<v-card flat> <v-card flat>
<v-card-text> <v-card-text>
@ -135,6 +135,8 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/assets/css/chat.scss"; @import "@/assets/css/chat.scss";
@import '~vuetify/src/styles/settings/_variables.scss';
.profile-info-popup { .profile-info-popup {
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
font-size: 16px; font-size: 16px;
@ -181,5 +183,22 @@ export default {
font-size: 13 * $chat-text-size !important; 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> </style>

2
src/components/SelectLanguageDialog.vue
View file

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

9
src/router/index.js
View file

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