Skip to content

Commit b5d18a4

Browse files
MiguelGalpMiguelGalp
committed
[render-examples#12] - Mobile Layout
1 parent 71706ab commit b5d18a4

File tree

3 files changed

+96
-9
lines changed

3 files changed

+96
-9
lines changed

‎static/css/output.css

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -624,6 +624,18 @@ video {
624624
right: 2rem;
625625
}
626626

627+
.order-1 {
628+
order: 1;
629+
}
630+
631+
.order-2 {
632+
order: 2;
633+
}
634+
635+
.order-3 {
636+
order: 3;
637+
}
638+
627639
.mx-1 {
628640
margin-left: 0.25rem;
629641
margin-right: 0.25rem;
@@ -723,6 +735,10 @@ video {
723735
margin-left: 4rem;
724736
}
725737

738+
.mt-3 {
739+
margin-top: 0.75rem;
740+
}
741+
726742
.block {
727743
display: block;
728744
}
@@ -767,6 +783,14 @@ video {
767783
width: 100%;
768784
}
769785

786+
.w-1\/2 {
787+
width: 50%;
788+
}
789+
790+
.w-1\/3 {
791+
width: 33.333333%;
792+
}
793+
770794
.min-w-0 {
771795
min-width: 0px;
772796
}
@@ -775,6 +799,26 @@ video {
775799
max-width: 1024px;
776800
}
777801

802+
.max-w-52 {
803+
max-width: 13rem;
804+
}
805+
806+
.max-w-60 {
807+
max-width: 15rem;
808+
}
809+
810+
.scale-105 {
811+
--tw-scale-x: 1.05;
812+
--tw-scale-y: 1.05;
813+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
814+
}
815+
816+
.scale-125 {
817+
--tw-scale-x: 1.25;
818+
--tw-scale-y: 1.25;
819+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
820+
}
821+
778822
.transform {
779823
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
780824
}
@@ -791,6 +835,10 @@ video {
791835
flex-wrap: wrap;
792836
}
793837

838+
.flex-wrap-reverse {
839+
flex-wrap: wrap-reverse;
840+
}
841+
794842
.items-center {
795843
align-items: center;
796844
}
@@ -803,6 +851,12 @@ video {
803851
justify-content: space-between;
804852
}
805853

854+
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
855+
--tw-space-y-reverse: 0;
856+
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
857+
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
858+
}
859+
806860
.break-words {
807861
overflow-wrap: break-word;
808862
}
@@ -873,7 +927,29 @@ video {
873927
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
874928
}
875929

930+
@media (min-width: 640px) {
931+
.sm\:-ml-4 {
932+
margin-left: -1rem;
933+
}
934+
}
935+
876936
@media (min-width: 768px) {
937+
.md\:order-none {
938+
order: 0;
939+
}
940+
941+
.md\:-mt-3 {
942+
margin-top: -0.75rem;
943+
}
944+
945+
.md\:mt-0 {
946+
margin-top: 0px;
947+
}
948+
949+
.md\:ml-16 {
950+
margin-left: 4rem;
951+
}
952+
877953
.md\:w-1\/12 {
878954
width: 8.333333%;
879955
}
@@ -889,6 +965,16 @@ video {
889965
.md\:w-4\/12 {
890966
width: 33.333333%;
891967
}
968+
969+
.md\:scale-100 {
970+
--tw-scale-x: 1;
971+
--tw-scale-y: 1;
972+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
973+
}
974+
975+
.md\:flex-nowrap {
976+
flex-wrap: nowrap;
977+
}
892978
}
893979

894980
@media (min-width: 992px) {

‎templates/base.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>{% block title %}{% endblock title %}</title>
67
<link href="/static/css/output.css" rel="stylesheet">
78
</head>

‎templates/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@
66

77
<div class="flex items-center justify-center min-h-screen"> <!-- Full viewport height and centering utilities -->
88
<div class="w-full max-w-screen-xl px-4 lg:px-8 mx-auto"> <!-- Horizontal centering and max width -->
9-
<div class="flex flex-wrap items-center justify-center custom-position-content"
9+
<div class="flex flex-wrap items-center justify-center custom-position-content md:flex-nowrap"
1010
style="--tw-translate-x: 35px; @media (min-width: 768px) { --tw-translate-x: 35px; } @media (min-width: 1024px) { --tw-translate-x: 100px; } @media (min-width: 1280px) { --tw-translate-x: 130px; }"
1111
x-data
1212
x-init="$el.style.transform = `translateX(${getComputedStyle($el).getPropertyValue('--tw-translate-x')})`">
13-
<div class="w-full md:w-1/12 md:ml-2/12 -mt-3 ml-16 mr-6 bg-white bg-clip-border border border-solid border-gray-200 rounded-md text-center cursor-pointer font-extrabold"
13+
<div class="w-1/3 md:w-1/12 md:ml-2/12 mt-3 md:-mt-3 sm:-ml-4 md:ml-16 mr-6 bg-white bg-clip-border border border-solid border-gray-200 rounded-md text-center cursor-pointer font-extrabold order-3 md:order-none"
1414
style="height: 82px;">
1515
<div id="argentina" class="mt-4">.AR</div>
1616
<div id="chile">.CH</div>
1717
</div>
18-
<div class="w-full md:w-4/12 lg:w-4/12 xl:w-4/12" style="max-width: 250px;"> <!-- COLUMNA DASHBOARD -->
18+
<div class="w-full md:w-4/12 lg:w-4/12 xl:w-4/12 mt-4 md:mt-0 order-2 md:order-none" style="max-width: 250px;"> <!-- COLUMNA DASHBOARD -->
1919
<div class="mb-1">
2020
<div class="flex justify-between">
2121
{% if last_total_increase %}
@@ -40,7 +40,7 @@
4040
</div>
4141
</div>
4242
<!-- COMPONENTE ÍNDICE-->
43-
<div class="relative flex flex-col min-w-0 break-words bg-white bg-clip-border border border-solid border-gray-200 rounded-md">
43+
<div class="relative flex flex-col max-w-60 break-words bg-white bg-clip-border border border-solid border-gray-200 rounded-md">
4444
<div class="card-body p-5" style="background-color: var(--background-body);">
4545
<div class="p-0">
4646
<div
@@ -50,20 +50,20 @@
5050
</div>
5151
</div>
5252
<div class="flex justify-between" style="margin-top: 3px; margin-left: 30px;">
53-
<div class="flex items-center"
54-
style="filter: var(--legibilidad); font-size: 24px; font-weight: 900; color: var(--texto-amarillo-pleno); width: 50%; position: relative; bottom: 62px; left: 55px; z-index: 2;">
53+
<div class="flex items-center font-extrabold"
54+
style="filter: var(--legibilidad); font-size: 24px; width: 50%; position: relative; bottom: 62px; left: 55px; z-index: 2;"> <!-- var(--legibilidad) para seleccionar desde fetch, no por CSS-->
5555
{{ '%.2f'|format(min(total_engagement * 1000, 100)) }}%
5656
</div>
5757
</div>
5858
</div>
59-
<div class="w-full md:w-3/12 mx-1">
59+
<div class="w-full md:w-3/12 mx-1 mt-4 md:mt-0 order-1 md:order-none scale-125 md:scale-100">
6060
<div class="-mt-5 text-center" style="letter-spacing: 0%;">
6161
<div class="text-uppercase inline mr-20 relative right-1 top-3 font-extrabold"
6262
style="font-size: 20px;">
6363
ODIO <div class="inline" style="opacity: 40%;">OÍDO:</div>
6464
</div>
65-
<div class="text-uppercase"
66-
style="font-size: 28px; font-weight: 900; margin-top: -4px; color: var(--texto-azul-pleno);">
65+
<div class="text-uppercase font-extrabold"
66+
style="font-size: 28px; margin-top: -4px;">
6767
TOXICIDAD <div class="inline">EN</div>
6868
</div>
6969
<p class="text-uppercase text-44 font-extrabold relative right-1"

0 commit comments

Comments
 (0)