Show fewer lines for class cards on wider screens

sipb · Apr 19, 2019 · 04c24b2 · 04c24b2
1 parent 5ca640f
commit 04c24b2
Showing 1 changed file with 47 additions and 21 deletions.
diff --git a/src/components/Class.vue b/src/components/Class.vue
@@ -3,10 +3,10 @@
 <template>
   <v-flex lg2 md3 xs4>
     <v-hover>
-      <v-badge overlap right color = "rgba(0,0,0,0)" style = "width:100%;" slot-scope = "{ hover }">
+      <v-badge overlap right color="rgba(0,0,0,0)" style="width:100%;" slot-scope="{ hover }">
         <v-card
-          v-if = "classInfo == 'placeholder'"
-          class = "placeholder classbox"
+          v-if="classInfo == 'placeholder'"
+          class="placeholder"
         >
           <v-container fill-height>
             <v-layout>
@@ -18,40 +18,55 @@
         <v-card
           v-else
           draggable
-          v-on:dragstart = "dragStart"
-          v-on:click = "$emit('click-class', classInfo)"
-          :id = "'class'+classInfo.id.replace('.','')+semesterIndex"
+          v-on:dragstart="dragStart"
+          v-on:click="$emit('click-class', classInfo)"
+          :id="'class' + classInfo.id.replace('.','') + semesterIndex"
         >
           <!-- This extra div is necessary because we can't set style with background-color on the v-card. -->
-          <div :class="cardClass(classInfo)">
-            <v-icon style = "margin: 4px" small @click = "$emit('remove-class',classInfo); $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>
+          <div :class="cardClass(classInfo)" :style="cardHeight">
+            <v-icon
+              style="margin: 4px"
+              small
+              @click="$emit('remove-class', classInfo); $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>
           </div>
         </v-card>
-        <v-btn v-if = "warnings.length>0&&(!classInfo.overrideWarnings||hover)" @click = "warningDialog = true" icon slot = "badge">
-          <v-icon medium>
-            warning
-          </v-icon>
+        <v-btn
+          v-if="warnings.length > 0 && (!classInfo.overrideWarnings || hover)"
+          @click="warningDialog = true"
+          icon
+          slot="badge"
+        >
+          <v-icon medium>warning</v-icon>
         </v-btn>
       </v-badge>
     </v-hover>
-    <v-dialog v-model = "warningDialog" max-width="600">
+    <v-dialog v-model="warningDialog" max-width="600">
       <v-card>
-        <v-btn icon flat style = "float:right" @click = "warningDialog = false"><v-icon>close</v-icon></v-btn>
+        <v-btn icon flat style = "float:right" @click = "warningDialog = false">
+          <v-icon>close</v-icon>
+        </v-btn>
         <v-card-title>
           <h3>Warnings for {{classInfo.id}}</h3>
         </v-card-title>
         <v-card-text>
-          <p v-for = "warning in warnings" v-html="warning"></p>
+          <p v-for="warning in warnings" v-html="warning"></p>
           <v-switch
-            label = "Override Warnings"
-            color = "orange darken-3"
-            v-model = "shouldOverrideWarnings"
+            label="Override warnings"
+            color="orange darken-3"
+            v-model="shouldOverrideWarnings"
           >
           </v-switch>
         </v-card-text>
         <v-card-actions style="justify-content: flex-end;">
-          <v-btn flat @click = "warningDialog = false; $emit('override-warnings',{override:shouldOverrideWarnings,classInfo:classInfo})">Close</v-btn>
+          <v-btn
+            flat
+            @click="warningDialog = false; $emit('override-warnings', {override: shouldOverrideWarnings, classInfo: classInfo})"
+          >Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -72,6 +87,18 @@ export default {
       shouldOverrideWarnings: this.classInfo.overrideWarnings
     }
   },
+  computed: {
+    cardHeight: function() {
+      switch (this.$vuetify.breakpoint.name) {
+         /* Chosen for n lines in the card, working with the set padding and margins. */
+        case 'xs': return 'height: 5.8em;' // 3 lines
+        case 'sm': return 'height: 5.8em;' // 3 lines
+        case 'md': return 'height: 5.8em;' // 3 lines
+        case 'lg': return 'height: 4.2em;' // 2 lines
+        case 'xl': return 'height: 4.2em;' // 2 lines
+      }
+    }
+  },
   methods: {
     dragStart: function(event) {
       event.dataTransfer.setData('classData', JSON.stringify({isNew: false,classInfo:this.classInfo}));
@@ -107,7 +134,6 @@ export default {
   .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;
     /* Multi-line truncation is not a supported feature of CSS right now.