Merge pull request #283 from Piralein/list-design

Overhaul asset-list design

assets/css/base.css

@@ -1,3 +1,9 @@
+:root {
+    --base-color-text: #333;
+    --secondary-background-color: #f8f8f8;
+    --highlight-background-color: #e7e7e7;
+}
+
 body {
     font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     display: flex;
@@ -52,6 +58,7 @@ footer {
 .media-object {
     overflow: hidden;
     text-overflow: ellipsis;
+    flex-shrink: 0;
 }
 
 .nowrap {
@@ -63,17 +70,12 @@ footer {
     line-height: 1.8;
 }
 
-@media (min-width: 768px) {
-    .asset-item {
-        height: 95px;
-    }
-}
-
 .asset-search-container {
     display: flex;
     flex-direction: row;
     gap: 24px;
 }
+
 @media (max-width: 768px) {
     .asset-search-container {
         flex-direction: column;
@@ -148,11 +150,100 @@ footer {
     width: 100%;
 }
 
-.asset-search-results > .row {
-    height: 100%;
+.asset-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 12px;
+    padding: 0;
+    list-style: none;
+}
+
+.asset-list:not(.moderation-list) .asset-header {
+    flex: 1;
+}
+
+.asset-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.asset-header {
+    display: flex;
+    gap: 12px;
+    padding: 12px 12px 8px 12px;
+    background-color: var(--secondary-background-color);
+    border: 1px solid var(--highlight-background-color);
+}
+
+.asset-header:focus {
+    outline: 1px solid var(--base-color-text);
+    outline-offset: -1px;
+    box-shadow: none;
+}
+
+.asset-header:hover,
+.asset-header:focus,
+.asset-header:active {
+    text-decoration: none;
+    background-color: var(--highlight-background-color);
+}
+
+.asset-header:hover .asset-title h4,
+.asset-header:focus .asset-title h4,
+.asset-header:active .asset-title h4 {
+    text-decoration: underline;
+}
+
+.asset-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: var(--secondary-background-color);
+    border: 1px solid var(--highlight-background-color);
+}
+
+.asset-title {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 12px;
+}
+
+.asset-title h4 {
+    margin: 0;
+    font-weight: bold;
+    color: var(--base-color-text);
+}
+
+.asset-tags .label {
+    padding: 0 6px;
+    font-size: 13px;
+}
+
+.asset-tags-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    gap: 6px;
+}
+
+.asset-tags-moderation {
+    justify-content: flex-end;
+}
+
+.asset-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
 }
 
 .pagination-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
     text-align: center;
 }
 
@@ -176,11 +267,12 @@ footer {
         --secondary-background-color: #333639;
         --highlight-background-color: #505356;
         --input-background-color: #3b3e40;
-        --success-background-color: #527c41;
-        --danger-background-color: #ab1e1b;
-        --info-background-color: #1d87a6;
-        --notice-background-color: #3a57ad;
+        --success-background-color: #567a48;
+        --danger-background-color: #9c3d3b;
+        --info-background-color: #41788B;
+        --notice-background-color: #515e86;
         --warning-background-color: #b5761b;
+        --default-background-color: #696969;
         --base-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
     }
 
@@ -348,6 +440,10 @@ footer {
         color: white;
     }
 
+    .label-default {
+        background-color: var(--default-background-color);
+    }
+
     .label-info,
     .panel-info > .panel-heading,
     .table > tbody > tr > td.info {
@@ -372,4 +468,9 @@ footer {
     .table > tbody > tr > td.active {
         background-color: var(--primary-background-color);
     }
+
+    .asset-header,
+    .asset-footer {
+        border-color: var(--primary-background-color)
+    }
 }

templates/_header.phtml

@@ -25,7 +25,7 @@
 
     <!-- Bootstrap -->
     <link href="<?php echo raw($basepath) ?>/assets/css/bootstrap-3.4.1.min.css" rel="stylesheet">
-    <link href="<?php echo raw($basepath) ?>/assets/css/base.css?4" rel="stylesheet">
+    <link href="<?php echo raw($basepath) ?>/assets/css/base.css?5" rel="stylesheet">
 </head>
 
 <body>

templates/asset.phtml

@@ -15,10 +15,10 @@
             <?php } ?>
 
             <span class="label label-primary"><?php echo esc($data['category']) ?></span>
-            <span class="label label-danger"><?php echo esc(ucfirst(str_replace('_', ' ', $data['godot_version']))) ?></span>
+            <span class="label label-info"><?php echo esc(ucfirst(str_replace('_', ' ', $data['godot_version']))) ?></span>
             <span class="label label-<?php echo raw([
-                'official' => 'success',
-                'community' => 'info',
+                'official' => 'danger',
+                'community' => 'success',
                 'testing' => 'default',
             ][$data['support_level']]) ?>"><?php echo esc(ucfirst($data['support_level'])) ?></span>
         </h4>

templates/asset_edits.phtml

@@ -50,37 +50,47 @@
     </form>
 
     <div class="asset-search-results">
-        <?php foreach($data['result'] as $i => $asset_edit) { ?>
-            <div class="media">
-                <div class="media-left">
-                    <a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>">
+        <ol class="asset-list moderation-list">
+            <?php foreach($data['result'] as $i => $asset_edit) { ?>
+                <li class="asset-item">
+                    <a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>" class="asset-header">
                         <img class="media-object" src="<?php echo esc($asset_edit['icon_url']) ?>" alt="<?php echo esc($asset_edit['title']) ?>'s icon" width=80 height=80>
+                        <div class="asset-title">
+                            <h4><?php echo esc($asset_edit['title']) ?></h4>
+                            <div class="asset-tags-container">
+                                <div class="asset-tags">
+                                    <span class="label label-info"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['godot_version']))) ?></span>
+                                    <span class="label label-<?php echo raw([
+                                        'official' => 'danger',
+                                        'community' => 'success',
+                                        'testing' => 'default',
+                                    ][$asset_edit['support_level']]) ?>"><?php echo raw(ucfirst($asset_edit['support_level'])) ?></span>
+                                </div>
+                            </div>
+                            <div class="asset-tags-container asset-tags-moderation">
+                                <div class="asset-tags">
+                                    <span class="label label-default"><?php echo raw($asset_edit['author']) ?></span>
+                                    <span class="label label-<?php echo raw([
+                                        'new' => 'info',
+                                        'in_review' => 'primary',
+                                        'rejected' => 'danger',
+                                        'accepted' => 'success'
+                                    ][$asset_edit['status']]) ?>"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['status']))) ?></span>
+                                </div>
+                            </div>
+                        </div>
                     </a>
-                </div>
-                <div class="media-body">
-                    <h4 class="media-heading">
-                        <a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>"><?php echo ($asset_edit['asset_id'] == -1 ? 'Create ' : 'Edit ') . '"' . esc($asset_edit['title']) . '"' ?></a>
-                        <br>
-                        <span class="label label-<?php echo raw([
-                            'new' => 'info',
-                            'in_review' => 'primary',
-                            'rejected' => 'danger',
-                            'accepted' => 'success'
-                        ][$asset_edit['status']]) ?>"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['status']))) ?></span>
-                        <span class="label label-default"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['godot_version']))) ?></span>
-
-                        <span class="label label-<?php echo raw([
-                            'official' => 'danger',
-                            'community' => 'info',
-                            'testing' => 'success',
-                        ][$asset_edit['support_level']]) ?>"><?php echo raw(ucfirst($asset_edit['support_level'])) ?></span>
-                    </h4>
-
-                    <p>Submitted by user <?php echo esc($asset_edit['author']) ?></p>
-                    <?php if($asset_edit['status'] == 'rejected' && $asset_edit['reason']) echo 'Rejection reason: ' . esc($asset_edit['reason']) ?>
-                </div>
-            </div>
-        <?php } ?>
+                    <?php if($asset_edit['status'] == 'rejected' && $asset_edit['reason']) { ?>
+                        <div class="asset-footer">
+                            <div>
+                                <span><b>Rejection reason:</b></span><br>
+                                <span><?php echo esc($asset_edit['reason']) ?></span>
+                            </div>
+                        </div>
+                    <?php } ?>
+                </li>
+            <?php } ?>
+        </ol>
 
         <?php include("_pagination.phtml") ?>
     </div>

templates/assets.phtml

@@ -101,39 +101,36 @@
     </form>
 
     <div class="asset-search-results">
-        <div class="row">
+        <ol class="asset-list">
             <?php foreach($data['result'] as $i => $asset) { ?>
-                <div class="col-md-6 asset-item">
-                    <div class="media">
-                        <div class="media-left">
-                            <a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>" class="img-thumbnail">
-                                <img class="media-object" src="<?php echo esc($asset['icon_url']) ?>" alt="<?php echo esc($asset['title']) ?>'s icon" width=80 height=80>
-                            </a>
-                        </div>
-                        <div class="media-body">
-                            <h4 class="media-heading">
-                                <a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>"><?php echo esc($asset['title']) ?></a>
-                                <small><?php echo esc($asset['version_string']) ?></small>
-                                <br>
-                                <span class="label label-primary"><?php echo esc($asset['category']) ?></span>
-                                <span class="label label-danger"><?php echo esc(ucfirst(str_replace('_', ' ', $asset['godot_version']))) ?></span>
-                                <span class="label label-<?php echo raw([
-                                    'official' => 'success',
-                                    'community' => 'info',
-                                    'testing' => 'default',
-                                ][$asset['support_level']]) ?>"><?php echo esc(ucfirst($asset['support_level'])) ?></span>
-                            </h4>
-
-                            <p class="text-muted">
-                                Submitted by user <a href="?user=<?php echo esc($asset['author']) ?>" title="Search assets by '<?php echo esc($asset['author']) ?>'"><?php echo esc($asset['author']) ?></a>;
-                                <?php echo esc($asset['cost']) ?>;
-                                <span class="nowrap"><?php echo esc(explode(" ", $asset['modify_date'])[0]) ?></span>
-                            </p>
+                <li class="asset-item">
+                    <a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>" class="asset-header">
+                        <img class="media-object" src="<?php echo esc($asset['icon_url']) ?>" alt="<?php echo esc($asset['title']) ?>'s icon" width=80 height=80>
+                        <div class="asset-title">
+                            <h4><?php echo esc($asset['title']) ?></h4>
+                            <div class="asset-tags-container">
+                                <div class="asset-tags">
+                                    <span class="label label-primary"><?php echo esc($asset['category']) ?></span>
+                                    <span class="label label-info"><?php echo esc(ucfirst(str_replace('_', ' ', $asset['godot_version']))) ?></span>
+                                    <span class="label label-<?php echo raw([
+                                        'official' => 'danger',
+                                        'community' => 'success',
+                                        'testing' => 'default',
+                                    ][$asset['support_level']]) ?>"><?php echo esc(ucfirst($asset['support_level'])) ?></span>
+                                </div>
+                                <div class="asset-tags">
+                                    <span class="label label-default"><?php echo esc($asset['cost']) ?></span>
+                                </div>
+                            </div>
                         </div>
+                    </a>
+                    <div class="asset-footer">
+                        <a href="?user=<?php echo esc($asset['author']) ?>" title="Search assets by '<?php echo esc($asset['author']) ?>'"><?php echo esc($asset['author']) ?></a>
+                        <span><b><?php echo esc($asset['version_string']) ?></b> | <?php echo esc(explode(" ", $asset['modify_date'])[0]) ?></span>
                     </div>
-                </div>
+                </li>
             <?php } ?>
-        </div>
+        </ol>
 
         <?php include("_pagination.phtml") ?>
     </div>