Add Mobile and Tablet UI to Moderation Log section

src/views/moderation_log/index.vue

@@ -1,46 +1,40 @@
 <template>
   <div v-if="!loading" class="moderation-log-container">
     <h1>{{ $t('moderationLog.moderationLog') }}</h1>
-    <el-row type="flex" class="row-bg" justify="space-between">
+    <div class="moderation-log-nav-container">
-      <el-col :span="9">
+      <el-select
-        <el-select
+        v-model="user"
-          v-model="user"
+        class="moderation-log-user-select"
-          class="user-select"
+        clearable
-          clearable
+        placeholder="Filter by admin/moderator"
-          placeholder="Filter by admin/moderator"
+        @change="fetchLogWithFilters">
-          @change="fetchLogWithFilters">
+        <el-option-group
-          <el-option-group
+          v-for="group in users"
-            v-for="group in users"
+          :key="group.label"
-            :key="group.label"
+          :label="group.label">
-            :label="group.label">
+          <el-option
-            <el-option
+            v-for="item in group.options"
-              v-for="item in group.options"
+            :key="item.id"
-              :key="item.id"
+            :label="item.nickname"
-              :label="item.nickname"
+            :value="item.id"/>
-              :value="item.id" />
+        </el-option-group>
-          </el-option-group>
+      </el-select>
-        </el-select>
+      <el-input
-      </el-col>
+        v-model="search"
-      <el-col :span="6" class="search-container">
+        placeholder="Search logs"
-        <el-input
+        clearable
-          v-model="search"
+        class="moderation-log-search"
-          placeholder="Search logs"
+        @input="handleDebounceSearchInput"/>
-          clearable
+    </div>
-          @input="handleDebounceSearchInput" />
+    <el-date-picker
-      </el-col>
+      :default-time="['00:00:00', '23:59:59']"
-    </el-row>
+      v-model="dateRange"
-    <el-row type="flex" class="row-bg" justify="space-between">
+      type="daterange"
-      <el-col :span="9" class="date-container">
+      start-placeholder="Start date"
-        <el-date-picker
+      end-placeholder="End date"
-          :default-time="['00:00:00', '23:59:59']"
+      unlink-panels
-          v-model="dateRange"
+      class="moderation-log-date-panel"
-          type="daterange"
+      @change="fetchLogWithFilters" />
-          start-placeholder="Start date"
-          end-placeholder="End date"
-          unlink-panels
-          @change="fetchLogWithFilters" />
-      </el-col>
-    </el-row>
     <el-timeline>
       <el-timeline-item
         v-for="(logEntry, index) in log"
@@ -55,6 +49,7 @@
         :hide-on-single-page="true"
         :page-size="50"
         :total="total"
+        :small="isMobile"
         layout="prev, pager, next"
         @current-change="fetchLogWithFilters" />
     </div>
@@ -76,6 +71,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
       return this.$store.state.moderationLog.logLoading &&
              this.$store.state.moderationLog.adminsLoading
@@ -138,7 +136,17 @@ h1 {
   margin: 25px 45px 0 0;
   padding: 0px;
 }
-.user-select {
+.moderation-log-date-panel {
+  width: 350px;
+}
+.moderation-log-nav-container {
+  display: flex;
+  justify-content: space-between;
+}
+.moderation-log-search {
+  width: 350px;
+}
+.moderation-log-user-select {
   margin: 0 0 20px;
   width: 350px;
 }
@@ -148,4 +156,30 @@ h1 {
 .pagination {
   text-align: center;
 }
+
+@media only screen and (max-width:480px) {
+  .moderation-log-date-panel {
+    width: 100%;
+  }
+  .moderation-log-user-select {
+    margin: 0 0 10px;
+    width: 55%;
+  }
+  .moderation-log-search {
+    width: 40%;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .moderation-log-date-panel {
+    width: 55%;
+  }
+  .moderation-log-user-select {
+    margin: 0 0 10px;
+    width: 55%;
+  }
+  .moderation-log-search {
+    width: 40%;
+  }
+}
 </style>