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

[FIX] Small UI Issues Fixes #119 Fixes #118
2021-08-05 20:51:07 +01:00 · 2021-08-05 20:51:07 +01:00 · dd2ff67f3b
parent 3a7ffbf5a7 8243a8fec3
commit dd2ff67f3b
6 changed files with 107 additions and 45 deletions
--- a/.github/CHANGELOG.md
+++ b/.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
--- a/.github/pr-badge.yml
+++ b/.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'"
--- a/package.json
+++ b/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",
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/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>
-        <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;
--- a/src/components/Settings/ThemeSelector.vue
+++ b/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;
--- a/yarn.lock
+++ b/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==