Shortened titles

package.json

@@ -22,6 +22,7 @@
     "ua-parser-js": "^0.7.19",
     "vue-context": "^3.4.0",
     "vue-cookies": "^1.5.12",
+    "vue-line-clamp": "^1.3.2",
     "vue-router": "^3.0.4",
     "vue-scrolling-table": "^0.2.2",
     "vuetify": "^1.5.12",

src/components/Class.vue

@@ -33,16 +33,16 @@
             <v-icon style="margin: 4px" small @click="$store.commit('removeClass', {classInfo: classInfo, classIndex: classIndex}); $event.stopPropagation();">
               cancel
             </v-icon>
-            <v-card-text class="card-text">
-              <span style="font-weight: bold; font-size: 1.1em;">{{ classInfo.id }}</span> {{ classInfo.title }}
+            <v-card-text ref="title" v-line-clamp:20="3" class="card-text">
+              <span style="font-weight: bold; font-size: 1.1em;">{{ classInfo.id }}</span> {{ useShortenedTitle ? shortenedTitle : classInfo.title }}
             </v-card-text>
           </div>
         </v-card>
-        <v-btn v-if="warnings.length>0&&(!classInfo.overrideWarnings||hover)" slot="badge" icon @click="warningDialog = true">
+        <!--<v-btn v-if="warnings.length>0&&(!classInfo.overrideWarnings||hover)" slot="badge" icon @click="warningDialog = true">
           <v-icon medium>
             warning
           </v-icon>
-        </v-btn>
+        </v-btn>-->
       </v-badge>
     </v-hover>
     <v-dialog v-model="warningDialog" max-width="600">
@@ -74,6 +74,11 @@
 
 <script>
 import colorMixin from './../mixins/colorMixin.js';
+import { abbreviations, nonAbbreviator } from './../utils/abbreviations.js';
+import Vue from 'vue';
+import VueLineClamp from './../utils/vue-line-clamp.js';
+
+Vue.use(VueLineClamp);
 
 export default {
   name: 'Class',
@@ -99,9 +104,32 @@ export default {
   data () {
     return {
       warningDialog: false,
-      shouldOverrideWarnings: this.classInfo.overrideWarnings
+      shouldOverrideWarnings: this.classInfo.overrideWarnings,
+      useShortenedTitle: false
     };
   },
+  computed: {
+    shortenedTitle: function () {
+      var title = this.classInfo.title.split(/([^A-Za-z])/);// Keep separators
+      var words = [];
+      for (const word of title) {
+        const lookup = word.toLowerCase();
+        var abbr = abbreviations[lookup];
+        if (abbr) {
+          var abbrevChar = '.';
+          if (abbr.startsWith(nonAbbreviator)) {
+            abbr = abbr.substring(nonAbbreviator.length);
+            abbrevChar = '';
+          }
+          // Match capitalization
+          words.push((word.charAt(0) === lookup.charAt(0) ? abbr : abbr.charAt(0).toUpperCase() + abbr.slice(1)) + abbrevChar);
+        } else {
+          words.push(word);
+        }
+      }
+      return words.join('');
+    }
+  },
   methods: {
     dragStart: function (event) {
       event.dataTransfer.setData('classData', JSON.stringify({ isNew: false, classInfo: this.classInfo, classIndex: this.classIndex }));
@@ -131,14 +159,14 @@ export default {
     padding: 0;
     margin: .2em .4em 0em .2em;
     height: 100%;
+    overflow: hidden;
   }
 
   .classbox {
     display: flex;
     align-items: flex-start;
     height: 5.8em; /* Chosen for three lines in the card, working with the set padding and margins. */
-    overflow: hidden;
-    padding: .2em .4em .4em .2em;
+    padding: .2em .4em .5em .2em;
     /* Multi-line truncation is not a supported feature of CSS right now.
        Optimally, we would have multi-line truncation within the cards, but
        currently extra words are clipped.