mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dashboard: add background image, improve panel design 

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2020-08-07 18:34:21 +02:00
parent 3a2cc39dd9
commit 2b9b85e44a
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
4 changed files with 47 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/dashboard/README.md Normal file
View File

@ -0,0 +1,3 @@
# Dashboard
Picture credit: [Clouds by Kamil Porembiński](https://www.flickr.com/photos/paszczak000/8715851521/)

BIN
apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
apps/dashboard/img/flickr-paszczak000-8715851521.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

48
apps/dashboard/src/App.vue
View File

@ -225,17 +225,57 @@ export default {
}
</script>
<style lang="scss">
// Show Dashboard background image beneath header
#body-user #header {
background: none;
}
#content {
padding-top: 0;
}
// Hide triangle indicators from navigation since they are out of place without the header bar
#appmenu li a.active::before,
#appmenu li:hover a::before,
#appmenu li:hover a.active::before,
#appmenu li a:focus::before {
display: none;
}
</style>
<style lang="scss" scoped>
#app-dashboard {
width: 100%;
margin-bottom: 100px;
padding-bottom: 100px;
background-color: var(--color-primary);
background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521.jpg?v=1');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
@media only screen and (max-width: var(--breakpoint-mobile)) {
body {
background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg?v=1');
}
}
h2 {
color: var(--color-primary-text);
text-align: center;
font-size: 32px;
line-height: 130%;
padding: 80px 16px 0px;
padding: 120px 16px 0px;
}
.statuses {
::v-deep #user-status-menu-item__subheader>button {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
}
.panels {
@ -253,9 +293,9 @@ export default {
width: 320px;
max-width: 100%;
margin: 16px;
background-color: var(--color-main-background-translucent);
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border);
&.sortable-ghost {
opacity: 0.1;