tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-22 13:14:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adds note on small screens

Browse Source
This commit is contained in:
Alicia Sykes 2021-06-09 14:03:15 +01:00
parent 733794b57f
commit 7ab32686ba
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Configuration/ConfigContainer.vue
View File

@ -29,6 +29,9 @@
<DeleteIcon class="button-icon"/> <DeleteIcon class="button-icon"/>
Reset Local Settings Reset Local Settings
</button> </button>
<p class="small-screen-note" style="display: none;">
You are using a very small screen, and some screens in this menu may not be optimal
</p>
<div class="config-note"> <div class="config-note">
<p class="sub-title">Note:</p> <p class="sub-title">Note:</p>
<span> <span>
@ -151,6 +154,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/style-helpers.scss'; @import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss';
pre { pre {
color: var(--config-code-color); color: var(--config-code-color);
@ -270,7 +274,7 @@ a.hyperlink-wrapper {
border: 1px dashed var(--config-settings-color); border: 1px dashed var(--config-settings-color);
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
text-align: left; text-align: left;
opacity: var(--dimming-factor); opacity: 0.95;
color: var(--config-settings-color); color: var(--config-settings-color);
background: var(--config-settings-background); background: var(--config-settings-background);
p.sub-title { p.sub-title {
@ -278,7 +282,20 @@ a.hyperlink-wrapper {
margin: 0; margin: 0;
display: inline; display: inline;
} }
display: none;
@include tablet-up { display: block; }
} }
p.small-screen-note {
@include phone {
display: block !important;
}
margin: 0.5rem auto;
padding: 0 0.5rem;
text-align: center;
opacity: 0.8;
font-size: 0.9rem;
color: var(--warning);
}
</style> </style>
<style lang="scss"> <style lang="scss">