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