Skip to content

Commit

Permalink
#55 Add site item cards for larger screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@waseemsadiq
waseemsadiq committed Jun 6, 2022
1 parent 2302acf commit c4bd1ee
Show file tree
Hide file tree
Showing 5 changed files with 278 additions and 34 deletions.
24 changes: 16 additions & 8 deletions sites/dashboard/data/sites.json
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,70 @@
[
{
"path": "#",
"url": "#",
"img": "pages_thumbnail.png",
"name": "www.example.com",
"platform_name": "Pages",
"platform_version": "0.24",
"platform_bg_color": "jtblue-200",
"platform_text_color": "jtblue-600"
},
{
"path": "#",
"url": "#",
"img": "pages_thumbnail.png",
"name": "pagestest",
"platform_name": "Pages",
"platform_version": "0.23",
"platform_bg_color": "jtblue-200",
"platform_text_color": "jtblue-600"
},
{
"path": "#",
"url": "#",
"img": "j3_template_preview.png",
"name": "joomla3test",
"platform_name": "Joomla 3",
"platform_version": "3.10.99",
"platform_bg_color": "red-200",
"platform_text_color": "red-600"
},
{
"path": "#",
"url": "#",
"img": "j3_template_preview.png",
"name": "joomla3test2",
"platform_name": "Joomla 3",
"platform_version": "3.10.15",
"platform_bg_color": "red-200",
"platform_text_color": "red-600"
},
{
"path": "#",
"url": "#",
"img": "j4_template_preview.png",
"name": "joomla4test",
"platform_name": "Joomla 4",
"platform_version": "4.0.15",
"platform_bg_color": "green-200",
"platform_text_color": "green-600"
},
{
"path": "#",
"url": "#",
"img": "j4_template_preview.png",
"name": "joomla4test2",
"platform_name": "Joomla 4",
"platform_version": "4.0.15",
"platform_bg_color": "green-200",
"platform_text_color": "green-600"
},
{
"path": "#",
"url": "#",
"img": "wp_screenshot.png",
"name": "wptest",
"platform_name": "WordPress 5",
"platform_version": "5.93",
"platform_bg_color": "yellow-200",
"platform_text_color": "yellow-600"
},
{
"path": "#",
"url": "#",
"img": "wp_screenshot.png",
"name": "wptest2",
"platform_name": "WordPress 6",
"platform_version": "6.01",
Expand Down
38 changes: 22 additions & 16 deletions sites/dashboard/pages/index.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,42 +17,48 @@
</div>

<!-- TABLE -->
<div class="bg-white shadow rounded-lg my-8 overflow-x-scroll">
<div class="flex flex-row w-full justify-between bg-gray-200 text-gray-600 uppercase text-sm font-bold leading-normal">
<div class="w-1/12 py-3 px-6 text-left hidden md:inline-block">#</div>
<div class="w-4/12 py-3 px-6 text-left">Site</div>
<div class="w-2/12 py-3 px-6 text-center">Platform</div>
<div class="w-2/12 py-3 px-6 text-center hidden md:inline-block">Version</div>
<div class="bg-white shadow rounded-lg overflow-x-scroll md:bg-transparent md:shadow-none md:rounded-none md:overflow-x-none my-8">
<div class="flex flex-row w-full justify-between bg-gray-200 text-gray-600 uppercase text-sm font-bold leading-normal md:hidden">
<div class="w-5/12 py-3 px-6 text-left">Site</div>
<div class="w-4/12 py-3 px-6 text-center">Platform</div>
<div class="w-3/12 py-3 px-6 text-right">Actions</div>
</div>
<div class="text-gray-600 text-sm">
<div class="text-gray-600 text-sm md:grid lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 md:gap-8 md:m-4 ">
<? $id = 1; foreach(data('sites') as $site) : ?>
<div class="flex flex-row w-full justify-between border-b border-gray-200 hover:bg-gray-100">
<div class="w-1/12 py-3 px-6 text-left hidden md:inline-block"><?= $id ?></div>
<div class="w-4/12 py-3 px-6 text-left"><?= $site->name ?></div>
<div class="w-2/12 py-3 px-6 text-center"><span class="bg-<?= $site->platform_bg_color ?> text-<?= $site->platform_text_color ?> py-1 px-3 rounded-full text-xs whitespace-nowrap"><?= $site->platform_name ?></span></div>
<div class="w-2/12 py-3 px-6 text-center hidden md:inline-block"><?= $site->platform_version ?></div>
<div class="w-3/12 py-3 px-6 text-right">
<div id="sites" class="flex flex-row md:grid w-full justify-between border-b border-gray-200 hover:bg-gray-100 md:border-none md:bg-white md:hover:bg-white md:shadow md:rounded-lg transform transition duration-300 md:hover:scale-105">
<div class="hidden md:block w-auto lg:w-full place-self-center lg:place-self-start">
<a href="<?= $site->url ?>">
<img class="object-cover object-top h-20 w-20 lg:h-40 lg:w-full rounded-full lg:rounded-t-lg lg:rounded-b-none" src="images://<?= $site->img ?>">
</a>
</div>
<div class="w-5/12 md:w-full py-3 px-6 text-left font-semibold md:text-2xl">
<a class="hover:underline" href="<?= $site->url ?>">
<?= $site->name ?>
</a>
</div>
<div class="w-4/12 py-3 px-6 text-center md:text-left md:text-sm"><span class="bg-<?= $site->platform_bg_color ?> text-<?= $site->platform_text_color ?> py-1 px-3 rounded-full text-xs whitespace-nowrap"><?= $site->platform_name ?></span></div>
<div class="hidden md:flex w-2/12 py-3 px-6 text-left md:text-sm"><span>Version: </span><span><?= $site->platform_version ?></span></div>
<div class="w-3/12 md:w-full py-3 px-6">

<div class="flex item-center justify-end">
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-16 text-center">View site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-8 text-center">View site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-16 text-center">Edit site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-8 text-center">Edit site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-16 text-center">Delete site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-8 text-center">Delete site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
Expand Down
42 changes: 42 additions & 0 deletions sites/dashboard/theme/css/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,48 @@
@apply text-gray-100;
}

/* 'md': '768px' */
@media (min-width: 768px) {
#sites {
grid-template-columns: 20% 20% 20% 40%;
grid-template-areas: "a b b b"
"a c c ."
"a d d e"
}
}

/* 'lg': '1024px' */
@media (min-width: 1024px) {
#sites {
grid-template-columns: 30% 30% 40%;
grid-template-areas: "a a a"
"b b b"
"c c ."
"d d e"
}
}

#sites > div:nth-child(1) {
grid-area: a;
}

#sites > div:nth-child(2) {
grid-area: b;
}

#sites > div:nth-child(3) {
/*background-color: red;*/
grid-area: c;
}

#sites > div:nth-child(4) {
grid-area: d;
}

#sites > div:nth-child(5) {
grid-area: e;
}

}

@layer components {
Expand Down
Loading

0 comments on commit c4bd1ee

Please sign in to comment.