Skip to content

Commit

Permalink
#55 Hide site number and version column on small screens and fix whit…
Browse files Browse the repository at this point in the history 
…espace wrapping
  • Loading branch information
@waseemsadiq
waseemsadiq committed Jun 5, 2022
1 parent 4dc914f commit 5a73bce
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 34 deletions.
12 changes: 6 additions & 6 deletions sites/dashboard/data/sites.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,47 +10,47 @@
{
"path": "#",
"name": "joomla3test",
"platform_name": "Joomla3",
"platform_name": "Joomla 3",
"platform_version": "3.10.99",
"platform_bg_color": "red-200",
"platform_text_color": "red-600"
},
{
"path": "#",
"name": "joomla3test2",
"platform_name": "Joomla3",
"platform_name": "Joomla 3",
"platform_version": "3.10.15",
"platform_bg_color": "red-200",
"platform_text_color": "red-600"
},
{
"path": "#",
"name": "joomla4test",
"platform_name": "Joomla4",
"platform_name": "Joomla 4",
"platform_version": "4.0.15",
"platform_bg_color": "green-200",
"platform_text_color": "green-600"
},
{
"path": "#",
"name": "joomla4test2",
"platform_name": "Joomla4",
"platform_name": "Joomla 4",
"platform_version": "4.0.15",
"platform_bg_color": "green-200",
"platform_text_color": "green-600"
},
{
"path": "#",
"name": "wptest",
"platform_name": "WordPress5",
"platform_name": "WordPress 5",
"platform_version": "5.93",
"platform_bg_color": "yellow-200",
"platform_text_color": "yellow-600"
},
{
"path": "#",
"name": "wptest2",
"platform_name": "WordPress6",
"platform_name": "WordPress 6",
"platform_version": "6.01",
"platform_bg_color": "purple-200",
"platform_text_color": "purple-600"
Expand Down
34 changes: 17 additions & 17 deletions sites/dashboard/pages/index.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,53 +18,53 @@

<!-- TABLE -->
<div class="bg-white shadow rounded-sm my-2.5 overflow-x-scroll">
<div class="flex flex-row w-full bg-gray-200 text-gray-600 uppercase text-sm font-bold leading-normal">
<div class="w-1/12 py-3 px-6 text-left">#</div>
<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">Version</div>
<div class="w-2/12 py-3 px-6 text-center hidden md:inline-block">Version</div>
<div class="w-3/12 py-3 px-6 text-right">Actions</div>
</div>
<div class="text-gray-600 text-sm">
<? $id = 1; foreach(data('sites') as $site) : ?>
<div class="flex flex-row w-full border-b border-gray-200 hover:bg-gray-100">
<div class="w-1/12 py-3 px-6 text-left"><?= $id ?></div>
<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"><?= $site->platform_name ?></span></div>
<div class="w-2/12 py-3 px-6 text-center"><?= $site->platform_version ?></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 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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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">View site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-16 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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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">Edit site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-16 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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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">Delete site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-16 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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">Download remote site</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-28 text-center">Download remote site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">Deploy to fly.io</span>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12 -ml-24 text-center">Deploy to fly.io</span>
</div>
</div>

Expand Down
4 changes: 1 addition & 3 deletions sites/dashboard/theme/css/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,7 @@
}

.has-tooltip:hover .tooltip {
@apply visible z-50;
width: 180px;
right: -90px;
@apply visible whitespace-nowrap z-50;
}

.embedded a:link,
Expand Down
Loading

0 comments on commit 5a73bce

Please sign in to comment.