Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature 11 comp tables desktop #24

Merged
merged 21 commits into from
Nov 15, 2021
Merged

Feature 11 comp tables desktop #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
319d628
Add table css file
Nov 9, 2021
5697177
merge master
Nov 9, 2021
f04eb4a
add some configurations previous to find bug on postcss not generatin…
Nov 9, 2021
7bcd071
add styles on index.html, plan is to move them to its own css onwards
Nov 10, 2021
06539ec
add styles to tables, add fa fa icons and aligned
Nov 10, 2021
ab86703
add stable commit all styles working properly
Nov 10, 2021
6b345dd
add tables style desktop stable release
Nov 11, 2021
32409a9
add merge conflict resolution
Nov 11, 2021
917efb3
Merge branch 'master' into feature-11-comp-tables-desktop
Nov 11, 2021
ee3ed43
Merge branch 'master' into feature-11-comp-tables-desktop
Nov 11, 2021
2ed36bb
add merge changes by edmund
Nov 11, 2021
a8ba4ab
add styles with tailwind first, reduced to only 2 css classes
Nov 11, 2021
7ec832d
Adds font awesome
Nov 11, 2021
e95f80b
add all styles with tailwind, deleted table.css
Nov 11, 2021
57c5b08
deleted br tags
Nov 12, 2021
c85cf7e
remove fontawesome
Nov 12, 2021
5f4df6b
Merge branch 'feature-11-comp-tables-desktop' of github.com:michelada…
Nov 12, 2021
b78e645
Merge branch 'feature-11-comp-tables-desktop' of https://github.com/m…
Nov 15, 2021
f00fc69
replace fa fa icons with heroicons
Nov 15, 2021
3a0314a
merge with master
Nov 15, 2021
f7576e1
Merge branch 'master' into feature-11-comp-tables-desktop
Nov 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 172 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,6 +513,178 @@ <h1 class='text-red'>Alerts</h1>
</div>
</div>
</div>


<header>
<h1 class='text-red'>Tables</h1>
</header>
<section>
<table class="w-full table-fixed">
<thead>
<tr>
<th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 01</th>
<th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 02</th>
<th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 03</th>
<th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 04</th>
<th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 05</th>
</tr>
</thead>
<tr class="w-full bg-blue-dark text-white " >
<td colspan="4" class="text-white py-4 pl-4" >
Sección colapsable focus
</td>
<td class="flex justify-end items-center h-14">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</td>
</tr>
<tr class="border-b-2 border-light-gray">
<td class="font-bold pl-4 py-4 flex flex-col">
<span class="w-full">
Info 01_1
</span>
<span class="font-normal w-full">
Info 01_2
</span>
</td>
<td class="pl-4 py-4 font-bold">Info 02</td>
<td class="pl-4 py-4">
<a href='http://www.michelada.io' class="underline">Info 03</a>
</td>
<td class="pl-4 py-4 italic">Info 04</td>
<td class="pl-4 py-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
123456789
</td>
</tr>
<tr class="bg-white-ish border-b-2 border-light-gray">
<td class="pl-4 py-4 font-bold flex flex-col">
Info 01_hover
<span class="font-normal">
Info 01_2
</span>
</td>
<td class="pl-4 py-4 font-bold">Info 02</td>
<td class="pl-4 py-4">
<a href='http://www.michelada.io' class="underline">Info 03</a>
</td>
<td class="pl-4 py-4 italic">Info 04</td>
<td class="pl-4 py-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
123456789
</td>
</tr>
<tr class="border-b-2 border-light-gray">
<td class="pl-4 py-4 font-bold flex flex-col">
Info 01_1
<span class="font-normal">
Info 01_2
</span>
</td>
<td class="pl-4 py-4 font-bold">Info 02</td>
<td class="pl-4 py-4">
<a href='http://www.michelada.io' class="underline">Info 03</a>
</td>
<td class="pl-4 py-4 italic">Info 04</td>
<td class="pl-4 py-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
123456789
</td>
</tr>
<tr class=" border-b-2 border-light-gray w-full py-4" >
<td colspan="4" class=" pl-4 py-6 w-full text-white font-bold text-blue" >
Sección colapsable 02
</td>
<td class=" flex justify-end items-center h-14">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue mr-4" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</td>
</tr>
<tr class=" border-b-2 border-light-gray w-full py-4" >
<td colspan="4" class=" pl-4 py-6 w-full text-white font-bold text-blue" >
Sección colapsable 03
</td>
<td class="flex justify-end items-center h-14">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue mr-4" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</td>
</tr>
</table>

<table class="w-full table-fixed mt-10">
<thead>
<tr>
<th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 01</th>
<th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 02</th>
<th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 03</th>
<th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 04</th>
<th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 05</th>
</tr>
</thead>



<tr class="border-b-2 border-light-gray">
<td class="pl-4 py-4 font-bold">
<div class=" flex items-center">
<img class="mtd_img w-10 rounded-3xl mr-4" alt="staff at michelada" src="https://ca.slack-edge.com/T04JVG8N6-U02L4KYN2TT-93697421d231-512"/>
<div class="flex flex-col">
Info con foto_1
<span class="font-normal">
Info con foto_2
</span>
</div>
</div>
</td>
<td class="pl-4 py-4 font-bold">Info 02</td>
<td class="pl-4 py-4">
<a href='http://www.michelada.io' class="underline">Info 03</a>
</td>
<td class="pl-4 py-4 italic">Info 04</td>
<td class="pl-4 py-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
123456789
</td>
</tr>
<tr class="border-b-2 border-light-gray">
<td class="pl-4 py-4 font-bold">
<div class=" flex items-center">
<img class="mtd_img w-10 rounded-3xl mr-4" alt="staff at michelada" src="https://ca.slack-edge.com/T04JVG8N6-U02L4KYN2TT-93697421d231-512"/>
<div class="flex flex-col">
Info con foto_1
<span class="font-normal">
Info con foto_2
</span>
</div>
</div>
</td>
<td class="pl-4 py-4 font-bold">Info 02</td>
<td class="pl-4 py-4">
<a href='http://www.michelada.io' class="underline">Info 03</a>
</td>
<td class="pl-4 py-4 font-bold italic">Info 04</td>
<td class="pl-4 py-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
123456789
</td>
</tr>
</table>


<!-- -->
</section>

<section class="mt-10">
Expand Down
15 changes: 15 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.