Merge branch 'feature/fix-styles' into 'develop'

Add mobile and tablet UI, fix styles

See merge request pleroma/admin-fe!97

src/components/Status/index.vue

@@ -267,9 +267,8 @@ export default {
     font-style: italic;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .el-message {
     min-width: 80%;
   }

src/views/invites/index.vue

@@ -85,7 +85,7 @@
         sortable/>
       <el-table-column
         :label="$t('invites.token')"
-        :min-width="isDesktop ? 350 : 125"
+        :min-width="isDesktop ? 320 : 120"
         prop="token"/>
       <el-table-column
         v-if="isDesktop"
@@ -119,7 +119,9 @@
         <template slot-scope="scope">
           <el-tag
             :type="scope.row.used ? 'danger' : 'success'"
-            disable-transitions>{{ scope.row.used ? $t('invites.used') : $t('invites.active') }}</el-tag>
+            disable-transitions>
+            {{ scope.row.used ? $t('invites.used') : $t('invites.active') }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -268,9 +270,8 @@ export default {
     margin: 0 0 10px 0;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .invites-container {
     .actions-container {
       display: flex;
@@ -279,6 +280,9 @@ only screen and (max-width: 760px),
       align-items: center;
       margin: 15px 10px 7px 10px;
     }
+    .cell {
+      padding: 0;
+    }
     .create-invite-token {
       width: 100%;
     }
@@ -296,7 +300,9 @@ only screen and (max-width: 760px),
     }
     .invite-token-table {
       width: 100%;
-      margin: 0;
+      margin: 0 5px;
+      font-size: 12px;
+      font-weight: 500;
     }
     .invite-via-email {
       width: 100%;
@@ -308,6 +314,11 @@ only screen and (max-width: 760px),
     .info {
       margin: 0 0 10px 5px;
     }
+    th {
+      .cell {
+        padding: 0;
+      }
+    }
   }
   .create-invite-token {
     width: 100%

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">
-      <el-col :span="9">
-        <el-select
-          v-model="user"
-          class="user-select"
-          clearable
-          placeholder="Filter by admin/moderator"
-          @change="fetchLogWithFilters">
-          <el-option-group
-            v-for="group in users"
-            :key="group.label"
-            :label="group.label">
-            <el-option
-              v-for="item in group.options"
-              :key="item.id"
-              :label="item.nickname"
-              :value="item.id" />
-          </el-option-group>
-        </el-select>
-      </el-col>
-      <el-col :span="6" class="search-container">
-        <el-input
-          v-model="search"
-          placeholder="Search logs"
-          clearable
-          @input="handleDebounceSearchInput" />
-      </el-col>
-    </el-row>
-    <el-row type="flex" class="row-bg" justify="space-between">
-      <el-col :span="9" class="date-container">
-        <el-date-picker
-          :default-time="['00:00:00', '23:59:59']"
-          v-model="dateRange"
-          type="daterange"
-          start-placeholder="Start date"
-          end-placeholder="End date"
-          unlink-panels
-          @change="fetchLogWithFilters" />
-      </el-col>
-    </el-row>
+    <div class="moderation-log-nav-container">
+      <el-select
+        v-model="user"
+        class="moderation-log-user-select"
+        clearable
+        placeholder="Filter by admin/moderator"
+        @change="fetchLogWithFilters">
+        <el-option-group
+          v-for="group in users"
+          :key="group.label"
+          :label="group.label">
+          <el-option
+            v-for="item in group.options"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"/>
+        </el-option-group>
+      </el-select>
+      <el-input
+        v-model="search"
+        placeholder="Search logs"
+        clearable
+        class="moderation-log-search"
+        @input="handleDebounceSearchInput"/>
+    </div>
+    <el-date-picker
+      :default-time="['00:00:00', '23:59:59']"
+      v-model="dateRange"
+      type="daterange"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      unlink-panels
+      class="moderation-log-date-panel"
+      @change="fetchLogWithFilters" />
     <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>

src/views/reports/components/GroupedReport.vue

@@ -109,6 +109,9 @@ export default {
   .el-icon-arrow-right {
     margin-right: 6px;
   }
+  .divider {
+    margin: 15px 0;
+  }
   .grouped-report {
     .header-container {
       display: flex;
@@ -137,9 +140,8 @@ export default {
   .reported-status {
     margin-top: 15px;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .grouped-report {
       .header-container {
         display: flex;
@@ -155,5 +157,13 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .block {
+      .reports-timeline .el-timeline {
+        margin: 20px 10px;
+        .el-timeline-item__wrapper {
+          padding-left: 20px;
+        }
+      }
+    }
   }
 </style>

src/views/reports/components/NoteCard.vue

@@ -97,9 +97,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .el-card__header {
       padding: 10px 17px;
     }

src/views/reports/components/Report.vue

@@ -74,7 +74,7 @@
                 v-model="notes[report.id]"
                 :placeholder="$t('reports.leaveNote')"
                 type="textarea"
-                rows="3"/>
+                rows="2"/>
               <div class="report-post-note">
                 <el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
               </div>
@@ -279,9 +279,8 @@ export default {
     font-style: italic;
     color: gray;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .report {
       .header-container {
         display: flex;
@@ -303,5 +302,11 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .reports-timeline {
+      margin: 20px 10px;
+      .el-timeline-item__wrapper {
+        padding-left: 20px;
+      }
+    }
   }
 </style>

src/views/reports/components/ReportCard.vue

@@ -108,9 +108,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .el-card__header {
       padding: 10px 17px;
     }

src/views/reports/components/ReportsFilter.vue

@@ -54,12 +54,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>

src/views/reports/index.vue

@@ -92,9 +92,8 @@ export default {
     font-size: 28px;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .reports-container {
     h1 {
       margin: 7px 10px 15px 10px;
@@ -103,8 +102,5 @@ only screen and (max-width: 760px),
       margin: 0 10px;
     }
   }
-  #app > div > div.main-container > section > div > div.block > ul {
-    margin: 45px 45px 5px 19px;
-  }
 }
 </style>

src/views/settings/styles/main.scss

@@ -520,8 +520,8 @@
       margin-right: 8px
     }
   }
-  @media only screen and (max-width:801px) and (min-width: 481px) {
 
+  @media only screen and (max-width:801px) and (min-width: 481px) {
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;

src/views/statuses/index.vue

@@ -129,19 +129,19 @@ h1 {
   margin: 22px 0 0 0;
 }
 
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (max-width:480px) {
   .filter-container {
     display: flex;
     height: 36px;
     flex-direction: column;
-    margin: 10px 10px
+    margin: 10px 0;
   }
-
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
+  .select-instance {
+    width: 100%;
+  }
 }
 </style>

src/views/users/components/NewAccountDialog.vue

@@ -139,9 +139,8 @@ export default {
 .create-account-form-item-without-margin {
   margin-bottom: 0px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .create-user-dialog {
     width: 85%
   }

src/views/users/components/UsersFilter.vue

@@ -61,12 +61,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>

src/views/users/index.vue

@@ -269,9 +269,8 @@ export default {
     font-size: 28px;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .password-reset-token-dialog {
     width: 85%
   }

src/views/users/show.vue

@@ -23,81 +23,73 @@
         </p>
       </div>
     </el-dialog>
-    <el-row>
-      <el-col :span="8">
-        <el-card class="user-profile-card">
-          <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
-            <table class="user-profile-table">
-              <tbody>
-                <tr class="el-table__row">
-                  <td>{{ $t('userProfile.nickname') }}</td>
-                  <td>
-                    {{ user.nickname }}
-                  </td>
-                </tr>
-                <tr class="el-table__row">
-                  <td class="name-col">ID</td>
-                  <td class="value-col">
-                    {{ user.id }}
-                  </td>
-                </tr>
-                <tr class="el-table__row">
-                  <td>{{ $t('userProfile.tags') }}</td>
-                  <td>
-                    <el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
-                    <span v-if="user.tags.length === 0">—</span>
-                  </td>
-                </tr>
-                <tr class="el-table__row">
-                  <td>{{ $t('userProfile.roles') }}</td>
-                  <td>
-                    <el-tag v-if="user.roles.admin" class="user-profile-tag">
-                      {{ $t('users.admin') }}
-                    </el-tag>
-                    <el-tag v-if="user.roles.moderator" class="user-profile-tag">
-                      {{ $t('users.moderator') }}
-                    </el-tag>
-                    <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
-                  </td>
-                </tr>
-                <tr class="el-table__row">
-                  <td>{{ $t('userProfile.localUppercase') }}</td>
-                  <td>
-                    <el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
-                    <el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
-                  </td>
-                </tr>
-                <tr class="el-table__row">
-                  <td>{{ $t('userProfile.activeUppercase') }}</td>
-                  <td>
-                    <el-tag v-if="!user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
-                    <el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-      <el-row type="flex" class="row-bg" justify="space-between">
-        <el-col :span="18">
-          <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
-        </el-col>
-        <el-col :span="6" class="show-private">
-          <el-checkbox v-model="showPrivate" @change="onTogglePrivate">
-            {{ $t('userProfile.showPrivateStatuses') }}
-          </el-checkbox>
-        </el-col>
-      </el-row>
-      <el-col :span="16">
+    <div class="user-profile-container">
+      <el-card class="user-profile-card">
+        <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
+          <table class="user-profile-table">
+            <tbody>
+              <tr class="el-table__row">
+                <td>{{ $t('userProfile.nickname') }}</td>
+                <td>
+                  {{ user.nickname }}
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td class="name-col">ID</td>
+                <td class="value-col">
+                  {{ user.id }}
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td>{{ $t('userProfile.tags') }}</td>
+                <td>
+                  <el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
+                  <span v-if="user.tags.length === 0">—</span>
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td>{{ $t('userProfile.roles') }}</td>
+                <td>
+                  <el-tag v-if="user.roles.admin" class="user-profile-tag">
+                    {{ $t('users.admin') }}
+                  </el-tag>
+                  <el-tag v-if="user.roles.moderator" class="user-profile-tag">
+                    {{ $t('users.moderator') }}
+                  </el-tag>
+                  <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td>{{ $t('userProfile.localUppercase') }}</td>
+                <td>
+                  <el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
+                  <el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td>{{ $t('userProfile.activeUppercase') }}</td>
+                <td>
+                  <el-tag v-if="!user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
+                  <el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </el-card>
+      <div class="recent-statuses-container">
+        <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
+        <el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
+          {{ $t('userProfile.showPrivateStatuses') }}
+        </el-checkbox>
         <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
             <status :status="status" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
           </el-timeline-item>
           <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
         </el-timeline>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </main>
 </template>
 
@@ -193,6 +185,11 @@ table {
   margin-left: 28px;
   color: #606266;
 }
+.recent-statuses-container {
+  display: flex;
+  flex-direction: column;
+  width: 67%;
+}
 .recent-statuses-header {
   margin-top: 10px;
 }
@@ -205,6 +202,10 @@ table {
   line-height: 67px;
   margin-right: 20px;
 }
+.show-private-statuses {
+  margin-left: 28px;
+  margin-bottom: 20px;
+}
 .recent-statuses {
   margin-left: 28px;
 }
@@ -218,6 +219,11 @@ table {
 }
 .user-profile-card {
   margin: 0 20px;
+  width: 30%;
+  height: fit-content;
+}
+.user-profile-container {
+  display: flex;
 }
 .user-profile-table {
   margin: 0;
@@ -225,4 +231,65 @@ table {
 .user-profile-tag {
   margin: 0 4px 4px 0;
 }
+
+@media only screen and (max-width:480px) {
+  .avatar-name-container {
+    margin-bottom: 10px;
+  }
+  .recent-statuses {
+    margin: 20px 10px 15px 10px;
+  }
+  .recent-statuses-container {
+    width: 100%;
+    margin: 0 10px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 10px;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 15px 10px;
+  }
+  .user-profile-card {
+    margin: 0 10px;
+    width: 95%;
+    td {
+      width: 80px;
+    }
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .avatar-name-container {
+    margin-bottom: 20px;
+  }
+  .recent-statuses {
+    margin: 20px 10px 15px 0;
+  }
+  .recent-statuses-container {
+    width: 97%;
+    margin: 0 20px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 0;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 20px 20px;
+  }
+  .user-profile-card {
+    margin: 0 20px;
+    width: fit-content;
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
+}
 </style>