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

🩹 Re: #118 - Fixes config menu footer note overflow

Browse Source
This commit is contained in:
Alicia Sykes 2021-08-05 20:25:23 +01:00
parent d8ae1dc1a6
commit d740baf6ab
1 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,46 +2,48 @@
<Tabs :navAuto="true" name="Add Item" ref="tabView">
<TabItem :name="$t('config.main-tab')" class="main-tab">
<div class="main-options-container">
<h2>Configuration Options</h2>
<a class="hyperlink-wrapper" @click="downloadConfigFile('conf.yml', yaml)">
<button class="config-button center">
<DownloadIcon class="button-icon"/>
{{ $t('config.download-config-button') }}
<div class="config-buttons">
<h2>Configuration Options</h2>
<a class="hyperlink-wrapper" @click="downloadConfigFile('conf.yml', yaml)">
<button class="config-button center">
<DownloadIcon class="button-icon"/>
{{ $t('config.download-config-button') }}
</button>
</a>
<button class="config-button center" @click="() => navigateToTab(2)">
<EditIcon class="button-icon"/>
{{ $t('config.edit-config-button') }}
</button>
</a>
<button class="config-button center" @click="() => navigateToTab(2)">
<EditIcon class="button-icon"/>
{{ $t('config.edit-config-button') }}
</button>
<button class="config-button center" @click="() => navigateToTab(4)">
<CustomCssIcon class="button-icon"/>
{{ $t('config.edit-css-button') }}
</button>
<button class="config-button center" @click="() => navigateToTab(3)">
<CloudIcon class="button-icon"/>
{{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
</button>
<button class="config-button center" @click="openLanguageSwitchModal()">
<LanguageIcon class="button-icon"/>
{{ $t('config.change-language-button') }}
</button>
<button class="config-button center" @click="openRebuildAppModal()">
<RebuildIcon class="button-icon"/>
{{ $t('config.rebuild-app-button') }}
</button>
<button class="config-button center" @click="resetLocalSettings()">
<DeleteIcon class="button-icon"/>
{{ $t('config.reset-settings-button') }}
</button>
<button class="config-button center" @click="openAboutModal()">
<IconAbout class="button-icon" />
{{ $t('config.app-info-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>
<p class="language">{{ getLanguage() }}</p>
<AppVersion />
<button class="config-button center" @click="() => navigateToTab(4)">
<CustomCssIcon class="button-icon"/>
{{ $t('config.edit-css-button') }}
</button>
<button class="config-button center" @click="() => navigateToTab(3)">
<CloudIcon class="button-icon"/>
{{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
</button>
<button class="config-button center" @click="openLanguageSwitchModal()">
<LanguageIcon class="button-icon"/>
{{ $t('config.change-language-button') }}
</button>
<button class="config-button center" @click="openRebuildAppModal()">
<RebuildIcon class="button-icon"/>
{{ $t('config.rebuild-app-button') }}
</button>
<button class="config-button center" @click="resetLocalSettings()">
<DeleteIcon class="button-icon"/>
{{ $t('config.reset-settings-button') }}
</button>
<button class="config-button center" @click="openAboutModal()">
<IconAbout class="button-icon" />
{{ $t('config.app-info-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>
<p class="language">{{ getLanguage() }}</p>
<AppVersion />
</div>
<div class="config-note">
<span>{{ $t('config.backup-note') }}</span>
</div>
@ -305,6 +307,13 @@ div.code-container {
}
.main-options-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.config-buttons {
display: flex;
flex-direction: column;
background: var(--config-settings-background);
@ -320,7 +329,6 @@ div.code-container {
.config-note {
width: 80%;
position: absolute;
bottom: 1rem;
left: 10%;
margin: 0.5rem auto;