Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-29 03:45:20 +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() {
const tileElem = document.getElementById(`tile-${this.getId}`);
if (tileElem) {
const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth;
const isOverflowing = (tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth) && this.title.length > 12;
if (isOverflowing) tileElem.className += ' is-overflowing';
} // Note from present me to past me: WTF?!
},
@ -107,6 +107,7 @@ export default {
border-radius: var(--curve-factor);
box-shadow: var(--item-shadow);
cursor: pointer;
text-decoration: none;
&:hover {
box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover);
@ -176,7 +177,7 @@ export default {
opacity: 0;
}
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 */
determineImageType(img) {
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 (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
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">
@import '@/styles/media-queries.scss';
section {
display: flex;
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 {
flex: 1;
border-radius: 0;
text-align: center;
padding: 0.25rem 0;
display: block;
}
}
</style>

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

@ -65,6 +65,8 @@ export default {
<style scoped lang="scss">
@import '@/styles/media-queries.scss';
section {
display: flex;
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 {
display: none;
}
}
</style>

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

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

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

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