[+] Separate content with rate button for @click

src/pages/overall/overall-course/course-head/course-head.vue

@@ -1,16 +1,21 @@
 <template>
     <div id="course-head" class="course-card-content main vertical-center"
-         :class="clickable ? 'clickable' : ''" @click="redirect">
+         :class="clickable ? 'clickable' : ''">
 
+        <!-- Rating button -->
+        <div id="block-rate" v-if="displayRate" class="vertical-center" @click="ratingDialog = true">
+            Give a<br>Rating!
+        </div>
+
+        <!-- Main content -->
+        <div id="content" @click="redirect">
+            <!-- Left -->
             <div id="block-info">
                 <div id="name">{{course.name}}</div>
                 <div id="teacher">{{course.teacherName}}</div>
             </div>
 
-        <div id="block-rate" v-if="displayRate" class="vertical-center">
+            <!-- Right -->
-            Give a<br>rating!
-        </div>
-
             <div id="block-grade">
                 <div id="grade">
                     <span id="letter">{{course.letterGrade}} </span>
@@ -29,6 +34,8 @@
                 <div id="term-letter">{{course.letterGradeTerm(term)}}</div>
                 <div id="term-numeric">{{course.numericGradeTerm(term).toFixed(1)}}%</div>
             </div>
+        </div>
+
         <!-- Popup -->
         <el-dialog :title="`Give a Rating for ${course.name}`" :visible.sync="ratingDialog" :show-close="false"
                    width="50%">