🔀 Merge pull request #121 from Lissy93/FIX/small-ui-issues

[FIX] Small UI Issues
Fixes #119
Fixes #118

.github/CHANGELOG.md

@@ -1,7 +1,15 @@
 # Changelog
 
+## 🩹 1.5.3 - UI Quick Fix [PR #121](https://github.com/Lissy93/dashy/pull/121)
+- Downgrades and pins vue-material-tabs to 0.1.5, to prevent breaking changes. Fixes #118 p1
+- Sets auto-width for theme selector, so text doesn't wrap for long theme names. Fixes #119
+- Uses flex layout for config menu, so note doesn't overlap menu on small screens. Fixes #118 p2
+
+## 🌐 1.5.2 - Adds Dutch Translations [PR #120](https://github.com/Lissy93/dashy/pull/120)
+- Dutch language support, contributed by @evroon
+
 ## 🩹 1.5.1 - UI Quick Fix [PR #116](https://github.com/Lissy93/dashy/pull/116)
-- Fixes #115 - Some longer languages (e.g. French) cause text to break to the next line
+- Uses min-max width parent layout, to prevent longer languages (e.g. French) text overflow. Fixes #115
 
 ## 🔒 1.5.0 - Improve Robustness of Auth [PR #113](https://github.com/Lissy93/dashy/pull/113)
 - Use both username + password for generating token, so that a change in either will log the user out

.github/pr-badge.yml

@@ -0,0 +1,45 @@
+# Config file for pull-request-badge. Enables badges to be assigned to certain PRs.
+
+# Checks if the required sections are missing
+- label: "Missing"
+  message: "Category"
+  color: "#f25265"
+  when: "$payload.pull_request.body.includes('Category') === false"
+- label: "Missing"
+  message: "Overview"
+  color: "#f25265"
+  when: "$payload.pull_request.body.includes('Overview') === false"
+- label: "Missing"
+  message: "Quality Checklist"
+  color: "#f25265"
+  when: "$payload.pull_request.body.includes('Code Quality Checklist') === false"
+- label: "Description"
+  when: "$payload.pull_request.body.length < 25"
+  message: "Incomplete"
+  color: "#f25265"
+
+# Add size label based on very large or tiny PRs
+- label: "PR Size"
+  message: "Large"
+  color: "#f79c47"
+  when: "$additions > 600"
+- label: "PR Size"
+  message: "Quick"
+  color: "#3eef8b"
+  when: "$additions < 5"
+
+# Show PR number, to destination and from destination
+- label: "#$prNumber"
+  message: "$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name"
+  color: "#ab5afc"
+
+# Show total code added minus deleted
+- label: "New Code"
+  message: "Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions"
+  color: "#dddd00"
+  
+# Show submitting user's username
+- label: Submitted by
+  message: "$payload.pull_request.user.login"
+  color: "#fc7bf1"
+  when: "$payload.pull_request.author_association !== 'OWNER'"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -35,7 +35,7 @@
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-i18n": "^8.25.0",
     "vue-js-modal": "^2.0.0-rc.6",
-    "vue-material-tabs": "^0.1.2",
+    "vue-material-tabs": "0.1.5",
     "vue-prism-editor": "^1.2.2",
     "vue-router": "^3.0.3",
     "vue-select": "^3.11.2",

src/components/Configuration/ConfigContainer.vue

@@ -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>
+        <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>
-        </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">
           <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;

src/components/Settings/ThemeSelector.vue

@@ -131,7 +131,8 @@ export default {
   div.vs__dropdown-toggle {
     border-color: var(--settings-text-color);
     border-radius: var(--curve-factor);
-    width: 8rem;
+    min-width: 8rem;
+    max-width: 16rem;
     height: 1.8rem;
     font-size: 0.85rem;
     cursor: pointer;

yarn.lock

@@ -9768,7 +9768,7 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-material-tabs@^0.1.2:
+vue-material-tabs@0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/vue-material-tabs/-/vue-material-tabs-0.1.5.tgz#255fc0beb27c005eaae61c1534d782a94c30c525"
   integrity sha512-ZLFRCxaCS3TM8IwnxQA4S2CVj+tBaILb8fQZDg+Ix+9Zu+k16udrdhLU2GWvJEVPLspuCzKhCEXW4cIg59YkVw==