Visual Consistency + Extras (#68)

* on desktop, don't show an actions dropdown also add icons and normalize text of actions this change should be replicated in similar situations * prevented the heart from being rendered over dropdowns * using more_vert for less horizontal space consumption * removing bottom margin from gear tables * replacing weird large shadow in cards with simple border * added actions dropdown in character bis displays * reordered actions in character page to match team members page * add option to give larger titles to card header * moved add new links on dashboard to buttons in card header * update visual consistency on character page * improving visual consistency in team settings * add icons to action buttons in bis form * added larger titles to member management page * remove unnecessary icon-text spans * visual consistency throughout add team * more button icons and colouring * final consistency updates * updated the welcome message * etro imports now include name if there isn't one already * updated test to include name field * update membership form with consistency changes * added bis list cloning as a feature * updated changelog * fixed settings bugs * updated changelog * security patches * updating consistency in popups for confirm/cancel * made the "Change Character" button not be red
SavageAim · Feb 13, 2024 · 30cc7f6 · 30cc7f6
1 parent 1d2f622
commit 30cc7f6
Show file tree

Hide file tree

Showing 43 changed files with 552 additions and 139 deletions.
diff --git a/backend/api/tests/test_etro.py b/backend/api/tests/test_etro.py
@@ -31,6 +31,7 @@ def test_import(self):
 
         # Build an expected data packet
         expected = {
+            'name': 'BiS DNC ilvl 600 (2.47) - 6.11',
             'job_id': 'DNC',
             'mainhand': Gear.objects.get(name='Ultimate of the Heavens').pk,
             'offhand': Gear.objects.get(name='Ultimate of the Heavens').pk,
@@ -61,6 +62,7 @@ def test_import_with_relic(self):
 
         # Build an expected data packet
         expected = {
+            'name': 'test with relic',
             'job_id': 'DRG',
             'mainhand': Gear.objects.get(name='Majestic Manderville').pk,
             'offhand': Gear.objects.get(name='Majestic Manderville').pk,

diff --git a/backend/api/views/etro.py b/backend/api/views/etro.py
@@ -65,6 +65,7 @@ def get(self, request: Request, id: str) -> Response:
         except coreapi.exceptions.ErrorMessage as e:
             return Response({'message': e.error.title}, status=400)
 
+        name = gearset['name']
         job_id = gearset['jobAbbrev']
         min_il = gearset['minItemLevel']
         max_il = gearset['maxItemLevel']
@@ -94,6 +95,7 @@ def get(self, request: Request, id: str) -> Response:
         # Turn the names into SA gear ids
         sa_gear = Gear.objects.filter(item_level__gte=min_il, item_level__lte=max_il).values('name', 'id')
         response = {
+            'name': name,
             'job_id': job_id,
             'min_il': min_il,
             'max_il': max_il,

diff --git a/backend/requirements.txt b/backend/requirements.txt
@@ -20,11 +20,11 @@ click-repl==0.2.0
 constantly==15.1.0
 coreapi==2.3.3
 coreschema==0.0.4
-cryptography==41.0.7
+cryptography==42.0.2
 daphne==3.0.2
 defusedxml==0.7.1
 Deprecated==1.2.13
-Django==3.2.23
+Django==3.2.24
 django-allauth==0.47.0
 djangorestframework==3.14.0
 gunicorn==20.1.0
@@ -34,7 +34,7 @@ idna==3.3
 incremental==22.10.0
 itypes==1.2.0
 jellyfish==0.9.0
-Jinja2==3.1.2
+Jinja2==3.1.3
 kombu==5.2.3
 MarkupSafe==2.1.1
 msgpack==1.0.3
@@ -46,7 +46,7 @@ pyasn1==0.4.8
 pyasn1-modules==0.2.8
 pycparser==2.21
 PyJWT==2.4.0
-pyOpenSSL==23.2.0
+pyOpenSSL==24.0.0
 pyparsing==3.0.6
 python3-openid==3.2.0
 pytz==2021.3

diff --git a/frontend/src/assets/base.scss b/frontend/src/assets/base.scss
@@ -52,7 +52,8 @@ $dropdown-content-background-color: $scheme-main-bis;
 }
 
 // Card stuff
-$card-header-shadow: 0 0.5em 0 0 rgba($accent-dark, 0.1);
+$card-header-shadow: 0;
+$card-content-background-color: rgba(0, 0, 0, 0.02);
 $card-background-color: $scheme-main-bis;
 a.card-footer-item, .dropdown.card-footer-item a {
   color: $main-colour;
@@ -68,6 +69,9 @@ a.card-footer-item, .dropdown.card-footer-item a {
 .card:not(:last-child) {
   margin-bottom: 1.5rem;
 }
+.card-header-title > span.larger-title {
+  font-size: 1.1em;
+}
 
 // Add extra colours for IL tiering (will be customisable later) and for roles
 $extra-colors: (
@@ -104,6 +108,10 @@ p.disabled-delete {
   color: hsl(348, 86%, 30%);
 }
 
+.card-header {
+  border-bottom: 1px solid $border-light;
+}
+
 @import './gear_gradients';
 .table.is-bordered .is-il-bis,
 .table.is-bordered .is-il-minus-0,

diff --git a/frontend/src/components/bis_list/actions.vue b/frontend/src/components/bis_list/actions.vue
@@ -1,22 +1,43 @@
 <template>
   <div class="card-content">
     <div class="buttons">
-      <button v-if="!charIsProxy" class="button is-fullwidth is-success" data-microtip-position="top" role="tooltip" :aria-label="`${saveText} this BIS List.`" @click="save">{{ saveText }} BIS List</button>
+      <button v-if="!charIsProxy" class="button is-fullwidth is-success" data-microtip-position="top" role="tooltip" :aria-label="`${saveText} this BIS List.`" @click="save">
+        <span class="icon"><i class="material-icons">save</i></span>
+        <span>{{ saveText }} BIS List</span>
+      </button>
 
       <template v-if="!(simple || charIsProxy)">
-        <button class="button is-fullwidth is-success" data-microtip-position="top" role="tooltip" :aria-label="`${saveText} this BIS List, and sync current gear to other ${bisList.job_id} BIS Lists.`" v-if="syncable()" @click="displaySyncModal">{{ saveText }} and Sync Current Gear</button>
-        <button class="button is-fullwidth is-disabled" data-microtip-position="top" role="tooltip" :aria-label="`You have no other ${bisList.job_id} BIS Lists.`" v-else>{{ saveText }} and Sync Current Gear</button>
+        <button class="button is-fullwidth is-success" data-microtip-position="top" role="tooltip" :aria-label="`${saveText} this BIS List, and sync current gear to other ${bisList.job_id} BIS Lists.`" v-if="syncable()" @click="displaySyncModal">
+          <span class="icon"><i class="material-icons">save_as</i></span>
+          <span>{{ saveText }} &amp; Sync Current Gear</span>
+        </button>
+        <button class="button is-fullwidth is-disabled" data-microtip-position="top" role="tooltip" :aria-label="`You have no other ${bisList.job_id} BIS Lists.`" v-else>
+          <span class="icon"><i class="material-icons">save_as</i></span>
+          <span>{{ saveText }} &amp; Sync Current Gear</span>
+        </button>
       </template>
 
       <template v-if="!importLoading">
-        <button class="button is-fullwidth is-primary" data-microtip-position="top" role="tooltip" aria-label="Import BIS Gear from Etro.gg" v-if="importable()" @click="etroImport">Import from Etro</button>
-        <button class="button is-fullwidth is-disabled" data-microtip-position="top" role="tooltip" aria-label="Please enter an Etro gearset link in the external URL." v-else>Import</button>
+        <button class="button is-fullwidth is-primary" data-microtip-position="top" role="tooltip" aria-label="Import BIS Gear from Etro.gg" v-if="importable()" @click="etroImport">
+          <span class="icon"><i class="material-icons">cloud_download</i></span>
+          <span>Import from Etro</span>
+        </button>
+        <button class="button is-fullwidth is-disabled" data-microtip-position="top" role="tooltip" aria-label="Please enter an Etro gearset link in the external URL." v-else>
+          <span class="icon"><i class="material-icons">cloud_download</i></span>
+          <span>Import from Etro</span>
+        </button>
       </template>
       <button v-else class="button is-static is-loading is-fullwidth">Loading data.</button>
 
       <template v-if="!(simple || charIsProxy)">
-        <button class="button is-fullwidth is-primary" data-microtip-position="top" role="tooltip" :aria-label="`Load Current gear from another ${bisList.job_id} BIS List.`" v-if="syncable()" @click="displayLoadModal">Load Current Gear</button>
-        <button class="button is-fullwidth is-disabled" data-microtip-position="top" role="tooltip" :aria-label="`You have no other ${bisList.job_id} BIS Lists.`" v-else>Load Current Gear</button>
+        <button class="button is-fullwidth is-primary" data-microtip-position="top" role="tooltip" :aria-label="`Load Current gear from another ${bisList.job_id} BIS List.`" v-if="syncable()" @click="displayLoadModal">
+          <span class="icon"><i class="material-icons">content_copy</i></span>
+          <span>Copy Current Gear</span>
+        </button>
+        <button class="button is-fullwidth is-disabled" data-microtip-position="top" role="tooltip" :aria-label="`You have no other ${bisList.job_id} BIS Lists.`" v-else>
+          <span class="icon"><i class="material-icons">content_copy</i></span>
+          <span>Copy Current Gear</span>
+        </button>
       </template>
     </div>
   </div>

diff --git a/frontend/src/components/bis_table.vue b/frontend/src/components/bis_table.vue
@@ -92,7 +92,7 @@
           <table class="table is-bordered is-fullwidth gear-table" :class="[`is-${$store.state.user.theme}`]">
             <tbody>
               <tr>
-                <template v-if="list.job === 'paladin'">
+                <template v-if="list.job.name === 'paladin'">
                   <th>Shield</th>
                   <td data-microtip-position="top" role="tooltip" :aria-label="`Current: ${list.current_offhand.name}`" :class="[getColourClass(list.current_offhand, list.bis_offhand)]">{{ list.bis_offhand.name }}</td>
                 </template>
@@ -212,4 +212,7 @@ export default class BISTable extends Vue {
 td[role=tooltip] {
   background-clip: padding-box;
 }
+table.gear-table:not(:last-child) {
+  margin-bottom: 0;
+}
 </style>
diff --git a/frontend/src/components/character_form.vue b/frontend/src/components/character_form.vue
@@ -8,7 +8,8 @@
         </div>
         <div class="control">
           <button class="button is-success" :class="{'is-loading': apiLoading || xivLoading}" @click="fetchChar">
-            Import
+            <span class="icon"><i class="material-icons">cloud_download</i></span>
+            <span>Import</span>
           </button>
         </div>
       </div>

diff --git a/frontend/src/components/dashboard.vue b/frontend/src/components/dashboard.vue
@@ -3,8 +3,12 @@
     <div class="column is-three-quarters-desktop">
       <div class="card">
         <div class="card-header">
-          <div class="card-header-title">
-            <h2 class="title">Your Teams</h2>
+          <div class="card-header-title"><span class="larger-title">Your Teams</span></div>
+          <div class="card-header-icon">
+            <router-link to="/team/" class="button is-small is-success">
+              <span class="icon"><i class="material-icons">add</i></span>
+              <span>Add New</span>
+            </router-link>
           </div>
         </div>
         <div class="card-content">
@@ -17,20 +21,18 @@
             </router-link>
           </template>
         </div>
-        <footer class="card-footer">
-          <router-link to="/team/" class="card-footer-item has-text-success icon-text">
-            <span class="icon"><i class="material-icons">add</i></span>
-            <span>Add New</span>
-          </router-link>
-        </footer>
       </div>
     </div>
 
     <div class="column">
     <div class="card">
       <div class="card-header">
-        <div class="card-header-title">
-          <h2 class="title">Your Characters</h2>
+        <div class="card-header-title"><span class="larger-title">Your Characters</span></div>
+        <div class="card-header-icon">
+          <router-link to="/characters/new/" class="button is-small is-success">
+            <span class="icon"><i class="material-icons">add</i></span>
+            <span>Add New</span>
+          </router-link>
         </div>
       </div>
       <div class="card-content">
@@ -44,12 +46,6 @@
           </router-link>
         </template>
       </div>
-      <footer class="card-footer">
-        <router-link to="/characters/new/" class="card-footer-item has-text-success icon-text">
-          <span class="icon"><i class="material-icons">add</i></span>
-          <span>Add New</span>
-        </router-link>
-      </footer>
     </div>
   </div>
   </div>

diff --git a/frontend/src/components/footer.vue b/frontend/src/components/footer.vue
@@ -63,14 +63,11 @@ export default class Footer extends Vue {
 .icon-stack {
   position: relative;
 
-  & .heart {
-    z-index: 999;
-  }
-
   & .cup {
     position: absolute;
     top: 0;
     left: 0;
+    z-index: -10;
   }
 }
 

diff --git a/frontend/src/components/loot/greed_character_entry.vue b/frontend/src/components/loot/greed_character_entry.vue
@@ -17,9 +17,9 @@
       </div>
     </div>
     <div v-if="userHasPermission" class="list-actions">
-      <button class="button is-success is-loading" v-if="requesting">Give Item</button>
-      <button class="button is-success" @click="openCharacter" v-else-if="entry.greed_lists.length > 0">Select BIS</button>
-      <button class="button is-success" @click="saveWithoutUpdate" v-else>Give Item</button>
+      <button class="button is-info is-loading" v-if="requesting">Give Item</button>
+      <button class="button is-info" @click="openCharacter" v-else-if="entry.greed_lists.length > 0">Select BIS</button>
+      <button class="button is-info" @click="saveWithoutUpdate" v-else>Give Item</button>
     </div>
   </div>
 </template>

diff --git a/frontend/src/components/loot/need_raid_item_box.vue b/frontend/src/components/loot/need_raid_item_box.vue
@@ -20,8 +20,8 @@
       </div>
     </div>
     <div v-if="userHasPermission" class="list-actions">
-      <button class="button is-success" @click="save" v-if="!requesting">Give Item</button>
-      <button class="button is-success is-loading" v-else>Give Item</button>
+      <button class="button is-primary" @click="save" v-if="!requesting">Give Item</button>
+      <button class="button is-primary is-loading" v-else>Give Item</button>
     </div>
   </div>
 </template>

diff --git a/frontend/src/components/loot/need_tome_item_box.vue b/frontend/src/components/loot/need_tome_item_box.vue
@@ -21,8 +21,8 @@
       </div>
     </div>
     <div v-if="userHasPermission" class="list-actions">
-      <button class="button is-success" @click="save" v-if="!requesting">Give Item</button>
-      <button class="button is-success is-loading" v-else>Give Item</button>
+      <button class="button is-primary" @click="save" v-if="!requesting">Give Item</button>
+      <button class="button is-primary is-loading" v-else>Give Item</button>
     </div>
   </div>
 </template>

diff --git a/frontend/src/components/loot_manager/per_fight.vue b/frontend/src/components/loot_manager/per_fight.vue
@@ -38,7 +38,10 @@
       </div>
 
       <template v-if="fight != 'na' && userHasPermission">
-        <button class="button is-success is-fullwidth" @click="save" v-if="!(requesting || requestingI)">Save Loot Assigments</button>
+        <button class="button is-success is-fullwidth" @click="save" v-if="!(requesting || requestingI)">
+          <span class="icon"><i class="material-icons">save</i></span>
+          <span>Save Loot Assigments</span>
+        </button>
         <button class="button is-success is-fullwidth is-loading" v-else>Save Loot Assigments</button>
       </template>
     </div>

diff --git a/frontend/src/components/modals/changelog.vue b/frontend/src/components/modals/changelog.vue
@@ -12,13 +12,32 @@
     </div>
     <div class="card-content content">
       <h2 class="has-text-primary subtitle">{{ version }}</h2>
-      <div class="divider"><i class="material-icons icon">expand_more</i> FFXIV 6.55 Update <i class="material-icons icon">expand_more</i></div>
+      <div class="divider"><i class="material-icons icon">expand_more</i> UI Consistency <i class="material-icons icon">expand_more</i></div>
       <p>
-        Added the following new types of Gear released in 6.55;
+        A bunch of changes have been made to the UI of the site after some feedback.
         <ul>
-          <li>Mandervillous Weapons - Item Level 665</li>
+          <li>The actions below a Team Member's card will now be rendered directly on the card on Desktop size displays. No more dropdown on Desktop. Icons have also been added to each link to make them stand out.</li>
+          <li>Actions below BIS Lists on a Character page now also have icons, and have been consolidated under an Actions dropdown on smaller screens for consistency with the Team Member cards.</li>
+          <li>Removed padding under BIS List tables for consistent spacing within their cards. Also replaced the large shadow below the header on all cards with a simple border.</li>
+          <li>Added icons to most buttons/links. Buttons/links that do similar things will have the same icons, to increase visual consistency.</li>
+          <li>Similarly, links and buttons with the same idea will now also be coloured the same.</li>
+          <li>The Add New links on the Dashboard have been turned into buttons for more visual consistency.</li>
+          <li>The buttons on the Create Proxy now use a style in line with other similar pages.</li>
+          <li>Confirmation popups with two actions will now always have the confirmation on the left and cancellation on the right. Also, cancel buttons will now be coloured the same as the X button to avoid confusion.</li>
         </ul>
       </p>
+      <p>The main idea of these changes is so; potentially long lists have their "Add New" button at the top, and all similar actions are linked visually.</p>
+      <p class="has-text-info">Feedback on these changes would be helpful also, as I want to make the best site I can!</p>
+
+      <div class="divider"><i class="material-icons icon">expand_more</i> Other Changes <i class="material-icons icon">expand_more</i></div>
+      <p>Importing from Etro now populates the BIS List's name field, if it does not already have one.</p>
+      <p>Added an action under BIS Lists on a Character's page to create a copy of the BIS List.</p>
+      <p>Updated the welcome page message for the first time since the site's release.</p>
+
+      <div class="divider"><i class="material-icons icon">expand_more</i> Fixes <i class="material-icons icon">expand_more</i></div>
+      <p>The heart from the Kofi logo will no longer be visible on top of dropdowns / tooltips.</p>
+      <p>Tabs with errors are correctly shown in the Settings page.</p>
+      <p>Errors on the Settings page are now cleared when a save is successful.</p>
 
     </div>
   </div>

diff --git a/frontend/src/components/modals/confirmations/claim_character.vue b/frontend/src/components/modals/confirmations/claim_character.vue
@@ -14,8 +14,18 @@
       </div>
     </div>
     <div class="card-footer">
-      <a class="card-footer-item" @click="() => { this.$emit('close') }">Cancel</a>
-      <a class="card-footer-item has-text-success" @click="claimCharacter">Claim Character</a>
+      <a class="card-footer-item has-text-success" @click="claimCharacter">
+        <span class="icon-text">
+          <span class="icon"><i class="material-icons">checklist</i></span>
+          <span>Claim Character</span>
+        </span>
+      </a>
+      <a class="card-footer-item has-text-link" @click="() => { this.$emit('close') }">
+        <span class="icon-text">
+          <span class="icon"><i class="material-icons">close</i></span>
+          <span>Cancel</span>
+        </span>
+      </a>
     </div>
   </div>
 </template>

diff --git a/frontend/src/components/modals/confirmations/delete_bis.vue b/frontend/src/components/modals/confirmations/delete_bis.vue
@@ -55,9 +55,24 @@
       </div>
     </div>
     <div class="card-footer">
-      <a class="card-footer-item" @click="() => { this.$emit('close') }">Cancel</a>
-      <a class="card-footer-item has-text-danger" v-if="canDelete" @click="deleteBIS">Delete</a>
-      <p class="card-footer-item disabled-delete" v-else data-microtip-position="top" role="tooltip" aria-label="This BIS List is still in use.">Delete</p>
+      <a class="card-footer-item has-text-danger" v-if="canDelete" @click="deleteBIS">
+        <span class="icon-text">
+          <span class="icon"><i class="material-icons">delete</i></span>
+          <span>Delete</span>
+        </span>
+      </a>
+      <p class="card-footer-item disabled-delete" v-else data-microtip-position="top" role="tooltip" aria-label="This BIS List is still in use.">
+        <span class="icon-text">
+          <span class="icon"><i class="material-icons">block</i></span>
+          <span>Delete</span>
+        </span>
+      </p>
+      <a class="card-footer-item has-text-link" @click="() => { this.$emit('close') }">
+        <span class="icon-text">
+          <span class="icon"><i class="material-icons">close</i></span>
+          <span>Cancel</span>
+        </span>
+      </a>
     </div>
   </div>
 </template>