diff --git a/UyTube_web/web/css/contenido-index.css b/UyTube_web/web/css/contenido-index.css
index 0e33721d54a9bb7dc68e83cd06429fa54abc1e4a..aaad485afb7cbad68924834c6c93e1f1cbc66136 100644
--- a/UyTube_web/web/css/contenido-index.css
+++ b/UyTube_web/web/css/contenido-index.css
@@ -33,367 +33,65 @@
padding-left: 0px;
padding-right: 0px; }
- .header {
- width: 100%;
- left: 0px;
- height: 175.112px; }
- .header nav {
- height: 100%; }
- .header .item-header2 {
- order: 3;
- width: 100%; }
-
- .relleno-header {
- height: 175.112px; }
-
- #navLogo {
- justify-content: flex-start; }
- #navLogo .icon-menu1 {
- margin-left: 0px;
- margin-right: 10px; }
-
- #navbarSupportedContent {
- width: 100%; }
-
- #formBuscar {
- display: flex;
- justify-content: space-between;
- width: 100%; }
- #formBuscar input {
- width: 100%; }
- #formBuscar #btnBuscar {
- display: none; }
-
- .menu {
- top: -171.112px; }
-
.contenido {
width: 100%; }
.contenido .contenido-flexible {
width: 100%;
- justify-content: center; }
-
- .widgets {
- height: 170px;
- padding-top: 5px;
- padding-bottom: 5px;
- flex-direction: column;
- justify-content: space-around;
- align-content: center; }
- .widgets .widget-1 {
- width: 100%;
- flex-direction: row;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-2 {
- width: 100%;
- justify-content: space-around; } }
+ justify-content: center; } }
@media (min-width: 341px) and (max-width: 387px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
- .header {
- width: 100%;
- height: 175.112px;
- left: 0px; }
- .header nav {
- height: 100%; }
- .header .item-header2 {
- order: 3;
- width: 100%; }
-
- .relleno-header {
- height: 175.112px; }
-
- #navLogo {
- justify-content: flex-start; }
- #navLogo .icon-menu1 {
- margin-left: 0px;
- margin-right: 10px; }
-
- #navbarSupportedContent {
- width: 100%; }
-
- #formBuscar {
- display: flex;
- justify-content: space-between;
- width: 100%; }
- #formBuscar input {
- width: 100%; }
- #formBuscar #btnBuscar {
- display: none; }
-
.contenido {
width: 100%; }
.contenido .contenido-flexible {
width: 100%;
- justify-content: center; }
-
- .widgets {
- height: 170px;
- padding-top: 5px;
- padding-bottom: 5px;
- flex-direction: column;
- justify-content: space-around;
- align-content: center; }
- .widgets .widget-1 {
- width: 100%;
- flex-direction: row;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-2 {
- width: 100%;
- justify-content: space-around; } }
+ justify-content: center; } }
@media (min-width: 388px) and (max-width: 500px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
- .header {
- width: 100%;
- left: 0px;
- height: 127.176px; }
- .header nav {
- height: 100%; }
- .header .item-header2 {
- order: 3;
- width: 100%; }
-
- .relleno-header {
- height: 127.176px; }
-
- #navLogo {
- justify-content: flex-start; }
- #navLogo .icon-menu1 {
- margin-left: 0px;
- margin-right: 10px; }
-
- #navbarSupportedContent {
- width: 100%; }
-
- #formBuscar {
- display: flex;
- justify-content: space-between;
- width: 100%; }
- #formBuscar input {
- width: 100%; }
- #formBuscar #btnBuscar {
- display: none; }
-
.contenido {
width: 100%; }
.contenido .contenido-flexible {
width: 100%;
justify-content: center; }
.contenido .h3 {
- width: 90%; }
-
- .widgets {
- height: 180px;
- padding-top: 10px;
- padding-bottom: 10px;
- flex-direction: column;
- justify-content: space-around;
- align-content: center; }
- .widgets .widget-1 {
- width: 100%;
- flex-direction: row;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-2 {
- width: 100%;
- justify-content: space-around; } }
+ width: 90%; } }
@media (min-width: 501px) and (max-width: 575.98px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
- .header {
- width: 100%;
- left: 0px;
- height: 129.176px; }
- .header nav {
- height: 100%; }
- .header .item-header2 {
- order: 3;
- width: 100%; }
-
- .relleno-header {
- height: 129.176px; }
-
- #navLogo {
- justify-content: flex-start; }
- #navLogo .icon-menu1 {
- margin-left: 0px;
- margin-right: 10px; }
-
- #navbarSupportedContent {
- width: 100%; }
-
- #formBuscar {
- display: flex;
- justify-content: space-between;
- width: 100%; }
- #formBuscar input {
- width: 100%; }
- #formBuscar #btnBuscar {
- display: none; }
-
.contenido {
width: 100%; }
.contenido .contenido-flexible {
width: 100%;
- justify-content: center; }
-
- .widgets {
- height: 180px;
- flex-direction: column;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-1 {
- width: 80%;
- flex-direction: row;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-2 {
- width: 70%;
- display: flex;
- justify-content: space-around; }
-
- .footer {
- padding: 1rem 0.625rem; } }
+ justify-content: center; } }
@media (min-width: 576px) and (max-width: 767.98px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
- .header {
- width: 100%;
- left: 0rem;
- height: 124.117px; }
- .header nav {
- height: 100%; }
- .header .item-header2 {
- order: 3;
- width: 100%; }
-
- .relleno-header {
- height: 124.117px; }
-
- #navLogo {
- justify-content: flex-start; }
-
- #navbarSupportedContent {
- width: 100%; }
- #navbarSupportedContent #formBuscar {
- display: flex;
- justify-content: space-between;
- width: 100%; }
- #navbarSupportedContent #formBuscar input {
- width: 87%; }
-
.contenido {
width: 100%; }
.contenido .contenido-flexible {
width: 100%;
- justify-content: center; }
-
- .widgets {
- height: 160px;
- flex-direction: column;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-1 {
- width: 60%;
- flex-direction: row;
- justify-content: space-between;
- align-items: center; }
- .widgets .widget-2 {
- width: 60%;
- display: flex;
- justify-content: space-between; }
-
- .footer {
- padding: 1rem 0.625rem; } }
+ justify-content: center; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
- .header {
- width: 100%;
- left: 0rem;
- height: 77.2px; }
- .header nav {
- height: 77.2px;
- justify-content: space-between; }
- .header nav #navLogo {
- justify-content: space-between; }
- .header nav #navbarSupportedContent {
- width: 100%; }
- .header nav #navbarSupportedContent #formBuscar {
- display: flex;
- justify-content: space-between;
- width: 100%; }
- .header nav #navbarSupportedContent #formBuscar input {
- width: 87%; }
-
- .relleno-header {
- height: 77.2px; }
-
.contenido {
width: 100%; }
.contenido .contenido-flexible {
width: 100%;
- justify-content: center; }
-
- .widgets {
- height: 100px;
- width: 100%;
- flex-direction: row;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-1 {
- width: 50%;
- flex-direction: row;
- justify-content: space-around;
- align-items: center; }
- .widgets .widget-2 {
- width: 30%;
- display: flex;
- flex-direction: row;
- justify-content: center; }
-
- .footer {
- padding: 1rem 0.625rem; } }
+ justify-content: center; } }
@media (min-width: 992px) {
- .header {
- width: 98%;
- height: 56px; }
- .header nav {
- height: 100%; }
-
- .relleno-header {
- height: 56px; }
-
.contenido {
- width: 1070px; }
-
- .widgets {
- height: 123px;
- padding-left: 30px;
- padding-right: 30px;
- justify-content: space-around;
- flex-wrap: wrap;
- align-content: center; }
- .widgets .img-widget {
- height: 83px; }
- .widgets .widget-1 {
- width: 460px;
- display: flex;
- justify-content: space-around; }
- .widgets .widget-2 {
- width: 350px; } }
+ width: 1070px; } }
/*# sourceMappingURL=contenido-index.css.map */
diff --git a/UyTube_web/web/css/contenido-index.css.map b/UyTube_web/web/css/contenido-index.css.map
index 5dcbbbecc23756f79eabfa61cdcaf178f253cd14..61279918d735dbaf49eaa7794669adab49393c53 100644
--- a/UyTube_web/web/css/contenido-index.css.map
+++ b/UyTube_web/web/css/contenido-index.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
-"mappings": "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",
+"mappings": "AAEA,UAAU;EACN,gBAAgB,ECUH,OAAO;EDTpB,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,iBAA4B;EAC3C,UAAU,EAAE,iBAA4B;EACxC,KAAK,EAAE,IAAI;;AAEf,UAAU;EACN,gBAAgB,ECGH,OAAO;EDFpB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,IAAI;EACZ,8BAAmB;IACf,gBAAgB,ECLP,OAAO;IDMhB,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,iCAAE;MACE,KAAK,EAAE,IAAI;IACf,oCAAK;MACD,KAAK,EAAE,KAAK;MACZ,MAAM,EAAE,GAAG;;AAIvB,yBAAyB;EACrB,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAEtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,MAAM;AAInC,gDAAgD;EAC5C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,MAAM;AAGnC,gDAAgD;EAC5C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,MAAM;IAC3B,cAAG;MACC,KAAK,EAAE,GAAG;AAItB,mDAAmD;EAC/C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,MAAM;AAInC,mDAAmD;EAC/C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,MAAM;AAInC,mDAAmD;EAC/C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,MAAM;AAOnC,yBAAyB;EAErB,UAAU;IACN,KAAK,EAAE,MAAM",
"sources": ["../sass/contenido-index.sass","../sass/_colores.sass"],
"names": [],
"file": "contenido-index.css"
diff --git a/UyTube_web/web/css/footer.css b/UyTube_web/web/css/footer.css
index f9a0014c0dedd698feaa4318074e68a6d1632d4e..761cd4ad8e6d5295798475856a0d6cbd6703800f 100644
--- a/UyTube_web/web/css/footer.css
+++ b/UyTube_web/web/css/footer.css
@@ -1,6 +1,4 @@
.footer {
- grid-column: 1/1;
- grid-row: 4/5;
background-color: #00001a;
border-bottom: 2px solid #5aa1e3;
padding: 1rem;
@@ -11,4 +9,14 @@
justify-content: space-around;
align-items: flex-start; }
+@media (min-width: 388px) and (max-width: 500px) {
+ .footer {
+ padding: 1rem 0.625rem; } }
+@media (min-width: 501px) and (max-width: 575.98px) {
+ .footer {
+ padding: 1rem 0.625rem; } }
+@media (min-width: 576px) and (max-width: 767.98px) {
+ .footer {
+ padding: 1rem 0.625rem; } }
+
/*# sourceMappingURL=footer.css.map */
diff --git a/UyTube_web/web/css/footer.css.map b/UyTube_web/web/css/footer.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..d34b9d99ee3acda0e930c039cbc3ce189cf38c14
--- /dev/null
+++ b/UyTube_web/web/css/footer.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEA,OAAO;EAGH,gBAAgB,ECII,OAAO;EDH3B,aAAa,EAAE,iBAA4B;EAC3C,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG;EAClB,KAAK,ECEK,IAAI;EDDd,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,UAAU;;AAW3B,gDAAgD;EAC5C,OAAO;IACH,OAAO,EAAE,aAAa;AAE9B,mDAAmD;EAC/C,OAAO;IACH,OAAO,EAAE,aAAa;AAG9B,mDAAmD;EAC/C,OAAO;IACH,OAAO,EAAE,aAAa",
+"sources": ["../sass/footer.sass","../sass/_colores.sass"],
+"names": [],
+"file": "footer.css"
+}
\ No newline at end of file
diff --git a/UyTube_web/web/css/header.css b/UyTube_web/web/css/header.css
index 123b02a652565ff7c4fd3ed13654ca9cf0ac8344..7e8b038d93e1abb3045111698d8fb2812fccc3f1 100644
--- a/UyTube_web/web/css/header.css
+++ b/UyTube_web/web/css/header.css
@@ -53,4 +53,184 @@
height: 32px;
padding: 0px 10px; }
+@media (max-width: 340px) {
+ .header {
+ width: 100%;
+ left: 0px;
+ height: 175.112px; }
+ .header nav {
+ height: 100%; }
+ .header .item-header2 {
+ order: 3;
+ width: 100%; }
+
+ .relleno-header {
+ height: 175.112px; }
+
+ #navLogo {
+ justify-content: flex-start; }
+ #navLogo .icon-menu1 {
+ margin-left: 0px;
+ margin-right: 10px; }
+
+ #navbarSupportedContent {
+ width: 100%; }
+
+ #formBuscar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ #formBuscar input {
+ width: 100%; }
+ #formBuscar #btnBuscar {
+ display: none; } }
+@media (min-width: 341px) and (max-width: 387px) {
+ .header {
+ width: 100%;
+ height: 175.112px;
+ left: 0px; }
+ .header nav {
+ height: 100%; }
+ .header .item-header2 {
+ order: 3;
+ width: 100%; }
+
+ .relleno-header {
+ height: 175.112px; }
+
+ #navLogo {
+ justify-content: flex-start; }
+ #navLogo .icon-menu1 {
+ margin-left: 0px;
+ margin-right: 10px; }
+
+ #navbarSupportedContent {
+ width: 100%; }
+
+ #formBuscar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ #formBuscar input {
+ width: 100%; }
+ #formBuscar #btnBuscar {
+ display: none; } }
+@media (min-width: 388px) and (max-width: 500px) {
+ .header {
+ width: 100%;
+ left: 0px;
+ height: 127.176px; }
+ .header nav {
+ height: 100%; }
+ .header .item-header2 {
+ order: 3;
+ width: 100%; }
+
+ .relleno-header {
+ height: 127.176px; }
+
+ #navLogo {
+ justify-content: flex-start; }
+ #navLogo .icon-menu1 {
+ margin-left: 0px;
+ margin-right: 10px; }
+
+ #navbarSupportedContent {
+ width: 100%; }
+
+ #formBuscar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ #formBuscar input {
+ width: 100%; }
+ #formBuscar #btnBuscar {
+ display: none; } }
+@media (min-width: 501px) and (max-width: 575.98px) {
+ .header {
+ width: 100%;
+ left: 0px;
+ height: 129.176px; }
+ .header nav {
+ height: 100%; }
+ .header .item-header2 {
+ order: 3;
+ width: 100%; }
+
+ .relleno-header {
+ height: 129.176px; }
+
+ #navLogo {
+ justify-content: flex-start; }
+ #navLogo .icon-menu1 {
+ margin-left: 0px;
+ margin-right: 10px; }
+
+ #navbarSupportedContent {
+ width: 100%; }
+
+ #formBuscar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ #formBuscar input {
+ width: 100%; }
+ #formBuscar #btnBuscar {
+ display: none; } }
+@media (min-width: 576px) and (max-width: 767.98px) {
+ .header {
+ width: 100%;
+ left: 0rem;
+ height: 124.117px; }
+ .header nav {
+ height: 100%; }
+ .header .item-header2 {
+ order: 3;
+ width: 100%; }
+
+ .relleno-header {
+ height: 124.117px; }
+
+ #navLogo {
+ justify-content: flex-start; }
+
+ #navbarSupportedContent {
+ width: 100%; }
+ #navbarSupportedContent #formBuscar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ #navbarSupportedContent #formBuscar input {
+ width: 87%; } }
+@media (min-width: 768px) and (max-width: 991.98px) {
+ .header {
+ width: 100%;
+ left: 0rem;
+ height: 77.2px; }
+ .header nav {
+ height: 100%;
+ justify-content: space-between; }
+ .header nav #navLogo {
+ justify-content: space-between; }
+ .header nav #navbarSupportedContent {
+ width: 100%; }
+ .header nav #navbarSupportedContent #formBuscar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ .header nav #navbarSupportedContent #formBuscar input {
+ width: 87%; }
+
+ .relleno-header {
+ height: 77.2px; } }
+@media (min-width: 992px) {
+ .header {
+ width: 98%;
+ height: 56px; }
+ .header nav {
+ height: 100%; }
+
+ .relleno-header {
+ height: 56px; } }
+
/*# sourceMappingURL=header.css.map */
diff --git a/UyTube_web/web/css/header.css.map b/UyTube_web/web/css/header.css.map
index 29352aba34b672c2604701b9a912ea0ddaa9c5ed..15cbcc9ad7403a7644a116ecdd90c7a663a362e4 100644
--- a/UyTube_web/web/css/header.css.map
+++ b/UyTube_web/web/css/header.css.map
@@ -1,7 +1,7 @@
{
"version": 3,
-"mappings": "AAEA,OAAO;EACH,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,GAAG;EAClB,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAElB,WAAG;IACC,gBAAgB,ECJA,OAAO;IDKvB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,aAAa;IAC9B,OAAO,EAAE,WAAW;IACpB,wBAAY;MACR,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,WAAW,EAAE,MAAM;MACnB,eAAe,EAAE,aAAa;MAC9B,OAAO,EAAE,SAAS;MAIlB,sCAAa;QACT,KAAK,EClBP,IAAI;MDmBN,kCAAS;QACL,MAAM,EAAE,IAAI;QACZ,aAAa,EAAE,GAAG;MACtB,oCAAW;QACP,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,iBAAuB;QAC/B,aAAa,EAAE,GAAG;MACtB,oCAAW;QACP,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,KAAK;QACZ,eAAe,EAAE,MAAM;QACvB,SAAS,EAAE,MAAM;QACjB,0CAAK;UACD,MAAM,EAAE,IAAI;UACZ,KAAK,EAAE,KAAK;UACZ,MAAM,EAAE,iBAAiB;UACzB,aAAa,EAAE,OAAO;UACtB,SAAS,EAAE,IAAI;UACf,OAAO,EAAE,gBAAgB;MAOjC,oCAAW;QACP,KAAK,EC/CP,IAAI;QDgDF,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,OAAO;QAClB,MAAM,EAAE,OAAO;IAEvB,gBAAI;MACA,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,QAAQ",
-"sources": ["../sass/header.sass","../sass/_colores.sass"],
+"mappings": "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",
+"sources": ["../sass/header.sass","../sass/_colores.sass","../sass/_alturas.sass"],
"names": [],
"file": "header.css"
}
\ No newline at end of file
diff --git a/UyTube_web/web/css/menu.css b/UyTube_web/web/css/menu.css
index aa1fa636abf47878fe35e7ef0317b544a5cd9d5c..213365f63fc0bd38abb8fe4b05536ca5633a6e89 100644
--- a/UyTube_web/web/css/menu.css
+++ b/UyTube_web/web/css/menu.css
@@ -3,7 +3,6 @@
max-height: 450px;
z-index: 10;
width: 0px;
- top: 56px;
left: 0px;
padding-top: 20px;
background-color: #00001a;
@@ -55,4 +54,33 @@
.abrir {
width: 17.625rem; }
+@media (max-width: 340px) {
+ .menu {
+ top: 175.112px;
+ left: 0px; } }
+@media (min-width: 341px) and (max-width: 387px) {
+ .menu {
+ top: 175.112px;
+ left: 0px; } }
+@media (min-width: 388px) and (max-width: 500px) {
+ .menu {
+ top: 127.176px;
+ left: 0px; } }
+@media (min-width: 501px) and (max-width: 575.98px) {
+ .menu {
+ top: 129.176px;
+ left: 0px; } }
+@media (min-width: 576px) and (max-width: 767.98px) {
+ .menu {
+ top: 124.117px;
+ left: 0px; } }
+@media (min-width: 768px) and (max-width: 991.98px) {
+ .menu {
+ top: 77.2px;
+ left: 0px; } }
+@media (min-width: 992px) {
+ .menu {
+ top: 56px;
+ left: 0px; } }
+
/*# sourceMappingURL=menu.css.map */
diff --git a/UyTube_web/web/css/menu.css.map b/UyTube_web/web/css/menu.css.map
index 015a9e42c74ef9f8229faf494eb4767426ba96fb..e0719a1978030c7f5418566e66e7e8328e55e587 100644
--- a/UyTube_web/web/css/menu.css.map
+++ b/UyTube_web/web/css/menu.css.map
@@ -1,7 +1,7 @@
{
"version": 3,
-"mappings": "AAEA,KAAK;EACD,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,GAAG;EACV,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,GAAG;EACT,WAAW,EAAE,IAAI;EACjB,gBAAgB,ECDI,OAAO;EDE3B,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,SAAS;EACrB,QAAE;IACE,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;IACX,iCAAe;MACX,UAAU,EAAE,mBAAqB;IAErC,gBAAO;MACH,UAAU,EAAE,MAAM;MAClB,OAAO,EAAE,MAAM;MACf,MAAM,EAAE,IAAI;MACZ,KAAK,ECpBV,OAAO;IDqBN,WAAE;MACE,UAAU,EAAE,WAAW;MACvB,gBAAgB,EAAE,OAAO;MACzB,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI;MACX,iBAAK;QACD,MAAM,EAAE,IAAI;MAChB,uBAAW;QACP,KAAK,ECvBP,IAAI;QDwBF,MAAM,EAAE,qBAAqB;QAC7B,SAAS,EAAE,OAAO;QAClB,MAAM,EAAE,OAAO;MACnB,gBAAI;QACA,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,IAAI;QACX,KAAK,EC9BP,IAAI;QD+BF,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;QAElB,0BAAS;UACL,MAAM,EAAE,IAAI;UACZ,aAAa,EAAE,IAAI;MAE3B,aAAC;QACG,KAAK,ECvCP,IAAI;QDwCF,OAAO,EAAE,+BAA+B;QACxC,OAAO,EAAE,KAAK;QACd,eAAe,EAAE,IAAI;;AAIrC,gBAAgB;EACZ,eAAe,EAAE,IAAI;EACrB,gBAAgB,EC7CP,SAAS;;AD+CtB,MAAM;EACF,KAAK,EAAE,SAAS",
-"sources": ["../sass/menu.sass","../sass/_colores.sass"],
+"mappings": "AAGA,KAAK;EACD,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,GAAG;EACV,IAAI,EAAE,GAAG;EACT,WAAW,EAAE,IAAI;EACjB,gBAAgB,ECDI,OAAO;EDE3B,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,SAAS;EACrB,QAAE;IACE,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;IACX,iCAAe;MACX,UAAU,EAAE,mBAAqB;IAErC,gBAAO;MACH,UAAU,EAAE,MAAM;MAClB,OAAO,EAAE,MAAM;MACf,MAAM,EAAE,IAAI;MACZ,KAAK,ECpBV,OAAO;IDqBN,WAAE;MACE,UAAU,EAAE,WAAW;MACvB,gBAAgB,EAAE,OAAO;MACzB,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI;MACX,iBAAK;QACD,MAAM,EAAE,IAAI;MAChB,uBAAW;QACP,KAAK,ECvBP,IAAI;QDwBF,MAAM,EAAE,qBAAqB;QAC7B,SAAS,EAAE,OAAO;QAClB,MAAM,EAAE,OAAO;MACnB,gBAAI;QACA,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,IAAI;QACX,KAAK,EC9BP,IAAI;QD+BF,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;QAElB,0BAAS;UACL,MAAM,EAAE,IAAI;UACZ,aAAa,EAAE,IAAI;MAE3B,aAAC;QACG,KAAK,ECvCP,IAAI;QDwCF,OAAO,EAAE,+BAA+B;QACxC,OAAO,EAAE,KAAK;QACd,eAAe,EAAE,IAAI;;AAIrC,gBAAgB;EACZ,eAAe,EAAE,IAAI;EACrB,gBAAgB,EC7CP,SAAS;;AD+CtB,MAAM;EACF,KAAK,EAAE,SAAS;;AAGpB,yBAAyB;EACrB,KAAK;IACD,GAAG,EElEO,SAAS;IFmEnB,IAAI,EAAE,GAAG;AAEjB,gDAAgD;EAC5C,KAAK;IACD,GAAG,EErEO,SAAS;IFsEnB,IAAI,EAAE,GAAG;AAGjB,gDAAgD;EAC5C,KAAK;IACD,GAAG,EEzEO,SAAS;IF0EnB,IAAI,EAAE,GAAG;AAGjB,mDAAmD;EAC/C,KAAK;IACD,GAAG,EE7EO,SAAS;IF8EnB,IAAI,EAAE,GAAG;AAGjB,mDAAmD;EAC/C,KAAK;IACD,GAAG,EEjFO,SAAS;IFkFnB,IAAI,EAAE,GAAG;AAIjB,mDAAmD;EAC/C,KAAK;IACD,GAAG,EEtFO,MAAM;IFuFhB,IAAI,EAAE,GAAG;AAKjB,yBAAyB;EACrB,KAAK;IACD,GAAG,EE5FO,IAAI;IF6Fd,IAAI,EAAE,GAAG",
+"sources": ["../sass/menu.sass","../sass/_colores.sass","../sass/_alturas.sass"],
"names": [],
"file": "menu.css"
}
\ No newline at end of file
diff --git a/UyTube_web/web/css/widget.css b/UyTube_web/web/css/widget.css
index a7b84fc79319f9e46fcdaeea183e37869372080b..219e96acbe7505d8aabf30374c5d4ec78a8b8c18 100644
--- a/UyTube_web/web/css/widget.css
+++ b/UyTube_web/web/css/widget.css
@@ -9,4 +9,116 @@
.widget-1, .widget-2 {
display: flex; }
+@media (max-width: 340px) {
+ .widgets {
+ height: 170px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ flex-direction: column;
+ justify-content: space-around;
+ align-content: center; }
+ .widgets .widget-1 {
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-2 {
+ width: 100%;
+ justify-content: space-around; } }
+@media (min-width: 341px) and (max-width: 387px) {
+ .widgets {
+ height: 170px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ flex-direction: column;
+ justify-content: space-around;
+ align-content: center; }
+ .widgets .widget-1 {
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-2 {
+ width: 100%;
+ justify-content: space-around; } }
+@media (min-width: 388px) and (max-width: 500px) {
+ .widgets {
+ height: 180px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ flex-direction: column;
+ justify-content: space-around;
+ align-content: center; }
+ .widgets .widget-1 {
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-2 {
+ width: 100%;
+ justify-content: space-around; } }
+@media (min-width: 501px) and (max-width: 575.98px) {
+ .widgets {
+ height: 180px;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-1 {
+ width: 80%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-2 {
+ width: 70%;
+ display: flex;
+ justify-content: space-around; } }
+@media (min-width: 576px) and (max-width: 767.98px) {
+ .widgets {
+ height: 160px;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-1 {
+ width: 60%;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center; }
+ .widgets .widget-2 {
+ width: 60%;
+ display: flex;
+ justify-content: space-between; } }
+@media (min-width: 768px) and (max-width: 991.98px) {
+ .widgets {
+ height: 100px;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-1 {
+ width: 50%;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center; }
+ .widgets .widget-2 {
+ width: 30%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center; } }
+@media (min-width: 992px) {
+ .widgets {
+ height: 123px;
+ padding-left: 30px;
+ padding-right: 30px;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ align-content: center; }
+ .widgets .img-widget {
+ height: 83px; }
+ .widgets .widget-1 {
+ width: 460px;
+ display: flex;
+ justify-content: space-around; }
+ .widgets .widget-2 {
+ width: 350px; } }
+
/*# sourceMappingURL=widget.css.map */
diff --git a/UyTube_web/web/css/widget.css.map b/UyTube_web/web/css/widget.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..6809672a81befd54c85aac22dc595b036e59ffc4
--- /dev/null
+++ b/UyTube_web/web/css/widget.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["../sass/widget.sass","../sass/_colores.sass","../sass/_alturas.sass"],
+"names": [],
+"file": "widget.css"
+}
\ No newline at end of file
diff --git a/UyTube_web/web/js/funciones.js b/UyTube_web/web/js/funciones.js
index 5eb6afcd583dfb3a5b5eeb65a2840dc24c4962d3..bb1d540340fc9b457c1f35732344cd62a08a5ebf 100644
--- a/UyTube_web/web/js/funciones.js
+++ b/UyTube_web/web/js/funciones.js
@@ -1,8 +1,18 @@
+
// Muestra u oculta el menu y ajusta su posicion en altura
$(".icon-menu1").on("click", function () {
- var posicionMenu = parseInt($(".header").css("height"));
- $(".menu").css("top", posicionMenu);
$(".menu").toggleClass('abrir');
+ // screenHeight = $(window).height();
+ // altoHeader = parseFloat($(".header").css('height'));
+ // altoMenu = parseFloat($(".menu").css('height'));
+ // if(screenHeight < (altoHeader+altoMenu) ){
+ // console.log('el alto de menu es superior a la pantalla');
+ // $(".menu").css('height',(screenHeight-altoHeader));
+ // }else{
+ // // $(".menu").css('height:350px');
+ // console.log('el alto de menu es: '+ $(".menu").css('height:350px'));
+ // }
+ // console.log(" alto de pantalla: " + screenHeight+", alto del menu: "+altoMenu);
});
/*
@@ -14,23 +24,21 @@ $(".icon-menu1").on("click", function(){
});
*/
-screenWidth = $(window).width();
-screenHeight = $(window).height();
-setInterval(function () {
- if ($(window).width() !== screenWidth || $(window).height() !== screenHeight) {
- screenHeight = 0;
- altoMenu = 0;
- screenHeight = $(window).height();
- altoHeader = parseFloat($(".header").css('height'));
- altoMenu = parseFloat($(".menu").css('height'));
- if(screenHeight < (altoHeader+altoMenu) ){
- console.log('el alto de menu es superior a la pantalla');
- $(".menu").css('height',(screenHeight-altoHeader));
- }else{
- $(".menu").css('height','350px');
- console.log('el alto de menu es: 350px');
- }
- console.log('ancho: ' + screenWidth + ", alto: " + screenHeight);
- }
-}, 50);
\ No newline at end of file
+// setInterval(function () {
+// if ($(window).width() !== screenWidth || $(window).height() !== screenHeight) {
+// screenHeight = 0;
+// altoMenu = 0;
+// screenHeight = $(window).height();
+// altoHeader = parseFloat($(".header").css('height'));
+// altoMenu = parseFloat($(".menu").css('height'));
+// if(screenHeight < (altoHeader+altoMenu) ){
+// console.log('el alto de menu es superior a la pantalla');
+// $(".menu").css('height',(screenHeight-altoHeader));
+// }else{
+// $(".menu").css('height','350px');
+// console.log('el alto de menu es: 350px');
+// }
+// console.log('ancho: ' + screenWidth + ", alto: " + screenHeight);
+// }
+// }, 50);
\ No newline at end of file
diff --git a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/_alturas.sassc b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/_alturas.sassc
new file mode 100644
index 0000000000000000000000000000000000000000..28432514f4da0682a63682e5a84148ca58fe25fe
Binary files /dev/null and b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/_alturas.sassc differ
diff --git a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/contenido-index.sassc b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/contenido-index.sassc
index 56428e82fb88021bc2738709a801d12b77ee738a..b159b93af7b7e75e3a649da161f4c5429f65704f 100644
Binary files a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/contenido-index.sassc and b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/contenido-index.sassc differ
diff --git a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/footer.sassc b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/footer.sassc
new file mode 100644
index 0000000000000000000000000000000000000000..913b46bcf2f40f3bbe20e31aa978d8d3f0cbe119
Binary files /dev/null and b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/footer.sassc differ
diff --git a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/header.sassc b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/header.sassc
index c022544a3829ed119d75f474be80c2dad234e0b8..5df0b875a8584c05c9133056528cb88b12bbc66c 100644
Binary files a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/header.sassc and b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/header.sassc differ
diff --git a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/menu.sassc b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/menu.sassc
index 007c81084a2aa826fae1707fd02651e39f2ed91e..5416a22ca8bcf95fd2a80411cc1135348a814ab4 100644
Binary files a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/menu.sassc and b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/menu.sassc differ
diff --git a/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/widget.sassc b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/widget.sassc
new file mode 100644
index 0000000000000000000000000000000000000000..88248952659f000048390fc580a3090fc1ff4726
Binary files /dev/null and b/UyTube_web/web/sass/.sass-cache/042c9dafa673dd92eaea364b901f2a9b0e4518b6/widget.sassc differ
diff --git a/UyTube_web/web/sass/_alturas.sass b/UyTube_web/web/sass/_alturas.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1d1f496c1bd8430d54357f019825effab170a9f1
--- /dev/null
+++ b/UyTube_web/web/sass/_alturas.sass
@@ -0,0 +1,30 @@
+//Alto del header tamaño maximo 340
+$alturaHeader340: 175.112px
+//Alto del header tamaño minimo 341
+$alturaHeader341: 175.112px
+//Alto del header tamaño minimo 388
+$alturaHeader388: 127.176px
+//Alto del header tamaño minimo 501
+$alturaHeader501: 129.176px
+//Alto del header tamaño minimo 576
+$alturaHeader576: 124.117px
+//Alto del header tamaño minimo 768
+$alturaHeader768: 77.2px
+//Alto del header tamaño minimo 992
+$alturaHeader992: 56px
+
+//Alto del widget tamaño maximo 340
+$alturaWidget340: 170px
+//Alto del widget tamaño minimo 341
+$alturaWidget341: 170px
+//Alto del widget tamaño minimo 388
+$alturaWidget388: 180px
+//Alto del widget tamaño minimo 501
+$alturaWidget501: 180px
+//Alto del widget tamaño minimo 576
+$alturaWidget576: 160px
+//Alto del widget tamaño minimo 768
+$alturaWidget768: 100px
+//Alto del widget tamaño minimo 992
+$alturaWidget992: 123px
+
\ No newline at end of file
diff --git a/UyTube_web/web/sass/contenido-index.sass b/UyTube_web/web/sass/contenido-index.sass
index 05e93225013446b73e052b6e0255026104d5d714..e0a173102946878a67e0a4ef4a85abc227ef7524 100644
--- a/UyTube_web/web/sass/contenido-index.sass
+++ b/UyTube_web/web/sass/contenido-index.sass
@@ -30,105 +30,25 @@
width: 210px
margin: 0px
-
-
// Para un maximo de 340px ================================================================================
@media (max-width: 340px)
.container-fluid
padding-left: 0px
padding-right: 0px
- .header
- width: 100%
- left: 0px
- height: 175.112px
- nav
- height: 100%
- .item-header2
- order: 3
- width: 100%
- //Espacio de relleno
- .relleno-header
- height: 175.112px
- //Estilos del contenedor del logo
- #navLogo
- justify-content: flex-start
- .icon-menu1
- margin-left: 0px
- margin-right: 10px
- //Genera el espacio para dar lugar a el formulario de buscar
- #navbarSupportedContent
- width: 100%
- //Estilos de formulario buscar
- #formBuscar
- display: flex
- justify-content: space-between
- width: 100%
- input
- width: 100%
- //Oculta el boton buscar
- #btnBuscar
- display: none
- .menu
- top: -171.112px
+
.contenido
width: 100%
.contenido-flexible
width: 100%
justify-content: center
- .widgets
- height: 170px
- padding-top: 5px
- padding-bottom: 5px
- flex-direction: column
- justify-content: space-around
- align-content: center
- .widget-1
- width: 100%
- flex-direction: row
- justify-content: space-around
- align-items: center
- .widget-2
- width: 100%
- justify-content: space-around
+
// Para dispositivos mayores a 340 y menores a 388 ==============================================================
@media (min-width: 341px) and (max-width: 387px)
.container-fluid
padding-left: 0px
- padding-right: 0px
- //Estilos del header
- .header
- width: 100%
- height: 175.112px
- left: 0px
- nav
- height: 100%
- .item-header2
- order: 3
- width: 100%
- //Espacio de relleno
- .relleno-header
- height: 175.112px
- //Estilos del contenedor del logo
- #navLogo
- justify-content: flex-start
- .icon-menu1
- margin-left: 0px
- margin-right: 10px
- //Genera el espacio para dar lugar a el formulario de buscar
- #navbarSupportedContent
- width: 100%
- //Estilos de formulario buscar
- #formBuscar
- display: flex
- justify-content: space-between
- width: 100%
- input
- width: 100%
- //Oculta el boton buscar
- #btnBuscar
- display: none
+ padding-right: 0px
//estilos del contenido principal
.contenido
@@ -136,61 +56,13 @@
.contenido-flexible
width: 100%
justify-content: center
- .widgets
- height: 170px
- padding-top: 5px
- padding-bottom: 5px
- flex-direction: column
- justify-content: space-around
- align-content: center
- .widget-1
- width: 100%
- flex-direction: row
- justify-content: space-around
- align-items: center
- .widget-2
- width: 100%
- justify-content: space-around
+
// Para dispositivos mayores a 387 y menores a 500 ================================================================
@media (min-width: 388px) and (max-width: 500px)
.container-fluid
padding-left: 0px
padding-right: 0px
- //Estilos del header
- .header
- width: 100%
- left: 0px
- height: 127.176px
- nav
- height: 100%
- .item-header2
- order: 3
- width: 100%
- //Espacio de relleno
- .relleno-header
- height: 127.176px
- //Espacio de relleno
- .relleno-header
- //Estilos del contenedor del logo
- #navLogo
- justify-content: flex-start
- .icon-menu1
- margin-left: 0px
- margin-right: 10px
- //Genera el espacio para dar lugar a el formulario de buscar
- #navbarSupportedContent
- width: 100%
- //Estilos de formulario buscar
- #formBuscar
- display: flex
- justify-content: space-between
- width: 100%
- input
- width: 100%
- //Oculta el boton buscar
- #btnBuscar
- display: none
-
+
//estilos del contenido principal
.contenido
width: 100%
@@ -199,61 +71,14 @@
justify-content: center
.h3
width: 90%
- .widgets
- height: 180px
- padding-top: 10px
- padding-bottom: 10px
- flex-direction: column
- justify-content: space-around
- align-content: center
- .widget-1
- width: 100%
- flex-direction: row
- justify-content: space-around
- align-items: center
- .widget-2
- width: 100%
- justify-content: space-around
-
+
// Extra small devices (portrait phones, less than 576px) =======================================================
@media (min-width: 501px) and (max-width: 575.98px)
.container-fluid
padding-left: 0px
padding-right: 0px
- //Estilos del header
- .header
- width: 100%
- left: 0px
- height: 129.176px
- nav
- height: 100%
- .item-header2
- order: 3
- width: 100%
- //Espacio de relleno
- .relleno-header
- height: 129.176px
- //Estilos del contenedor del logo
- #navLogo
- justify-content: flex-start
- .icon-menu1
- margin-left: 0px
- margin-right: 10px
- //Genera el espacio para dar lugar a el formulario de buscar
- #navbarSupportedContent
- width: 100%
- //Estilos de formulario buscar
- #formBuscar
- display: flex
- justify-content: space-between
- width: 100%
- input
- width: 100%
- //Oculta el boton buscar
- #btnBuscar
- display: none
-
+
//Estilos del contenido principal
.contenido
width: 100%
@@ -261,167 +86,45 @@
width: 100%
justify-content: center
- .widgets
- height: 180px
- flex-direction: column
- justify-content: space-around
- align-items: center
- .widget-1
- width: 80%
- flex-direction: row
- justify-content: space-around
- align-items: center
- .widget-2
- width: 70%
- display: flex
- justify-content: space-around
- .footer
- padding: 1rem 0.625rem
-
// Small devices (landscape phones, 576px and up) ================================================================
@media (min-width: 576px) and (max-width: 767.98px)
.container-fluid
padding-left: 0px
padding-right: 0px
- //Estilos del header
- .header
- width: 100%
- left: 0rem
- height: 124.117px
- nav
- height: 100%
- .item-header2
- order: 3
- width: 100%
-
- //Espacio de relleno
- .relleno-header
- height: 124.117px
- //Estilos del contenedor del logo
- #navLogo
- justify-content: flex-start
- //Genera el espacio para el formulario de buscar
- #navbarSupportedContent
- width: 100%
- #formBuscar
- display: flex
- justify-content: space-between
- width: 100%
- input
- width: 87%
+
//Estilos del contenido principal
.contenido
width: 100%
.contenido-flexible
width: 100%
justify-content: center
- .widgets
- height: 160px
- flex-direction: column
- justify-content: space-around
- align-items: center
- .widget-1
- width: 60%
- flex-direction: row
- justify-content: space-between
- align-items: center
- .widget-2
- width: 60%
- display: flex
- justify-content: space-between
- .footer
- padding: 1rem 0.625rem
-
+
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px)
.container-fluid
padding-left: 0px
padding-right: 0px
- //Estilos del header
- .header
- width: 100%
- left: 0rem
- height: 77.2px
- nav
- height: 77.2px
- justify-content: space-between
- //Estilos del contenedor del logo
- #navLogo
- justify-content: space-between
- //Genera el espacio para el formulario de buscar
- #navbarSupportedContent
- width: 100%
- #formBuscar
- display: flex
- justify-content: space-between
- width: 100%
- input
- width: 87%
- //Espacio de relleno
- .relleno-header
- height: 77.2px
-
+
//Estilos del contenido principal
.contenido
width: 100%
.contenido-flexible
width: 100%
justify-content: center
- .widgets
- height: 100px
- width: 100%
- flex-direction: row
- justify-content: space-around
- align-items: center
- .widget-1
- width: 50%
- flex-direction: row
- justify-content: space-around
- align-items: center
- .widget-2
- width: 30%
- display: flex
- flex-direction: row
- justify-content: center
- .footer
- padding: 1rem 0.625rem
+
+
// Large devices (desktops, 992px and up) =======================================================================
@media (min-width: 992px)
- //Estilos del header
- .header
- width: 98%
- height: 56px
- nav
- height: 100%
- //Espacio de relleno
- .relleno-header
- height: 56px
//Estilos del contenido principal
.contenido
width: 1070px
- .widgets
- height: 123px
- //height: 223px
- padding-left: 30px
- padding-right: 30px
- justify-content: space-around
- flex-wrap: wrap
- align-content: center
- .img-widget
- height: 83px
- .widget-1
- width: 460px
- display: flex
- justify-content: space-around
- .widget-2
- width: 350px
- //Estilos del footer
- .footer
+
+
diff --git a/UyTube_web/web/sass/footer.sass b/UyTube_web/web/sass/footer.sass
index cb2a7e289e3d0066ace4d622ebfdd6f0400ccbc8..d24586feef7b5866eacdff047b95757e2b4edb16 100644
--- a/UyTube_web/web/sass/footer.sass
+++ b/UyTube_web/web/sass/footer.sass
@@ -1,8 +1,8 @@
@import _colores
.footer
- grid-column: 1 / 1
- grid-row: 4 / 5
+ //grid-column: 1 / 1
+ //grid-row: 4 / 5
background-color: $colorHeaderMenuFooter
border-bottom: 2px solid $colorCelesteClaro
padding: 1rem
@@ -13,3 +13,32 @@
justify-content: space-around
align-items: flex-start
+// Para un maximo de 340px ================================================================================
+@media (max-width: 340px)
+
+
+// Para dispositivos mayores a 340 y menores a 388 ==============================================================
+@media (min-width: 341px) and (max-width: 387px)
+
+
+// Para dispositivos mayores a 387 y menores a 500 ================================================================
+@media (min-width: 388px) and (max-width: 500px)
+ .footer
+ padding: 1rem 0.625rem
+// Extra small devices (portrait phones, less than 576px) =======================================================
+@media (min-width: 501px) and (max-width: 575.98px)
+ .footer
+ padding: 1rem 0.625rem
+
+// Small devices (landscape phones, 576px and up) ================================================================
+@media (min-width: 576px) and (max-width: 767.98px)
+ .footer
+ padding: 1rem 0.625rem
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px)
+
+
+// Large devices (desktops, 992px and up) =======================================================================
+@media (min-width: 992px)
+
\ No newline at end of file
diff --git a/UyTube_web/web/sass/header.sass b/UyTube_web/web/sass/header.sass
index 8b21435d902cb6e903b80d5131dedb130c215ecc..880a74e164b8395164fc2291f8e3a51e6f677201 100644
--- a/UyTube_web/web/sass/header.sass
+++ b/UyTube_web/web/sass/header.sass
@@ -1,4 +1,5 @@
@import _colores
+@import _alturas
.header
z-index: 9
@@ -65,3 +66,214 @@
.btn
height: 32px
padding: 0px 10px
+
+// Para un maximo de 340px ================================================================================
+@media (max-width: 340px)
+ .header
+ width: 100%
+ left: 0px
+ height: $alturaHeader340
+ nav
+ height: 100%
+ .item-header2
+ order: 3
+ width: 100%
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader340
+ //Estilos del contenedor del logo
+ #navLogo
+ justify-content: flex-start
+ .icon-menu1
+ margin-left: 0px
+ margin-right: 10px
+ //Genera el espacio para dar lugar a el formulario de buscar
+ #navbarSupportedContent
+ width: 100%
+ //Estilos de formulario buscar
+ #formBuscar
+ display: flex
+ justify-content: space-between
+ width: 100%
+ input
+ width: 100%
+ //Oculta el boton buscar
+ #btnBuscar
+ display: none
+
+// Para dispositivos mayores a 340 y menores a 388 ==============================================================
+@media (min-width: 341px) and (max-width: 387px)
+ //Estilos del header
+ .header
+ width: 100%
+ height: $alturaHeader341
+ left: 0px
+ nav
+ height: 100%
+ .item-header2
+ order: 3
+ width: 100%
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader341
+ //Estilos del contenedor del logo
+ #navLogo
+ justify-content: flex-start
+ .icon-menu1
+ margin-left: 0px
+ margin-right: 10px
+ //Genera el espacio para dar lugar a el formulario de buscar
+ #navbarSupportedContent
+ width: 100%
+ //Estilos de formulario buscar
+ #formBuscar
+ display: flex
+ justify-content: space-between
+ width: 100%
+ input
+ width: 100%
+ //Oculta el boton buscar
+ #btnBuscar
+ display: none
+
+// Para dispositivos mayores a 387 y menores a 500 ================================================================
+@media (min-width: 388px) and (max-width: 500px)
+ .header
+ width: 100%
+ left: 0px
+ height: $alturaHeader388
+ nav
+ height: 100%
+ .item-header2
+ order: 3
+ width: 100%
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader388
+ //Espacio de relleno
+ .relleno-header
+ //Estilos del contenedor del logo
+ #navLogo
+ justify-content: flex-start
+ .icon-menu1
+ margin-left: 0px
+ margin-right: 10px
+ //Genera el espacio para dar lugar a el formulario de buscar
+ #navbarSupportedContent
+ width: 100%
+ //Estilos de formulario buscar
+ #formBuscar
+ display: flex
+ justify-content: space-between
+ width: 100%
+ input
+ width: 100%
+ //Oculta el boton buscar
+ #btnBuscar
+ display: none
+
+// Extra small devices (portrait phones, less than 576px) =======================================================
+@media (min-width: 501px) and (max-width: 575.98px)
+ //Estilos del header
+ .header
+ width: 100%
+ left: 0px
+ height: $alturaHeader501
+ nav
+ height: 100%
+ .item-header2
+ order: 3
+ width: 100%
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader501
+ //Estilos del contenedor del logo
+ #navLogo
+ justify-content: flex-start
+ .icon-menu1
+ margin-left: 0px
+ margin-right: 10px
+ //Genera el espacio para dar lugar a el formulario de buscar
+ #navbarSupportedContent
+ width: 100%
+ //Estilos de formulario buscar
+ #formBuscar
+ display: flex
+ justify-content: space-between
+ width: 100%
+ input
+ width: 100%
+ //Oculta el boton buscar
+ #btnBuscar
+ display: none
+
+
+// Small devices (landscape phones, 576px and up) ================================================================
+@media (min-width: 576px) and (max-width: 767.98px)
+ //Estilos del header
+ .header
+ width: 100%
+ left: 0rem
+ height: $alturaHeader576
+ nav
+ height: 100%
+ .item-header2
+ order: 3
+ width: 100%
+
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader576
+ //Estilos del contenedor del logo
+ #navLogo
+ justify-content: flex-start
+ //Genera el espacio para el formulario de buscar
+ #navbarSupportedContent
+ width: 100%
+ #formBuscar
+ display: flex
+ justify-content: space-between
+ width: 100%
+ input
+ width: 87%
+
+
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px)
+ //Estilos del header
+ .header
+ width: 100%
+ left: 0rem
+ height: $alturaHeader768
+ nav
+ height: 100%
+ justify-content: space-between
+ //Estilos del contenedor del logo
+ #navLogo
+ justify-content: space-between
+ //Genera el espacio para el formulario de buscar
+ #navbarSupportedContent
+ width: 100%
+ #formBuscar
+ display: flex
+ justify-content: space-between
+ width: 100%
+ input
+ width: 87%
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader768
+
+
+// Large devices (deskheights, 992px and up) =======================================================================
+@media (min-width: 992px)
+ //Estilos del header
+ .header
+ width: 98%
+ height: $alturaHeader992
+ nav
+ height: 100%
+ //Espacio de relleno
+ .relleno-header
+ height: $alturaHeader992
diff --git a/UyTube_web/web/sass/menu.sass b/UyTube_web/web/sass/menu.sass
index 20a9980d52fc7ae9ca23867b5df95e0fdc63f58b..01263ea6174e5158a2700ecbfb93f88c9aab9050 100644
--- a/UyTube_web/web/sass/menu.sass
+++ b/UyTube_web/web/sass/menu.sass
@@ -1,11 +1,11 @@
@import _colores
+@import _alturas
//Estilos del menu
.menu
position: fixed
max-height: 450px
z-index: 10
width: 0px
- top: 56px
left: 0px
padding-top: 20px
background-color: $colorHeaderMenuFooter
@@ -61,3 +61,49 @@
.abrir
width: 17.625rem
+
+// Para un maximo de 340px ================================================================================
+@media (max-width: 340px)
+ .menu
+ top: $alturaHeader340
+ left: 0px
+// Para dispositivos mayores a 340 y menores a 388 ==============================================================
+@media (min-width: 341px) and (max-width: 387px)
+ .menu
+ top: $alturaHeader341
+ left: 0px
+
+// Para dispositivos mayores a 387 y menores a 500 ================================================================
+@media (min-width: 388px) and (max-width: 500px)
+ .menu
+ top: $alturaHeader388
+ left: 0px
+
+// Extra small devices (portrait phones, less than 576px) =======================================================
+@media (min-width: 501px) and (max-width: 575.98px)
+ .menu
+ top: $alturaHeader501
+ left: 0px
+
+// Small devices (landscape phones, 576px and up) ================================================================
+@media (min-width: 576px) and (max-width: 767.98px)
+ .menu
+ top: $alturaHeader576
+ left: 0px
+
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px)
+ .menu
+ top: $alturaHeader768
+ left: 0px
+
+
+
+// Large devices (desktops, 992px and up) =======================================================================
+@media (min-width: 992px)
+ .menu
+ top: $alturaHeader992
+ left: 0px
+
+
diff --git a/UyTube_web/web/sass/widget.sass b/UyTube_web/web/sass/widget.sass
index 6ff7f681c6f498586f5521c1d97a660df3862800..aadb55c15f4f8d7205e865e621ee569cb0c69a48 100644
--- a/UyTube_web/web/sass/widget.sass
+++ b/UyTube_web/web/sass/widget.sass
@@ -1,4 +1,5 @@
@import _colores
+@import _alturas
.widgets
background-color: $colorGrisClaro
@@ -18,4 +19,131 @@
//width: 83px
//Estilos de los 2 contenedores de widgets
.widget-1, .widget-2
- display: flex
\ No newline at end of file
+ display: flex
+
+// Para un maximo de 340px ================================================================================
+@media (max-width: 340px)
+ .widgets
+ height: $alturaWidget340
+ padding-top: 5px
+ padding-bottom: 5px
+ flex-direction: column
+ justify-content: space-around
+ align-content: center
+ .widget-1
+ width: 100%
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+ .widget-2
+ width: 100%
+ justify-content: space-around
+
+// Para dispositivos mayores a 340 y menores a 388 ==============================================================
+@media (min-width: 341px) and (max-width: 387px)
+ .widgets
+ height: $alturaWidget341
+ padding-top: 5px
+ padding-bottom: 5px
+ flex-direction: column
+ justify-content: space-around
+ align-content: center
+ .widget-1
+ width: 100%
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+ .widget-2
+ width: 100%
+ justify-content: space-around
+
+// Para dispositivos mayores a 387 y menores a 500 ================================================================
+@media (min-width: 388px) and (max-width: 500px)
+ .widgets
+ height: $alturaWidget388
+ padding-top: 10px
+ padding-bottom: 10px
+ flex-direction: column
+ justify-content: space-around
+ align-content: center
+ .widget-1
+ width: 100%
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+ .widget-2
+ width: 100%
+ justify-content: space-around
+
+// Extra small devices (portrait phones, less than 576px) =======================================================
+@media (min-width: 501px) and (max-width: 575.98px)
+ .widgets
+ height: $alturaWidget501
+ flex-direction: column
+ justify-content: space-around
+ align-items: center
+ .widget-1
+ width: 80%
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+ .widget-2
+ width: 70%
+ display: flex
+ justify-content: space-around
+
+// Small devices (landscape phones, 576px and up) ================================================================
+@media (min-width: 576px) and (max-width: 767.98px)
+ .widgets
+ height: $alturaWidget576
+ flex-direction: column
+ justify-content: space-around
+ align-items: center
+ .widget-1
+ width: 60%
+ flex-direction: row
+ justify-content: space-between
+ align-items: center
+ .widget-2
+ width: 60%
+ display: flex
+ justify-content: space-between
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px)
+ .widgets
+ height: $alturaWidget768
+ width: 100%
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+ .widget-1
+ width: 50%
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+ .widget-2
+ width: 30%
+ display: flex
+ flex-direction: row
+ justify-content: center
+
+
+// Large devices (desktops, 992px and up) =======================================================================
+@media (min-width: 992px)
+ .widgets
+ height: $alturaWidget992
+ //height: 223px
+ padding-left: 30px
+ padding-right: 30px
+ justify-content: space-around
+ flex-wrap: wrap
+ align-content: center
+ .img-widget
+ height: 83px
+ .widget-1
+ width: 460px
+ display: flex
+ justify-content: space-around
+ .widget-2
+ width: 350px
\ No newline at end of file