Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-29 20:11:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Small fixes and better mobile layout

Browse Source
This commit is contained in:
Alicia Sykes 2021-04-18 16:18:32 +01:00
parent bd138bed56
commit 628f7f2868
6 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/LinkItems/Item.vue
View File

@ -68,8 +68,8 @@ export default {
manageTitleEllipse() { manageTitleEllipse() {
const tileElem = document.getElementById(`tile-${this.getId}`); const tileElem = document.getElementById(`tile-${this.getId}`);
if (tileElem) { if (tileElem) {
const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight const isOverflowing = (tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth; || tileElem.scrollWidth > tileElem.clientWidth) && this.title.length > 12;
if (isOverflowing) tileElem.className += ' is-overflowing'; if (isOverflowing) tileElem.className += ' is-overflowing';
} // Note from present me to past me: WTF?! } // Note from present me to past me: WTF?!
}, },
@ -107,6 +107,7 @@ export default {
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
box-shadow: var(--item-shadow); box-shadow: var(--item-shadow);
cursor: pointer; cursor: pointer;
text-decoration: none;
&:hover { &:hover {
box-shadow: var(--item-hover-shadow); box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover); background: var(--item-background-hover);
@ -176,7 +177,7 @@ export default {
opacity: 0; opacity: 0;
} }
span.text { span.text {
transform: translateX(calc(120px - 100%)); transform: translateX(calc(100px - 100%));
} }
} }

3
src/components/LinkItems/ItemIcon.vue
View File

@ -54,7 +54,8 @@ export default {
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */ /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
determineImageType(img) { determineImageType(img) {
let imgType = ''; let imgType = '';
if (this.isUrl(img)) imgType = 'url'; if (!img) imgType = 'none';
else if (this.isUrl(img)) imgType = 'url';
else if (this.isImage(img)) imgType = 'img'; else if (this.isImage(img)) imgType = 'img';
else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg'; else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
else if (img.includes('fa-')) imgType = 'font-awesome'; else if (img.includes('fa-')) imgType = 'font-awesome';

11
src/components/Settings/SearchBar.vue
View File

@ -55,6 +55,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/media-queries.scss';
section { section {
display: flex; display: flex;
align-items: center; align-items: center;
@ -107,12 +109,19 @@ export default {
} }
} }
@media screen and (max-width: 600px) { @include tablet {
form {
display: block;
text-align: center;
}
}
@include phone {
form { form {
flex: 1; flex: 1;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
padding: 0.25rem 0; padding: 0.25rem 0;
display: block;
} }
} }
</style> </style>

16
src/components/Settings/SettingsContainer.vue
View File

@ -65,6 +65,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/media-queries.scss';
section { section {
display: flex; display: flex;
align-items: center; align-items: center;
@ -87,9 +89,21 @@ export default {
} }
} }
@media screen and (max-width: 600px) { @include tablet {
section {
display: block;
margin: 0 auto;
background: none;
.options-container {
justify-content: center;
}
}
}
@include phone {
.options-container { .options-container {
display: none; display: none;
} }
} }
</style> </style>

10
src/styles/color-themes.scss
View File

@ -29,11 +29,11 @@ html[data-theme='dracula'] {
--item-hover-shadow: none; --item-hover-shadow: none;
--settings-text-color: #98ace9; --settings-text-color: #98ace9;
--primary: #6272a4; --primary: #6272a4;
.collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; span {color: #8be9fd; }}} .collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; color: #8be9fd; }}
.collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; span {color: #50fa7b; }}} .collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; color: #50fa7b; }}
.collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; span {color: #ffb86c; }}} .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; color: #ffb86c; }}
.collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; span {color: #ff79c6; }}} .collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; color: #ff79c6; }}
.collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; span {color: #bd93f9; }}} .collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; color: #bd93f9; }}
} }
html[data-theme='bee'] { html[data-theme='bee'] {

1
src/styles/media-queries.scss
View File

@ -38,7 +38,6 @@ $extra-large: 2800px;
} }
} }
@mixin tablet-up { @mixin tablet-up {
@media (min-width: #{$small}) { @media (min-width: #{$small}) {
@content; @content;