Improve navbar on mobile

frontend/public/index.html

@@ -30,7 +30,7 @@
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;600;800&display=swap" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
- <link href="https://cdn.jsdelivr.net/npm/[email protected].1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+ <link href="https://cdn.jsdelivr.net/npm/[email protected].3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href="/icons.css" rel="stylesheet">
  <link href="/fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/fontawesome/css/duotone.css" rel="stylesheet">
@@ -58,6 +58,6 @@ <h1>XIV ToDo</h1>
  </div>
  </div>
  <script src="https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2"></script>
- <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
 </html>

frontend/src/components/TheNavbar.vue

@@ -16,8 +16,8 @@
  >
  <span class="navbar-toggler-icon"></span>
  </button>
- <div v-if="this.$route.name != 'Character'" class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav navbar-nav-scroll ms-auto flex-grow-1 mb-2 mb-lg-0">
  <li v-if="this.$store.getters.hasCharacter" class="nav-item">
  <router-link to="/profile" class="nav-link" @click="collapseNav">
  {{ $t("page.profile") }}
@@ -74,8 +74,11 @@
  {{ $t("page.checklist") }}
  </router-link>
  </li>
- </ul>
- <ul class="navbar-nav mb-2 mb-lg-0">
+
+ <!-- Items above are left-aligned -->
+ <li class="nav-item flex-grow-1"></li>
+ <!-- Items below are right-aligned -->
+
  <li class="nav-item">
  <a
  class="nav-link"
@@ -85,7 +88,6 @@
  aria-controls="offcanvasCountdowns"
  @click="seenLatestCountdown()"
  >
- <span class="d-inline d-lg-none">{{ $t("page.countdowns") }} </span>
  <span class="fa-fw fal fa-clock position-relative">
  <span
  v-if="
@@ -95,6 +97,7 @@
  >
  </span>
  </span>
+ <span class="d-inline d-lg-none ms-2">{{ $t("page.countdowns") }}</span>
  </a>
  </li>
  <li class="nav-item">
@@ -105,15 +108,15 @@
  data-bs-target="#offcanvasUpdates"
  aria-controls="offcanvasUpdates"
  @click="seenLatestNews()"
- >
- <span class="d-inline d-lg-none">{{ $t("page.newsUpdates") }} </span>
+ > 
  <span class="fa-fw fal fa-bell position-relative">
  <span
  v-if="this.$store.getters.isSignedIn && this.$store.getters.latestNewsSeen < news.latestID"
  class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"
  >
  </span>
  </span>
+ <span class="d-inline d-lg-none ms-2">{{ $t("page.newsUpdates") }}</span>
  </a>
  </li>
  <li class="nav-item dropdown">
@@ -126,54 +129,46 @@
  aria-expanded="false"
  @click="this.$store.commit('setFlag', { key: 'languageClicked', value: true })"
  >
- <span class="d-inline d-lg-none">{{ $t("page.language") }} </span>
  <span class="fa-fw fal fa-globe-americas position-relative">
  <span
  v-if="!this.$store.getters.flag('languageClicked')"
  class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"
  >
  </span>
  </span>
+ <span class="d-inline d-lg-none ms-2">{{ $t("page.language") }}</span>
  </a>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="collectionDropdown">
  <li>
  <h6 class="dropdown-header">{{ $t("navbar.preferredLanguage") }}</h6>
  </li>
- <li v-if="this.$store.getters.language == 'en'">
- <span class="dropdown-item active" @click="collapseNav">
+ <li>
+ <span v-if="this.$store.getters.language == 'en'" class="dropdown-item active" @click="collapseNav">
  English
  <i class="fa-fw fal fa-check"></i>
  </span>
+ <a v-else class="dropdown-item" href="#" @click="changeLanguage('en')">English</a>
  </li>
- <li v-else>
- <a class="dropdown-item" href="#" @click="changeLanguage('en')">English</a>
- </li>
- <li v-if="this.$store.getters.language == 'fr'">
- <span class="dropdown-item active" @click="collapseNav">
- Français (TEC)
+ <li>
+ <span v-if="this.$store.getters.language == 'fr'" class="dropdown-item active" @click="collapseNav">
+ Français
  <i class="fa-fw fal fa-check"></i>
  </span>
+ <a v-else class="dropdown-item" href="#" @click="changeLanguage('fr')">Français</a>
  </li>
- <li v-else>
- <a class="dropdown-item" href="#" @click="changeLanguage('fr')">Français (TEC)</a>
- </li>
- <li v-if="this.$store.getters.language == 'de'">
- <span class="dropdown-item active" @click="collapseNav">
- Deutsch (WIP)
+ <li>
+ <span v-if="this.$store.getters.language == 'de'" class="dropdown-item active" @click="collapseNav">
+ Deutsch
  <i class="fa-fw fal fa-check"></i>
  </span>
+ <a v-else class="dropdown-item" href="#" @click="changeLanguage('de')">Deutsch</a>
  </li>
- <li v-else>
- <a class="dropdown-item" href="#" @click="changeLanguage('de')">Deutsch (WIP)</a>
- </li>
- <li v-if="this.$store.getters.language == 'ja'">
- <span class="dropdown-item active" @click="collapseNav">
- 日本語 (仕掛品)
+ <li>
+ <span v-if="this.$store.getters.language == 'ja'" class="dropdown-item active" @click="collapseNav">
+ 日本語
  <i class="fa-fw fal fa-check"></i>
  </span>
- </li>
- <li v-else>
- <a class="dropdown-item" href="#" @click="changeLanguage('ja')"> 日本語 (仕掛品) </a>
+ <a v-else class="dropdown-item" href="#" @click="changeLanguage('ja')">日本語</a>
  </li>
  <li><hr class="dropdown-divider" /></li>
  <li>
@@ -190,7 +185,8 @@
  </li>
  <li v-if="!this.$store.getters.isSignedIn" class="nav-item">
  <a class="nav-link" :href="this.$store.getters.discordAuthURI">
- {{ $t("home.signInDiscord") }}
+ <span class="d-inline-block d-lg-none fa-fw fal fa-sign-in me-2"></span>
+ <span>{{ $t("home.signInDiscord") }}</span>
  </a>
  </li>
  <li v-else class="nav-item dropdown">
@@ -203,23 +199,27 @@
  aria-expanded="false"
  >
  <span v-if="this.$store.getters.hasCharacter">
- {{ this.$store.getters.lodestoneData.Character.Name }}
+ <span class="d-inline-block d-lg-none fa-fw fal fa-cog me-2"></span>
+ <span>{{ this.$store.getters.lodestoneData.Character.Name }}</span>
  <img
  v-if="this.$store.getters.hasCharacter"
  class="avatar-nav d-none d-lg-inline"
  :src="this.$store.getters.character.Avatar"
  :alt="$t('shared.portraitAlt')"
  />
  </span>
- <span v-else>
- {{ $t("page.settings") }}
- </span>
+ <template v-else>
+ <span class="d-inline-block d-lg-none fa-fw fal fa-cog me-2"></span>
+ <span>{{ $t("navbar.settingsAndCharacters") }}</span>
+ </template>
  </a>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="navbarDropdown">
- <div v-if="this.$store.getters.hasCharacter">
  <li>
  <h6 class="dropdown-header">{{ $t("navbar.changeActiveCharacter") }}</h6>
  </li>
+ <li v-if="!this.$store.getters.hasCharacter">
+ <span class="dropdown-item disabled">{{ $t("navbar.noCharacters") }}</span>
+ </li>
  <li v-for="(item, i) of this.$store.getters.characters" :key="item.ID">
  <span v-if="i == this.$store.state.activeCharacterID" class="dropdown-item active">
  <b>{{ item.lodestoneData.Character.Name }}</b>
@@ -232,7 +232,6 @@
  </a>
  </li>
  <li><hr class="dropdown-divider" /></li>
- </div>
  <li>
  <h6 class="dropdown-header">
  {{ this.$store.getters.discordUsername }}
@@ -253,50 +252,6 @@
  </li>
  </ul>
  </div>
-
- <div v-else class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="nav navbar-nav me-auto mb-2 mb-lg-0" id="nav-tab" role="tablist">
- <li class="nav-item">
- <a
- class="nav-link active"
- id="nav-profile-tab"
- data-bs-toggle="tab"
- data-bs-target="#nav-profile"
- type="button"
- role="tab"
- @click="collapseNav"
- >
- Profile
- </a>
- </li>
- <li class="nav-item">
- <a
- class="nav-link"
- id="nav-duties-tab"
- data-bs-toggle="tab"
- data-bs-target="#nav-duties"
- type="button"
- role="tab"
- @click="collapseNav"
- >
- Encounters
- </a>
- </li>
- <li class="nav-item">
- <a
- class="nav-link"
- id="nav-questlines-tab"
- data-bs-toggle="tab"
- data-bs-target="#nav-questlines"
- type="button"
- role="tab"
- @click="collapseNav"
- >
- Questlines
- </a>
- </li>
- </ul>
- </div>
  </div>
  </nav>
  </header>

frontend/src/i18n/lang-en.json

@@ -29,7 +29,9 @@
  "navbar": {
  "changeActiveCharacter": "Active character",
  "preferredLanguage": "Preferred language",
- "feedback": "Feedback"
+ "feedback": "Feedback",
+ "settingsAndCharacters": "Settings & Characters",
+ "noCharacters": "Add your characters in Settings"
  },
  "pageHeader": {
  "ofCharacter": "of {characterName}",